webif/index.html

   1 <!doctype html>
   2 <head>
   3         <meta charset="utf-8">
   4         <title>Single Command</title>
   5         <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   6         <script type=text/javascript language=JavaScript>
   7   var concentric_circle_radii = [11, 45, 69, 94, 115];
   8   var center = [124, 121];
   9   var spacer = 7;
  10   var zbutton_ydistances = [7, 30, 55, 83];
  11   var zcenter = [30, 118];
  12
  13 function runCommand(cmd) {
  14   // Get some values from elements on the page:
  15   var $form = $( "#commandForm" );
  16   cmd += "\n";
  17   url = $form.attr( "action" );
  18   // Send the data using post
  19   var posting = $.post( url, cmd );
  20   // Put the results in a div
  21   posting.done(function( data ) {
  22     $( "#result" ).empty();
  23     $.each(data.split('\n'), function(index) {
  24       $( "#result" ).append( this + '<br/>' );
  25     });
  26   });
  27 }
  28
  29 function lookupConcentric(radius){
  30   var length = concentric_circle_radii.length;
  31   for (i=0;i<=length;i++) {
  32     if (radius < concentric_circle_radii[i]) return(i);
  33   }
  34   return(length);
  35 }
  36
  37 function getQuadrantConcentricFromPosition(x,y) {
  38   var rel_x = x - center[0]
  39   var rel_y = y - center[1]
  40   var radius = Math.sqrt(Math.pow(Math.abs(rel_x),2) + Math.pow(Math.abs(rel_y),2))
  41   if (rel_x > rel_y && rel_x > -rel_y) {
  42     quadrant = 0; // Right
  43   } else if (rel_x <= rel_y && rel_x > -rel_y) {
  44     quadrant = 3; // Down
  45   } else if (rel_x > rel_y && rel_x < -rel_y) {
  46     quadrant = 1; // Up
  47   } else {
  48     quadrant = 2; // Left
  49   }
  50   var idx = lookupConcentric(radius);
  51   return [quadrant, idx]
  52 }
  53
  54 function clickXY(event){
  55   var pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("control_xy").offsetLeft;
  56   var pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("control_xy").offsetTop;
  57   var codes = getQuadrantConcentricFromPosition(pos_x,pos_y);
  58   var quadrant = codes[0], concentric = codes[1];
  59   if (concentric < 5) { // movement button pressed
  60     var xdir = [1, 0, -1, 0, 0, 0][quadrant];
  61     var ydir = [0, 1, 0, -1, 0, 0][quadrant];
  62     var magnitude = Math.pow(10, concentric - 2);
  63     if (xdir != 0) {
  64       command = "G1 X" + (magnitude * xdir) + " F" + document.getElementById("xy_velocity").value;
  65     } else {
  66       command = "G1 Y" + (magnitude * ydir) + " F" + document.getElementById("xy_velocity").value;
  67     }
  68     runCommand("G91 " + command + " G90");
  69   } else { // home button pressed
  70     if (pos_x < 49 && pos_y < 49) { // home x button
  71       command = "G28 X0";
  72     } else if (pos_x > 200 && pos_y < 49) { //home y button
  73       command = "G28 Y0";
  74     } else if (pos_x < 49 && pos_y > 200) { // home all button
  75       command = "G28";
  76     } else { // home z button
  77       command = "G28 Z0";
  78     }
  79     runCommand(command);
  80   }
  81 }
  82
  83 function lookupRange(ydist) {
  84   var length = zbutton_ydistances.length;
  85   for (i=0;i<length;i++) {
  86     if (ydist < zbutton_ydistances[i]) return i;
  87   }
  88 }
  89
  90 function clickZ(event){
  91   //var pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("control_z").offsetLeft;
  92   var pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("control_z").offsetTop;
  93   var ydelta = zcenter[1] - pos_y;
  94   var range = lookupRange(Math.abs(ydelta));
  95   var direction = (ydelta > 0)?1:-1;
  96   if (range < 4) {
  97     runCommand("G91 G1 Z" + (Math.pow(10,range-2) * direction) + " F" + document.getElementById("z_velocity").value + " G90");
  98   }
  99 }
 100
 101 function extrude(event,a,b) {
 102   var length = document.getElementById("extrude_length").value;
 103   var velocity = document.getElementById("extrude_velocity").value;
 104   var direction = (event.currentTarget.id=='extrude')?1:-1;
 105   runCommand("G91 G1 E" + (length * direction) + " F" + velocity + " G90");
 106 }
 107
 108 function motorsOff(event) {
 109   runCommand("M18");
 110 }
 111
 112 function heatSet(event) {
 113   var type = (event.currentTarget.id=='heat_set')?104:140;
 114   var temperature = (type==104)?document.getElementById("heat_value").value:document.getElementById("bed_value").value;
 115   runCommand("M" + type + " S" + temperature);
 116 }
 117
 118 function heatOff(event) {
 119   var type = (event.currentTarget.id=='heat_off')?104:140;
 120   runCommand("M" + type + " S0");
 121 }
 122
 123 </script>
 124 </head>
 125
 126 <body>
 127     <h1>Welcome to Smoothie web interface</h1>
 128
 129 <button id=motors_off onclick=motorsOff(event)>Motors Off</button>
 130 XY:<input type=text id=xy_velocity size=4 value=3000 style=width:50px>mm/min
 131 Z:<input type=text id=z_velocity size=3 value=200 style=width:40px>
 132 <br>
 133 <img id=control_xy src=img/control_xy.png onclick=clickXY(event)>
 134 <img id=control_z src=img/control_z.png onclick=clickZ(event)>
 135 <br>
 136 <table><tr><td>
 137 <table>
 138 <tr>
 139 <td style=text-align:right>Heat:</td>
 140 <td><button id=heat_off onclick=heatOff(event)>Off</button></td>
 141 <td><input type=text id=heat_value size=3 style=width:40px value=0></td>
 142 <td><button id=heat_set onclick=heatSet(event)>Set</button></td>
 143 </tr>
 144 <tr>
 145 <td style=text-align:right>Bed:</td>
 146 <td><button id=bed_off onclick=heatOff(event)>Off</button></td>
 147 <td><input type=text id=bed_value size=3 style=width:40px value=0></td>
 148 <td><button id=bed_set onclick=heatSet(event)>Set</button></td>
 149 </tr>
 150 </table>
 151 </td><td valign=top>
 152 <button id=get_temperature onclick=runCommand("M105")>Get Temperature</button>
 153 </td></tr></table>
 154 <br>
 155 <button id=extrude onclick=extrude(event)>Extrude</button>
 156 <button id=reverse onclick=extrude(event)>Reverse</button><br>
 157 <input type=text id=extrude_length value=5 size=3 style=width:35px>
 158 mm @
 159 <input type=text id=extrude_velocity value=100 size=3 style=width:40px>
 160 mm/min
 161
 162     <h2>Commands</h2>
 163         <form action="/command" id="commandForm">
 164                 <input type="text" name="commandText" placeholder="Send Command...">
 165                 <input type="submit" value="Send">
 166         </form>
 167         <!-- the result of the command will be rendered inside this div -->
 168         <div id="result"></div>
 169         <script>
 170                 // Attach a submit handler to the form
 171                 $( "#commandForm" ).submit(function( event ) {
 172                         // Stop form from submitting normally
 173                         event.preventDefault();
 174                         // Get some values from elements on the page:
 175                         var $form = $( this );
 176                         command = $form.find( "input[name='commandText']" ).val();
 177                         command += "\n";
 178                         url = $form.attr( "action" );
 179                         // Send the data using post
 180                         var posting = $.post( url, command );
 181                         // Put the results in a div
 182                         posting.done(function( data ) {
 183                                 $( "#result" ).empty();
 184                 $.each(data.split('\n'), function(index) {
 185                     $( "#result" ).append( this + '<br/>' );
 186                 });
 187                         });
 188                 });
 189         </script>
 190
 191         <h2> Upload File </h2>
 192         <input type="file" id="files" name="files[]" onchange="upload();" />
 193
 194         <h3>Uploading file(s)</h3>
 195         <output id="list"></output>
 196     <div id="progress"></div>
 197     <div id="uploadresult"></div>
 198         <script>
 199         function handleFileSelect(evt) {
 200             var files = evt.target.files; // handleFileSelectist object
 201
 202             // files is a FileList of File objects. List some properties.
 203             var output = [];
 204             for (var i = 0, f; f = files[i]; i++) {
 205                 output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
 206                         f.size, ' bytes, last modified: ',
 207                         f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
 208                         '</li>');
 209             }
 210             document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
 211         }
 212
 213         document.getElementById('files').addEventListener('change', handleFileSelect, false);
 214
 215
 216         function upload() {
 217         // take the file from the input
 218         var file = document.getElementById('files').files[0];
 219         var reader = new FileReader();
 220         reader.readAsBinaryString(file); // alternatively you can use readAsDataURL
 221         reader.onloadend  = function(evt)
 222         {
 223             // create XHR instance
 224             xhr = new XMLHttpRequest();
 225
 226             // send the file through POST
 227             xhr.open("POST", 'upload', true);
 228                         xhr.setRequestHeader('X-Filename', file.name);
 229
 230             // make sure we have the sendAsBinary method on all browsers
 231             XMLHttpRequest.prototype.mySendAsBinary = function(text){
 232                 var data = new ArrayBuffer(text.length);
 233                 var ui8a = new Uint8Array(data, 0);
 234                 for (var i = 0; i < text.length; i++) ui8a[i] = (text.charCodeAt(i) & 0xff);
 235
 236                 if(typeof window.Blob == "function")
 237                 {
 238                      var blob = new Blob([data]);
 239                 }else{
 240                      var bb = new (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder)();
 241                      bb.append(data);
 242                      var blob = bb.getBlob();
 243                 }
 244
 245                 this.send(blob);
 246             }
 247
 248             // let's track upload progress
 249             var eventSource = xhr.upload || xhr;
 250             eventSource.addEventListener("progress", function(e) {
 251                 // get percentage of how much of the current file has been sent
 252                 var position = e.position || e.loaded;
 253                 var total = e.totalSize || e.total;
 254                 var percentage = Math.round((position/total)*100);
 255
 256                 // here you should write your own code how you wish to proces this
 257                 $( "#progress" ).empty().append('uploaded ' + percentage + '%');
 258             });
 259
 260             // state change observer - we need to know when and if the file was successfully uploaded
 261             xhr.onreadystatechange = function()
 262             {
 263                 if(xhr.readyState == 4)
 264                 {
 265                     if(xhr.status == 200)
 266                     {
 267                         // process success
 268                         $( "#uploadresult" ).empty().append( 'Uploaded Ok');
 269                     }else{
 270                         // process error
 271                         $( "#uploadresult" ).empty().append( 'Uploaded Failed');
 272                     }
 273                 }
 274             };
 275
 276             // start sending
 277             xhr.mySendAsBinary(evt.target.result);
 278         };
 279         }
 280         </script>
 281
 282 </body>
 283 </html>