index.html

<!DOCTYPE HTML>
<html>
<head>
  
<!--   autogenerated css links -->
  <!-- bower:css -->
  <!-- endbower -->

<!-- autogenerated javascript links -->
  <!-- bower:js -->
  <!-- endbower -->

 <script src="all.js"></script>

  <style>
    body {
      margin: 10px;
      padding: 10px;
    }

    canvas {
      border: 1px solid red;
    }

    svg {
      border: 1px solid blue;
      background-color:lightgray;
    }

    pre {
      border: 1px solid green;
    }
    form input[type='number']{
      width:40px;
    }
    form input{
      margin-right: 20px;
    }

  </style>
</head>
<body>
<form class="well span12" onsubmit="">
  <label>Row Frequency:<input id="row-freq" type="number"/></label>
  <label>Column Frequency:<input id="col-freq" type="number"/></label>
  <label>Wiggle:<input id="wiggle" type="text"/></label>
  <label>Image:<input id="image-name" type="text" />
    <button id="process">Load</button>
  </label>
</form>
<canvas id="my-canvas" width="300" height="200"></canvas>

<svg id="my-svg" width="500" height="400" viewBox="0 0 150 275"
     preserveAspectRatio="xMinYMin slice">
  <polyline fill="none" stroke="gray" stroke-width="0.1"
            points="0,0 10,0"></polyline>
</svg>
<pre id="my-gcode">Gcode here</pre>

</body>
</html>  