widget-super-touchplate/widget.html at master · PyroAVR/widget-super-touchplate · GitHub

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
<!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-super-touchplate" class="panel panel-default">
    <!--Title and collapse/fork dropdowns-->
    <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 lasersolder-on" data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover" data-title="Turn Laser On" data-content="laser-on"><span class="glyphicon glyphicon-fire"></span><span style="margin-left:-2px;opacity:0.5;" class="glyphicon glyphicon-ok"></span></button>
                  <button type="button" class="btn btn-xs btn-default lasersolder-off" data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover" data-title="Turn Laser Off" data-content="laser-off"><span style="opacity:0.5" class="glyphicon glyphicon-fire"></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">

            </ul>
          </div>
        </div>
      </div>
      <span class="panel-title" data-toggle="popover">Super Touch Plate</span> <span style="font-size:9px;" class="fb-build"></span>
    </div>
    <div>

      <!-- Nav tabs -->
      <ul class="nav nav-pills" role="tablist">
        <li role="presentation" class="active"><a href="#main" aria-controls="main" role="tab" data-toggle="tab">Controls</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
        <li role="presentation"><a href="#tutorial" aria-controls="tutorial" role="tab" data-toggle="tab">Tutorial</a></li>
      </ul>

    </div>
    <div class="panel-body">

      <!-- Tab panes -->
      <div class="tab-content">

        <!--Run buttons and cool animation-->
        <div role="tabpanel" class="tab-pane active" id="main">
          <div class="settings-overlay">
            <!-- <div style="position:absolute;border:1px solid green;height:100%;"> -->

            <p>
              <div class='container-fluid' style='padding-left:20%;padding-top:10%'>
                <div class='row' style='padding-bottom: 5%;'>
                  <button type="button" class="btn xbtn-xs btn-primary btn-Zplaterun" style="width:30%;">Run Z</button>
                </div>
                <div class='row' style='padding-bottom: 5%;'>
                  <button type="button" class="btn xbtn-xs btn-primary btn-Xplaterun" style="width:30%;">Run X</button>
                </div>
                <div class='row' style='padding-bottom: 5%;'>
                  <button type="button" class="btn xbtn-xs btn-primary btn-Yplaterun" style="width:30%;">Run Y</button>
                </div>
              </div>
            </p>
          </div>
        </div>


        <!--Coord. System, Touchplate dims-->
        <div role="tabpanel" class="tab-pane" id="settings">
          <div class="settings-overlay">
            <div class='container-fluid'>

              <div class='well'>

                <div class='container-fluid'>
                  <!--Row 1: Feedrate, Bit diam.-->
                  <div class='row'>

                    <div class='col-sm-6'>

                      <div style="display:table-col;">
                        <div style="text-align:left;">Feedrate to Probe</div>
                        <div class="input-group">
                          <input class="form-control frprobe" type="number" placeholder="0.00" value="25" />
                          <div id="fr" class="input-group-addon">mm/min</div>
                        </div>
                      </div>

                    </div>

                    <div class='col-sm-6'>

                      <div style="display:table-col;">
                        <div style="text-align:left;">Bit Diameter</div>
                        <div class="input-group">
                          <input class="form-control diameter" type="number" min="0" placeholder="0.00" value="3.175" />
                          <div class="input-group-addon">mm</div>
                        </div>
                      </div>

                    </div>

                  </div>

                  <!--Row 2: Coordinates, Units-->
                  <div class='row'>

                    <div class='col-xs-6'>

                      <div style="text-align:left;">Coordinate System</div>
                      <select style="width:100px;" class="input-small form-control coord-sel">
                    <option value="G53">G53</option>
                    <option value="G54">G54</option>
                    <option value="G55">G55</option>
                    <option value="G56">G56</option>
                    <option value="G57">G57</option>
                    <option value="G58">G58</option>
                    <option value="G59">G59</option>
                    <option value="G59.1">G59.1</option>
                    <option value="G59.2">G59.2</option>
                    <option value="G59.3">G59.3</option>
                    <option value="G92">G92</option> <!-- don't do this -->
                </select>

                    </div>

                    <div class='col-xs-6'>

                      <div style="text-align:left;">Units</div>
                      <select style="width:120px;" class="input-small form-control unit-sel">
                    <option value="G21">Millimeters</option>
                    <option value="G20">Inches</option>
                  </select>

                    </div>

                  </div>

                  <!--Row 3: Offsets-->
                  <div class='row'>

                    <div class='col-xs-4 nopadding'>

                      <div style="width:100%;display:table-col;">
                        <div style="text-align:right;">Plate width [X]</div>
                        <div class="input-group">
                          <input class="form-control widthplate" type="number" min="0" placeholder="0.00" value="1.75" />
                          <div class="input-group-addon">mm</div>
                        </div>
                      </div>

                    </div>

                    <div class='col-xs-4 nopadding'>

                      <div style="width:100%;display:table-col;">
                        <div style="text-align:right;">Plate length [Y]</div>
                        <div class="input-group">
                          <input class="form-control lengthplate" type="number" min="0" placeholder="0.00" value="1.75" />
                          <div class="input-group-addon">mm</div>
                        </div>
                      </div>

                    </div>

                    <div class='col-xs-4 nopadding'>

                      <div style="width:100%;display:table-col;">
                        <div style="text-align:right;">Plate height [Z]</div>
                        <div class="input-group">
                          <input class="form-control heightplate" type="number" min="0" placeholder="0.00" value="1.75" />
                          <div class="input-group-addon">mm</div>
                        </div>
                      </div>

                    </div>

                  </div>

                </div>

              </div>

            </div>


          </div>

        </div>

        <!--Link to tutorial video-->
        <div role="tabpanel" class="tab-pane" id="tutorial">
          <div class='settings-overlay'>
              <div class='well' style='text-align:center;'>

                <p>Not sure how to use this widget? A tutorial has been made to explain it!</p>
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#tutorialModal">Show Tutorial</button>

              </div>
            </div>

        </div>

      </div>
      <div class="panel-footer hidden">
        <textarea id="com-chilipeppr-widget-touchplate-status" class="widget-status form-control" rows="3"></textarea>
      </div>
    </div>
    <div id="test-serial-port"></div>
    <div id="test-tinyg"></div>
    <div id="test-console"></div>
    <div id="test-axes"></div>


    <!-- Modal -->
    <div class="modal fade" id="tutorialModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Tutorial Video</h4>
          </div>
          <div class="modal-body">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/selfqln0O4A" frameborder="0" allowfullscreen></iframe>
            <div>
              <h3>Changes</h3>
              <ul>
                <li>The widget is now composed of several tabs, all of which share the functionality of the previous version. It was unmanageably large with the new options without this layout.</li>
                <li>You can now set an offset in X and Y directions as well! This allows for error in touchplate construction!</li>
              </ul>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
</body>

</html>