GitHub-Proxy/ESP3D
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/luc-github/ESP3D.git synced 2025-10-18 11:31:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
ESP3D/UI/testui.htm
luc lebosse fe6e6c7ada code cleaning 
fix blur under OSX for buttons
move position of JOG as position bar won't be part of Jog svg
move style in one place
2016-07-23 21:11:54 +02:00

746 lines
40 KiB
HTML
Raw Blame History

<HTML>
<HEAD>
<style type="text/css">
.sliderthumb{
position : absolute;
cursor : pointer;
}
.sliderrange{
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.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:#0D2F38;
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 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>
<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>
<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'>
<rect x='0' y='0' width='24' height='24' fill='#FFFFFF'/>
<path 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' >
<rect x='0' y='0' width='24' height='24' fill='#FFFFFF'/>
<polygon points="5,0 24,0 28,19 1,19" fill="none" stroke="#000000" stroke-width='2'/>
<line x1="11" y1="0" x2="10" y2="19" stroke="#000000" stroke-width='2' />
<line x1="18" y1="0" x2="19" y2="19" stroke="#000000" stroke-width='2' />
<line x1="3" y1="13" x2="26" y2="13" stroke="#000000" stroke-width='2' />
<line 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' >
<rect x='0' y='0' width='24' height='24' fill='#FFFFFF'/>
<path d="M1,0 L8,0 L8,15 L4.5,21 L1,15 z" />
<text 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'>
<rect x='0' y='0' width='24' height='24' fill='#FFFFFF'/>
<path d="M1,0 L8,0 L8,15 L4.5,21 L1,15 z" />
<text 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);
</script>
</BODY>
</HTML>
Reference in New Issue View Git Blame Copy Permalink