forked from chilipeppr/widget-template
-
Notifications
You must be signed in to change notification settings - Fork 9
/
widget.html
330 lines (305 loc) · 18.3 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
<!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>
<div id="com-chilipeppr-widget-grbl" class="panel panel-default">
<div class="panel-heading">
<div class="btn-toolbar pull-right" role="toolbar" >
<div class="btn-group v1Show">
<button type="button" class="btn btn-xs btn-default btn-warning grbl-safety-door"
data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover"
data-title="Safety Door"
data-content="Immediately suspends into a DOOR state and disables the spindle and coolant. If in motion, the machine will decelerate to a stop and then be suspended"
>
<span class="glyphicon glyphicon-warning-sign"></span>
</button>
<button type="button" class="btn btn-xs btn-default hide-overrides"
data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover"
data-title="" data-content="Toggle Overrides">
<span class="glyphicon glyphicon-wrench"></span>
</button>
</div>
<div class="btn-group">
<button type="button" data-command='!' class="btn btn-xs btn-default btn-danger grbl-feedhold" data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover" data-title="Feedhold" data-content="Stop movement immediately. Maintains positional accuracy. Sends ! command to GRBL which jumps past the planner buffer so you get immediate stop. Movement can be resumed with ~ command. If you want to jog you should flush queue with CTRL+X.">
<!-- span class="glyphicon glyphicon-stop"></span -->
Hold !
</button>
<button type="button" class="btn btn-xs btn-default grbl-cyclestart" data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover" data-title="Cycle Start" data-content="Resume movement from stopping point"><span class="">~</span></button>
<!-- button type="button" class="btn btn-xs btn-default grbl-verbose" data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover" data-title="Toggle Verbose Output" data-content="Toggle verbose mode to show query responses in console - defaults to disabled, green when enabled"><span class="">v</span></button -->
<!--<button type="button" class="btn btn-xs btn-default grbl-queueflush" data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover" data-title="Queue Flush" data-content="Empty planner buffer. Used for jogging and other cycles"><span class="">%</span></button>-->
<button type="button" class="btn btn-xs btn-default grbl-reset" data-toggle="popover" data-placement="auto" data-container="body" data-content="GRBL Soft Reset" data-trigger="hover" >
<span class="glyphicon glyphicon-refresh"></span></button><!--Ctrl+X-->
<button type="button" id="com-chilipeppr-widget-grbl-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">
<div class="dropdown">
<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 class="divider"></li-->
<li><a href="#" class="grbl-verbose">Toggle verbose mode</a></li>
<li><a href="#" class="grbl-debug">Toggle Debug mode</a></li>
<li><a href="#" class="grbl-v1mode">Force v1 mode</a></li>
<!-- <li role="presentation" class="dropdown-header fork-name"></li>
<li><a href="" target="_blank" class="standalone">View Widget Standalone</a></li>
<li><a href="" target="_blank" class="fork">Fork Widget</a></li> -->
</ul>
</div>
</div>
</div>
<span class="panel-title" data-toggle="popover">GRBL (1.1)</span> <!-- span style="font-size:9px;" class="fb-build">v1.0.10</span-->
</div>
<div id="com-chilipeppr-widget-grbl-body" class="panel-body" >
<div id="grbl-buffer-warning" style="color:red;font-size:12px;text-align:center;">
You must connect to your GRBL device using the GRBL buffer algorithm in this workspace. Connecting to any other buffer (default, tinyg, etc) will cause unpredictable behavior.<br/><br/>
</div>
<!-- start new buttons -->
<div class="com-chilipeppr-widget-grbl-realtime-commands v1Show">
<!-- new commands fpr the 1.1 version -->
<div class="row overrides-btn">
<div class="col col-xs-3">
Feed Overrides
<span class="ov-1" title="Current status">100</span>
</div>
<div class="col col-xs-9">
<div class="btn-group">
<button type="button" class="btn btn-xs btn-primary feed-overrides-normal" data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover" data-title="Feed Overrides" data-content="Immediately alters the feed override value. An active feed motion is altered within tens of milliseconds. Does not alter rapid rates, which include G0, G28, and G30, or jog motions." data-send-code="90">
100%
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-default" data-send-code="91">
+10%
</button>
<button type="button" class="btn btn-xs btn-default" data-send-code="92">
-10%
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-default" data-send-code="93">
+1%
</button>
<button type="button" class="btn btn-xs btn-default" data-send-code="94">
-1%
</button>
</div>
</div>
</div>
<div class="row overrides-btn">
<div class="col col-xs-3">
Rapid Overrides
<span class="ov-2" title="Current status">100</span>
</div>
<div class="col col-xs-9">
<div class="btn-group">
<button type="button" class="btn btn-xs btn-primary" data-delay="500" data-animation="true" data-placement="auto"
data-container="body" data-trigger="hover" data-title="Rapid Overrides"
data-content="Immediately alters the rapid override value. An active rapid motion is altered within tens of milliseconds. Only effects rapid motions, which include G0, G28, and G30"
data-send-code="95">
100%
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-default" data-send-code="96">
50%
</button>
<button type="button" class="btn btn-xs btn-default" data-send-code="97">
25%
</button>
</div>
</div>
</div>
<div class="row overrides-btn">
<div class="col col-xs-3">
Spindle Overrides<br/>
<span class="ov-3" title="Current status">100</span>
</div>
<div class="col col-xs-9">
<div class="btn-group">
<button type="button" class="btn btn-xs btn-primary" data-delay="500" data-animation="true" data-placement="auto"
data-container="body" data-trigger="hover" data-title="Spindle speed Overrides"
data-content="mmediately alters the spindle speed override value. An active spindle speed is altered within tens of milliseconds. Override values may be changed at any time, regardless of if the spindle is enabled or disabled."
data-send-code="99">
100%
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-default" data-send-code="9A">
+10%
</button>
<button type="button" class="btn btn-xs btn-default" data-send-code="9B">
-10%
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-xs btn-default" data-send-code="9C">
+1%
</button>
<button type="button" class="btn btn-xs btn-default" data-send-code="9D">
-1%
</button>
</div>
</div>
</div>
<div class="row overrides-btn">
<div class="col col-xs-3">
Toggle
</div>
<div class="col col-xs-9">
<button type="button" class="btn btn-xs btn-default" data-send-code="A0"
data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover"
data-title="Toggle Flood Coolant" data-content="Toggles flood coolant state and output pin until the next toggle or g-code command alters it. May be commanded at any time while in IDLE, RUN, or HOLD states. It is otherwise ignored."
>
Flood C
</button>
<button type="button" class="btn btn-xs btn-default" data-send-code="A1"
data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover"
data-title="Toggle Mist Coolant" data-content="Enabled by ENABLE_M7 compile-time option. Default is disabled. Toggles mist coolant state and output pin until the next toggle or g-code command alters it."
>
Mist C
</button>
<button type="button" class="btn btn-xs btn-warning" data-send-code="9E"
data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover"
data-title="Toggle Spindle Stop" data-content="Toggles spindle enable or disable state immediately, but only while in the HOLD state. The command is otherwise ignored, especially while in motion. This prevents accidental disabling during a job that can either destroy the part/machine or cause personal injury. Industrial machines handle the spindle stop override similarly. When motion restarts via cycle start, the last spindle state will be restored and wait 4.0 seconds (configurable) before resuming the tool path. This ensures the user doesn't forget to turn it back on. While disabled, spindle speed override values may still be altered and will be in effect once the spindle is re-enabled. If a safety door is opened, the DOOR state will supersede the spindle stop override, where it will manage the spindle re-energizing itself upon closing the door and resuming. The prior spindle stop override state is cleared and reset.">
Stop Spindle
</button>
</div>
</div>
</div>
<!-- end new buttons -->
<div class="container-fluid com-chilipeppr-interface-cnccontroller-stat">
<div class="row stat-row">
<div class="col col-xs-3" id="ttl-state">
State
</div>
<div class="col col-xs-9 well" id='stat-state-background-box'>
<span class="stat-sm stat-state">Offline</span>
</div>
</div><!-- row -->
<div class="row stat-row">
<div class="col col-xs-3" id="ttl-mcoords" >
M Crds
</div>
<div class="col col-xs-9 well">
<span class="stat-sm stat-mcoords">0</span>
</div>
</div>
<div class="row stat-row">
<div class="col col-xs-3" id="ttl-units">
Units
</div>
<div class="col col-xs-3 well">
<span class="stat-units">-</span>
</div>
<div class="col col-xs-3 lblpad" id="ttl-feedrate">
Feedrate
</div>
<div class="col col-xs-3 well">
<span class="stat-feedrate">0</span>
</div>
</div><!-- row -->
<div class="row stat-row">
<div class="col col-xs-3" id="ttl-distance">
Distance
</div>
<div class="col col-xs-3 well">
<span class="stat-sm stat-distance">-</span>
</div>
<div class="col col-xs-3 lblpad" id="ttl-motion">
Motion
</div>
<div class="col col-xs-3 well">
<span class="stat-sm stat-motion">-</span>
</div>
</div><!-- row -->
<div class="row stat-row ">
<div class="col col-xs-3" id="ttl-wcs">
WCS
</div>
<div class="col col-xs-3 well">
<span class="stat-sm stat-wcs">-</span>
</div>
<div class="col col-xs-3 lblpad" id="ttl-plane">
Plane
</div>
<div class="col col-xs-3 well">
<span class="stat-sm stat-plane">-</span>
</div>
</div><!-- row -->
<div class="row stat-row">
<div class="col col-xs-3" id="ttl-coolant">
Coolant
</div>
<div class="col col-xs-3 well">
<span class="stat-sm stat-coolant">-</span>
</div>
<div class="col col-xs-3 lblpad" id="ttl-spindle">
Spindle
</div>
<div class="col col-xs-3 well">
<span class="stat-sm stat-spindle">-</span>
</div>
</div><!-- row -->
<div class="row stat-row">
<div class="col col-xs-3" id="ttl-queue">
SPJS Queue
</div>
<div class="col col-xs-3 well">
<span class="stat-sm stat-queue">0</span>
</div>
<div class="col col-xs-3 lblpad" id="ttl-jogFeedRate">
Jog Feedrate
</div>
<div class="col col-xs-3 well">
<span class="stat-sm "><span class="stat-jogFeedRate">200</span> <span style="font-size:x-small">units/min</span></span>
</div>
</div><!-- row -->
<span style="font-size:0.8em;">(These parameters may not update in real time)</span>
</div>
</div>
<div id="com-chilipeppr-widget-grbl-debug" style="font-size:10px;display:none;" >
<textarea id="com-chilipeppr-widget-grbl-debug-console" style="height:100px; width:100%"></textarea>
</div>
<div id="com-chilipeppr-widget-grbl-ftr" class="panel-footer" style="font-size:10px;">To report issues please visit the <a href='https://plus.google.com/communities/104346367498010042037'>Chilipeppr Community</a> <span id="widgetVersion">(v xx)</span></div>
</div>
<div class="modal fade " id="com-chilipeppr-widget-grbl-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">GRBL Config Settings</h4>
</div>
<div class="modal-body">
<p style="color:red;">WARNING: This feature is extremely unstable and may wipe GRBL settings. Back up all output from $$ before attempting to save config through this window.</p>
<div id="grbl-config-div" class="form-horizontal" role="form">
</div>
</div>
</div>
</div>
</div>
</body>
</html>