commands

cad cam bam thankyou mam

by electronoob

HTML

<canvas id=c width=400 height=200></canvas>
<br>
<input type="text" id="inp" placeholder="type cad commands into this field"><br>
<input type="text" id="outp" class="outp" disabled>
<div class=cmd id=cmd>
<center>
<u>commands</u><br>
</center>
line: dl x1,y2,x2,y2<br>
srect: dsr x,y,w,h<br>
frect: dfr x,y,w,h<br>
arc: da ...<br>
parse textarea: pta
</div>
<div class=hist id=hist>
</div>
<br>
<br>
<textarea id=pta>
MACRO fingers
  dfr 10,10,1,20
  dfr 11.5,10,1,20
  dfr 13,10,1,20
  dfr 14.5,10,1,20
  dfr 14.5,10,1.5,20
  dfr 9.5,10,1,20
ENDM
dm fingers, 20, 20
</textarea>
<pre>
todo:

draw a line
draw a rect
draw a circle
</pre>

CSS

canvas {
  border: 5px inset white;
  width: 400px;
}
input {
  border: 5px solid grey;
  width: 638px;
  font-size: 24px;
  background-color: grey;
  color: white;
}
input.outp {
  border: 5px solid rgba(200,100,100,0.5);
  margin-top: 40px;
  background-color: rgba(200,100,100,0.5);
  color: white;
}
div.cmd {
position: absolute;
top: 20px;
left: 660px;
width: 200px;
height:200px;
border: 5px inset white;
}
div.hist {
position: absolute;
top: 20px;
left: 440px;
width: 200px;
height:200px;
border: 5px inset white;
overflow:scroll;
}
textarea {
  border: 5px inset white;
  width: 638px;
  height: 200px;
}
body {
  margin:10px;
  padding: 10px;
}
span.error {
  background-color: rgba(255,0,0,0.2);
}
span.ok {
  background-color: rgba(0,255,0,0.1);
}
span.warn {
  background-color: rgba(0,0,255,0.08);
}

JavaScript

var ctx = document.getElementById('c').getContext('2d');
ctx.fillStyle = "#000000";
ctx.fillRect(0,0,400,200);
ctx.fillStyle = "#aa0000";
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 1;
var zoom = 2;
var parseState = [];
parseState['draw_offset_x'] = 0;
parseState['draw_offset_y'] = 0;
var macroStore = [];
var history = [];

document.getElementById('inp').addEventListener("keypress", function(e) {
  switch (e.keyCode) {
    case 13:
      var ci = document.getElementById('inp').value;
      document.getElementById('inp').value = "";
      history.push ({cmd: ci, meta: {css: 'ok'} });
      updateCanvasView();
      updateHistoryView();
      e.preventDefault();
      break;
  };
});

function line(x1,y1,x2,y2) {
    ctx.beginPath();
    ctx.moveTo(x1 * zoom, y1 * zoom);
    ctx.lineTo(x2 * zoom, y2 * zoom);
    ctx.stroke();
}
function sRect(x,y,w,h) {
		ctx.strokeRect(x * zoom,y * zoom,w * zoom,h * zoom);
}
function fRect(x,y,w,h) {
		ctx.fillRect(x * zoom,y * zoom,w * zoom,h * zoom);
}
function updateCanvasView () {
	var data = history[history.length-1]['cmd'];
  preParseLine(data);
}
function redrawCanvasView() {

}
function preParseLine (data) {
	var datat = data.trim();
	var coffset = datat.indexOf(' ');
  if (coffset === -1) coffset=datat.length;
  var cmd = datat.substr(0, coffset);
  if (cmd == "") return -1;
  var argv = datat.substr(coffset, datat.length-coffset);
  argv = argv.replace(" ","");
  argv = argv.split(",");
  var i=0;
  for(;i<argv.length;i++) {
  	argv[i] = argv[i].trim();
  }
  return (parseLine ( cmd, argv ));
}
function parseLine (cmd, argv) {
	errorClear();
  var draw = 1;
  if (parseState['macro_inside'] == 1) { draw = 0 }
	switch (cmd) {
  	case "MACRO":
    	if (parseState['macro_inside'] == 1) {
      	error(cmd, argv, "already inside macro definition '"+parseState['macro_name']+"' unable to process '"+argv[0]+"'");
        return -1;
      }
    	if(argv.length == 1) {
        var index = getMacroIndex(argv[0]);
        if (index...