Commit | Line | Data |
---|---|---|
d4ee6ee2 JM |
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> |