-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathwidget.html
More file actions
302 lines (277 loc) · 16.8 KB
/
widget.html
File metadata and controls
302 lines (277 loc) · 16.8 KB
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
<!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-pcb" class="panel panel-default">
<div class="panel-heading ">
<div class="btn-toolbar pull-right" role="toolbar">
<div class="btn-group">
<!--<button type="button" class="btn btn-xs btn-default btn-sayhello" data-delay="1000" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover" data-title="Say Hello" data-content="Generate a hello message">Say Hello-->
<!--</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"></ul>
</div>
</div>
</div> <span class="panel-title" data-toggle="popover">PCB Widget</span> <span style="font-size:9px;" class="fb-build">beta</span>
<div class="pcb-draghere" style="font-size:80%; margin-top:5px;">Drag your board file here...</div>
</div>
<div class="panel-body">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#com-chilipeppr-widget-pcb-tab-file" role="tab" data-toggle="tab">File</a></li>
<li><a href="#com-chilipeppr-widget-pcb-tab-render" role="tab" data-toggle="tab">Render</a></li>
<li><a href="#com-chilipeppr-widget-pcb-tab-fr4" role="tab" data-toggle="tab">FR4</a></li>
<li><a href="#com-chilipeppr-widget-pcb-tab-cam" role="tab" data-toggle="tab">CAM</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="com-chilipeppr-widget-pcb-tab-file">
<div class="form-group">
<input type="file" id="pcbw-file-input" style="margin-top:10px;"/>
<p class="descriptive-text">This tab is temporary unti I figure out how to handel drag/drop correctly.</p>
</div>
</div>
<!-- Render Tab -->
<div class="tab-pane" id="com-chilipeppr-widget-pcb-tab-render">
<div class="enclosed-group">
<div class="form-group">
<h2 style="margin-top:10px;">Board Layer(s)</h2>
<p class="descriptive-text">Select which board layer(s) to render. Toolpaths and Gcode will be generated for the selected layer(s) only.</p>
<select class="form-control" id="selectedLayer">
<!-- <option>Select Layer</option> -->
</select>
</div>
<div class="form-group">
<h2 style="margin-top:10px;">Flip Axis</h2>
<p class="descriptive-text">Select which axis to use when flipping bottom layer(s). This selection has no effect on top layers</p>
<select class="form-control" id="flippingAxis">
<option>X Axis - in place</option>
<option>Y Axis - in place</option>
<option>X Axis - complete FR4</option>
<option>Y Axis - complete FR4</option>
</select>
</div>
</div>
<div class="enclosed-group">
<div class="form-group">
<h2 style="margin-top:10px;">Items to Render</h2>
<p class="descriptive-text">Select which board items to see in the 3D viewer, these selection has no effect on toolpaths and Gcode generation.</p>
<div class="checkbox"><label><input type="checkbox" id="renderSignalsT" checked /> Signals - Top</label></div>
<div class="checkbox"><label><input type="checkbox" id="renderSignalsB" checked /> Signals - Bottom</label></div>
<div class="checkbox"><label><input type="checkbox" id="renderPolygons" checked /> Polygons</label></div>
<div class="checkbox"><label><input type="checkbox" id="renderClearance" checked /> Clearance</label></div>
<div class="checkbox"><label><input type="checkbox" id="renderBoard" checked /> Board</label></div>
<div class="checkbox"><label><input type="checkbox" id="renderHoles" checked /> Holes</label></div>
<!--<div class="checkbox"><label><input type="checkbox" id="renderTabs" checked /> Tabs</label></div>-->
<div class="checkbox"><label><input type="checkbox" id="renderBlank" checked /> Blank FR4 Board</label></div>
</div>
</div>
<div class="form-group">
Toggle Signal/Pad/Via Popup Windows
<div class="checkbox">
<label>
<input type="checkbox" class="popups-hide" xchecked /> Hide
</label>
</div>
<p class="descriptive-text">This allows you to hide the popup windows as you mouse around with the 3D viewer. They can sometimes get in the way when iterating the best endmill sizes and inflate by values.</p>
</div>
</div>
<!-- FR4 Tab -->
<div class="tab-pane" id="com-chilipeppr-widget-pcb-tab-fr4">
<!-- ----------------------- RENDER:BOARD:BLANK FR4 BOARD ------------------------>
<div style="border:1px dashed black; padding:0 10px;border-radius:6px;">
<div class="form-group">
<h2 style="margin-top:10px;">Blank FR4 Board</h2>
</div>
Location (X, Y)
<p class="descriptive-text" style="margin-bottom: 0px; padding-top: 0px;">Location of left bottom corner of blank FR4 board</p>
<div class="input-group">
<input class="form-control blank-pcb-x" style="width:48%; margin-right: 4%;" type="number" placeholder="X" value="0" step="1"/>
<input class="form-control blank-pcb-y" style="width:48%;" type="number" placeholder="Y" value="0" step="1"/>
</div>
Width
<div class="input-group">
<input class="form-control blank-pcb-width" type="number" placeholder="Width" value="150" min="20" step="10"/>
<div class="input-group-addon">mm</div>
</div>
Height
<div class="input-group" style="margin-bottom: 10px;">
<input class="form-control blank-pcb-height" type="number" placeholder="Height" value="100" min="20" step="10"/>
<div class="input-group-addon">mm</div>
</div>
Depth
<div class="input-group" style="margin-bottom: 10px;">
<input class="form-control blank-pcb-depth" type="number" placeholder="Depth" value="0.8" min="0.3" max="2" step="0.05"/>
<div class="input-group-addon">mm</div>
</div>
Padding (left, Botom)
<div class="input-group">
<div class="input-group" style="margin-bottom: 10px;">
<input class="form-control blank-pcb-padding-l" type="number" placeholder="Padding" value="2" min="0" step="0.1"/>
<div class="input-group-addon">mm</div>
<input class="form-control blank-pcb-padding-b" type="number" placeholder="Padding" value="2" min="0" step="0.1" style="margin-left: 8%;"/>
<div class="input-group-addon">mm</div>
</div>
</div>
Spacing
<div class="input-group" style="margin-bottom: 10px;">
<input class="form-control blank-pcb-spacing" type="number" placeholder="Spacing" value="4" min="0" step="1"/>
<div class="input-group-addon">mm</div>
</div>
<!-- ----------------------- RENDER:BOARD:REGISTRATION HOLES ------------------------>
<div class="checkbox" style="margin-bottom:0px;">
<label>
<input type="checkbox" class="form-group use-reg-holes" checked>
<h2 style="margin-top:10px; margin-bottom:0px;">Registration Holes</h2>
</label>
</div>
<p class="descriptive-text reg-holes-note" style="margin:0px; padding:0px; color:red">Check Blank FR4 Board to enable this feature.</p>
<p class="descriptive-text">
The following settings will generate Gcode to drill registration holes.
This will be a seperate Gcode file available in the textbox below.
The registration holes are useful when milling a board with multiple
layers or whenever there is a need to remove the board and put it
back in exactly the same location.</p>
Holes Pattern
<div class="form-group">
<select class="form-control" id="reg-holes-pattern">
<option value='400'>4 Hole on corners</option>
<option value='410' SELECTED>4 Hole on sides</option>
<option value='200'>2 Hole on corners BL/TR</option>
<option value='201'>2 Hole on corners TL/BR</option>
<option value='210'>2 Hole on sides T/B</option>
<option value='211'>2 Hole on sides L/R</option>
</select>
<p class="descriptive-text">T: Top, B: Bottom, L: Left, R: Right.</p>
</div>
Holes Diameter
<div class="input-group" style="margin-bottom: 10px;">
<input class="form-control reg-holes-diameter" type="number" placeholder="Diameter" value="1" min="0.6" max="4" step=".1"/>
<div class="input-group-addon">mm</div>
</div>
Distance from Edges
<div class="input-group" style="margin-bottom: 10px;">
<input class="form-control reg-holes-distance" type="number" placeholder="Distance" value="1" min="0.5" max="10" step=".5"/>
<div class="input-group-addon">mm</div>
</div>
<!-- ----------------------- RENDER:BOARD:REGISTRATION HOLES:GCODE ------------------------>
<h2 style="margin-top:10px;">Gcode Parameters</h2>
<p class="descriptive-text" style="padding-top: 0px;">Following Gcode parementers are used for drilling registration holes only.</p>
Depth for Drilling
<div class="input-group" style="margin-bottom: 10px;">
<input class="form-control reg-holes-depth" type="number" placeholder="Depth" value="-1.7" min="-20" max="-0.1" step="0.1"/>
<div class="input-group-addon">mm</div>
</div>
Clearance Height
<div class="input-group" style="margin-bottom: 10px;">
<input class="form-control reg-holes-clearance" type="number" placeholder="Clearance" value="2" min="0.5" step="0.5"/>
<div class="input-group-addon">mm</div>
</div>
Feedrate
<div class="input-group" style="margin-bottom: 10px;">
<input class="form-control reg-holes-feedrate" type="number" placeholder="Feed rate" value="200" min="20" step="100"/>
<div class="input-group-addon">mm/min</div>
</div>
Spindle Speed
<div class="input-group" style="margin-bottom: 10px;">
<input class="form-control reg-holes-spindle-rpm" type="number" placeholder="Speed" value="12000" min="3000" step="1000"/>
<div class="input-group-addon">rpm</div>
</div>
<button style="margin-bottom:4px;" type="button" class="btn btn-default reg-holes-sendgcodetows">Send Gcode to Workspace</button>
<textarea class="reg-holes-gcode" rows="3" spellcheck="false"></textarea>
</div>
</div>
<!-- CAM -->
<div class="tab-pane" id="com-chilipeppr-widget-pcb-tab-cam">
<p>This is the content of tab 3.</p>
</div>
</div>
</div>
<div class="com-chilipeppr-widget-pcb-info panel hidden">
<table class="table table-bordered table-striped table-condensed">
<tbody>
<tr>
<th colspan="2" class="info-title"></th>
</tr>
<tr class="row0">
<td class="title">0</td>
<td class="info">0</td>
</tr>
<tr class="row1">
<td class="title">1</td>
<td class="info">1</td>
</tr>
<tr class="row2">
<td class="title">2</td>
<td class="info">2</td>
</tr>
<tr class="row3">
<td class="title">3</td>
<td class="info">3</td>
</tr>
<tr class="row4">
<td class="title">4</td>
<td class="info">4</td>
</tr>
<tr class="row5">
<td class="title">5</td>
<td class="info">5</td>
</tr>
<tr class="row6">
<td class="title">6</td>
<td class="info">6</td>
</tr>
<tr>
<th colspan="2" class="info-footer"></th>
</tr>
</tbody>
</table>
</div>
<div id="edit-dimension" class="edit-popup">
<div class="edit-popup-content">
<div class="edit-popup-header">
<span class="edit-popup-close">×</span>
<h2>Modal Header</h2>
</div>
<div class="edit-popup-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="edit-popup-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
</div>
</body>
</html>