forked from chilipeppr/widget-gcodelist
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwidget.html
557 lines (505 loc) · 39.1 KB
/
widget.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title><!--(auto-fill by runme.js--></title>
<!-- ChiliPeppr is based on bootstrap CSS. -->
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Customized version of require.js for ChiliPeppr. Please see require.js docs for how
ChiliPeppr's dependency system works as it's based on require.js. -->
<script type='text/javascript' src="//i2dcui.appspot.com/js/require.js"></script>
<!-- widget.css DON'T REMOVE -->
<style type='text/css'>
/* widget.css will get inlined here by runme.js. don't remove this comment or inlining will fail. */
</style>
<link rel="stylesheet" type="text/css" href="widget.css">
<!-- DON'T REMOVE end widget.css -->
<!-- widget.js DON'T REMOVE -->
<script type='text/javascript'>
//<![CDATA[
/* widget.js will get inlined here by runme.js. don't remove this comment or inlining will fail. */
//]]>
</script>
<script type='text/javascript' src="widget.js"></script>
<!-- DON'T REMOVE end widget.js -->
</head>
<body>
<!--Put HTML Contents of Widget Here-->
<div id="com-chilipeppr-widget-gcodeviewer" class="panel panel-default com-chilipeppr-widget-gcode ">
<div class="panel-heading">
<div class="" style="padding-bottom:10px;"><span class="panel-title">Gcode</span></div>
<div class="btn-toolbar" role="toolbar" style="position:absolute;right:0px;top:0px;padding:10px 15px;">
<div class="btn-group plannerpause" data-toggle="popover" data-content="This indicator shows that we're being asked to pause our sending of commands to the CNC controller so we don't overfill the buffer.">
<span disabled="true" class="plannerpauseindicator glyphicon glyphicon glyphicon-time btn btn-sm"></span>
</div>
<div class="btn-group" style="margin-left:0px;">
<button type="button" id="com-chilipeppr-widget-gcode-play" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-play"></span>
</button>
<button type="button" id="com-chilipeppr-widget-gcode-pause" disabled class="btn btn-default btn-xs"><span class="glyphicon glyphicon-pause"></span>
</button>
<button type="button" id="com-chilipeppr-widget-gcode-stop" disabled class="btn btn-default btn-xs"><span class="glyphicon glyphicon-stop"></span>
</button>
<button type="button" id="com-chilipeppr-widget-gcode-stepback" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-step-backward"></span>
</button>
<button type="button" id="com-chilipeppr-widget-gcode-stepfwd" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-step-forward"></span></button>
<button type="button" id="com-chilipeppr-widget-gcode-jumptoline" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-plane"></span></button>
<button type="button" id="com-chilipeppr-widget-gcode-btnoptions" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-cog"></span></button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-default hidebody"><span class="glyphicon glyphicon-chevron-up"></span></button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<!-- <li role="presentation" class="dropdown-header fork-name"></li>
<li><a href="" class="standalone" target="_blank">View Widget Standalone</a></li>
<li><a href="" class="fork" target="_blank">Fork Widget</a></li> -->
</ul>
</div>
</div>
<div id="com-chilipeppr-widget-gcode-feedrate" class="" style="padding-top:5px;overflow:hidden;">
<div class="input-group input-group-sm" style=" "> <span class="input-group-btn ">
<button class="btn btn-default btn-xs" id="com-chilipeppr-widget-gcode-feedrate-adjust" type="button">Feedrate X</button></span>
<input id="com-chilipeppr-widget-gcode-feedrate-val" class="form-control" type="number" value="1.00" /> <span class="input-group-btn ">
<button class="btn btn-default btn-xs" id="com-chilipeppr-widget-gcode-feedrate-up" type="button"><span class="glyphicon glyphicon-arrow-up btn-xs "></span></button>
<button class="btn btn-default btn-xs" id="com-chilipeppr-widget-gcode-feedrate-down" type="button"><span class="glyphicon glyphicon-arrow-down btn-xs"></span>
</button>
<button class="btn btn-default btn-xs" id="com-chilipeppr-widget-gcode-feedrate-reset" type="button">Reset</button>
</span>
</div>
</div>
</div>
<div class="alert alert-info alert-dismissible com-chilipeppr-widget-gcode-toolchange hidden" role="alert" style="margin:0;border-radius:0;">
<button type="button" class="close" xdata-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<p style="font-size:smaller;padding-bottom:6px;">You are in tool change mode. Change to tool <b><span id="com-chilipeppr-widget-gcode-toolnumber1">T??</span></b>. You may jog to move the tool around and/or reset your Z zero position. Put your motors at full power if you don't want them to move while you change your tool. Make sure to issue the following Gcode to get back
to the position just prior to your tool change "<span class="com-chilipeppr-widget-gcode-toolchange-reposition1">G0 X? Y? Z?</span>".
</p>
<div class="btn-group-vertical">
<button class="btn btn-xs btn-default com-chilipeppr-widget-gcode-toolchange-energize" xstyle="width:100%;">Motors Full Power</button>
<button class="btn btn-xs btn-default com-chilipeppr-widget-gcode-toolchange-unenergize" xstyle="width:100%;">Motors Previous Setting <span class="com-chilipeppr-widget-gcode-toolchange-motorsprev"></span></button>
<button class="btn btn-xs btn-default com-chilipeppr-widget-gcode-toolchange-spindlestop" xstyle="width:100%;">Stop Spindle (M5)</button>
<button class="btn btn-xs btn-default com-chilipeppr-widget-gcode-toolchange-spindlestart" xstyle="width:100%;">Start Spindle (M3)</button>
<button class="btn btn-xs btn-default com-chilipeppr-widget-gcode-toolchange-probe" xstyle="width:100%;">Run Probe Command</button>
<button class="btn btn-xs btn-default com-chilipeppr-widget-gcode-toolchange-g43" xstyle="width:100%;">Send "<span id="com-chilipeppr-widget-gcode-g43-cmd">G43 T-</span>"</button>
<button class="btn btn-xs btn-default com-chilipeppr-widget-gcode-toolchange-sendgcode" xstyle="width:100%;">Send Reposition "<span class="com-chilipeppr-widget-gcode-toolchange-reposition2">G0 X- Y- Z-</span>"</button>
</div>
</div>
<div id="com-chilipeppr-widget-gcode-body-wrapper">
<!-- Need 2 col layout to get jumpscroller on right full height -->
<table id="com-chilipeppr-widget-gcode-body-2col" xstyle="position:relative;">
<tr>
<td class="com-chilipeppr-gcode-jumpscroll" style="border:0px solid red;position:relative;width:21px;">
<!--<div class="com-chilipeppr-gcode-jumpscroll" style="position:absolute;width:25px; top:0; height:100%; border:1px solid green;">-->
<div class="paginator" style="top:10%;">
<button type="button" class="btn btn-xs btn-default "> <span class="glyphicon glyphicon-minus"></span>
</button>
</div>
<div class="paginator" style="top:20%;">
<button type="button" class="btn btn-xs btn-default "> <span class="glyphicon glyphicon-minus"></span>
</button>
</div>
<div class="paginator" style="top:30%;">
<button type="button" class="btn btn-xs btn-default "> <span class="glyphicon glyphicon-minus"></span>
</button>
</div>
<div class="paginator" style="top:40%;">
<button type="button" class="btn btn-xs btn-default "> <span class="glyphicon glyphicon-minus"></span>
</button>
</div>
<div class="paginator" style="top:50%;">
<button type="button" class="btn btn-xs btn-default "> <span class="glyphicon glyphicon-minus"></span>
</button>
</div>
<div class="paginator" style="top:60%;">
<button type="button" class="btn btn-xs btn-default "> <span class="glyphicon glyphicon-minus"></span>
</button>
</div>
<div class="paginator" style="top:70%;">
<button type="button" class="btn btn-xs btn-default "><span class="glyphicon glyphicon-minus"></span>
</button>
</div>
<div class="paginator" style="top:80%;">
<button type="button" class="btn btn-xs btn-default "><span class="glyphicon glyphicon-minus"></span>
</button>
</div>
<div class="paginator paginator-first">
<button type="button" class="btn btn-xs btn-default "><span class="glyphicon glyphicon-chevron-up"></span>
</button>
</div>
<div class="paginator paginator-last">
<button type="button" class="btn btn-xs btn-default "><span class="glyphicon glyphicon-chevron-down"></span>
</button>
</div>
<!--</div>-->
</td>
<td>
<div id="com-chilipeppr-widget-gcode-body" class="panel-body ">
<div id="com-chilipeppr-elem-gcodedata"></div>
<div id="dragdrop" class="hidden"></div>
<div id="com-chilipeppr-widget-gcode-tmparea" class="hidden"></div>
<div id="showstart">
<button class="btn btn-default btn-xs" style="width:100%;margin-bottom:0;"><span class="glyphicon glyphicon-chevron-up"></span></button>
</div>
<table id="com-chilipeppr-widget-gcode-tbl" class="table table-condensed" xstyle="width:100%;">
<thead>
<tr>
<th colspan="3" style="border:0;padding:0;margin:0">
<div style="height:0px;">
<!--This makes sure the table width is the full width of the container-->
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="glyphicon glyphicon-ok " style="color:black" />
</td>
<td>1</td>
<td class="g">(Made using xxxx G90 )</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok " />
</td>
<td>2</td>
<td class="g "><span title="Go to absolute mode ">G21</span> G90 G64 G40</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok " />
</td>
<td>3</td>
<td class="g">(laser off)</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-ok " />
</td>
<td>4</td>
<td class="g">M3</td>
</tr>
</tbody>
</table>
<div id="showend">
<button class="btn btn-default btn-xs" style="width:100%;margin-bottom:0;"><span class="glyphicon glyphicon-chevron-down"></span></button>
</div>
</div>
</td>
</tr>
</table>
</div>
<!-- body wrapper com-chilipeppr-widget-gcode-body-wrapper -->
<div id="com-chilipeppr-widget-gcode-footer" class="panel-footer ">
<div class="row ">
<div class="col-xs-12 stats-hdr" style="margin-bottom:5px;" data-toggle="popover" data-container="body" data-placement="auto top" data-trigger="hover click" data-delay="500" data-html="true" data-title="Explaining Status Steps"><span class="glyphicon glyphicon-ok gcode-sent"></span> Sent <span class="glyphicon glyphicon-ok gcode-queued"></span> Queued <span class="glyphicon glyphicon-ok gcode-written"></span> Written <span class="glyphicon glyphicon-ok gcode-completed"></span> Completed <span class="glyphicon glyphicon-ok gcode-executed"></span> Executed
<!-- <span class="glyphicon glyphicon-ok gcode-error"></span> Error/Unsupported Command --></div>
</div>
<div class="row ">
<div class="col-xs-3 stats-hdr ">Lines</div>
<div class="col-xs-3 stats-hdr ">Showing</div>
<div class="col-xs-3 stats-hdr ">Sent</div>
<div class="col-xs-3 stats-hdr ">To Be Sent</div>
</div>
<div class="row ">
<div id="gcode-lines" class="col-xs-3 stats-val">256,340</div>
<div id="gcode-lines-showing" class="col-xs-3 stats-val">0</div>
<div id="gcode-lines-sent" class="col-xs-3 stats-val">0</div>
<div id="gcode-lines-remaining" class="col-xs-3 stats-val">256,340</div>
</div>
<div class="row " style="padding-top:10px;">
<div class="col-xs-3 stats-hdr ">Time Start</div>
<div class="col-xs-3 stats-hdr ">Est Time</div>
<div class="col-xs-3 stats-hdr ">Est Remain</div>
<div class="col-xs-3 stats-hdr ">Duration</div>
</div>
<div class="row ">
<div id="gcode-time-start" class="col-xs-3 stats-val">-</div>
<div id="gcode-time-est" class="col-xs-3 stats-val">-</div>
<div id="gcode-time-estremain" class="col-xs-3 stats-val">-</div>
<div id="gcode-time-dur" class="col-xs-3 stats-val">-</div>
</div>
</div>
</div>
<div class="modal fade " id="com-chilipeppr-widget-gcode-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Gcode Sender Options</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<p>The Gcode Sender widget will send a command to the serial port by default. You can optionally have it send the command to the 3D Viewer to have it move the toolhead in a simulation run. If you are going to run a real CNC job make
sure to send the commands to the serial port.</p>
<!-- <h4>Send Gcode Commands To</h4> -->
<p class="options-heading">When Playing <span class="glyphicon glyphicon-play"></span> or Stepping <span class="glyphicon glyphicon-step-backward"></span><span class="glyphicon glyphicon-step-forward"></span> Send Gcode Commands To</p>
<div class="form-group">
<div class="col-sm-10">
<div class="radio">
<label>
<input type="radio" name="grpWhenPlay" id="com-chilipeppr-widget-gcode-option-whenplay-serial" value="serial" checked="true"> Serial Port (Default)</input>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="grpWhenPlay" id="com-chilipeppr-widget-gcode-option-whenplay-3d" value="3d"> 3D Viewer</input>
</label>
</div>
</div>
</div>
<p class="options-heading">When Clicking A Gcode Row
<!-- <span class="callout" style="border:1px solid black;border-radius:4px;"><span class="glyphicon glyphicon-ok" style="color:gray"></span> 7 N7 G0 Z4.000 </span> -->Send Gcode Commands To</p>
<div class="form-group">
<div class="col-sm-10">
<div class="radio">
<label>
<input type="radio" name="grpPerRow" id="com-chilipeppr-widget-gcode-option-perrow-serial" value="serial"> Serial Port</input>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="grpPerRow" id="com-chilipeppr-widget-gcode-option-perrow-3d" value="3d" checked> 3D Viewer (Default)</input>
</label>
</div>
<div style="padding-left:30px;">
<div class="radio">
<label>
<input type="radio" name="grpPerRow3dType" id="com-chilipeppr-widget-gcode-option-perrow-3d-goto" value="goto" checked> Just go to XYZA Position (Default)</input>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="grpPerRow3dType" id="com-chilipeppr-widget-gcode-option-perrow-3d-anim" value="anim"> Go to XYZA Position and Animate Move</input>
</label>
</div>
</div>
</div>
</div>
<p class="options-heading">Pre-Upload Gcode to SPJS (Version 1.4 or higher of Serial Port JSON Server required)</p>
<p>Pre-Uploading gives the buffer a bunch of lines to work from to make sure you never starve your buffer. 100 lines is reasonable, but if you have a lot of small Gcode moves like in 3D printing a higher number may work. Up to 25,000
lines can be pre-loaded.</p>
<div class="form-group">
<div class="col-sm-10">
<div class="radio">
<label>
<input type="radio" name="grpUpload" id="com-chilipeppr-widget-gcode-option-upload-none" value="none" checked> No Pre-Uploading (Default)</input>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="grpUpload" id="com-chilipeppr-widget-gcode-option-upload-100" value="100"> Pre-Upload 100 Lines Into Buffer</input>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="grpUpload" id="com-chilipeppr-widget-gcode-option-upload-1000" value="1000"> Pre-Upload 1,000 Lines Into Buffer</input>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="grpUpload" id="com-chilipeppr-widget-gcode-option-upload-10000" value="10000"> Pre-Upload 10,000 Lines Into Buffer</input>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="grpUpload" id="com-chilipeppr-widget-gcode-option-upload-20000" value="20000"> Pre-Upload 20,000 Lines Into Buffer</input>
</label>
</div>
</div>
</div>
<p class="options-heading">Multi-Line Upload Mode</p>
<div class="form-group">
<div class="col-sm-10">
<div class="radio">
<label>
<input type="radio" name="grpMultiLineMode" id="com-chilipeppr-widget-gcode-option-multilinemode-no" value="no"> Do Not Use Multi-Line Mode</input>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="grpMultiLineMode" id="com-chilipeppr-widget-gcode-option-multilinemode-yes" value="yes" checked> Yes, Use Multi-Line Mode (Default)</input>
</label>
</div>
</div>
</div>
<div class="input-group" style="width:160px;">
<input type="number" class="form-control" id="com-chilipeppr-widget-gcode-option-multiline" placeholder="Lines Per Send" value="50" />
<div class="input-group-addon">lines</div>
</div>
<p style="padding-top:6px;">How many lines to upload for each send to the Serial Port JSON Server. Since we're running in a browser and the user could be on a remote connection, sending 1 line at a time to the SPJS could be too slow based on your type of
Gcode and the speed of your network connection. 3D prints for example are 100's of 1,000's of lines of gcode with tiny movements. Since each send to the SPJS requires a receipt to ensure ordering, this roundtrip latency can
slow things down. One way to tackle this is to send multiple lines at a time. A good value is 50, but you can go up 20,000 if you'd like.</p>
<p class="options-heading">Delay Per Gcode Upload Event (i.e. per line)</p>
<div class="input-group" style="width:160px;">
<input type="number" class="form-control" id="com-chilipeppr-widget-gcode-option-delayPerLine" placeholder="milliseconds" value="1000" />
<div class="input-group-addon">ms</div>
</div>
<p style="padding-top:6px;">The default is now 1000 ms delay, i.e. 1 second and to use Multi-Line upload with roughly 50 lines. 100 lines is also fairly normal now. The reason this new default is recommended is that it seems to put the least load on the browser
so there are less round-trips to the Serial Port JSON Server. This setting also seems to stay ahead of the CNC controller nicely with most Gcode, so there's a constant set of available lines for the CNC controller to process.</p>
<p style="padding-top:6px;">If you are running version 1.4 or higher of the Serial Port JSON Server and you connected to your CNC controller with a buffer flow algorithm other than default (i.e. you chose the "tinyg" buffer algorithm when you connected to
your TinyG), you can set this value as low as 5ms. In practice, a setting such as 20ms seems to do the trick. The reason is, the SPJS can now queue up to 25,000 lines of Gcode (which can be higher if for some reason you want
1,000,000 lines to queue. Just download the Github project and compile.).</p>
<p>In version 1.4 and up, the server will directly manage the planner buffer rather than the browser. You may notice that significantly more lines of Gcode are sent in to the server than where your CNC controller is actually at. You
don't necessarily want too many lines sent in, but you want to make sure there's a really good buffer of lines as well. A good rule of thumb is to have the Serial Port JSON Server have 500 lines of Gcode in its buffer, i.e.
this Gcode widget is 500 lines ahead of where the CNC controller is actually at.</p>
<p>For controlling a serial port device without a buffer flow algorithm, you should use a setting like a 200ms delay between the sending of each Gcode line. However, if you are seeing that the CNC controller is being starved of commands,
and thus you are getting slow/choppy machining (especially on very small moves), you can lower this value by modifying this value here or forking this widget. The minimum value is 0. Be warned though, that by setting this value
too low you can overflow the buffer and lose lines of Gcode which of course will destroy your milling job.</p>
<p>You can also raise this value if you are finding your computer is too slow to process everything and you are seeing that commands are being sent too quickly and overflowing the planner buffer. The main method of flow control is
to get back a /plannerpause from the CNC controller widget. That makes the Gcode widget stop sending until it sees a /plannerresume. If there is contention in processing this command, increasing the delay per line gives time
for your CPU to process the command. Values like 200ms have been seen to work quite well for ensuring there is ample time on slower processors. However, a delay like 500ms can also result in very slow commands to your CNC controller
during small moves.</p>
<p>One final note, is that if you are running ChilPeppr on the same machine as your Serial Port JSON Server, you could find that you can run your job faster with less of a ms delay per line. Connecting over localhost is very fast
and no packet loss will occur.</p>
<p class="options-heading">Play/Pause/Stop Feedhold/Resume/Flush</p>
<div class="checkbox">
<label>
<input type="checkbox" name="" id="com-chilipeppr-widget-gcode-option-ppsOnPlayFlush" value="ppsOnPlayFlush"> Send Queue Flush (%) on Play
<br/>
</input>
</label>
<label>
<input type="checkbox" name="" id="com-chilipeppr-widget-gcode-option-ppsOnStopFeedhold" value="ppsOnStopFeedhold"> Send Feedhold and Queue Flush (!%) on Stop
<br/>
</input>
</label>
<label>
<input type="checkbox" name="" id="com-chilipeppr-widget-gcode-option-ppsOnPauseFeedhold" value="ppsOnPauseFeedhold"> Send Feedhold (!) on Pause
<br/>
</input>
</label>
<label>
<input type="checkbox" name="" id="com-chilipeppr-widget-gcode-option-ppsOnUnpauseResume" value="ppsOnUnpauseResume"> Send Cycle Resume (~) on Unpause
<br/>
</input>
</label>
</div>
<p class="options-heading" style="padding-top:16px;">Tool Change (M6)</p>
<div class="checkbox">
<label>
<input type="checkbox" name="" id="com-chilipeppr-widget-gcode-option-pauseOnM6" value="pauseOnM6"> Pause on M6 commands
<br/>
</input>
</label>
</div>
<p style="padding-top:6px;">To send Gcode after pausing, add it here. This can be for moving to a tool change position.</p>
<div class="input-group" style="width:300px;">
<textarea class="form-control" id="com-chilipeppr-widget-gcode-option-sendonM6" placeholder="Gcode"></textarea>
</div>
<p style="padding-top:6px;">To send Gcode before unpausing, add it here. This can be for moving back to the original position.</p>
<div class="input-group" style="width:300px;">
<textarea class="form-control" id="com-chilipeppr-widget-gcode-option-sendoffM6" placeholder="Gcode"></textarea>
</div>
<p style="padding-top:6px;">Definition of G-code to send as probe command in tool change dialog:</p>
<div class="input-group" style="width:300px;">
<textarea class="form-control" id="com-chilipeppr-widget-gcode-option-probe-cmd" placeholder="Gcode">G28.2 Z0</textarea>
</div>
<p class="options-heading" style="padding-top:16px;">Pre-Process Gcode</p>
<div class="checkbox">
<label>
<input type="checkbox" name="" id="com-chilipeppr-widget-gcode-option-removeemptylines" value="removeemptylines"> Remove empty lines (Default On)
<br/>
</input>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="" id="com-chilipeppr-widget-gcode-option-addlinenums" value="addlinenums"> Add line numbers <span class="com-chilipeppr-widget-gcode-option-addlinenums-default hidden">(Default is On)</span>
<br/>
</input>
</label>
</div>
<!-- <div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div> -->
</form>
</div>
<!-- <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary optionsbtnsave">Save changes</button>
</div> -->
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- tool change modal -->
<div class="modal fade " id="com-chilipeppr-widget-gcode-toolchange-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="com-chilipeppr-widget-gcode-toolchange-heading">Tool Change (M6 <span id="com-chilipeppr-widget-gcode-toolnumber2">T??</span>)</h4>
</div>
<div class="modal-body">
<p>We reached a line in the Gcode that contains an M6 command. If you are manually changing tools then dismiss this dialog, change your tool, and hit the pause button to unpause your job.</p>
<div class="alert alert-info" role="alert">You must unpause after the tool change to resume your Gcode</div>
<div class="checkbox">
<label>
<input type="checkbox" name="" id="com-chilipeppr-widget-gcode-option-pauseOnM6-alt" value="pauseOnM6"> Pause on M6 commands
<br/>(Can be changed later in options dialog for Gcode Widget)</input>
</label>
</div>
<span id="com-chilipeppr-widget-gcode-toolchange-debug"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal for Out of Local Storage -->
<div id="com-chilipeppr-widget-gcode-outofspace" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Gcode Widget Out of Local Storage Space</h4>
</div>
<div class="modal-body">
<p>You are out of local storage space, so ChiliPeppr can't save your Gcode file. Please delete all of your local storage files for ChiliPeppr using the
<button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"
data-container="body" data-toggle="popover" data-placement="auto" data-trigger="hover" data-title="Drag and Drop" data-content="Drag a Gcode file onto your browser window to load it."><span class="glyphicon glyphicon-file"></span><span class="glyphicon glyphicon-share-alt" style="margin-left:-2px;color:#666666;"></span> <span class="caret"></span></button> in the workspace.</p>
<p>You can also ignore this error and proceed since ChiliPeppr will simply load your file into RAM and function perfectly fine. The only downside is if you reload ChiliPeppr, it won't have your most recent file loaded.</p>
<p>Browsers typically only allow for 5MB of local storage, which isn't much.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</div>
</div>
</div>
<!-- Units of Measurement Modal -->
<div class="modal fade " id="com-chilipeppr-widget-gcode-uom-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>-->
<h4 class="modal-title">No Units Found in Your Gcode File</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger" role="alert">ChiliPeppr was unable to automatically determine whether your file should run in inches (G20) or millimetres (G21).</div>
<p>This is important to ensure your job is cut at the proper size and to prevent your machine from trying to move further than it is capable and running into the end of an axis.</p>
<p>Please choose one of the units options below. The proper gcode command will be added as the first line of your gcode file.</p>
<div class="button">
<button type="button" class="btn btn-primary" id="inches-button" aria-hidden="true">Inches (G20)</button>
<button type="button" class="btn btn-primary" id="mm-button" aria-hidden="true">Millimetres (G21)</button>
</div>
</div>
<div class="modal-footer">
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>
</html>