gcanvas/examples/index.html

A Canvas API implementation that generates Gcode

<style>
body {
  background: #fff;
  font-family: "helvetica neue";
}

h1 {
  margin: 20px;
  font-weight: 300;
}

h2 {
  margin: 20px;
  font-weight: 300;
}
.example {
  /* border-bottom: 1px solid gray; */
  position: relative;
  height: 300px;
}

.real {
  background: white;
  position: absolute;
  left: 20px;
  border: 1px solid #ddd;
}

.sim {
  background: white;
  position: absolute;
  left: 240px;
  border: 1px solid #ddd;
}

.gcode {
  position: absolute;
  left: 460px;
  border: 1px solid #ddd;
  height: 160px;
  width: 200px;
  padding: 20px;
  overflow-y: auto;
  font-size: 90%;
}

.javascript {
  position: absolute;
  left: 720px;
  right: 20px;
  border-left: 1px solid #eee;
  min-height: 180px;
  padding: 0px 20px 20px 0;
  white-space: pre;
}

.rows {
  height: 20px;
}

.th-real {
  position: absolute;
  left: 30px;
  color: #999;
}

.th-sim {
  position: absolute;
  left: 250px;
  color: #999;
}

.th-gcode {
  position: absolute;
  left: 470px;
  color: #999;
}

ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

</style>

<h1>GCanvas Examples</h1>
<div class="rows">
  <div class="th th-real">// Reference Canvas</div>
  <div class="th th-sim">// Toolpath </div>
  <div class="th th-gcode">// Gcode</div>
</div>

<div id="examples"></div>

<link rel="stylesheet" href="support/tomorrow.min.css">
<script src="support/highlight.min.js"></script>

<script>
hljs.initHighlightingOnLoad();

function example(name, fn) {
  var html = '';
  html += '<h2>'+name+'</h2>'
  html += '<canvas class="real" width=200 height=200></canvas>'
  html += '<canvas class="sim" width=200 height=200></canvas>'
  html += '<ul class="gcode"></ul>'
  html += '<pre><code class="javascript"></code></pre>'
  var ex = document.createElement('div');
  ex.className = 'example';
  ex.innerHTML = html;
  ex.id = name;
  document.getElementById('examples').appendChild(ex);

  var jsElem = ex.getElementsByClassName('javascript')[0];
  jsElem.textContent = fn.toString()
    .match(/\{([\s\S]*)\}/)[1]
    .replace(/^\n+/, '');

  var ctx = ex.getElementsByClassName('real')[0].getContext('2d');
  var simtarget = ex.getElementsByClassName('sim')[0].getContext('2d');

  var simdriver = new GCanvas.Simulator(simtarget);
  var simctx = new GCanvas(simdriver, 200, 200);
  var gcodectx = new GCanvas(null, 200, 200);

  gcodectx.toolDiameter = 10;
  simctx.toolDiameter = 10;

  var gcodeElem = ex.getElementsByClassName('gcode')[0];
  gcodectx.driver.stream.write = function(cmd) {
    var line = document.createElement('li');
    line.textContent = cmd;
    gcodeElem.appendChild(line);
  };

  fn(ctx);
  fn(simctx);
  fn(gcodectx);

  simtarget.stroke();
}

</script>

<script src="../build/gcanvas.js"></script>
<script src="arc.js"></script>
<script src="bezier.js"></script>
<script src="quadratic.js"></script>
<script src="filling.js"></script>
<script src="winding.js"></script>
<script src="text.js"></script>
<script src="clipping.js"></script>
<script src="portal2.js"></script>