Michael Spencer
/
Smoothie
Important changes to repositories hosted on mbed.com
Mbed hosted mercurial repositories are deprecated and are due to be permanently deleted in July 2026.
To keep a copy of this software download the repository Zip archive or clone locally using Mercurial.
It is also possible to export all your personal repositories from the account settings page.
Fork of
Smoothie
by 
Stéphane Cachat
Diff: libs/Network/uip/webserver/httpd-fs/index.html
- Revision:
- 2:1df0b61d3b5a
diff -r ab59fc9af055 -r 1df0b61d3b5a libs/Network/uip/webserver/httpd-fs/index.html
--- /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>