Michael Spencer
Fork of Smoothie to port to mbed non-LPC targets.
Fork of
Smoothie
by 
Stéphane Cachat
Diff: libs/Network/uip/webserver/httpd-fs/index.html
- Revision:
- 2:1df0b61d3b5a
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/libs/Network/uip/webserver/httpd-fs/index.html Fri Feb 28 18:52:52 2014 -0800
@@ -0,0 +1,283 @@
+<!doctype html>
+<head>
+ <meta charset="utf-8">
+ <title>Single Command</title>
+ <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
+ <script type=text/javascript language=JavaScript>
+ var concentric_circle_radii = [11, 45, 69, 94, 115];
+ var center = [124, 121];
+ var spacer = 7;
+ var zbutton_ydistances = [7, 30, 55, 83];
+ var zcenter = [30, 118];
+
+function runCommand(cmd) {
+ // Get some values from elements on the page:
+ var $form = $( "#commandForm" );
+ cmd += "\n";
+ url = "/command_silent"; // $form.attr( "action" );
+ // Send the data using post
+ var posting = $.post( url, cmd );
+ // Put the results in a div
+ // posting.done(function( data ) {
+ // $( "#result" ).empty();
+ // $.each(data.split('\n'), function(index) {
+ // $( "#result" ).append( this + '<br/>' );
+ // });
+ // });
+}
+
+function lookupConcentric(radius){
+ var length = concentric_circle_radii.length;
+ for (i=0;i<=length;i++) {
+ if (radius < concentric_circle_radii[i]) return(i);
+ }
+ return(length);
+}
+
+function getQuadrantConcentricFromPosition(x,y) {
+ var rel_x = x - center[0]
+ var rel_y = y - center[1]
+ var radius = Math.sqrt(Math.pow(Math.abs(rel_x),2) + Math.pow(Math.abs(rel_y),2))
+ if (rel_x > rel_y && rel_x > -rel_y) {
+ quadrant = 0; // Right
+ } else if (rel_x <= rel_y && rel_x > -rel_y) {
+ quadrant = 3; // Down
+ } else if (rel_x > rel_y && rel_x < -rel_y) {
+ quadrant = 1; // Up
+ } else {
+ quadrant = 2; // Left
+ }
+ var idx = lookupConcentric(radius);
+ return [quadrant, idx]
+}
+
+function clickXY(event){
+ var pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("control_xy").offsetLeft;
+ var pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("control_xy").offsetTop;
+ var codes = getQuadrantConcentricFromPosition(pos_x,pos_y);
+ var quadrant = codes[0], concentric = codes[1];
+ if (concentric < 5) { // movement button pressed
+ var xdir = [1, 0, -1, 0, 0, 0][quadrant];
+ var ydir = [0, 1, 0, -1, 0, 0][quadrant];
+ var magnitude = Math.pow(10, concentric - 2);
+ if (xdir != 0) {
+ command = "G1 X" + (magnitude * xdir) + " F" + document.getElementById("xy_velocity").value;
+ } else {
+ command = "G1 Y" + (magnitude * ydir) + " F" + document.getElementById("xy_velocity").value;
+ }
+ runCommand("G91 " + command + " G90");
+ } else { // home button pressed
+ if (pos_x < 49 && pos_y < 49) { // home x button
+ command = "G28 X0";
+ } else if (pos_x > 200 && pos_y < 49) { //home y button
+ command = "G28 Y0";
+ } else if (pos_x < 49 && pos_y > 200) { // home all button
+ command = "G28";
+ } else { // home z button
+ command = "G28 Z0";
+ }
+ runCommand(command);
+ }
+}
+
+function lookupRange(ydist) {
+ var length = zbutton_ydistances.length;
+ for (i=0;i<length;i++) {
+ if (ydist < zbutton_ydistances[i]) return i;
+ }
+}
+
+function clickZ(event){
+ //var pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("control_z").offsetLeft;
+ var pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("control_z").offsetTop;
+ var ydelta = zcenter[1] - pos_y;
+ var range = lookupRange(Math.abs(ydelta));
+ var direction = (ydelta > 0)?1:-1;
+ if (range < 4) {
+ runCommand("G91 G1 Z" + (Math.pow(10,range-2) * direction) + " F" + document.getElementById("z_velocity").value + " G90");
+ }
+}
+
+function extrude(event,a,b) {
+ var length = document.getElementById("extrude_length").value;
+ var velocity = document.getElementById("extrude_velocity").value;
+ var direction = (event.currentTarget.id=='extrude')?1:-1;
+ runCommand("G91 G1 E" + (length * direction) + " F" + velocity + " G90");
+}
+
+function motorsOff(event) {
+ runCommand("M18");
+}
+
+function heatSet(event) {
+ var type = (event.currentTarget.id=='heat_set')?104:140;
+ var temperature = (type==104)?document.getElementById("heat_value").value:document.getElementById("bed_value").value;
+ runCommand("M" + type + " S" + temperature);
+}
+
+function heatOff(event) {
+ var type = (event.currentTarget.id=='heat_off')?104:140;
+ runCommand("M" + type + " S0");
+}
+
+</script>
+</head>
+
+<body>
+ <h1>Welcome to Smoothie web interface</h1>
+
+<button id=motors_off onclick=motorsOff(event)>Motors Off</button>
+XY:<input type=text id=xy_velocity size=4 value=3000 style=width:50px>mm/min
+Z:<input type=text id=z_velocity size=3 value=200 style=width:40px>
+<br>
+<img id=control_xy src=img/control_xy.png onclick=clickXY(event)>
+<img id=control_z src=img/control_z.png onclick=clickZ(event)>
+<br>
+<table><tr><td>
+<table>
+<tr>
+<td style=text-align:right>Heat:</td>
+<td><button id=heat_off onclick=heatOff(event)>Off</button></td>
+<td><input type=text id=heat_value size=3 style=width:40px value=0></td>
+<td><button id=heat_set onclick=heatSet(event)>Set</button></td>
+</tr>
+<tr>
+<td style=text-align:right>Bed:</td>
+<td><button id=bed_off onclick=heatOff(event)>Off</button></td>
+<td><input type=text id=bed_value size=3 style=width:40px value=0></td>
+<td><button id=bed_set onclick=heatSet(event)>Set</button></td>
+</tr>
+</table>
+</td><td valign=top>
+<button id=get_temperature onclick=runCommand("M105")>Get Temperature</button>
+</td></tr></table>
+<br>
+<button id=extrude onclick=extrude(event)>Extrude</button>
+<button id=reverse onclick=extrude(event)>Reverse</button><br>
+<input type=text id=extrude_length value=5 size=3 style=width:35px>
+mm @
+<input type=text id=extrude_velocity value=100 size=3 style=width:40px>
+mm/min
+
+ <h2>Commands</h2>
+ <form action="/command" id="commandForm">
+ <input type="text" name="commandText" placeholder="Send Command...">
+ <input type="submit" value="Send">
+ </form>
+ <!-- the result of the command will be rendered inside this div -->
+ <div id="result"></div>
+ <script>
+ // Attach a submit handler to the form
+ $( "#commandForm" ).submit(function( event ) {
+ // Stop form from submitting normally
+ event.preventDefault();
+ // Get some values from elements on the page:
+ var $form = $( this );
+ command = $form.find( "input[name='commandText']" ).val();
+ command += "\n";
+ url = $form.attr( "action" );
+ // Send the data using post
+ var posting = $.post( url, command );
+ // Put the results in a div
+ posting.done(function( data ) {
+ $( "#result" ).empty();
+ $.each(data.split('\n'), function(index) {
+ $( "#result" ).append( this + '<br/>' );
+ });
+ });
+ });
+ </script>
+
+ <h2> Upload File </h2>
+ <input type="file" id="files" name="files[]" onchange="upload();" />
+
+ <h3>Uploading file(s)</h3>
+ <output id="list"></output>
+ <div id="progress"></div>
+ <div id="uploadresult"></div>
+ <script>
+ function handleFileSelect(evt) {
+ var files = evt.target.files; // handleFileSelectist object
+
+ // files is a FileList of File objects. List some properties.
+ var output = [];
+ for (var i = 0, f; f = files[i]; i++) {
+ output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
+ f.size, ' bytes, last modified: ',
+ f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
+ '</li>');
+ }
+ document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
+ }
+
+ document.getElementById('files').addEventListener('change', handleFileSelect, false);
+
+
+ function upload() {
+ // take the file from the input
+ var file = document.getElementById('files').files[0];
+ var reader = new FileReader();
+ reader.readAsBinaryString(file); // alternatively you can use readAsDataURL
+ reader.onloadend = function(evt)
+ {
+ // create XHR instance
+ xhr = new XMLHttpRequest();
+
+ // send the file through POST
+ xhr.open("POST", 'upload', true);
+ xhr.setRequestHeader('X-Filename', file.name);
+
+ // make sure we have the sendAsBinary method on all browsers
+ XMLHttpRequest.prototype.mySendAsBinary = function(text){
+ var data = new ArrayBuffer(text.length);
+ var ui8a = new Uint8Array(data, 0);
+ for (var i = 0; i < text.length; i++) ui8a[i] = (text.charCodeAt(i) & 0xff);
+
+ if(typeof window.Blob == "function")
+ {
+ var blob = new Blob([data]);
+ }else{
+ var bb = new (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder)();
+ bb.append(data);
+ var blob = bb.getBlob();
+ }
+
+ this.send(blob);
+ }
+
+ // let's track upload progress
+ var eventSource = xhr.upload || xhr;
+ eventSource.addEventListener("progress", function(e) {
+ // get percentage of how much of the current file has been sent
+ var position = e.position || e.loaded;
+ var total = e.totalSize || e.total;
+ var percentage = Math.round((position/total)*100);
+
+ // here you should write your own code how you wish to proces this
+ $( "#progress" ).empty().append('uploaded ' + percentage + '%');
+ });
+
+ // state change observer - we need to know when and if the file was successfully uploaded
+ xhr.onreadystatechange = function()
+ {
+ if(xhr.readyState == 4)
+ {
+ if(xhr.status == 200)
+ {
+ // process success
+ $( "#uploadresult" ).empty().append( 'Uploaded Ok');
+ }else{
+ // process error
+ $( "#uploadresult" ).empty().append( 'Uploaded Failed');
+ }
+ }
+ };
+
+ // start sending
+ xhr.mySendAsBinary(evt.target.result);
+ };
+ }
+ </script>
+
+</body>
+</html>