mirror of
https://git.mirrors.martin98.com/https://github.com/luc-github/ESP3D.git
synced 2025-08-01 07:22:00 +08:00
Integrate new range customized
This commit is contained in:
luc lebosse
parent
9ab4bfdc5e
commit
9a85d3046c
279
UI/testui.htm
279
UI/testui.htm
@ -1,5 +1,14 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<style>
|
||||
.sliderthumb{
|
||||
position : absolute;
|
||||
cursor : pointer;
|
||||
}
|
||||
.sliderrange{
|
||||
cursor : pointer;
|
||||
}
|
||||
</style>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<script type="text/javascript">
|
||||
@ -51,6 +60,119 @@
|
||||
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>
|
||||
<svg width="440" height="260" xmlns="http://www.w3.org/2000/svg" version="1.1">
|
||||
<defs>
|
||||
@ -380,9 +502,9 @@ fill:#0052E1;
|
||||
</svg>
|
||||
|
||||
<br>
|
||||
<div style='margin-left: 0.3cm;' >
|
||||
<table valign='top' >
|
||||
<tr><td width='auto' align='middle'>
|
||||
<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>
|
||||
@ -394,9 +516,24 @@ fill:#0052E1;
|
||||
<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></svg></td>
|
||||
<td width='auto' ><div class='line'><input type='range' width='300px' /></div><div class="lineslidertext">Feedrate </div></td><td width='auto'><input type="number" style="width: 4em;"></td></tr>
|
||||
<tr><td align='middle'>
|
||||
</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;"></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' />
|
||||
@ -404,7 +541,21 @@ fill:#0052E1;
|
||||
<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 class='line'><input type='range' /></div> <div class="lineslidertext">Flowrate </div></td><td width='auto'><input type="number" style="width: 4em;"></td></tr>
|
||||
</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;'></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);" >
|
||||
@ -413,7 +564,22 @@ fill:#0052E1;
|
||||
<polygon id='red_fan' points="19,0 21,2 2,21 0,19" fill="#FF0000" stroke="#FFFFFF" opacity='0'/>
|
||||
</g>
|
||||
</svg>
|
||||
</td><td width='300px'><div class='line'><input type='range' width='300px' /></div><div class="lineslidertext">Fan </div></td><td width='auto'><input type="number" style="width: 4em;"></td></tr>
|
||||
</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;"></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);" >
|
||||
@ -426,7 +592,33 @@ fill:#0052E1;
|
||||
<polygon id='red_bed' points="21,0 23,2 4,21 2,19" fill="#FF0000" stroke="#FFFFFF" opacity='0'/>
|
||||
</g>
|
||||
</svg>
|
||||
</td><td ><div class='temp'><input type='range'/></div><div class="tempslidertext">Bed temperature </div></td><td width='auto'><input type="number" style="width: 4em;"></td></tr>
|
||||
</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°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;"></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);" >
|
||||
@ -436,7 +628,32 @@ fill:#0052E1;
|
||||
<polygon id='red_ext1' points="21,0 23,2 4,21 2,19" fill="#FF0000" stroke="#FFFFFF" opacity='0'/>
|
||||
</g>
|
||||
</svg>
|
||||
</td><td ><div class='temp'><input type='range'/></div><div class="tempslidertext">Extruder 1 </div></td><td width='auto'><input type="number" style="width: 4em;"></td></tr>
|
||||
</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°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;"></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);" >
|
||||
@ -446,8 +663,48 @@ fill:#0052E1;
|
||||
<polygon id='red_ext2' points="21,0 23,2 4,21 2,19" fill="#FF0000" stroke="#FFFFFF" opacity='0'/>
|
||||
</g>
|
||||
</svg>
|
||||
</td><td ><div class='temp'><input type='range'/></div><div class="tempslidertext">Extuder 2 </div></td><td width='auto'><input type="number" style="width: 4em;"></td></tr>
|
||||
</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°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;"></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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user