GitHub-Proxy/ESP3D
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/luc-github/ESP3D.git synced 2025-06-21 16:19:35 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
ESP3D/UI/testui.htm
luc lebosse c57695fba8 add missing highlight for fan/bed/ext1/ext2
2016-07-25 08:54:27 +02:00

841 lines
43 KiB
HTML
Raw Blame History

<HTML>
<HEAD>
<style type="text/css">
.sliderthumb{
position : absolute;
cursor : pointer;
}
.sliderrange{
cursor : pointer;
}
.extlist{
position : absolute;
cursor : pointer;
}
body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.hotspot{
cursor:pointer;
}
text.centerjog {
font-weight:600;
text-anchor:middle;
font-size:26;
font-family:sans-serif;
pointer-events:none;
}
text.home {
font-weight:800;
text-anchor:middle;
font-size:14;
font-family:sans-serif;
pointer-events:none;
}
text.positionbar {
font-weight:600;
text-anchor:middle;
font-size:16;
font-family:sans-serif;
pointer-events:none;
}
text.textpositionbar {
font-weight:400;
text-anchor:end;
font-size:12;
font-family:sans-serif;
pointer-events:none;
fill:#FF0000;
}
text.textbutton {
font-weight:400;
text-anchor:middle;
font-size:26;
font-family:sans-serif;
fill:#FFFFFF;
filter:url(#emboss);
pointer-events:none;
}
path.msk {
fill:#0052E1;
}
circle.bg2 {
stroke:#0D2F38;
fill:#B93D3D;
pointer-events:none;
stroke-width:0.5;
}
circle.bg ,
path.bg {
stroke:#0D2F38;
fill:#608B98;
pointer-events:none;
stroke-width:0.5;
}
rect.bg
{
stroke:#0D2F38;
fill:#608B98;
pointer-events:none;
stroke-width:1;
}
rect.bgpositionbar
{
stroke:#707070;
fill:#BCCED3;
pointer-events:none;
stroke-width:1;
}
path.sign{
pointer-events:none;
fill:#000000;
}
path.mskjog{
opacity:0;
fill:#0052E1;
}
</style>
</HEAD>
<BODY>
<script type="text/javascript">
function restore_x(e){
centerxytext.textContent='X/Y';
show_hide(e,0)
}
function changecolor(){
if (isDown)return;
var len = arguments.length;
if(len <2) return;
var color = arguments[len-1];
for(var i=0; i< len-1; i++)
{
arguments[i].style.fill=color;
}
}
function changestroke(){
if (isDown)return;
var len = arguments.length;
if(len <2) return;
var color = arguments[len-1];
for(var i=0; i< len-1; i++)
{
arguments[i].style.stroke=color;
}
}
function restore_z(e){
centerztext.textContent='Z';
show_hide(e,0);
}
function restore_e(e){
show_hide(extruder,1);
show_hide(centeretext,0);
show_hide(e,0);
}
function settext_e(text,e){
if (isDown)return;
show_hide(extruder,0);
centeretext.textContent=text;
show_hide(centeretext,1);
show_hide(e,0.5);
}
function show_hide(e,show){
e.style.opacity=show;
}
function settext_x(text,e){
if (isDown)return;
centerxytext.textContent=text;
show_hide(e,0.5)
}
function settext_z(text,e){
if (isDown)return;
centerztext.textContent=text;
show_hide(e,0.5);
}
var fan_on = 0;
var bed_on = 0;
var ext1_on = 0;
var ext2_on = 0;
//range functions
var offset = 0;
var isDown = false;
var active_control = null;
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
//position is based on screen position value
function movethumb(pos)
{
var p = pos + offset;
var minpos =0;
var maxpos = 0;
var minvalue =0;
var maxvalue = 100;
var value=0;
var rangeelement =null;
if (active_control.hasAttribute('customrange')){
rangeelement = document.getElementById(active_control.getAttribute('customrange'));
var r = rangeelement.getBoundingClientRect();
minpos = r.left;
maxpos = r.right;
if (rangeelement.hasAttribute('min')){
minvalue = parseFloat(rangeelement.getAttribute('min'))
}
if (rangeelement.hasAttribute('max')){
maxvalue = parseFloat(rangeelement.getAttribute('max'))
}
}
var r2 = active_control.getBoundingClientRect();
if ( p >maxpos - (r2.right-r2.left)) p = maxpos - (r2.right-r2.left);
if ( p <minpos) p =minpos ;
active_control.style.left = p+ 'px';
if (active_control.hasAttribute('render')){
value = (((p-minpos) * (maxvalue-minvalue))/((maxpos-minpos)- (r2.right-r2.left)))
document.getElementById(active_control.getAttribute('render')).value = Math.round(value + minvalue) ;
}
}
//position is based on range value
function movethumbat(thumbcursor, value){
var minvalue =0;
var maxvalue = 100;
var minpos =0;
var maxpos = 0;
var rangeelement =null;
if (thumbcursor.hasAttribute('customrange')){
rangeelement = document.getElementById(thumbcursor.getAttribute('customrange'));
var r = rangeelement.getBoundingClientRect();
minpos = r.left;
maxpos = r.right;
if (rangeelement.hasAttribute('min')){
minvalue = parseFloat(rangeelement.getAttribute('min'))
}
if (rangeelement.hasAttribute('max')){
maxvalue = parseFloat(rangeelement.getAttribute('max'))
}
}
if (value > maxvalue) value = maxvalue;
if (value < minvalue) value = minvalue;
var r2 = thumbcursor.getBoundingClientRect();
var pos=0;
pos = ((value-minvalue)*((maxpos-minpos)-(r2.right-r2.left))/(maxvalue-minvalue))+minpos;
thumbcursor.style.left = pos+ 'px';
if (thumbcursor.hasAttribute('render')){
document.getElementById(thumbcursor.getAttribute('render')).value =value;
}
}
document.addEventListener('mousemove', function(event) {
//event.preventDefault();
if (isDown) {
movethumb(event.clientX);
}
}, true);
function rangeclicked(event,element)
{
if (element.hasAttribute('customthumb')){
active_control = document.getElementById(element.getAttribute('customthumb'));
offset = 0;
movethumb(event.clientX);
}
}
function initthumb( element)
{
element.addEventListener('mousedown', function(e) {
isDown = true;
offset = element.offsetLeft - e.clientX;
active_control = this;
}, true);
if (element.hasAttribute('bgimage')){
element.innerHTML = element.getAttribute('bgimage');
}
if (element.hasAttribute('customrange')){
var r = document.getElementById(element.getAttribute('customrange')).getBoundingClientRect();
element.style.top = r.top;
element.style.left = r.left;
}
}
function initrange( element)
{
if (element.hasAttribute('bgimage')){
element.innerHTML = element.getAttribute('bgimage');
}
}
</script>
<div id="positionbar">
<svg width="440" height="30" xmlns="http://www.w3.org/2000/svg" version="1.1" >
<defs>
<filter id="light" >
<feGaussianBlur in="SourceAlpha"
stdDeviation="2"
result="out1" />
<feSpecularLighting in="out1"
surfaceScale="8"
specularConstant="2"
specularExponent="12"
result="out3">
<feDistantLight azimuth="225" elevation="5" />
</feSpecularLighting>
<feComposite operator="in" in="out3" in2="SourceAlpha" result="out4"/>
<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode in="out4"/>
</feMerge>
</filter>
<filter id="shadow" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha"
stdDeviation="2"
result="out1" />
<feOffset in="out1"
dx="2" dy="2"
result="out2" />
<feComposite in="SourceGraphic" in2="out2"
operator="over" />
</filter>
</defs>
<g id="posxtext">
<rect class="bg" x="0" y="0" width="107" height="27" filter="url(#shadow)"/>
<rect class="bg" x="0" y="0" width="107" height="27" opacity="0.7" filter="url(#light)"/>
<text x="13" y="19.5" class="positionbar">X</text>
<rect class="bgpositionbar" x="25" y="5.5" width="72" height="17" />
<text id="posx" x="95" y="19" class="textpositionbar">0.00</text>
</g>
<g id="posytext">
<rect class="bg" x="107" y="0" width="107" height="27" filter="url(#shadow)"/>
<rect class="bg" x="107" y="0" width="107" height="27" opacity="0.7" filter="url(#light)"/>
<text x="120" y="19.5" class="positionbar">Y</text>
<rect class="bgpositionbar" x="132" y="5.5" width="72" height="17" />
<text id="posy" x="202" y="19" class="textpositionbar">100.00</text>
</g>
<g id="posztext">
<rect class="bg" x="214" y="0" width="107" height="27" filter="url(#shadow)"/>
<rect class="bg" x="214" y="0" width="107" height="27" opacity="0.7" filter="url(#light)"/>
<text x="227" y="19.5" class="positionbar">Z</text>
<rect class="bgpositionbar" x="239" y="5.5" width="72" height="17" />
<text id="posz" x="309" y="19" class="textpositionbar">0.00</text>
</g>
<g id="posextruderlist">
<rect class="bg" x="321" y="0" width="107" height="27" filter="url(#shadow)"/>
<rect class="bg" x="321" y="0" width="107" height="27" opacity="0.7" filter="url(#light)"/>
</g>
</svg>
</div>
<div id="extruderlist" class="extlist">
<select id="activeextruder">
<option value="0" selected>Extruder 1</option>
<option value="1">Extruder 2</option>
</select>
</div>
<br>
<div id="jogPanel">
<svg width="440" height="230" xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 440 230">
<defs>
<filter id="light" >
<feGaussianBlur in="SourceAlpha"
stdDeviation="2"
result="out1" />
<feSpecularLighting in="out1"
surfaceScale="8"
specularConstant="2"
specularExponent="12"
result="out3">
<feDistantLight azimuth="225" elevation="5" />
</feSpecularLighting>
<feComposite operator="in" in="out3" in2="SourceAlpha" result="out4"/>
<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode in="out4"/>
</feMerge>
</filter>
<filter id="shadow" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha"
stdDeviation="2"
result="out1" />
<feOffset in="out1"
dx="2" dy="2"
result="out2" />
<feComposite in="SourceGraphic" in2="out2"
operator="over" />
</filter>
<filter id="emboss" x0="-50%" y0="-50%" width="200%" height="200%">
<feMorphology in="SourceAlpha" operator="dilate" radius="1"/>
<feGaussianBlur stdDeviation="1" result="blur"/>
<feOffset dy="0.2" dx="0.2"/>
<feComposite in2="SourceAlpha" operator="arithmetic"
k2="1" k3="-1" result="hlDiff"/>
<feFlood flood-color="white" flood-opacity=".7"/>
<feComposite in2="hlDiff" operator="in"/>
<feComposite in2="SourceGraphic" operator="over" result="withGlow"/>
<feOffset in="blur" dy="-0.2" dx="-0.2"/>
<feComposite in2="SourceAlpha" operator="arithmetic"
k2="1" k3="-1" result="shadowDiff"/>
<feFlood flood-color="black" flood-opacity="1"/>
<feComposite in2="shadowDiff" operator="in"/>
<feComposite in2="withGlow" operator="over"/>
</filter>
</defs>
<g id="Jog" transform="translate(0,-30)">
<g id="homeall" transform="translate(10,175)" onmouseup="alert('all');" onmouseover="changecolor(ha1,ha2,ha3,ha4,'#2F65FF');" onmouseout="changecolor(ha1,ha2,ha3,ha4,'#608B98');">
<circle cx='17' cy='17' r='18' fill='white' />
<path class="bg" id="ha1" d="M1,15 L14,2 L16,1 L18,1 L20,2 L23,5 L23,2 L24,1 L27,1 L28,2 L28,10 L33,15 L30,18 L19,7 L15,7 L4,18 z" filter="url(#shadow)"/>
<path class="bg" id="ha2" d="M1,15 L14,2 L16,1 L18,1 L20,2 L23,5 L23,2 L24,1 L27,1 L28,2 L28,10 L33,15 L30,18 L19,7 L15,7 L4,18 z" opacity='0.7' filter="url(#light)"/>
<path class="bg" id="ha3" d="M6,19 L16,9 L18,9 L28,19 L28,28 L6,28 z" filter="url(#shadow)"/>
<path class="bg" id="ha4" d="M6,19 L16,9 L18,9 L28,19 L28,28 L6,28 z" filter="url(#shadow)" opacity='0.7' filter="url(#light)"/>
</g>
<g id="homex" transform="translate(10,35)" onmouseup="alert('X');" onmouseover="changecolor(hx1,hx2,hx3,hx4,'#2F65FF');" onmouseout="changecolor(hx1,hx2,hx3,hx4,'#608B98');">
<circle cx='17' cy='17' r='18' fill='white' />
<path class="bg" id="hx1" d="M1,15 L14,2 L16,1 L18,1 L20,2 L23,5 L23,2 L24,1 L27,1 L28,2 L28,10 L33,15 L30,18 L19,7 L15,7 L4,18 z" filter="url(#shadow)"/>
<path class="bg" id="hx2" d="M1,15 L14,2 L16,1 L18,1 L20,2 L23,5 L23,2 L24,1 L27,1 L28,2 L28,10 L33,15 L30,18 L19,7 L15,7 L4,18 z" opacity='0.7' filter="url(#light)"/>
<path class="bg" id="hx3" d="M6,19 L16,9 L18,9 L28,19 L28,28 L6,28 z" filter="url(#shadow)"/>
<path class="bg" id="hx4" d="M6,19 L16,9 L18,9 L28,19 L28,28 L6,28 z" filter="url(#shadow)" opacity='0.7' filter="url(#light)"/>
<text x="17" y="26" class="home">X</text>
</g>
<g id="homey" transform="translate(159,35)" onmouseup="alert('y');" onmouseover="changecolor(hy1,hy2,hy3,hy4,'#2F65FF');" onmouseout="changecolor(hy1,hy2,hy3,hy4,'#608B98');">
<circle cx='17' cy='17' r='18' fill='white' />
<path class="bg" id="hy1" d="M1,15 L14,2 L16,1 L18,1 L20,2 L23,5 L23,2 L24,1 L27,1 L28,2 L28,10 L33,15 L30,18 L19,7 L15,7 L4,18 z" filter="url(#shadow)"/>
<path class="bg" id="hy2" d="M1,15 L14,2 L16,1 L18,1 L20,2 L23,5 L23,2 L24,1 L27,1 L28,2 L28,10 L33,15 L30,18 L19,7 L15,7 L4,18 z" opacity='0.7' filter="url(#light)"/>
<path class="bg" id="hy3" d="M6,19 L16,9 L18,9 L28,19 L28,28 L6,28 z" filter="url(#shadow)"/>
<path class="bg" id="hy4" d="M6,19 L16,9 L18,9 L28,19 L28,28 L6,28 z" filter="url(#shadow)" opacity='0.7' filter="url(#light)"/>
<text x="17" y="26" class="home">Y</text>
</g>
<g id="homez" transform="translate(159,175)" onmouseup="alert('z');" onmouseover="changecolor(hz1,hz2,hz3,hz4,'#2F65FF');" onmouseout="changecolor(hz1,hz2,hz3,hz4,'#608B98');">
<circle cx='17' cy='17' r='18' fill='white' />
<path class="bg" id="hz1" d="M1,15 L14,2 L16,1 L18,1 L20,2 L23,5 L23,2 L24,1 L27,1 L28,2 L28,10 L33,15 L30,18 L19,7 L15,7 L4,18 z" filter="url(#shadow)"/>
<path class="bg" id="hz2" d="M1,15 L14,2 L16,1 L18,1 L20,2 L23,5 L23,2 L24,1 L27,1 L28,2 L28,10 L33,15 L30,18 L19,7 L15,7 L4,18 z" opacity='0.7' filter="url(#light)"/>
<path class="bg" id="hz3" d="M6,19 L16,9 L18,9 L28,19 L28,28 L6,28 z" filter="url(#shadow)"/>
<path class="bg" id="hz4" d="M6,19 L16,9 L18,9 L28,19 L28,28 L6,28 z" filter="url(#shadow)" opacity='0.7' filter="url(#light)"/>
<text x="17" y="26" class="home">Z</text>
</g>
<g id="topxy">
<path class="bg" d="M48,70 A 74,74 0 0,1 154,70 L126,98 A 35,35 0 0 0 76,98 z" filter="url(#shadow)" />
<path class="bg" d="M48,70 A 74,74 0 0,1 154,70 L126,98 A 35,35 0 0 0 76,98 z" opacity='0.7' filter="url(#light)"/>
<path onmouseup="alert(1);" onmouseover="settext_x('50',this);" onmouseout="restore_x(this);" class="mskjog" d="M48,70 A 74,74 0 0,1 154,70 L126,98 A 35,35 0 0 0 76,98 z" />
<path onmouseup="alert(2);" onmouseover="settext_x('10',this);" onmouseout="restore_x(this);" class="mskjog" d="M55,77 A 64,64 0 0,1 147,77 L126,98 A 35,35 0 0 0 76,98 z" />
<path onmouseup="alert(3);" onmouseover="settext_x('1',this);" onmouseout="restore_x(this);" class="mskjog" d="M62,84 A 54,54 0 0,1 140,84 L126,98 A 35,35 0 0 0 76,98 z" />
<path onmouseup="alert(4);" onmouseover="settext_x('0,1',this);" onmouseout="restore_x(this);" class="mskjog" d="M69,91 A 44,44 0 0,1 133,91 L126,98 A 35,35 0 0 0 76,98 z"/>
<path class='sign' d="M101,58 L112,76 L90,76 z" />
</g>
<g id="rightxy">
<path class="bg" d="M154,70 A 74,74 0 0,1 154,174 L126,146 A 35,35 0 0 0 126,98 z" filter="url(#shadow)"/>
<path class="bg" d="M154,70 A 74,74 0 0,1 154,174 L126,146 A 35,35 0 0 0 126,98 z" opacity=0.7 filter="url(#light)"/>
<path onmouseup="alert(13);" onmouseover="settext_x('50',this);" onmouseout="restore_x(this);" class="mskjog" d="M154,70 A 74,74 0 0,1 154,174 L126,146 A 35,35 0 0 0 126,98 z"/>
<path onmouseup="alert(14);" onmouseover="settext_x('10',this);" onmouseout="restore_x(this);" class="mskjog" d="M147,77 A 64,64 0 0,1 147,167 L126,146 A 35,35 0 0 0 126,98 z"/>
<path onmouseup="alert(15);" onmouseover="settext_x('1',this);" onmouseout="restore_x(this);" class="mskjog" d="M140,84 A 54,54 0 0,1 140,160 L126,146 A 35,35 0 0 0 126,98 z"/>
<path onmouseup="alert(16);" onmouseover="settext_x('0,1',this);" onmouseout="restore_x(this);" class="mskjog" d="M133,91 A 44,44 0 0,1 133,153 L126,146 A 35,35 0 0 0 126,98 z"/>
<path class='sign' d="M165,122 L148,112 L148,132 z" />
</g>
<g id="bottomxy">
<path class="bg" d="M48,174 A 74,74 0 0,0 154,174 L126,146 A 35,35 0 0 1 76,146 z" filter="url(#shadow)"/>
<path class="bg" d="M48,174 A 74,74 0 0,0 154,174 L126,146 A 35,35 0 0 1 76,146 z" opacity='0.7' filter="url(#light)"/>
<path onmouseup="alert(8);" onmouseover="settext_x('-50',this);" onmouseout="restore_x(this);" class="mskjog" d="M48,174 A 74,74 0 0,0 154,174 L126,146 A 35,35 0 0 1 76,146 z" />
<path onmouseup="alert(7);" onmouseover="settext_x('-10',this);" onmouseout="restore_x(this);" class="mskjog" d="M55,167 A 64,64 0 0,0 147,167 L126,146 A 35,35 0 0 1 76,146 z" />
<path onmouseup="alert(6);" onmouseover="settext_x('-1',this);" onmouseout="restore_x(this);" class="mskjog" d="M62,160 A 54,54 0 0,0 140,160 L126,146 A 35,35 0 0 1 76,146 z" />
<path onmouseup="alert(5);" onmouseover="settext_x('-0,1',this);" onmouseout="restore_x(this);" class="mskjog" d="M69,153 A 44,44 0 0,0 133,153 L126,146 A 35,35 0 0 1 76,146 z" />
<path class='sign' d="M101,186 L112,168 L90,168 z" />
</g>
<g id="leftxy">
<path class="bg" d="M48,174 A 74,74 0 0,1 48,70 L76,98 A 35,35 0 0 0 76,146 z"/>
<path class="bg" d="M48,174 A 74,74 0 0,1 48,70 L76,98 A 35,35 0 0 0 76,146 z" opacity='0.7' filter="url(#light)"/>
<path onmouseup="alert(9);" onmouseover="settext_x('-50',this);" onmouseout="restore_x(this);" class="mskjog" d="M48,174 A 74,74 0 0,1 48,70 L76,98 A 35,35 0 0 0 76,146 z" />
<path onmouseup="alert(10);" onmouseover="settext_x('-10',this);" onmouseout="restore_x(this);" class="mskjog" d="M55,167 A 64,64 0 0,1 55,77 L76,98 A 35,35 0 0 0 76,146 z" />
<path onmouseup="alert(11);" onmouseover="settext_x('-1',this);" onmouseout="restore_x(this);" class="mskjog" d="M62,160 A 54,54 0 0,1 62,84 L76,98 A 35,35 0 0 0 76,146 z" />
<path onmouseup="alert(12);" onmouseover="settext_x('-0,1',this);" onmouseout="restore_x(this);" class="mskjog" d="M69,153 A 44,44 0 0,1 69,91 L76,98 A 35,35 0 0 0 76,146 z" />
<path class='sign' d="M37,122 L54,112 L54,132 z" />
</g>
<g id=''centerxy">
<circle class="bg" cx="101" cy="122" r="34" " />
<circle class="bg" cx="101" cy="122" r="34" opacity='0.7' filter="url(#light)"/>
<text id="centerxytext" class="centerjog" x="101" y="132">X/Y</text>
</g>
<g id="topz">
<path class="bg" d="M214,56 A 74,74 0 0,1 288,56 L268,92 A 35,35 0 0 0 234,92 z" filter="url(#shadow)"/>
<path class="bg" d="M214,56 A 74,74 0 0,1 288,56 L268,92 A 35,35 0 0 0 234,92 z" opacity='0.7' filter="url(#light)"/>
<path onmouseup="alert(17);" onmouseover="settext_z('10',this);" onmouseout="restore_z(this);" class="mskjog" d="M214,56 A 74,74 0 0,1 288,56 L268,92 A 35,35 0 0 0 234,92 z" />
<path onmouseup="alert(18);" onmouseover="settext_z('1',this);" onmouseout="restore_z(this);" class="mskjog" d="M219,65 A 64,64 0 0,1 283,65 L268,92 A 35,35 0 0 0 234,92 z" />
<path onmouseup="alert(19);" onmouseover="settext_z('0,1',this);" onmouseout="restore_z(this);" class="mskjog" d="M224,74 A 54,54 0 0,1 278,74 L268,92 A 35,35 0 0 0 234,92 z" />
<path onmouseup="alert(20);" onmouseover="settext_z('0,01',this);" onmouseout="restore_z(this);" class="mskjog" d="M229,83 A 44,44 0 0,1 273,83 L268,92 A 35,35 0 0 0 234,92 z" />
<path class='sign' d="M251,58 L262,76 L240,76 z" />
</g>
<g id=''centerz">
<circle class="bg" cx="251" cy="122" r="34" filter="url(#shadow)" />
<circle class="bg" cx="251" cy="122" r="34" opacity='0.7' filter="url(#light)"/>
<text id="centerztext" class="centerjog" x="251" y="132">Z</text>
</g>
<g id="bottomz">
<path class="bg" d="M214,188 A 75,75 0 0,0 288,188 L268,152 A 36,36 0 0 1 234,152 z" filter="url(#shadow)"/>
<path class="bg" d="M214,188 A 75,75 0 0,0 288,188 L268,152 A 36,36 0 0 1 234,152 z" opacity='0.7' filter="url(#light)"/>
<path onmouseup="alert(21);" onmouseover="settext_z('-10',this);" onmouseout="restore_z(this);" class="mskjog" d="M214,188 A 74,74 0 0,0 288,188 L268,152 A 35,35 0 0 1 234,152 z" />
<path onmouseup="alert(22);" onmouseover="settext_z('-1',this);" onmouseout="restore_z(this);" class="mskjog" d="M219,179 A 64,64 0 0,0 283,179 L268,152 A 35,35 0 0 1 234,152 z" />
<path onmouseup="alert(23);" onmouseover="settext_z('-0,1',this);" onmouseout="restore_z(this);" class="mskjog" d="M224,170 A 54,54 0 0,0 278,170 L268,152 A 35,35 0 0 1 234,152 z" />
<path onmouseup="alert(24);" onmouseover="settext_z('-0,01',this);" onmouseout="restore_z(this);" class="mskjog" d="M229,161 A 44,44 0 0,0 273,161 L268,152 A 35,35 0 0 1 234,152 z" />
<path class='sign' d="M251,186 L262,168 L240,168 z"/>
</g>
<g id="tope">
<path class="bg" d="M317,56 A 74,74 0 0,1 391,56 L371,92 A 35,35 0 0 0 337,92 z" filter="url(#shadow)"/>
<path class="bg" d="M317,56 A 74,74 0 0,1 391,56 L371,92 A 35,35 0 0 0 337,92 z" opacity='0.7' filter="url(#light)"/>
<path onmouseup="alert(25);" onmouseover="settext_e('-100',this);" onmouseout="restore_e(this);" class="mskjog" d="M317,56 A 74,74 0 0,1 391,56 L371,92 A 35,35 0 0 0 337,92 z" />
<path onmouseup="alert(26);" onmouseover="settext_e('-50',this);" onmouseout="restore_e(this);" class="mskjog" d="M322,65 A 64,64 0 0,1 385,65 L371,92 A 35,35 0 0 0 337,92 z" />
<path onmouseup="alert(27);" onmouseover="settext_e('-10',this);" onmouseout="restore_e(this);" class="mskjog" d="M327,74 A 54,54 0 0,1 381,74 L371,92 A 35,35 0 0 0 337,92 z" />
<path onmouseup="alert(28);" onmouseover="settext_e('-1',this);" onmouseout="restore_e(this);" class="mskjog" d="M332,83 A 44,44 0 0,1 376,83 L371,92 A 35,35 0 0 0 337,92 z" />
<path class='sign' d="M354,58 L365,76 L343,76 z" />
</g>
<g id=''centerze">
<circle class="bg" cx="354" cy="122" r="34" filter="url(#shadow)" />
<circle class="bg" cx="354" cy="122" r="34" class="bg" opacity='0.7' filter="url(#light)" />
<text id="centeretext" class="centerjog" x="353" y="132" opacity="0">Z</text>
<g id="extruder">
<path class='sign' d="M350,108 L360,108 L360,128 L355,136 L350,128 z"/>
<path class='sign' d="M335,110 L338,109 L340,111 L341,111 L343,109 L346,110 L346,113 L349,113 L350,116 L348,118 L348,119 L350,121 L349,124 L346,124 L346,127 L343,128 L341,126 L340,126 L338,128 L335,127 L335,124 L332,124 L331,121 L333,119 L333,118 L331,116 L332,113 L335,113 z"/>
<circle cx="340.5" cy="118.5" r="3.5" fill="#608B98" />
</g>
</g>
<g id="bottome2">
<path class="bg"d="M317,188 A 74,74 0 0,0 354,197 L354,156.5 A 35,35 0 0 1 337,152 z" filter="url(#shadow)"/>
<path class="bg" d="M317,188 A 74,74 0 0,0 354,197 L354,156.5 A 35,35 0 0 1 337,152 z" opacity='0.7' filter="url(#light)" />
<path onmouseup="alert(29);" onmouseover="settext_e('100',this);" onmouseout="restore_e(this);" class="mskjog" d="M317,188 A 74,74 0 0,0 354,197 L354,156.5 A 35,35 0 0 1 337,152 z"/>
<path onmouseup="alert(30);" onmouseover="settext_e('50',this);" onmouseout="restore_e(this);" class="mskjog" d="M322,179 A 64,64 0 0,0 354,187 L354,156.5 A 35,35 0 0 1 337,152 z" />
<path onmouseup="alert(31);" onmouseover="settext_e('10',this);" onmouseout="restore_e(this);" class="mskjog" d="M327,170 A 54,54 0 0,0 354,177 L354,156.5 A 35,35 0 0 1 337,152 z" />
<path onmouseup="alert(32);" onmouseover="settext_e('1',this);" onmouseout="restore_e(this);" class="mskjog" d="M332,161 A 44,44 0 0,0 354,167 L354,156.5 A 35,35 0 0 1 337,152 z" />
<path class='sign' d="M337,171 L347,174 L339.5,182 z"/>
</g>
<g id="bottome1">
<path class="bg" d="M354,197 A 74,74 0 0,0 391,188 L371,152 A 35,35 0 0 1 354,156.5 z" filter="url(#shadow)"/>
<path class="bg" d="M354,197 A 74,74 0 0,0 391,188 L371,152 A 35,35 0 0 1 354,156.5 z" opacity='0.7' filter="url(#light)" />
<path onmouseup="alert(33);" onmouseover="settext_e('100',this);" onmouseout="restore_e(this);" class="mskjog" d="M354,197 A 74,74 0 0,0 391,188 L371,152 A 35,35 0 0 1 354,156.5 z"/>
<path onmouseup="alert(34);" onmouseover="settext_e('50',this);" onmouseout="restore_e(this);" class="mskjog" d="M354,187 A 64,64 0 0,0 386,179 L371,152 A 35,35 0 0 1 354,156.5 z" />
<path onmouseup="alert(35);" onmouseover="settext_e('10',this);" onmouseout="restore_e(this);" class="mskjog" d="M354,177 A 54,54 0 0,0 381,170 L371,152 A 35,35 0 0 1 354,156.5 z" />
<path onmouseup="alert(36);" onmouseover="settext_e('1',this);" onmouseout="restore_e(this);" class="mskjog" d="M354,167 A 54,54 0 0,0 376,161 L371,152 A 35,35 0 0 1 354,156.5 z" />
<path class='sign' d="M361,170 L372,167 L369.5,178 z"/>
<path class='sign' d="M364,180 L375,177 L372,188 z"/>
</g>
<g id="poweroff" transform="translate(11,220)" onmouseup="alert('power');" onmouseover="changecolor(poweroff1,poweroff2,poweroff3,poweroff4,'#2F65FF');" onmouseout="changecolor(poweroff1,poweroff2,poweroff3,poweroff4,'#608B98');">
<circle cx='17' cy='18' r='16' fill='white' />
<path id="poweroff1" class="bg" d="M8,6 A15 15 0 1 0 26,6 A 3,3 0 0 0 22,10 A 10,10 0 1 1 12,10 A 3,3 0 0 0 8,6z" filter="url(#shadow)"/>
<path id="poweroff2" class="bg" d="M8,6 A15 15 0 1 0 26,6 A 3,3 0 0 0 22,10 A 10,10 0 1 1 12,10 A 3,3 0 0 0 8,6z" opacity='0.7' filter="url(#light)"/>
<path id="poweroff3" class="bg" d="M14,2 A4,4 0 0 1 20,2 L20,15 A4,4 0 0 1 14,15z" filter="url(#shadow)" />
<path id="poweroff4" class="bg" d="M14,2 A4,4 0 0 1 20,2 L20,15 A4,4 0 0 1 14,15z" opacity='0.7' filter="url(#light)" />
</g>
<g id="button_M" transform="translate(56,220)" onmouseup="alert('Button M');" onmouseover="changecolor(buttonM1,buttonM2,buttonM3,buttonM4,buttonM5,buttonM6,'#2F65FF');" onmouseout="changecolor(buttonM1,buttonM2,buttonM3,buttonM4,buttonM5,buttonM6,'#608B98');">
<circle cx='17' cy='18' r='16' fill='white' />
<circle id="buttonM1" class='bg' cx="16" cy="16" r="15" filter="url(#shadow)"/>
<circle id="buttonM2" class='bg' cx="16" cy="16" r="15" opacity='0.7' filter="url(#light)"/>
<circle cx="16" cy="16" r="12" fill="white" stroke="#0D2F38"/>
<path id="buttonM3" class="bg" d="M5,15 L9,15 L9,12 L11,10 L24,10 L25,11 L25,21 L24,22 L11,22 L9,20 L9,17 L5,17 z" />
<path id="buttonM4" class="bg" d="M5,15 L9,15 L9,12 L11,10 L24,10 L25,11 L25,21 L24,22 L11,22 L9,20 L9,17 L5,17 z" opacity='0.7' filter="url(#light)"/>
<rect x="13" y="13" width="10" height="1" fill="white" stroke="none"/>
<rect x="12" y="16" width="11" height="1" fill="white" stroke="none"/>
<rect x="13" y="19" width="10" height="1" fill="white" stroke="none"/>
<path id="buttonM5" d="M24,4 L4,24 L7,27 L27,7 z" fill="#608B98" stroke="none" />
<path id="buttonM6" d="M24,4 L4,24 L7,27 L27,7 z" fill="#608B98" stroke="none" opacity='0.7' filter="url(#light)"/>
<line x1="22" y1="6" x2="6" y2="22" stroke="#0D2F38" />
<line x1="8" y1="25.5" x2="25.5" y2="8" stroke="#0D2F38" />
</g>
<g id="button_P" transform="translate(101,220)" onmouseup="alert('Button P');" onmouseover="changecolor(buttonP1,buttonP2,'#2F65FF');" onmouseout="changecolor(buttonP1,buttonP2,'#608B98');">
<circle cx='17' cy='18' r='16' fill='white' />
<circle id="buttonP1" class='bg' cx="16" cy="16" r="15" filter="url(#shadow)"/>
<circle id="buttonP2" class='bg' cx="16" cy="16" r="15" opacity='0.7' filter="url(#light)" />
<text class="textbutton" x="16" y="26" filter="url(#emboss)">P</text>
</g>
<g id="button_1" transform="translate(146,220)" onmouseup="alert('Button 1');" onmouseover="changecolor(button11,button12,'#2F65FF');" onmouseout="changecolor(button11,button12,'#608B98');">
<circle cx='17' cy='18' r='16' fill='white' />
<circle id="button11" class='bg' cx="16" cy="16" r="15" filter="url(#shadow)"/>
<circle id="button12" class='bg' cx="16" cy="16" r="15" opacity='0.7' filter="url(#light)" />
<text class="textbutton" x="16" y="26" filter="url(#emboss)">1</text>
</g>
<g id="button_2" transform="translate(191,220)" onmouseup="alert('Button 2');" onmouseover="changecolor(button21,button22,'#2F65FF');" onmouseout="changecolor(button21,button22,'#608B98');">
<circle cx='17' cy='18' r='16' fill='white' />
<circle id="button21" class='bg' cx="16" cy="16" r="15" filter="url(#shadow)"/>
<circle id="button22"class='bg' cx="16" cy="16" r="15" opacity='0.7' filter="url(#light)" />
<text class="textbutton" x="16" y="26" filter="url(#emboss)">2</text>
</g>
<g id="button_3" transform="translate(236,220)" onmouseup="alert('Button 3');" onmouseover="changecolor(button31,button32,'#2F65FF');" onmouseout="changecolor(button31,button32,'#608B98');">
<circle cx='17' cy='18' r='16' fill='white' />
<circle id="button31" class='bg' cx="16" cy="16" r="15" filter="url(#shadow)"/>
<circle id="button32" class='bg' cx="16" cy="16" r="15" opacity='0.7' filter="url(#light)" />
<text class="textbutton" x="16" y="26" filter="url(#emboss)">3</text>
</g>
<g id="button_4" transform="translate(281,220)" onmouseup="alert('Button 4');" onmouseover="changecolor(button41,button42,'#2F65FF');" onmouseout="changecolor(button41,button42,'#608B98');">
<circle cx='17' cy='18' r='16' fill='white' />
<circle id="button41" class='bg' cx="16" cy="16" r="15" filter="url(#shadow)"/>
<circle id="button42" class='bg' cx="16" cy="16" r="15" opacity='0.7' filter="url(#light)" />
<text class="textbutton" x="16" y="26" filter="url(#emboss)">4</text>
</g>
<g id="button_5" transform="translate(326,220)" onmouseup="alert('Button 5');" onmouseover="changecolor(button51,button52,'#2F65FF');" onmouseout="changecolor(button51,button52,'#608B98');">
<circle cx='17' cy='18' r='16' fill='white' />
<circle id="button51" class='bg' cx="16" cy="16" r="15" filter="url(#shadow)"/>
<circle id="button52" class='bg' cx="16" cy="16" r="15" opacity='0.7' filter="url(#light)" />
<text class="textbutton" x="16" y="26" filter="url(#emboss)">5</text>
</g>
<g id="button_Q" transform="translate(371,220)" onmouseup="alert('Button Q');" onmouseover="changecolor(buttonQ1,buttonQ2,'#2F65FF');" onmouseout="changecolor(buttonQ1,buttonQ2,'#B93D3D');">
<circle cx='17' cy='18' r='16' fill='white' />
<circle id="buttonQ1" class='bg2' cx="16" cy="16" r="15" filter="url(#shadow)"/>
<circle id="buttonQ2" class='bg2' cx="16" cy="16" r="15" opacity='0.7' filter="url(#light)" />
<text class="textbutton" x="16" y="26" filter="url(#emboss)">?</text>
</g>
</g>
</svg>
</div>
<br>
<div style='margin-left: 0cm;' >
<table style='border-spacing: 5px'>
<tr ><td width='auto' align='middle'>
<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 300 300">
<defs>
<filter id="blurMe"><feGaussianBlur in="SourceGraphic" stdDeviation="6" /></filter>
</defs>
<circle cx="263" cy="38" r="32" />
<path d="M150,176 L55,279 A 12,12 0 0 1 36,258 L186,72 L162,50 L123,91 A 9,9 0 0 1 109,74 L145,28 A 20,20 0 0 1 171,22 L229,70 A 20,20 0 0 1 230,81 L230,140 L272,143 A 8,8 0 0 1 274,167 L221,165 A 20,20 0 0 1 205,149 L205,96 L168,144 L231,207 A 20,20 0 0 1 225,234 L132,258 A 9,9 0 0 1 126,231 L188,211 z " />
<rect x="7" y="39" width="125" rx="6" ry="6" height="12" fill ="#656565" stroke-width='12' opacity="0.7" filter="url(#blurMe)"/>
<rect x="70" y="76" width="30" rx="6" ry="6" height="12" fill ="#656565" stroke-width='12' opacity="0.7" filter="url(#blurMe)"/>
<rect x="24" y="130" width="110" rx="6" ry="6" height="12" fill ="#656565" stroke-width='12' opacity="0.7" filter="url(#blurMe)"/>
<rect x="66" y="148" width="50" rx="6" ry="6" height="12" fill ="#656565" stroke-width='12' opacity="0.7" filter="url(#blurMe)"/>
<rect x="8" y="172" width="90" rx="6" ry="6" height="12" fill ="#656565" stroke-width='12' opacity="0.7" filter="url(#blurMe)"/>
</svg></td>
<td width='auto' >
<div id='rangefeedrate' min="25" max="300" class='sliderrange' onclick ="rangeclicked(event,this);" customthumb='thumbfeedrate'>
<svg width='322' height='20' viewbox='0 0 322 20'>
<defs>
<pattern id='basicPattern' x='10' y='0' width='4' height='20' patternUnits='userSpaceOnUse'>
<rect x='0' y='0' width='4' height='20' stroke-width='0.2' stroke= '#0D2F38' fill='#77AEBD'/ >
</pattern>
</defs>
<rect x='1' y='4' width='320' height='12' stroke= '#0D2F38' stroke-width='1' rx='6' ry='6' fill='url(#basicPattern)'/>
<text x='13' y='14' style='font-weight:600;font-size:10;font-family:sans-serif;fill:#000000; pointer-events:none;'>Feedrate</text>
</svg>
</div>
<div id='thumbfeedrate' class='sliderthumb' render='feedraterender' customrange='rangefeedrate'>
<svg width='8' height='20' viewbox='0 0 8 20'><path d='M 3.5,0 L7,5 L7,14 L3.5,19 L0,14 L0,5 z' /></svg>
</div>
</td><td width='auto'><input id='feedraterender' type='number' min='25' max='300' step='1' style='width: 4em;' onchange='movethumbat(thumbfeedrate, this.value);'/></td></tr>
<tr style='margin-top: 50px'><td align='middle'>
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x='2' y='2' width='3' height='10' />
<rect x='8' y='4' width='3' height='8' />
<rect x='14' y='6' width='3' height='6' />
<rect x='20' y='8' width='3' height='4' />
<path d="M2,17 L18,17 L18,14 L23,18.5 L18,23 L18,20 L2,20 z" />
</svg>
</td><td width='auto' >
<div id='rangeflowrate' min="50" max="150" class='sliderrange' onclick ="rangeclicked(event,this);" customthumb='thumbflowrate'>
<svg width='322' height='20' viewbox='0 0 322 20'>
<defs>
<pattern id='basicPattern' x='10' y='0' width='4' height='20' patternUnits='userSpaceOnUse'>
<rect x='0' y='0' width='4' height='20' stroke-width='0.2' stroke= '#0D2F38' fill='#77AEBD'/ >
</pattern>
</defs>
<rect x='1' y='4' width='320' height='12' stroke= '#0D2F38' stroke-width='1' rx='6' ry='6' fill='url(#basicPattern)'/>
<text x='13' y='14' style='font-weight:600;font-size:10;font-family:sans-serif;fill:#000000; pointer-events:none;'>Flowrate</text>
</svg>
</div>
<div id='thumbflowrate' class='sliderthumb' render='flowraterender' customrange='rangeflowrate' ><svg width='8' height='20' viewbox='0 0 8 20'><path d='M 3.5,0 L7,5 L7,14 L3.5,19 L0,14 L0,5 z' /></div>
</td><td width='auto'><input id='flowraterender' min='50' max='150' step='1' type='number' style='width: 4em;' onchange='movethumbat(thumbflowrate, this.value);'></td></tr>
<tr><td align='middle'>
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g id='fan' onmouseup="fan_on = fan_on===0?1:0; show_hide(red_fan,fan_on);" class='hotspot' onmouseover="changecolor(f1,'#0052E1');" onmouseout="changecolor(f1,'#000000');">
<rect x='0' y='0' width='24' height='24' fill='#FFFFFF'/>
<path id='f1' d="M10,11 L10,10 L6,10 A 7,5 0 0 1 7,1 L8,1 A 3,2.5 0 0 1 9,5 L9,9 L10,9 L10,10 L12,10 L12,6 A 5,7 0 0 1 21,7 L21,8 A 2.5,3 0 0 1 17,9 L13,9 L13,10 L12,10 L12,12 L16,12 A 7,5 0 0 1 15,21 L14,21 A 3,2.5 0 0 1 13,17 L13,13 L12,13 L12,12 L10,12 L10,16 A 5,7 0 0 1 1,15 L1,14 A 2.5,3 0 0 1 5,13 L9,13 L9,12 10,12 z" />
<polygon id='red_fan' points="19,0 21,2 2,21 0,19" fill="#FF0000" stroke="#FFFFFF" opacity='0'/>
</g>
</svg>
</td><td>
<div id='rangefanspeed' min="0" max="100" class='sliderrange' onclick ="rangeclicked(event,this);" customthumb='thumbfanspeed'>
<svg width='322' height='20' viewbox='0 0 322 20'>
<defs>
<pattern id='basicPattern' x='10' y='0' width='4' height='20' patternUnits='userSpaceOnUse'>
<rect x='0' y='0' width='4' height='20' stroke-width='0.2' stroke= '#0D2F38' fill='#77AEBD'/ >
</pattern>
</defs>
<rect x='1' y='4' width='320' height='12' stroke= '#0D2F38' stroke-width='1' rx='6' ry='6' fill='url(#basicPattern)'/>
<text x='13' y='14' style='font-weight:600;font-size:10;font-family:sans-serif;fill:#000000; pointer-events:none;'>Fan</text>
</svg>
</div>
<div id='thumbfanspeed' class='sliderthumb' render='fanspeedrender' customrange='rangefanspeed' >
<svg width='8' height='20' viewbox='0 0 8 20'><path d='M 3.5,0 L7,5 L7,14 L3.5,19 L0,14 L0,5 z' /></svg>
</div>
</td><td width='auto'><input type='number' id='fanspeedrender' min='0' max='100' step='1' style='width: 4em;' onchange='movethumbat(thumbfanspeed, this.value);'></td></tr>
<tr><td>
<svg width="29" height="25" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g id='bed' onmouseup="bed_on = bed_on===0?1:0; show_hide(red_bed,bed_on);" class='hotspot' onmouseover="changestroke(b1,b2,b3,b4,b5,'#0052E1'); " onmouseout="changestroke(b1,b2,b3,b4,b5,'#000000');">
<rect x='0' y='0' width='24' height='24' fill='#FFFFFF'/>
<polygon id='b1' points="5,0 24,0 28,19 1,19" fill="none" stroke="#000000" stroke-width='2'/>
<line id='b2' x1="11" y1="0" x2="10" y2="19" stroke="#000000" stroke-width='2' />
<line id='b3' x1="18" y1="0" x2="19" y2="19" stroke="#000000" stroke-width='2' />
<line id='b4' x1="3" y1="13" x2="26" y2="13" stroke="#000000" stroke-width='2' />
<line id='b5' x1="4" y1="6" x2="25" y2="6" stroke="#000000" stroke-width='2' />
<polygon id='red_bed' points="21,0 23,2 4,21 2,19" fill="#FF0000" stroke="#FFFFFF" opacity='0'/>
</g>
</svg>
</td><td >
<div id='rangebed' min='0' max='150' class='sliderrange' onclick ='rangeclicked(event,this);' customthumb='thumbbed'>
<svg width='322' height='22' viewbox='0 0 322 22'>
<defs>
<linearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#0007FE;stop-opacity:1' />
<stop offset='100%' style='stop-color:#00FAFE;stop-opacity:1' /></linearGradient>
<linearGradient id='grad2' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#00FAFE;stop-opacity:1' />
<stop offset='100%' style='stop-color:#00FF00;stop-opacity:1' /></linearGradient>
<linearGradient id='grad3' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#00FF00;stop-opacity:1' />
<stop offset='100%' style='stop-color:#FAFD00;stop-opacity:1' /></linearGradient>
<linearGradient id='grad4' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#FAFD00;stop-opacity:1' />
<stop offset='100%' style='stop-color:#FE0700;stop-opacity:1' /></linearGradient>
</defs>
<rect x='1' y='4' width='80' height='14' fill='url(#grad1)' />
<rect x='80' y='4' width='80' height='14' fill='url(#grad2)' />
<rect x='160' y='4' width='80' height='14' fill='url(#grad3)' />
<rect x='240' y='4' width='80' height='14' fill='url(#grad4)' />
<rect x='1' y='4' width='320' height='14' fill='none' stroke-width='1' stroke='#C3BDB5' />
<text x='13' y='14' style='font-weight:600;font-size:10;font-family:sans-serif;fill:#FFFFFF; '>Bed Temperature</text>
<text x='270' y='14' style='font-weight:600;font-size:10;font-family:sans-serif;fill:#FFFFFF; '>60.43&deg;C</text>
<path d='M150,5 L153,11 L150,17 L147,11 z' fill='#000000'>
</svg>
</div>
<div id='thumbbed' class='sliderthumb' render='bedrender' customrange='rangebed' >
<svg width='8' height='24' viewbox='0 0 8 24'><path d='M 0,0 L3,5 L3,17 L0,22 L7,22 L4,17 L4,5 L7,0 z' /></svg>
</div>
</td><td width='auto'><input type='number' id='bedrender' max='150' min='130' step='1' style='width: 4em;' onchange='movethumbat(thumbbed, this.value);'></td></tr>
<tr><td>
<svg width="26" height="26" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g id='Ext1' onmouseup="ext1_on = ext1_on===0?1:0; show_hide(red_ext1,ext1_on);" class='hotspot' onmouseover="changecolor(e11,e12,'#0052E1');" onmouseout="changecolor(e11,e12,'#000000');">
<rect x='0' y='0' width='24' height='24' fill='#FFFFFF'/>
<path id='e11' d="M1,0 L8,0 L8,15 L4.5,21 L1,15 z" />
<text id='e12' x="10" y="15.5" class="slide">1</text>
<polygon id='red_ext1' points="21,0 23,2 4,21 2,19" fill="#FF0000" stroke="#FFFFFF" opacity='0'/>
</g>
</svg>
</td><td >
<div id='rangeext1' min="0" max="300" class='sliderrange' onclick ="rangeclicked(event,this);" customthumb='thumbext1'>
<svg width='322' height='22' viewbox='0 0 322 22'>
<defs>
<linearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#0007FE;stop-opacity:1' />
<stop offset='100%' style='stop-color:#00FAFE;stop-opacity:1' /></linearGradient>
<linearGradient id='grad2' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#00FAFE;stop-opacity:1' />
<stop offset='100%' style='stop-color:#00FF00;stop-opacity:1' /></linearGradient>
<linearGradient id='grad3' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#00FF00;stop-opacity:1' />
<stop offset='100%' style='stop-color:#FAFD00;stop-opacity:1' /></linearGradient>
<linearGradient id='grad4' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#FAFD00;stop-opacity:1' />
<stop offset='100%' style='stop-color:#FE0700;stop-opacity:1' /></linearGradient>
</defs>
<rect x='1' y='4' width='80' height='14' fill='url(#grad1)' />
<rect x='80' y='4' width='80' height='14' fill='url(#grad2)' />
<rect x='160' y='4' width='80' height='14' fill='url(#grad3)' />
<rect x='240' y='4' width='80' height='14' fill='url(#grad4)' />
<rect x='1' y='4' width='320' height='14' fill='none' stroke-width='1' stroke='#C3BDB5' />
<text x='13' y='14' style='font-weight:600;font-size:10;font-family:sans-serif;fill:#FFFFFF; '>Extruder 1</text>
<text x='270' y='14' style='font-weight:600;font-size:10;font-family:sans-serif;fill:#FFFFFF; '>180.03&deg;C</text>
<path d='M150,5 L153,11 L150,17 L147,11 z' fill='#000000'>
</svg>
</div>
<div id='thumbext1' class='sliderthumb' render='ext1render' customrange='rangeext1' >
<svg width='8' height='24' viewbox='0 0 8 24'><path d='M 0,0 L3,5 L3,17 L0,22 L7,22 L4,17 L4,5 L7,0 z' /></svg></div>
</td><td width='auto'><input type='number' id='ext1render' min='0' max='300' step='1' style='width: 4em;' onchange='movethumbat(thumbext1, this.value);'></td></tr>
<tr><td>
<svg width="26" height="26" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g id='Ext2' onmouseup="ext2_on = ext2_on===0?1:0; show_hide(red_ext2,ext2_on);" class='hotspot' onmouseover="changecolor(e21,e22,'#0052E1');" onmouseout="changecolor(e21,e22,'#000000');">
<rect x='0' y='0' width='24' height='24' fill='#FFFFFF'/>
<path id='e21' d="M1,0 L8,0 L8,15 L4.5,21 L1,15 z" />
<text id='e22' x="10" y="15.5" class="slide">2</text>
<polygon id='red_ext2' points="21,0 23,2 4,21 2,19" fill="#FF0000" stroke="#FFFFFF" opacity='0'/>
</g>
</svg>
</td>
<td >
<div id='rangeext2' min="0" max="300" class='sliderrange' onclick ="rangeclicked(event,this);" customthumb='thumbext2'>
<svg width='322' height='22' viewbox='0 0 322 22'>
<defs>
<linearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#0007FE;stop-opacity:1' />
<stop offset='100%' style='stop-color:#00FAFE;stop-opacity:1' /></linearGradient>
<linearGradient id='grad2' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#00FAFE;stop-opacity:1' />
<stop offset='100%' style='stop-color:#00FF00;stop-opacity:1' /></linearGradient>
<linearGradient id='grad3' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#00FF00;stop-opacity:1' />
<stop offset='100%' style='stop-color:#FAFD00;stop-opacity:1' /></linearGradient>
<linearGradient id='grad4' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' style='stop-color:#FAFD00;stop-opacity:1' />
<stop offset='100%' style='stop-color:#FE0700;stop-opacity:1' /></linearGradient>
</defs>
<rect x='1' y='4' width='80' height='14' fill='url(#grad1)' />
<rect x='80' y='4' width='80' height='14' fill='url(#grad2)' />
<rect x='160' y='4' width='80' height='14' fill='url(#grad3)' />
<rect x='240' y='4' width='80' height='14' fill='url(#grad4)' />
<rect x='1' y='4' width='320' height='14' fill='none' stroke-width='1' stroke='#C3BDB5' />
<text x='13' y='14' style='font-weight:600;font-size:10;font-family:sans-serif;fill:#FFFFFF; '>Extruder 2</text>
<text x='270' y='14' style='font-weight:600;font-size:10;font-family:sans-serif;fill:#FFFFFF; '>180.03&deg;C</text>
<path d='M150,5 L153,11 L150,17 L147,11 z' fill='#000000'>
</svg>
</div>
<div id='thumbext2' class='sliderthumb' render='ext2render' customrange='rangeext2' >
<svg width='8' height='24' viewbox='0 0 8 24'><path d='M 0,0 L3,5 L3,17 L0,22 L7,22 L4,17 L4,5 L7,0 z' /></svg> </div>
</td><td width='auto'><input type='number' id='ext2render' min='0' max='300' step='1' style='width: 4em;' onchange='movethumbat(thumbext2, this.value);'></td></tr>
</table>
</div>
<script>
initrange( rangefeedrate);
initthumb( thumbfeedrate);
initrange( rangeflowrate);
initthumb( thumbflowrate);
initrange( rangefanspeed);
initthumb( thumbfanspeed);
initrange( rangebed);
initthumb( thumbbed);
initrange( rangeext1);
initthumb( thumbext1);
initrange( rangeext2);
initthumb(thumbext2);
extruderlist.style.left=342;
var rb = positionbar.getBoundingClientRect();
var re = extruderlist.getBoundingClientRect();
extruderlist.style.top = rb.top + (( (rb.bottom-rb.top) - (re.bottom-re.top))/2);
</script>
</BODY>
</HTML>
Reference in New Issue View Git Blame Copy Permalink