86 lines
14 KiB
HTML
86 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head><meta http-equiv=Content-Type content="text/html; charset=windows-1252">
|
||
|
|
<title>WLED 0.3pd</title>
|
||
|
|
<script>strA="";strR="";strG="";strB="";strNL="";strNR="";strNS="";strMD="";strFX="";strSX="";var nla=false;var nra=false;var nsa=false;var sto=false;var hsb=false;var fxa=false;var lastsx=0;function Startup(){document.getElementById("fxI").addEventListener("keypress",function(a){if(a.keyCode==13){a.preventDefault();GetFX()}});setInterval("GetArduinoIO()",5000);GetArduinoIO()}function GetArduinoIO(){nocache="&nocache="+Math.random()*1000000;var a=new XMLHttpRequest();a.onreadystatechange=function(){if(this.readyState==4){if(this.status==200){if(this.responseXML!=null){document.Ctrl_form.SA.value=this.responseXML.getElementsByTagName("act")[0].childNodes[0].nodeValue;document.Ctrl_form.SR.value=this.responseXML.getElementsByTagName("cl")[0].childNodes[0].nodeValue;document.Ctrl_form.SG.value=this.responseXML.getElementsByTagName("cl")[1].childNodes[0].nodeValue;document.Ctrl_form.SB.value=this.responseXML.getElementsByTagName("cl")[2].childNodes[0].nodeValue;if(document.activeElement!=document.getElementById("fxI")){document.Ctrl_form.TF.value=this.responseXML.getElementsByTagName("fx")[0].childNodes[0].nodeValue}document.Ctrl_form.SX.value=this.responseXML.getElementsByTagName("sx")[0].childNodes[0].nodeValue;nla=(this.responseXML.getElementsByTagName("nl")[0].innerHTML)!=0?true:false;nra=(this.responseXML.getElementsByTagName("nr")[0].innerHTML)!=0?true:false;nsa=(this.responseXML.getElementsByTagName("ns")[0].innerHTML)!=0?true:false;hsb=(this.responseXML.getElementsByTagName("md")[0].innerHTML)!=0?true:false;document.getElementsByClassName("desc")[0].innerHTML=this.responseXML.getElementsByTagName("desc")[0].innerHTML;UpdateVals()}}}};a.open("GET","win/"+strA+strR+strG+strB+strNL+strNR+strNS+strMD+strFX+strSX+nocache,true);a.send(null);strA="";strR="";strG="";strB="";strNL="";strNR="";strNS="";strMD="";strFX="";strSX=""}function GetCheck(){strA="&A="+Ctrl_form.SA.value;strR="&R="+Ctrl_form.SR.value;strG="&G="+Ctrl_form.SG.value;strB="&B="+Ctrl_form.SB.value;UpdateVals();GetArduinoIO()}function GetFX(){strFX="&FX="+Ctrl_form.TF.value;strSX="&SX="+Ctrl_form.SX.value;UpdateVals();GetArduinoIO()}function rgb2hex(d,c,a){var b=a|(c<<8)|(d<<16);return"#"+(16777216+b).toString(16).slice(1)}function lingrad(c,b,a){return"linear-gradient(white, "+rgb2hex(c,b,a)+")"}function UpdateVals(){document.body.style.background=lingrad(Ctrl_form.SR.value,Ctrl_form.SG.value,Ctrl_form.SB.value);setHS(Ctrl_form.SR.value,Ctrl_form.SG.value,Ctrl_form.SB.value);SetHSB();if(nla){nlb.style.fill="green"}else{nlb.style.fill="black"}if(nra){nrb.style.fill="green"}else{nrb.style.fill="black"}if(nsa){nsb.style.fill="green"}else{nsb.style.fill="black"}if(Ctrl_form.SA.value>0){tgb.style.fill="green"}else{tgb.style.fill="black"}}function ToggleT(){if(Ctrl_form.SA.value>0){strA="&T=0";Ctrl_form.SA.value=0}else{strA="&T=2"}UpdateVals();GetArduinoIO()}function ToggleFX(){fxa=!fxa;if(sto){CloseSettings()}SetFX()}function SwitchFX(a){document.Ctrl_form.TF.value=parseInt(document.Ctrl_form.TF.value)+a;if(document.Ctrl_form.TF.value<0){document.Ctrl_form.TF.value=0}if(document.Ctrl_form.TF.value>47){document.Ctrl_form.TF.value=47}GetFX()}function SetFX(){if(fxa){fxb.style.fill="green";document.getElementById("slA").style.display="none";document.getElementById("slR").style.display="none";document.getElementById("slG").style.display="none";document.getElementById("slB").style.display="none";document.getElementById("slH").style.display="none";document.getElementById("slS").style.display="none";document.getElementById("slX").style.display="block";document.getElementById("tlX").style.display="block"}else{fxb.style.fill="black";document.getElementById("slA").style.display="block";document.getElementById("slX").style.display="none";document.getElementById("tlX").style.display="none";SetHSB()}}function SetHSB(){if(fxa){return}if(hsb){document.getElementById("slR").style.display="none";document.getElementById("slG").style.display="none";document.getElementById("slB").style.display="none";document.getElementById("slH").style.display="block";document.getElementById("slS"
|
||
|
|
<style>.ctrl_box{border:.3ch solid grey;margin:auto;width:80vw;background-color:#b9b9b9;position:absolute;top:60%;left:50%;transform:translate(-50%,-50%)}.sliders{width:100%;height:12vh;margin-top:2vh}.sliderA{margin-left:auto;margin-right:auto;width:77vw;background:linear-gradient(to right,black,yellow)}.sliderR{margin-left:auto;margin-right:auto;margin-top:2vh;width:77vw;background:linear-gradient(to right,black,red)}.sliderG{margin-left:auto;margin-right:auto;margin-top:2vh;width:77vw;background:linear-gradient(to right,black,green)}.sliderB{margin-left:auto;margin-right:auto;margin-top:2vh;width:77vw;background:linear-gradient(to right,black,blue)}.sliderH{display:none;margin-left:auto;margin-right:auto;margin-top:2vh;width:77vw;background:linear-gradient(to right,red,orange,yellow,green,cyan,blue,violet,red)}.sliderS{display:none;margin-left:auto;margin-right:auto;margin-top:2vh;width:77vw;background:linear-gradient(to right,grey,green)}.toolsFX{display:none;margin-left:auto;margin-right:auto;margin-top:2vh;width:77vw}.sliderX{display:none;margin-left:auto;margin-right:auto;margin-top:2vh;width:77vw;background:linear-gradient(to right,black,white)}body{text-align:center;background:linear-gradient(white,black);height:100%;margin:0;background-repeat:no-repeat;background-attachment:fixed}html{height:100%}iframe{display:none;margin:auto;width:80vw;height:50vh;position:absolute;top:60%;left:50%;transform:translate(-50%,-50%)}svg{width:12vw;height:10vmin}input[type=range]{-webkit-appearance:none;margin:-4px 0}input[type=range]:focus{outline:0}input[type=range]::-webkit-slider-runnable-track{width:100%;height:12vh;cursor:pointer;background:#ddd}input[type=range]::-webkit-slider-thumb{height:10vh;width:10vh;background:#fff;cursor:pointer;-webkit-appearance:none;margin-top:1vh}input[type=range]::-moz-range-track{width:100%;height:12vh;cursor:pointer;background:#ddd}input[type=range]::-moz-range-thumb{height:10vh;width:10vh;background:#fff;cursor:pointer;margin-top:1vh}input[type=range]::-ms-track{width:100%;height:12vh;cursor:pointer;background:transparent;border-color:transparent;color:transparent}input[type=range]::-ms-fill-lower{background:#ddd}input[type=range]::-ms-fill-upper{background:#ddd}input[type=range]::-ms-thumb{width:10vh;background:#fff;cursor:pointer;height:10vh}</style>
|
||
|
|
<style id=holderjs-style type=text/css></style></head>
|
||
|
|
<body onload=Startup() class=__plain_text_READY__>
|
||
|
|
<span class=desc> Loading... </span>
|
||
|
|
<svg style=position:absolute;width:0;height:0;overflow:hidden version=1.1 xmlns=http://www.w3.org/2000/svg>
|
||
|
|
<defs>
|
||
|
|
<symbol id=icon-backward2 viewBox="0 0 32 32">
|
||
|
|
<path d="M18 5v10l10-10v22l-10-10v10l-11-11z"></path>
|
||
|
|
</symbol>
|
||
|
|
<symbol id=icon-forward3 viewBox="0 0 32 32">
|
||
|
|
<path d="M16 27v-10l-10 10v-22l10 10v-10l11 11z"></path>
|
||
|
|
</symbol>
|
||
|
|
<symbol id=icon-circle-right viewBox="0 0 32 32">
|
||
|
|
<path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13z"></path>
|
||
|
|
<path d="M11.086 22.086l2.829 2.829 8.914-8.914-8.914-8.914-2.828 2.828 6.086 6.086z"></path>
|
||
|
|
</symbol>
|
||
|
|
<symbol id=icon-circle-left viewBox="0 0 32 32">
|
||
|
|
<path d="M16 32c8.837 0 16-7.163 16-16s-7.163-16-16-16-16 7.163-16 16 7.163 16 16 16zM16 3c7.18 0 13 5.82 13 13s-5.82 13-13 13-13-5.82-13-13 5.82-13 13-13z"></path>
|
||
|
|
<path d="M20.914 9.914l-2.829-2.829-8.914 8.914 8.914 8.914 2.828-2.828-6.086-6.086z"></path>
|
||
|
|
</symbol>
|
||
|
|
<symbol id=icon-switch viewBox="0 0 32 32">
|
||
|
|
<path d="M20 4.581v4.249c1.131 0.494 2.172 1.2 3.071 2.099 1.889 1.889 2.929 4.4 2.929 7.071s-1.040 5.182-2.929 7.071c-1.889 1.889-4.4 2.929-7.071 2.929s-5.182-1.040-7.071-2.929c-1.889-1.889-2.929-4.4-2.929-7.071s1.040-5.182 2.929-7.071c0.899-0.899 1.94-1.606 3.071-2.099v-4.249c-5.783 1.721-10 7.077-10 13.419 0 7.732 6.268 14 14 14s14-6.268 14-14c0-6.342-4.217-11.698-10-13.419zM14 0h4v16h-4z"></path>
|
||
|
|
</symbol>
|
||
|
|
<symbol id=icon-equalizer viewBox="0 0 32 32">
|
||
|
|
<path d="M14 4v-0.5c0-0.825-0.675-1.5-1.5-1.5h-5c-0.825 0-1.5 0.675-1.5 1.5v0.5h-6v4h6v0.5c0 0.825 0.675 1.5 1.5 1.5h5c0.825 0 1.5-0.675 1.5-1.5v-0.5h18v-4h-18zM8 8v-4h4v4h-4zM26 13.5c0-0.825-0.675-1.5-1.5-1.5h-5c-0.825 0-1.5 0.675-1.5 1.5v0.5h-18v4h18v0.5c0 0.825 0.675 1.5 1.5 1.5h5c0.825 0 1.5-0.675 1.5-1.5v-0.5h6v-4h-6v-0.5zM20 18v-4h4v4h-4zM14 23.5c0-0.825-0.675-1.5-1.5-1.5h-5c-0.825 0-1.5 0.675-1.5 1.5v0.5h-6v4h6v0.5c0 0.825 0.675 1.5 1.5 1.5h5c0.825 0 1.5-0.675 1.5-1.5v-0.5h18v-4h-18v-0.5zM8 28v-4h4v4h-4z"></path>
|
||
|
|
</symbol>
|
||
|
|
<symbol id=icon-clock viewBox="0 0 32 32">
|
||
|
|
<path d="M20.586 23.414l-6.586-6.586v-8.828h4v7.172l5.414 5.414zM16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 28c-6.627 0-12-5.373-12-12s5.373-12 12-12c6.627 0 12 5.373 12 12s-5.373 12-12 12z"></path>
|
||
|
|
</symbol>
|
||
|
|
<symbol id=icon-download viewBox="0 0 32 32">
|
||
|
|
<path d="M16 18l8-8h-6v-8h-4v8h-6zM23.273 14.727l-2.242 2.242 8.128 3.031-13.158 4.907-13.158-4.907 8.127-3.031-2.242-2.242-8.727 3.273v8l16 6 16-6v-8z"></path>
|
||
|
|
</symbol>
|
||
|
|
<symbol id=icon-upload viewBox="0 0 32 32">
|
||
|
|
<path d="M14 18h4v-8h6l-8-8-8 8h6zM20 13.5v3.085l9.158 3.415-13.158 4.907-13.158-4.907 9.158-3.415v-3.085l-12 4.5v8l16 6 16-6v-8z"></path>
|
||
|
|
</symbol>
|
||
|
|
<symbol id=icon-cog viewBox="0 0 32 32">
|
||
|
|
<path d="M29.181 19.070c-1.679-2.908-0.669-6.634 2.255-8.328l-3.145-5.447c-0.898 0.527-1.943 0.829-3.058 0.829-3.361 0-6.085-2.742-6.085-6.125h-6.289c0.008 1.044-0.252 2.103-0.811 3.070-1.679 2.908-5.411 3.897-8.339 2.211l-3.144 5.447c0.905 0.515 1.689 1.268 2.246 2.234 1.676 2.903 0.672 6.623-2.241 8.319l3.145 5.447c0.895-0.522 1.935-0.82 3.044-0.82 3.35 0 6.067 2.725 6.084 6.092h6.289c-0.003-1.034 0.259-2.080 0.811-3.038 1.676-2.903 5.399-3.894 8.325-2.219l3.145-5.447c-0.899-0.515-1.678-1.266-2.232-2.226zM16 22.479c-3.578 0-6.479-2.901-6.479-6.479s2.901-6.479 6.479-6.479c3.578 0 6.479 2.901 6.479 6.479s-2.901 6.479-6.479 6.479z"></path>
|
||
|
|
</symbol>
|
||
|
|
<symbol id=icon-star-full viewBox="0 0 32 32">
|
||
|
|
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
|
||
|
|
</symbol>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<div id=tbB class=tool_box>
|
||
|
|
<svg id=tgb onclick=ToggleT()><use xlink:href=#icon-switch></use></svg>
|
||
|
|
<svg id=mdb onclick=ToggleHSB()><use xlink:href=#icon-equalizer></use></svg>
|
||
|
|
<svg id=fxb onclick=ToggleFX()><use xlink:href=#icon-star-full></use></svg>
|
||
|
|
<svg id=nlb onclick=ToggleNl()><use xlink:href=#icon-clock></use></svg>
|
||
|
|
<svg id=nrb onclick=ToggleNr()><use xlink:href=#icon-download></use></svg>
|
||
|
|
<svg id=nsb onclick=ToggleNs()><use xlink:href=#icon-upload></use></svg>
|
||
|
|
<svg id=stb onclick=ToggleSettings()><use xlink:href=#icon-cog></use></svg>
|
||
|
|
</div>
|
||
|
|
<div id=cdB class=ctrl_box>
|
||
|
|
<form id=form_c name=Ctrl_form>
|
||
|
|
<br>
|
||
|
|
<div id=slA class=sliderA>
|
||
|
|
<input type=range title=Brightness class=sliders name=SA value=0 min=0 max=255 step=1 onchange=GetCheck()> </div>
|
||
|
|
<div id=slR class=sliderR>
|
||
|
|
<input type=range title="Red Value" class=sliders name=SR value=0 min=0 max=255 step=1 onchange=GetCheck()> </div>
|
||
|
|
<div id=slG class=sliderG>
|
||
|
|
<input type=range title="Green Value" class=sliders name=SG value=0 min=0 max=255 step=1 onchange=GetCheck()> </div>
|
||
|
|
<div id=slB class=sliderB>
|
||
|
|
<input type=range title="Blue Value" class=sliders name=SB value=0 min=0 max=255 step=1 onchange=GetCheck()> </div>
|
||
|
|
<div id=slH class=sliderH>
|
||
|
|
<input type=range title=Hue class=sliders name=SH value=0 min=0 max=1 step=0.025 onchange=GetRGB()> </div>
|
||
|
|
<div id=slS class=sliderS>
|
||
|
|
<input type=range title=Saturation class=sliders name=SS value=0 min=0 max=1 step=0.025 onchange=GetRGB()> </div>
|
||
|
|
<div id=tlX class=toolsFX>
|
||
|
|
<svg id=fmr onclick=SwitchFX(-10)><use xlink:href=#icon-backward2></use></svg>
|
||
|
|
<svg id=for onclick=SwitchFX(-1)><use xlink:href=#icon-circle-left></use></svg>
|
||
|
|
<svg id=fmf onclick=SwitchFX(1)><use xlink:href=#icon-circle-right></use></svg>
|
||
|
|
<svg id=fof onclick=SwitchFX(10)><use xlink:href=#icon-forward3></use></svg>
|
||
|
|
<br><input id=fxI name=TF type=number value=0 min=0 max=47 step=1 onchange=GetFX()>
|
||
|
|
</div>
|
||
|
|
<div id=slX class=sliderX>
|
||
|
|
<input type=range title="Effect Speed" class=sliders name=SX value=0 min=0 max=255 step=1 onchange=GetFX()> </div> <br>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<iframe id=stf src=about:blank></iframe>
|
||
|
|
</body>
|
||
|
|
</html>
|