add extruder selector

This commit is contained in:
Stewart Allen 2020-04-10 11:53:07 -04:00
commit e706bb3699
6 changed files with 114 additions and 29 deletions

View file

@ -157,16 +157,33 @@
<label class="label">depth:</label><label id="sel_depth" class="value">mm</label>
<label class="label">height:</label><label id="sel_height" class="value">mm</label>
&nbsp;&nbsp;
<label class="label">scale</label>
<label class="label">x</label><input id="scale_x" size="3" value="1"/>
<label class="label">y</label><input id="scale_y" size="3" value="1"/>
<label class="label">z</label><input id="scale_z" size="3" value="1"/>
<label class="label">uniform</label><input type="checkbox" id="scale_uni" checked>
<div class="sel-span">
<label class="label">scale</label>
<div id="sel-scale" class="sel-pop">
<div>
<label class="label">x</label><input id="scale_x" size="3" value="1"/>
<label class="label">y</label><input id="scale_y" size="3" value="1"/>
<label class="label">z</label><input id="scale_z" size="3" value="1"/>
<label class="label">uniform</label><input type="checkbox" id="scale_uni" checked>
</div>
</div>
</div>
&nbsp;&nbsp;
<label class="label">rotate</label>
<button id="x+" title="hold SHIFT to rotate 5 degrees">x+</button><button id="x-" title="hold SHIFT to rotate 5 degrees">x-</button>
<button id="y+" title="hold SHIFT to rotate 5 degrees">y+</button><button id="y-" title="hold SHIFT to rotate 5 degrees">y-</button>
<button id="z+" title="hold SHIFT to rotate 5 degrees">z+</button><button id="z-" title="hold SHIFT to rotate 5 degrees">z-</button>
<div class="sel-span">
<label class="label">rotate</label>
<div id="sel-rotate" class="sel-pop">
<div>
<button id="x+" title="hold SHIFT to rotate 5 degrees">x+</button><button id="x-" title="hold SHIFT to rotate 5 degrees">x-</button>
<button id="y+" title="hold SHIFT to rotate 5 degrees">y+</button><button id="y-" title="hold SHIFT to rotate 5 degrees">y-</button>
<button id="z+" title="hold SHIFT to rotate 5 degrees">z+</button><button id="z-" title="hold SHIFT to rotate 5 degrees">z-</button>
</div>
</div>
</div>
&nbsp;&nbsp;
<div class="sel-span">
<label class="label">extruder</label>
<div class="sel-pop"><div id="sel-ext"><div></div>
</div>
</span>
<span id="stock">
<label class="label">stock</label>

View file

@ -52,6 +52,26 @@ input[type=range]::-moz-focus-outer {
font-family: monospace;
white-space: pre;
}
.sel-span {
position: relative;
display: inline-block;
}
.sel-pop {
display: none;
position: absolute;
bottom: 100%;
left: 0;
padding-bottom: 5px;
}
.sel-pop div {
background-color: white;
border: 1px solid #aaa;
border-radius: 5px;
padding: 5px;
}
.sel-span:hover .sel-pop {
display: block;
}
#widget-info {
text-align: center;
position: fixed;
@ -64,9 +84,11 @@ input[type=range]::-moz-focus-outer {
padding: 3px 8px 8px 8px;
background-color: rgba(170,221,255,0.75);
color: rgba(0,0,0,0.5);
z-index: 10;
}
#widget-info label {
border: 0;
white-space: nowrap;
}
#widget-info .value {
font-weight: bold;