Updated Client HTML with new features

Replaced SVG icons with a more modern look (Linearicons)
Updated FX panel, added sec.color (NI) and CC options
Added preset panel
Slightly modified look
Replaced most text fields in settings page with bound number fields
Segmented index page sending to support larger 30kb site
This commit is contained in:
cschwinne 2017-12-09 01:29:09 +01:00
parent afa3a0149c
commit d9587259f3
7 changed files with 540 additions and 459 deletions

File diff suppressed because one or more lines are too long

View File

@ -3,38 +3,38 @@
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>WLED 0.4p</title>
<script>
strA = "";
strR = "";
strG = "";
strB = "";
strW = "";
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 uwv = false;
var d=document;
resp="";
var nla=false;
var nra=false;
var nsa=false;
var sto=false;
var hsb=false;
var fxa=false;
var psa=false;
var uwv=false;
var lastsx = 0;
var nState = 0;
bCol = "DarkTurquoise";
dC = "black";
function gId(s) //abbrev
{
return d.getElementById(s);
}
function Startup()
{
document.getElementById("fxI").addEventListener("keypress", function(event) {
gId("fxI").addEventListener("keypress", function(event) {
if (event.keyCode == 13) {
event.preventDefault();
GetFX();
}
});
setInterval('GetArduinoIO()', 5000);
GetArduinoIO();
setInterval('GIO()', 5000);
GIO();
}
function GetArduinoIO()
function GIO()
{
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
@ -43,308 +43,348 @@
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;
d.Cf.SA.value = this.responseXML.getElementsByTagName('act')[0].childNodes[0].nodeValue;
d.Cf.SR.value = this.responseXML.getElementsByTagName('cl')[0].childNodes[0].nodeValue;
d.Cf.SG.value = this.responseXML.getElementsByTagName('cl')[1].childNodes[0].nodeValue;
d.Cf.SB.value = this.responseXML.getElementsByTagName('cl')[2].childNodes[0].nodeValue;
if (this.responseXML.getElementsByTagName('wv')[0].childNodes[0].nodeValue >= 0) {
document.Ctrl_form.SW.value = this.responseXML.getElementsByTagName('wv')[0].childNodes[0].nodeValue;
if (!uwv) document.getElementById("slW").style.display="block";
d.Cf.SW.value = this.responseXML.getElementsByTagName('wv')[0].childNodes[0].nodeValue;
if (!uwv) gId("slW").style.display="block";
uwv = true;
} else {
document.getElementById("slW").style.display="none";
gId("slW").style.display="none";
uwv = false;
}
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;
if (d.activeElement != gId("fxI")) d.Cf.TF.value = this.responseXML.getElementsByTagName('fx')[0].childNodes[0].nodeValue;
d.Cf.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;
nState = 0;
nState = (this.responseXML.getElementsByTagName('nr')[0].innerHTML)!=0?true:false;
nState += 2*(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();
d.getElementsByClassName("desc")[0].innerHTML = this.responseXML.getElementsByTagName('desc')[0].innerHTML;
UV();
}
}
}
}
// send HTTP request
request.open("GET", "win/" + strA + strR + strG + strB + strW + strNL + strNR + strNS + strMD + strFX + strSX +nocache, true);
request.open("GET", "win/" +resp +nocache, true);
request.send(null);
strA = "";
strR = "";
strG = "";
strB = "";
strW = "";
strNL = "";
strNR = "";
strNS = "";
strMD = "";
strFX = "";
strSX = "";
resp="";
}
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;
if (uwv) strW = "&W=" + Ctrl_form.SW.value;
UpdateVals();
GetArduinoIO();
resp+="&A=" + Cf.SA.value;
resp+="&R=" + Cf.SR.value;
resp+="&G=" + Cf.SG.value;
resp+="&B=" + Cf.SB.value;
if (uwv) resp+="&W=" + Cf.SW.value;
UV();
GIO();
}
function GetFX()
{
strFX = "&FX=" + Ctrl_form.TF.value;
strSX = "&SX=" + Ctrl_form.SX.value;
UpdateVals();
GetArduinoIO();
resp+="&FX=" + Cf.TF.value;
resp+="&SX=" + Cf.SX.value;
UV();
GIO();
}
function rgb2hex(red, green, blue) {
function rgb2hex(red,green,blue) {
var rgb = blue | (green << 8) | (red << 16);
return '#' + (0x1000000 + rgb).toString(16).slice(1)
return '#' +(0x1000000 +rgb).toString(16).slice(1)
}
function lingrad(red, green, blue) {
return "linear-gradient(white, " + rgb2hex(red, green, blue) + ")";
function lingrad(r,g,b) {
return "linear-gradient(white, "+rgb2hex(r,g,b)+")";
}
function UpdateVals()
function UV()
{
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);
d.body.style.background = lingrad(Cf.SR.value,Cf.SG.value,Cf.SB.value);
setHS(Cf.SR.value,Cf.SG.value,Cf.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)
nlb.style.fill=(nla)?bCol:dC;
switch (nState)
{
tgb.style.fill="green";
} else {
tgb.style.fill="black";
case 0: gId("path1").style.fill = dC; gId("path2").style.fill = dC; break;
case 1: gId("path1").style.fill = bCol; gId("path2").style.fill = dC; break;
case 2: gId("path1").style.fill = dC;gId("path2").style.fill = bCol; break;
case 3: gId("path1").style.fill = bCol; gId("path2").style.fill = bCol; break;
}
tgb.style.fill=(Cf.SA.value>0)?bCol:dC;
ccX.style.display=(Cf.TF.value>52)?"block":"none";
fof.style.fill=(Cf.TF.value>52)?bCol:dC;
fmr.style.fill=(Cf.TF.value<1)?bCol:dC;
}
function ToggleT()
function TgT()
{
if (Ctrl_form.SA.value > 0)
if (Cf.SA.value > 0)
{
strA = "&T=0";
Ctrl_form.SA.value = 0;
resp += "&T=0";
Cf.SA.value = 0;
} else
{
strA = "&T=2";
resp += "&T=2";
}
UpdateVals();
GetArduinoIO();
UV();
GIO();
}
function ToggleFX()
function TgFX()
{
if (psa)
{
psa = false;
SetPS();
}
fxa = !fxa;
if (sto) CloseSettings();
SetFX();
}
function SwitchFX(s)
{
document.Ctrl_form.TF.value = parseInt(document.Ctrl_form.TF.value) +s;
if (document.Ctrl_form.TF.value < 0) document.Ctrl_form.TF.value = 0;
if (document.Ctrl_form.TF.value > 52) document.Ctrl_form.TF.value = 52;
d.Cf.TF.value = parseInt(d.Cf.TF.value) +s;
if (d.Cf.TF.value < 0) d.Cf.TF.value = 0;
if (d.Cf.TF.value > 57) d.Cf.TF.value = 53;
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("slW").style.display="none";
document.getElementById("slX").style.display="block";
document.getElementById("tlX").style.display="block";
fxb.style.fill=bCol;
gId("slA").style.display="none";
gId("slR").style.display="none";
gId("slG").style.display="none";
gId("slB").style.display="none";
gId("slH").style.display="none";
gId("slS").style.display="none";
gId("slW").style.display="none";
gId("slX").style.display="block";
gId("tlX").style.display="block";
gId("tlP").style.display="none";
} else {
fxb.style.fill="black";
document.getElementById("slA").style.display="block";
document.getElementById("slX").style.display="none";
document.getElementById("tlX").style.display="none";
if (uwv) document.getElementById("slW").style.display="block";
fxb.style.fill=dC;
gId("slA").style.display="block";
gId("slX").style.display="none";
gId("tlX").style.display="none";
if (uwv) gId("slW").style.display="block";
SetHSB();
}
}
function SetHSB()
{
if (fxa) return;
if (fxa || psa) 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.display="block";
mdb.style.fill="green";
gId("slR").style.display="none";
gId("slG").style.display="none";
gId("slB").style.display="none";
gId("slH").style.display="block";
gId("slS").style.display="block";
mdb.style.fill=bCol;
} else {
document.getElementById("slR").style.display="block";
document.getElementById("slG").style.display="block";
document.getElementById("slB").style.display="block";
document.getElementById("slH").style.display="none";
document.getElementById("slS").style.display="none";
mdb.style.fill="black";
gId("slR").style.display="block";
gId("slG").style.display="block";
gId("slB").style.display="block";
gId("slH").style.display="none";
gId("slS").style.display="none";
mdb.style.fill=dC;
}
}
function ToggleHSB()
function TgHSB()
{
if (fxa)
{
fxa = false;
SetFX();
}
if (psa)
{
psa = false;
SetPS();
}
if (sto) CloseSettings();
hsb = !hsb;
if (hsb)
{
strMD="&MD=1";
} else {
strMD="&MD=0";
}
resp+=((hsb)?"&MD=1":"&MD=0");
SetHSB();
}
function TgPS()
{
psa = !psa;
fxa = true;
SetFX();
fxa = false;
fxb.style.fill=dC;
if (sto) CloseSettings();
SetPS();
}
function SwitchPS(x)
{
d.Cf.FF.value = parseInt(d.Cf.FF.value) +x;
if (d.Cf.FF.value < 0) d.Cf.FF.value = 0;
if (d.Cf.FF.value > 24) d.Cf.FF.value = 24;
}
function SetPS()
{
if (psa) {
psb.style.fill=bCol;
gId("slX").style.display="none";
gId("tlX").style.display="none";
gId("tlP").style.display="block";
} else {
psb.style.fill=dC;
gId("slA").style.display="block";
gId("slX").style.display="none";
gId("tlX").style.display="none";
gId("tlP").style.display="none";
if (uwv) gId("slW").style.display="block";
SetHSB();
}
}
function PSIO(sv)
{
if(sv)
{
resp+="&PS=";
resp+=d.Cf.FF.value;
} else
{
if (d.Cf.BC.checked&&d.Cf.CC.checked&&d.Cf.FC.checked)
{resp+="&PL=";resp+=d.Cf.FF.value;}
else {
if(d.Cf.BC.checked){resp+="&PA=";resp+=d.Cf.FF.value;}
if(d.Cf.CC.checked){resp+="&PC=";resp+=d.Cf.FF.value;}
if(d.Cf.FC.checked){resp+="&PX=";resp+=d.Cf.FF.value;}
}
}
}
function OpenSettings()
{
sto = true;
stb.style.fill="green";
sto=true;
stb.style.fill=bCol;
cdB.style.display="none";
stf.style.display="inline";
stf.src="/settings";
}
function CloseSettings()
{
sto = false;
stb.style.fill="black";
sto=false;
stb.style.fill=dC;
cdB.style.display="inline";
stf.style.display="none";
}
function ToggleSettings()
function TgSettings()
{
if (sto)
if(sto)
{
CloseSettings();
} else {
}else{
OpenSettings();
}
}
function ToggleNl()
function TgNl()
{
nla = !nla;
if (nla) {
strNL="&NL=1";
} else {
strNL="&NL=0";
}
UpdateVals();
GetArduinoIO();
nla=!nla;
resp+=(nla)?"&NL=1":"&NL=0";
UV();
GIO();
}
function ToggleNr()
function TgN()
{
nra = !nra;
if (nra) {
strNR="&RN=1";
} else {
strNR="&RN=0";
nState++;
if (nState>3) nState=0;
switch (nState)
{
case 0: resp+="&SN=0&RN=0"; break;
case 1: resp+="&SN=0&RN=1"; break;
case 2: resp+="&SN=1&RN=0"; break;
case 3: resp+="&SN=1&RN=1"; break;
}
UpdateVals();
GetArduinoIO();
}
function ToggleNs()
{
nsa = !nsa;
if (nsa) {
strNS="&SN=1";
} else {
strNS="&SN=0";
}
UpdateVals();
GetArduinoIO();
UV();
GIO();
}
function setHS() {
var rr, gg, bb,
r = arguments[0] / 255,
g = arguments[1] / 255,
b = arguments[2] / 255,
h, s,
v = Math.max(r, g, b),
diff = v - Math.min(r, g, b),
r=arguments[0]/255,
g=arguments[1]/255,
b=arguments[2]/255,
h,s,
v = Math.max(r,g,b),
diff = v - Math.min(r,g,b),
diffc = function(c){
return (v - c) / 6 / diff + 1 / 2;
return (v-c)/6/diff+1/2;
};
if (diff == 0) {
h = s = 0;
} else {
s = diff / v;
rr = diffc(r);
gg = diffc(g);
bb = diffc(b);
s = diff/v;
rr=diffc(r);
gg=diffc(g);
bb=diffc(b);
if (r === v) {
h = bb - gg;
}else if (g === v) {
h = (1 / 3) + rr - bb;
}else if (b === v) {
h = (2 / 3) + gg - rr;
if(r===v) {
h=bb-gg;
}else if (g===v){
h=(1/3) + rr-bb;
}else if (b===v){
h=(2/3) + gg-rr;
}
if (h < 0) {
h += 1;
}else if (h > 1) {
h -= 1;
if (h<0){
h+=1;
}else if (h>1){
h-=1;
}
}
document.Ctrl_form.SH.value = h;
document.Ctrl_form.SS.value = s;
if (s>0) d.Cf.SH.value=h;
d.Cf.SS.value=s;
}
function GetRGB()
{
var r, g, b, i, f, p, q, t;
var h = document.Ctrl_form.SH.value, s = document.Ctrl_form.SS.value, v = 255;
i = Math.floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r = v, g = t, b = p; break;
case 1: r = q, g = v, b = p; break;
case 2: r = p, g = v, b = t; break;
case 3: r = p, g = q, b = v; break;
case 4: r = t, g = p, b = v; break;
case 5: r = v, g = p, b = q; break;
var h = d.Cf.SH.value, s = d.Cf.SS.value, v=255;
i = Math.floor(h*6);
f = h * 6-i;
p = v * (1-s);
q = v * (1-f*s);
t = v * (1-(1-f)*s);
switch (i%6) {
case 0: r=v,g=t,b=p;break;
case 1: r=q,g=v,b=p;break;
case 2: r=p,g=v,b=t;break;
case 3: r=p,g=q,b=v;break;
case 4: r=t,g=p,b=v;break;
case 5: r=v,g=p,b=q;break;
}
document.Ctrl_form.SR.value = r;
document.Ctrl_form.SG.value = g;
document.Ctrl_form.SB.value = b;
d.Cf.SR.value=r;
d.Cf.SG.value=g;
d.Cf.SB.value=b;
GetCheck();
}
function GetCC()
{
resp+="&CP=";
resp+=d.Cf.PF.value;
resp+="&CS=";
resp+=d.Cf.SF.value;
resp+="&CM=";
resp+=d.Cf.HF.value;
resp+=(d.Cf.SC.checked)?"&CF=1":"&CF=0";
resp+=(d.Cf.EC.checked)?"&CE=1":"&CE=0";
UV();
GIO();
}
</script>
<style>
.ctrl_box {
border: 0.3ch solid grey;
margin: auto;
width: 80vw;
background-color: #B9B9B9;
background-color: #b9b9b9;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
input[type=number] {
width: 3em;
}
.sliders {
width: 100%;
height: 12vh;
@ -408,6 +448,16 @@
margin-top: 2vh;
width: 77vw;
}
.toolsCC {
display:none;
}
.toolsPS {
display:none;
margin-left: auto;
margin-right: auto;
margin-top: 2vh;
width: 77vw;
}
.sliderX {
display:none;
margin-left: auto;
@ -501,54 +551,33 @@
<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>
//Linearicons.com/free
<symbol id="lnr-power-switch" viewBox="0 0 1024 1024"><path d="M486.4 614.4c-14.138 0-25.6-11.461-25.6-25.6v-460.8c0-14.138 11.462-25.6 25.6-25.6s25.6 11.462 25.6 25.6v460.8c0 14.139-11.462 25.6-25.6 25.6z"></path><path d="M486.4 972.8c-102.57 0-199-39.944-271.53-112.47-72.528-72.528-112.47-168.96-112.47-271.53 0-84.395 26.859-164.478 77.674-231.594 49.15-64.915 118.979-113.394 196.624-136.501 13.55-4.034 27.805 3.683 31.838 17.234s-3.683 27.805-17.234 31.838c-139.955 41.654-237.702 172.84-237.702 319.022 0 183.506 149.294 332.8 332.8 332.8s332.8-149.294 332.8-332.8c0-146.187-97.75-277.374-237.71-319.024-13.552-4.034-21.267-18.288-17.234-31.838 4.032-13.552 18.29-21.267 31.837-17.235 77.646 23.106 147.48 71.582 196.632 136.499 50.816 67.115 77.675 147.202 77.675 231.598 0 102.57-39.942 199.002-112.47 271.53-72.528 72.526-168.96 112.47-271.53 112.47z"></path></symbol>
<symbol id="lnr-list" viewBox="0 0 1024 1024"><path d="M998.4 819.2h-768c-14.138 0-25.6-11.461-25.6-25.6s11.462-25.6 25.6-25.6h768c14.139 0 25.6 11.461 25.6 25.6s-11.461 25.6-25.6 25.6z"></path><path d="M998.4 563.2h-768c-14.138 0-25.6-11.461-25.6-25.6s11.462-25.6 25.6-25.6h768c14.139 0 25.6 11.461 25.6 25.6s-11.461 25.6-25.6 25.6z"></path><path d="M998.4 307.2h-768c-14.138 0-25.6-11.462-25.6-25.6s11.462-25.6 25.6-25.6h768c14.139 0 25.6 11.462 25.6 25.6s-11.461 25.6-25.6 25.6z"></path><path d="M76.8 358.4c-42.347 0-76.8-34.453-76.8-76.8s34.453-76.8 76.8-76.8 76.8 34.453 76.8 76.8-34.453 76.8-76.8 76.8zM76.8 256c-14.115 0-25.6 11.485-25.6 25.6s11.485 25.6 25.6 25.6 25.6-11.485 25.6-25.6-11.485-25.6-25.6-25.6z"></path><path d="M76.8 614.4c-42.347 0-76.8-34.451-76.8-76.8 0-42.347 34.453-76.8 76.8-76.8s76.8 34.453 76.8 76.8c0 42.349-34.453 76.8-76.8 76.8zM76.8 512c-14.115 0-25.6 11.485-25.6 25.6s11.485 25.6 25.6 25.6 25.6-11.485 25.6-25.6-11.485-25.6-25.6-25.6z"></path><path d="M76.8 870.4c-42.347 0-76.8-34.451-76.8-76.8s34.453-76.8 76.8-76.8 76.8 34.451 76.8 76.8-34.453 76.8-76.8 76.8zM76.8 768c-14.115 0-25.6 11.485-25.6 25.6s11.485 25.6 25.6 25.6 25.6-11.485 25.6-25.6-11.485-25.6-25.6-25.6z"></path></symbol>
<symbol id="lnr-moon" viewBox="0 0 1024 1024"><path d="M524.8 1024c-140.179 0-271.968-54.589-371.090-153.71s-153.71-230.91-153.71-371.090c0-115.242 37-224.010 106.997-314.546 33.528-43.365 73.674-81.155 119.325-112.323 46.050-31.44 96.664-55.424 150.437-71.285 9.819-2.901 20.424 0.336 26.957 8.222s7.738 18.906 3.064 28.016c-33.006 64.339-48.379 125.702-48.379 193.115 0 239.97 195.23 435.2 435.2 435.2 67.414 0 128.776-15.371 193.115-48.378 9.107-4.674 20.13-3.469 28.016 3.064s11.12 17.134 8.224 26.957c-15.861 53.773-39.845 104.387-71.286 150.435-31.166 45.65-68.958 85.797-112.323 119.325-90.536 69.998-199.306 106.997-314.546 106.997zM336.397 69.896c-172.741 73.982-285.197 240.059-285.197 429.304 0 261.144 212.456 473.6 473.6 473.6 189.234 0 355.314-112.475 429.304-285.197-52.406 19.598-105.373 29.197-160.504 29.197-129.922 0-252.067-50.594-343.936-142.462-91.869-91.87-142.464-214.016-142.464-343.938 0-55.131 9.6-108.098 29.197-160.504z"></path></symbol>
<symbol id="lnr-cog" viewBox="0 0 1024 1024"><path d="M390.71 1008.755c-2.109 0-4.248-0.262-6.378-0.81-45.976-11.803-90.149-30.042-131.291-54.21-11.923-7.003-16.13-22.21-9.501-34.344 8.15-14.925 12.459-31.866 12.459-48.992 0-56.464-45.936-102.4-102.4-102.4-17.125 0-34.066 4.309-48.992 12.459-12.133 6.627-27.339 2.421-34.342-9.501-24.17-41.142-42.408-85.315-54.211-131.293-3.333-12.989 3.92-26.349 16.629-30.629 41.699-14.037 69.717-53.034 69.717-97.037s-28.018-83-69.718-97.040c-12.707-4.278-19.962-17.638-16.627-30.627 11.803-45.976 30.042-90.149 54.211-131.291 7.003-11.923 22.21-16.13 34.344-9.501 14.923 8.15 31.864 12.459 48.99 12.459 56.464 0 102.4-45.936 102.4-102.4 0-17.126-4.309-34.067-12.459-48.99-6.629-12.134-2.422-27.341 9.501-34.344 41.141-24.168 85.314-42.408 131.291-54.211 12.994-3.334 26.349 3.92 30.627 16.627 14.040 41.701 53.037 69.718 97.040 69.718s83-28.018 97.038-69.717c4.28-12.71 17.645-19.965 30.629-16.629 45.976 11.802 90.15 30.042 131.293 54.211 11.922 7.003 16.128 22.208 9.501 34.342-8.152 14.926-12.461 31.867-12.461 48.992 0 56.464 45.936 102.4 102.4 102.4 17.126 0 34.067-4.309 48.992-12.459 12.138-6.629 27.341-2.421 34.344 9.501 24.166 41.141 42.406 85.314 54.21 131.291 3.334 12.989-3.918 26.349-16.627 30.627-41.701 14.040-69.718 53.037-69.718 97.040s28.018 83 69.718 97.038c12.707 4.28 19.962 17.638 16.627 30.629-11.803 45.976-30.042 90.15-54.21 131.291-7.005 11.925-22.208 16.128-34.344 9.502-14.926-8.152-31.867-12.461-48.992-12.461-56.464 0-102.4 45.936-102.4 102.4 0 17.125 4.309 34.066 12.461 48.992 6.627 12.136 2.421 27.341-9.502 34.344-41.141 24.166-85.314 42.406-131.291 54.21-12.992 3.336-26.349-3.918-30.629-16.627-14.038-41.701-53.035-69.718-97.038-69.718s-83 28.018-97.040 69.718c-3.578 10.624-13.502 17.437-24.25 17.437zM512 870.4c57.715 0 109.693 32.138 135.917 82.029 26.637-8.218 52.507-18.875 77.299-31.846-5.541-16.077-8.416-33.075-8.416-50.182 0-84.696 68.904-153.6 153.6-153.6 17.107 0 34.106 2.875 50.181 8.418 12.971-24.792 23.63-50.662 31.846-77.299-49.89-26.226-82.027-78.203-82.027-135.918s32.138-109.691 82.029-135.918c-8.218-26.637-18.875-52.506-31.846-77.299-16.077 5.542-33.074 8.418-50.182 8.418-84.696 0-153.6-68.904-153.6-153.6 0-17.107 2.875-34.106 8.418-50.181-24.792-12.971-50.662-23.63-77.299-31.846-26.226 49.89-78.203 82.027-135.918 82.027s-109.691-32.138-135.917-82.027c-26.637 8.216-52.507 18.874-77.299 31.846 5.542 16.075 8.416 33.072 8.416 50.181 0 84.696-68.904 153.6-153.6 153.6-17.109 0-34.106-2.874-50.181-8.418-12.973 24.794-23.63 50.662-31.846 77.299 49.89 26.227 82.027 78.203 82.027 135.918s-32.138 109.693-82.027 135.917c8.216 26.637 18.875 52.507 31.846 77.299 16.075-5.541 33.074-8.416 50.181-8.416 84.696 0 153.6 68.904 153.6 153.6 0 17.109-2.875 34.106-8.418 50.181 24.794 12.971 50.662 23.63 77.299 31.846 26.227-49.89 78.203-82.027 135.918-82.027z"></path><path d="M512 665.6c-84.696 0-153.6-68.904-153.6-153.6s68.904-153.6 153.6-153.6 153.6 68.904 153.6 153.6-68.904 153.6-153.6 153.6zM512 409.6c-56.464 0-102.4 45.936-102.4 102.4s45.936 102.4 102.4 102.4c56.464 0 102.4-45.936 102.4-102.4s-45.936-102.4-102.4-102.4z"></path></symbol>
<symbol id="lnr-heart" viewBox="0 0 1024 1024"><path d="M486.4 972.8c-4.283 0-8.566-1.074-12.434-3.222-4.808-2.67-119.088-66.624-235.122-171.376-68.643-61.97-123.467-125.363-162.944-188.418-50.365-80.443-75.901-160.715-75.901-238.584 0-148.218 120.582-268.8 268.8-268.8 50.173 0 103.462 18.805 150.051 52.952 27.251 19.973 50.442 44.043 67.549 69.606 17.107-25.565 40.299-49.634 67.55-69.606 46.589-34.147 99.878-52.952 150.050-52.952 148.218 0 268.8 120.582 268.8 268.8 0 77.869-25.538 158.141-75.901 238.584-39.478 63.054-94.301 126.446-162.944 188.418-116.034 104.754-230.314 168.706-235.122 171.376-3.867 2.149-8.15 3.222-12.434 3.222zM268.8 153.6c-119.986 0-217.6 97.614-217.6 217.6 0 155.624 120.302 297.077 221.224 388.338 90.131 81.504 181.44 138.658 213.976 158.042 32.536-19.384 123.845-76.538 213.976-158.042 100.922-91.261 221.224-232.714 221.224-388.338 0-119.986-97.616-217.6-217.6-217.6-87.187 0-171.856 71.725-193.314 136.096-3.485 10.453-13.267 17.504-24.286 17.504s-20.802-7.051-24.286-17.504c-21.456-64.371-106.125-136.096-193.314-136.096z"></path></symbol>
<symbol id="lnr-star" viewBox="0 0 1024 1024"><path d="M793.598 972.8c-4.205 0-8.422-1.034-12.258-3.126l-269.341-146.912-269.341 146.912c-8.598 4.691-19.118 4.061-27.098-1.613-7.981-5.677-12.022-15.41-10.413-25.069l49.034-294.206-195.483-195.485c-6.781-6.781-9.203-16.782-6.277-25.914s10.712-15.862 20.17-17.438l294.341-49.058 122.17-244.339c4.336-8.674 13.2-14.152 22.898-14.152s18.562 5.478 22.898 14.152l122.17 244.339 294.341 49.058c9.459 1.576 17.243 8.307 20.17 17.438s0.504 19.133-6.277 25.914l-195.483 195.485 49.034 294.206c1.61 9.659-2.434 19.392-10.413 25.069-4.419 3.144-9.621 4.739-14.84 4.739zM512 768c4.219 0 8.437 1.042 12.259 3.126l235.445 128.426-42.557-255.344c-1.36-8.155 1.302-16.464 7.15-22.309l169.626-169.626-258.131-43.022c-8.080-1.346-15.027-6.477-18.69-13.803l-105.102-210.205-105.102 210.205c-3.664 7.326-10.61 12.458-18.69 13.803l-258.131 43.022 169.624 169.626c5.846 5.845 8.509 14.155 7.15 22.309l-42.557 255.344 235.446-128.426c3.821-2.085 8.040-3.126 12.259-3.126z"></path></symbol>
<symbol id="lnr-cross" viewBox="0 0 1024 1024"><path d="M548.203 537.6l289.099-289.098c9.998-9.998 9.998-26.206 0-36.205-9.997-9.997-26.206-9.997-36.203 0l-289.099 289.099-289.098-289.099c-9.998-9.997-26.206-9.997-36.205 0-9.997 9.998-9.997 26.206 0 36.205l289.099 289.098-289.099 289.099c-9.997 9.997-9.997 26.206 0 36.203 5 4.998 11.55 7.498 18.102 7.498s13.102-2.499 18.102-7.499l289.098-289.098 289.099 289.099c4.998 4.998 11.549 7.498 18.101 7.498s13.102-2.499 18.101-7.499c9.998-9.997 9.998-26.206 0-36.203l-289.098-289.098z"></path></symbol>
<symbol id="lnr-arrow-left-circle" viewBox="0 0 1024 1024"><path d="M142.462 193.664c91.869-91.869 214.016-142.464 343.938-142.464s252.067 50.595 343.936 142.464 142.464 214.014 142.464 343.936-50.595 252.069-142.464 343.938-214.014 142.462-343.936 142.462-252.069-50.594-343.938-142.462-142.462-214.016-142.462-343.938 50.594-252.067 142.462-343.936zM486.4 972.8c239.97 0 435.2-195.23 435.2-435.2s-195.23-435.2-435.2-435.2c-239.97 0-435.2 195.23-435.2 435.2s195.23 435.2 435.2 435.2z"></path><path d="M186.701 519.501l204.8-204.8c9.995-9.998 26.206-9.998 36.203 0 9.998 9.997 9.998 26.206 0 36.203l-161.101 161.096h526.997c14.138 0 25.6 11.461 25.6 25.6s-11.462 25.6-25.6 25.6h-526.997l161.096 161.101c9.998 9.995 9.998 26.206 0 36.203-4.997 4.997-11.547 7.496-18.099 7.496s-13.102-2.499-18.099-7.501l-204.8-204.8c-10-9.997-10-26.202 0-36.198z"></path></symbol>
<symbol id="lnr-arrow-right-circle" viewBox="0 0 1024 1024"><path d="M830.338 193.664c-91.869-91.869-214.016-142.464-343.938-142.464s-252.067 50.595-343.936 142.464-142.464 214.014-142.464 343.936 50.595 252.069 142.464 343.938 214.014 142.462 343.936 142.462 252.069-50.594 343.938-142.462 142.462-214.016 142.462-343.938-50.594-252.067-142.462-343.936zM486.4 972.8c-239.97 0-435.2-195.23-435.2-435.2s195.23-435.2 435.2-435.2c239.97 0 435.2 195.23 435.2 435.2s-195.23 435.2-435.2 435.2z"></path><path d="M786.099 519.501l-204.8-204.8c-9.995-9.998-26.206-9.998-36.203 0-9.998 9.997-9.998 26.206 0 36.203l161.101 161.096h-526.997c-14.138 0-25.6 11.461-25.6 25.6s11.462 25.6 25.6 25.6h526.997l-161.096 161.101c-9.998 9.995-9.998 26.206 0 36.203 4.997 4.997 11.547 7.496 18.099 7.496s13.102-2.499 18.099-7.501l204.8-204.8c10-9.997 10-26.202 0-36.198z"></path></symbol>
<symbol id="lnr-rocket" viewBox="0 0 1024 1024"><path d="M691.2 460.8c-70.579 0-128-57.421-128-128s57.421-128 128-128 128 57.421 128 128-57.421 128-128 128zM691.2 256c-42.347 0-76.8 34.453-76.8 76.8s34.453 76.8 76.8 76.8 76.8-34.453 76.8-76.8-34.453-76.8-76.8-76.8z"></path><path d="M25.603 1024c-6.675 0-13.219-2.613-18.106-7.499-7.034-7.034-9.355-17.502-5.957-26.85 78.781-216.648 161.613-326.499 246.195-326.499 27.883 0 53.979 11.96 77.566 35.546 37.283 37.283 38.611 74.394 33.162 98.96-17.125 77.187-126.171 152.822-324.115 224.802-2.853 1.038-5.813 1.541-8.746 1.541zM247.736 714.354c-25.354 0-55.19 22.214-86.282 64.237-30.578 41.33-61.274 100.205-91.525 175.477 68.352-27.478 123.302-55.379 163.806-83.205 54.648-37.542 70.808-66.562 74.742-84.294 3.944-17.779-2.395-34.682-19.382-51.667-13.826-13.826-27.354-20.547-41.36-20.547z"></path><path d="M998.4 0c-132.848 0-251.256 22.534-351.939 66.981-82.997 36.638-154.075 88.075-211.258 152.882-10.674 12.098-20.552 24.334-29.691 36.586-44.142 2.942-89.275 20.47-134.362 52.221-38.13 26.851-76.459 64.014-113.923 110.458-62.965 78.054-101.706 154.987-103.325 158.226-5.605 11.211-2.25 24.814 7.904 32.166 4.501 3.258 9.758 4.856 14.992 4.856 6.573 0 13.109-2.52 18.064-7.434 0.243-0.24 24.714-24.299 66.469-47.926 34.41-19.474 87.461-42.336 151.613-46.384 16.219 41.541 62.662 91.181 84.954 113.47 22.291 22.291 71.931 68.734 113.472 84.955-4.046 64.152-26.91 117.202-46.382 151.611-23.629 41.757-47.686 66.227-47.89 66.432-8.878 8.878-10.006 22.885-2.666 33.070 4.952 6.87 12.77 10.634 20.782 10.634 3.867 0 7.779-0.877 11.434-2.704 3.237-1.619 80.17-40.36 158.226-103.325 46.443-37.464 83.606-75.794 110.458-113.922 31.75-45.088 49.278-90.221 52.221-134.363 12.251-9.139 24.49-19.019 36.586-29.693 64.806-57.181 116.243-128.259 152.883-211.258 44.443-100.682 66.979-219.091 66.979-351.939v-25.6h-25.6zM159.102 502.187c48.797-70.8 123.384-158.595 207.446-186.232-33.222 58.203-50.422 111.691-56.611 145.555-59.323 3.626-110.467 20.89-150.835 40.677zM521.87 864.781c19.762-40.35 36.995-91.453 40.619-150.718 33.859-6.187 87.336-23.384 145.528-56.597-27.658 83.92-115.381 158.49-186.147 207.315zM770.262 550.405c-106.48 93.952-216.794 115.195-232.662 115.195-0.102 0-10.581-0.23-38.867-20.136-19.728-13.883-42.682-33.618-64.63-55.566-21.95-21.95-41.683-44.902-55.566-64.632-19.906-28.285-20.136-38.763-20.136-38.866 0-15.869 21.243-126.182 115.197-232.662 112.416-127.406 284.533-197.059 498.894-202.227-5.17 214.358-74.822 386.477-202.229 498.894z"></path></symbol>
<symbol id="lnr-sync" viewBox="0 0 1024 1024"><path id="path1" d="M1016.501 442.698c-9.997-9.997-26.206-9.997-36.203 0l-58.832 58.832c-2.63-105.486-44.947-204.27-119.835-279.16-77.362-77.365-180.222-119.97-289.63-119.97-152.28 0-291.122 83.699-362.342 218.435-6.606 12.499-1.83 27.989 10.669 34.597 12.498 6.606 27.989 1.83 34.597-10.669 62.33-117.914 183.826-191.163 317.077-191.163 194.014 0 352.501 154.966 358.224 347.619l-58.522-58.522c-9.997-9.997-26.206-9.997-36.203 0-9.998 9.998-9.998 26.206 0 36.205l102.4 102.4c4.998 4.998 11.549 7.498 18.101 7.498s13.102-2.499 18.101-7.499l102.4-102.4c9.998-9.997 9.998-26.205 0-36.203z"></path><path id="path2" d="M863.674 668.566c-12.502-6.603-27.99-1.832-34.597 10.669-62.328 117.915-183.826 191.165-317.077 191.165-194.016 0-352.502-154.966-358.224-347.621l58.522 58.522c5 5 11.55 7.499 18.102 7.499s13.102-2.499 18.102-7.499c9.997-9.997 9.997-26.206 0-36.203l-102.4-102.4c-9.998-9.997-26.206-9.997-36.205 0l-102.4 102.4c-9.997 9.997-9.997 26.206 0 36.203s26.206 9.997 36.205 0l58.83-58.832c2.63 105.488 44.946 204.272 119.835 279.162 77.365 77.363 180.224 119.97 289.632 119.97 152.28 0 291.12-83.699 362.342-218.435 6.608-12.501 1.829-27.99-10.669-34.598z"></path></symbol>
<symbol id="lnr-checkmark-circle" viewBox="0 0 1024 1024"><path d="M486.4 1024c-129.922 0-252.067-50.594-343.936-142.464s-142.464-214.014-142.464-343.936c0-129.923 50.595-252.067 142.464-343.936s214.013-142.464 343.936-142.464c129.922 0 252.067 50.595 343.936 142.464s142.464 214.014 142.464 343.936-50.594 252.067-142.464 343.936c-91.869 91.87-214.014 142.464-343.936 142.464zM486.4 102.4c-239.97 0-435.2 195.23-435.2 435.2s195.23 435.2 435.2 435.2 435.2-195.23 435.2-435.2-195.23-435.2-435.2-435.2z"></path><path d="M384 742.4c-6.552 0-13.102-2.499-18.102-7.499l-153.6-153.6c-9.997-9.997-9.997-26.206 0-36.203 9.998-9.997 26.206-9.997 36.205 0l135.498 135.498 340.299-340.298c9.997-9.997 26.206-9.997 36.203 0 9.998 9.998 9.998 26.206 0 36.205l-358.4 358.4c-5 4.998-11.55 7.498-18.102 7.498z"></path></symbol>
<symbol id="lnr-arrow-down-circle" viewBox="0 0 1024 1024"><path d="M830.336 881.538c91.869-91.869 142.464-214.016 142.464-343.938s-50.595-252.067-142.464-343.936-214.014-142.464-343.936-142.464-252.069 50.595-343.938 142.464-142.462 214.014-142.462 343.936 50.594 252.069 142.462 343.938 214.016 142.462 343.938 142.462 252.067-50.594 343.936-142.462zM51.2 537.6c0-239.97 195.23-435.2 435.2-435.2s435.2 195.23 435.2 435.2c0 239.97-195.23 435.2-435.2 435.2s-435.2-195.23-435.2-435.2z"></path><path d="M504.499 837.299l204.8-204.8c9.998-9.995 9.998-26.206 0-36.203-9.997-9.998-26.206-9.998-36.203 0l-161.096 161.101v-526.997c0-14.138-11.461-25.6-25.6-25.6s-25.6 11.462-25.6 25.6v526.997l-161.101-161.096c-9.995-9.998-26.206-9.998-36.203 0-4.997 4.997-7.496 11.547-7.496 18.099s2.499 13.102 7.501 18.099l204.8 204.8c9.997 10 26.202 10 36.198 0z"></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>
<svg id="tgb" onclick="TgT()"><use xlink:href="#lnr-power-switch"></use></svg>
<svg id="mdb" onclick="TgHSB()"><use xlink:href="#lnr-list"></use></svg>
<svg id="psb" onclick="TgPS()"><use xlink:href="#lnr-heart"></use></svg>
<svg id="fxb" onclick="TgFX()"><use xlink:href="#lnr-star"></use></svg>
<svg id="nlb" onclick="TgNl()"><use xlink:href="#lnr-moon"></use></svg>
<svg id="nsb" onclick="TgN()"><use xlink:href="#lnr-sync"></use></svg>
<svg id="stb" onclick="TgSettings()"><use xlink:href="#lnr-cog"></use></svg>
</div>
<div id="cdB" class="ctrl_box">
<form id="form_c" name="Ctrl_form">
<form id="form_c" name="Cf">
<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>
@ -565,11 +594,34 @@
<div id="slW" class="sliderW">
<input type="range" title="White Value" class="sliders" name="SW" value="0" min="0" max="255" step="1" onchange="GetCheck()"> </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()">
Effect Panel<br><br>
<svg id="fmr" onclick="SwitchFX(-100)"><use xlink:href="#lnr-cross"></use></svg>
<svg id="for" onclick="SwitchFX(-1)"><use xlink:href="#lnr-arrow-left-circle"></use></svg>
<svg id="fmf" onclick="SwitchFX(1)"><use xlink:href="#lnr-arrow-right-circle"></use></svg>
<svg id="fof" onclick="SwitchFX(100)"><use xlink:href="#lnr-rocket"></use></svg>
<br><input id="fxI" name = "TF" type="number" value="0" min="0" max="57" step="1" onchange="GetFX()"><br><br>
Set secondary color to
<button type="button" onclick="colSec(0)">White</button>
<button type="button" onclick="colSec(1)">Black</button>
<button type="button" onclick="colSec(2)">Random</button>
<button type="button" onclick="colSec(3)">Primary</button>
<button type="button" onclick="colSec(4)">Swap P/S</button>
<div id="ccX" class = "toolsCC">
<br>Custom Theater Chase<br>
using <input id="ccP" name = "PF" type="number" value="2" min="0" max="255" step="1" onchange="GetCC()"> primary and
<input id="ccS" name = "SF" type="number" value="4" min="0" max="255" step="1" onchange="GetCC()"> secondary color LEDs, <br>
doing <input id="ccH" name = "HF" type="number" value="1" min="0" max="255" step="1" onchange="GetCC()"> steps per tick,
from <input type="checkbox" onchange="GetCC()" name="SC"> start and <input type="checkbox" onchange="GetCC()" name="EC"> end.
</div>
</div>
<div id="tlP" class = "toolsPS">
Favorite Presets<br><br>
<svg id="psl" onclick="PSIO(false)"><use xlink:href="#lnr-checkmark-circle"></use></svg>
<svg id="psp" onclick="SwitchPS(-1)"><use xlink:href="#lnr-arrow-left-circle"></use></svg>
<svg id="psn" onclick="SwitchPS(1)"><use xlink:href="#lnr-arrow-right-circle"></use></svg>
<svg id="pss" onclick="PSIO(true)"><use xlink:href="#lnr-arrow-down-circle"></use></svg>
<br><input id="psI" name = "FF" type="number" value="0" min="0" max="24" step="1"><br><br>
Click checkmark to apply <input type="checkbox" checked="true" name="BC"> brightness, <input type="checkbox" checked="true" name="CC"> color and <input type="checkbox" checked="true" name="FC"> effects.
</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>

View File

@ -16,6 +16,9 @@
body {
line-height: 150%;
}
input[type=number] {
width: 3em;
}
</style>
</head>
<body onload="GetCurrent()" class=" __plain_text_READY__">
@ -28,23 +31,23 @@
Network SSID (leave empty to not connect): <br><input name="CSSID" maxlength="32"> <br>
Network password: <br> <input type="password" name="CPASS" maxlength="63"> <br>
Static IP (leave at 0.0.0.0 for DHCP): <br>
<input name="CSIP0" maxlength="3" size="2"> .
<input name="CSIP1" maxlength="3" size="2"> .
<input name="CSIP2" maxlength="3" size="2"> .
<input name="CSIP3" maxlength="3" size="2"> <br>
<input name="CSIP0" type="number" min="0" max="255" required> .
<input name="CSIP1" type="number" min="0" max="255" required> .
<input name="CSIP2" type="number" min="0" max="255" required> .
<input name="CSIP3" type="number" min="0" max="255" required> <br>
Static gateway: <br>
<input name="CSGW0" maxlength="3" size="2"> .
<input name="CSGW1" maxlength="3" size="2"> .
<input name="CSGW2" maxlength="3" size="2"> .
<input name="CSGW3" maxlength="3" size="2"> <br>
<input name="CSGW0" type="number" min="0" max="255" required> .
<input name="CSGW1" type="number" min="0" max="255" required> .
<input name="CSGW2" type="number" min="0" max="255" required> .
<input name="CSGW3" type="number" min="0" max="255" required> <br>
Static subnet mask: <br>
<input name="CSSN0" maxlength="3" size="2"> .
<input name="CSSN1" maxlength="3" size="2"> .
<input name="CSSN2" maxlength="3" size="2"> .
<input name="CSSN3" maxlength="3" size="2"> <br>
<input name="CSSN0" type="number" min="0" max="255" required> .
<input name="CSSN1" type="number" min="0" max="255" required> .
<input name="CSSN2" type="number" min="0" max="255" required> .
<input name="CSSN3" type="number" min="0" max="255" required> <br>
mDNS address (leave empty for no mDNS): <br/>
http:// <input name="CMDNS" maxlength="32"> .local <br>
Try connecting before opening AP for: <input name="APWTM" maxlength="3" size="2"> s <br>
Try connecting before opening AP for: <input name="APWTM" type="number" min="0" max="255" required> s <br>
Client IP: <span class="sip"> Not connected </span> <br>
<h3>Configure Access Point</h3>
AP SSID (leave empty for no AP): <br> <input name="APSSID" maxlength="32"> <br>
@ -58,20 +61,21 @@
Server description: <input name="DESC" maxlength="32"> <br>
Use HSB sliders instead of RGB by default: <input type="checkbox" name="COLMD"> <br>
<h3>LED setup</h3>
LED count (max. 255): <input name="LEDCN" maxlength="3" size="2"> <br>
LED count (max. 255): <input name="LEDCN" type="number" min="0" max="255" required> <br>
<i>The default boot color is saved in preset slot 0.</i><br>
Default RGB color:
<input name="CLDFR" maxlength="3" size="2">
<input name="CLDFG" maxlength="3" size="2">
<input name="CLDFB" maxlength="3" size="2"> <br>
Default brightness: <input name="CLDFA" maxlength="3" size="2"> (0-255) <br>
Default white value (only RGBW, -1 to disable): <input name="CLDFW" maxlength="3" size="2"> <br>
Default effect ID: <input name="FXDEF" maxlength="3" size="2"> <br>
Default effect speed: <input name="SXDEF" maxlength="3" size="2"> <br>
<input name="CLDFR" type="number" min="0" max="255" required>
<input name="CLDFG" type="number" min="0" max="255" required>
<input name="CLDFB" type="number" min="0" max="255" required> <br>
Default brightness: <input name="CLDFA" type="number" min="0" max="255" required> (0-255) <br>
Default white value (only RGBW, -1 to disable): <input name="CLDFW" type="number" min="-1" max="255" required> <br>
Default effect ID: <input name="FXDEF" type="number" min="0" max="255" required> <br>
Default effect speed: <input name="SXDEF" type="number" min="0" max="255" required> <br>
Ignore and use current color, brightness and effects: <input type="checkbox" name="CBEOR"> <br>
Turn on after power up/reset: <input type="checkbox" name="BOOTN"> <br>
Use Gamma correction for brightness: <input type="checkbox" name="GCBRI"> <br>
Use Gamma correction for color: <input type="checkbox" name="GCRGB"> <br>
Brightness factor: <input name="NRBRI" maxlength="3" size="2"> % <br>
Brightness factor: <input name="NRBRI" type="number" min="0" max="255" required> % <br>
<h3>Button setup</h3>
On/Off button enabled: <input type="checkbox" name="BTNON"> <br>
<h3>Transitions</h3>
@ -79,8 +83,8 @@
Sweep: <input type="checkbox" name="TSWEE"> Invert direction: <input type="checkbox" name="TSDIR"><br>
Transition Delay: <input name="TDLAY" maxlength="5" size="2"> ms <br>
<h3>Timed light</h3>
Target brightness: <input name="TLBRI" maxlength="3" size="2"> (0-255) <br>
Change after: <input name="TLDUR" maxlength="3" size="2"> min <br>
Target brightness: <input name="TLBRI" type="number" min="0" max="255" required> (0-255) <br>
Change after: <input name="TLDUR" type="number" min="0" max="255" required> min <br>
Fade: <input type="checkbox" name="TLFDE"> <br>
<h3>Broadcast</h3>
UDP Port: <input name="NUDPP" maxlength="5" size="2"><br>
@ -96,8 +100,8 @@
Get time from NTP server: <input type="checkbox" name="NTPON"> <br>
Current local time is <span class="times">unknown</span> <br>
<h3>Advanced</h3>
Default overlay ID: <input name="OLDEF" maxlength="3" size="2"> <br>
WARLS offset: <input name="WOFFS" maxlength="3" size="2"> negative <input type="checkbox" name="WOFFN"><br>
Default overlay ID: <input name="OLDEF" type="number" min="0" max="255" required> <br>
WARLS offset: <input name="WOFFS" type="number" min="0" max="255" required> negative <input type="checkbox" name="WOFFN"><br>
<h3>Security</h3>
OTA locked: <input type="checkbox" name="NOOTA"> <br>
Passphrase: <input type="password" name="OPASS" maxlength="32"> <br>
@ -115,12 +119,13 @@
<h3>About</h3>
WLED version 0.4p <br>
(c) 2016-2017 Christian Schwinne <br>
<i>Licensed under the MIT license</i> <br>
<i>Licensed under the MIT license</i> <br><br>
<i>Uses libraries:</i> <br>
<i>ESP8266 Arduino Core</i> <br>
<i>WS2812FX by kitesurfer1404 (Aircoookie fork)</i> <br>
<i>Timezone library by JChristensen</i> <br>
<i>arduino-esp8266-alexa-multiple-wemo-switch by kakopappa</i> <br>
<i>arduino-esp8266-alexa-multiple-wemo-switch by kakopappa</i> <br><br>
<i>UI icons by <a href="https://linearicons.com">Linearicons</a> created by <a href="https://perxis.com">Perxis</a>! (CC-BY-SA 4.0)</i> <br><br>
Server message: <span class="msg"> XML response error! </span>
<br><br><hr>
<div align="center"><input type="submit" name="SUBM" value="Save"></div>

File diff suppressed because one or more lines are too long

View File

@ -13,113 +13,120 @@ var d=document;
const char PAGE_settings1[] PROGMEM = R"=====(
}</script>
<style>body{line-height:150%}</style>
<style>
body {
line-height: 150%;
}
input[type=number] {width: 3em;}
</style>
</head>
<body onload=GetCurrent() class=__plain_text_READY__>
<h1 style=text-align:center>WLED Settings</h1>
<form id=form_s name=Sf action=set-settings method=post>
<div align=center><input type=submit name=SUBM value=Save></div>
<body onload="GetCurrent()" class=" __plain_text_READY__">
<h1 style="text-align:center">WLED Settings</h1>
<form id="form_s" name="Sf" action="set-settings" method="post">
<div align="center"><input type="submit" name="SUBM" value="Save"></div>
<hr>
<h2>WiFi setup</h2>
<h3>Connect to existing network</h3>
Network SSID (leave empty to not connect): <br><input name=CSSID maxlength=32> <br>
Network password: <br> <input type=password name=CPASS maxlength=63> <br>
Network SSID (leave empty to not connect): <br><input name="CSSID" maxlength="32"> <br>
Network password: <br> <input type="password" name="CPASS" maxlength="63"> <br>
Static IP (leave at 0.0.0.0 for DHCP): <br>
<input name=CSIP0 maxlength=3 size=2> .
<input name=CSIP1 maxlength=3 size=2> .
<input name=CSIP2 maxlength=3 size=2> .
<input name=CSIP3 maxlength=3 size=2> <br>
<input name="CSIP0" type="number" min="0" max="255" required> .
<input name="CSIP1" type="number" min="0" max="255" required> .
<input name="CSIP2" type="number" min="0" max="255" required> .
<input name="CSIP3" type="number" min="0" max="255" required> <br>
Static gateway: <br>
<input name=CSGW0 maxlength=3 size=2> .
<input name=CSGW1 maxlength=3 size=2> .
<input name=CSGW2 maxlength=3 size=2> .
<input name=CSGW3 maxlength=3 size=2> <br>
<input name="CSGW0" type="number" min="0" max="255" required> .
<input name="CSGW1" type="number" min="0" max="255" required> .
<input name="CSGW2" type="number" min="0" max="255" required> .
<input name="CSGW3" type="number" min="0" max="255" required> <br>
Static subnet mask: <br>
<input name=CSSN0 maxlength=3 size=2> .
<input name=CSSN1 maxlength=3 size=2> .
<input name=CSSN2 maxlength=3 size=2> .
<input name=CSSN3 maxlength=3 size=2> <br>
<input name="CSSN0" type="number" min="0" max="255" required> .
<input name="CSSN1" type="number" min="0" max="255" required> .
<input name="CSSN2" type="number" min="0" max="255" required> .
<input name="CSSN3" type="number" min="0" max="255" required> <br>
mDNS address (leave empty for no mDNS): <br/>
http:// <input name=CMDNS maxlength=32> .local <br>
Try connecting before opening AP for: <input name="APWTM" maxlength="3" size="2"> s <br>
Client IP: <span class=sip> Not connected </span> <br>
http:// <input name="CMDNS" maxlength="32"> .local <br>
Try connecting before opening AP for: <input name="APWTM" type="number" min="0" max="255" required> s <br>
Client IP: <span class="sip"> Not connected </span> <br>
<h3>Configure Access Point</h3>
AP SSID (leave empty for no AP): <br> <input name=APSSID maxlength=32> <br>
Hide AP SSID: <input type=checkbox name=APHSSID> <br>
AP password (leave empty for open): <br> <input type=password name=APPASS maxlength=63> <br>
AP channel: <input name=APCHAN maxlength=2 size=2> <br>
AP IP: <span class=sip> Not active </span> <br>
AP SSID (leave empty for no AP): <br> <input name="APSSID" maxlength="32"> <br>
Hide AP SSID: <input type="checkbox" name="APHSSID"> <br>
AP password (leave empty for open): <br> <input type="password" name="APPASS" maxlength="63"> <br>
AP channel: <input name="APCHAN" maxlength="2" size="2"> <br>
AP IP: <span class="sip"> Not active </span> <br>
<hr>
<h2>Application setup</h2>
<h3>Web setup</h3>
Server description: <input name=DESC maxlength=32> <br>
Use HSB sliders instead of RGB by default: <input type=checkbox name=COLMD> <br>
Server description: <input name="DESC" maxlength="32"> <br>
Use HSB sliders instead of RGB by default: <input type="checkbox" name="COLMD"> <br>
<h3>LED setup</h3>
LED count (max. 255): <input name=LEDCN maxlength=3 size=2> <br>
LED count (max. 255): <input name="LEDCN" type="number" min="0" max="255" required> <br>
<i>The default boot color is saved in preset slot 0.</i><br>
Default RGB color:
<input name=CLDFR maxlength=3 size=2>
<input name=CLDFG maxlength=3 size=2>
<input name=CLDFB maxlength=3 size=2> <br>
Default brightness: <input name=CLDFA maxlength=3 size=2> (0-255) <br>
Default white value (only RGBW, -1 to disable): <input name=CLDFW maxlength=3 size=2> <br>
Default effect ID: <input name=FXDEF maxlength=3 size=2> <br>
Default effect speed: <input name=SXDEF maxlength=3 size=2> <br>
Ignore and use current color, brightness and effects: <input type=checkbox name=CBEOR> <br>
Turn on after power up/reset: <input type=checkbox name=BOOTN> <br>
Use Gamma correction for brightness: <input type=checkbox name=GCBRI> <br>
Use Gamma correction for color: <input type=checkbox name=GCRGB> <br>
Brightness factor: <input name=NRBRI maxlength=3 size=2> % <br>
<input name="CLDFR" type="number" min="0" max="255" required>
<input name="CLDFG" type="number" min="0" max="255" required>
<input name="CLDFB" type="number" min="0" max="255" required> <br>
Default brightness: <input name="CLDFA" type="number" min="0" max="255" required> (0-255) <br>
Default white value (only RGBW, -1 to disable): <input name="CLDFW" type="number" min="-1" max="255" required> <br>
Default effect ID: <input name="FXDEF" type="number" min="0" max="255" required> <br>
Default effect speed: <input name="SXDEF" type="number" min="0" max="255" required> <br>
Ignore and use current color, brightness and effects: <input type="checkbox" name="CBEOR"> <br>
Turn on after power up/reset: <input type="checkbox" name="BOOTN"> <br>
Use Gamma correction for brightness: <input type="checkbox" name="GCBRI"> <br>
Use Gamma correction for color: <input type="checkbox" name="GCRGB"> <br>
Brightness factor: <input name="NRBRI" type="number" min="0" max="255" required> % <br>
<h3>Button setup</h3>
On/Off button enabled: <input type=checkbox name=BTNON> <br>
On/Off button enabled: <input type="checkbox" name="BTNON"> <br>
<h3>Transitions</h3>
Fade: <input type=checkbox name=TFADE> <br>
Sweep: <input type=checkbox name=TSWEE> Invert direction: <input type=checkbox name=TSDIR><br>
Transition Delay: <input name=TDLAY maxlength=5 size=2> ms <br>
Fade: <input type="checkbox" name="TFADE"> <br>
Sweep: <input type="checkbox" name="TSWEE"> Invert direction: <input type="checkbox" name="TSDIR"><br>
Transition Delay: <input name="TDLAY" maxlength="5" size="2"> ms <br>
<h3>Timed light</h3>
Target brightness: <input name=TLBRI maxlength=3 size=2> (0-255) <br>
Change after: <input name=TLDUR maxlength=3 size=2> min <br>
Fade: <input type=checkbox name=TLFDE> <br>
Target brightness: <input name="TLBRI" type="number" min="0" max="255" required> (0-255) <br>
Change after: <input name="TLDUR" type="number" min="0" max="255" required> min <br>
Fade: <input type="checkbox" name="TLFDE"> <br>
<h3>Broadcast</h3>
UDP Port: <input name=NUDPP maxlength=5 size=2><br>
Receive notifications: <input type=checkbox name=NRCVE> <br>
Send notifications on direct change: <input type=checkbox name=NSDIR> <br>
Send notifications on button press: <input type=checkbox name=NSBTN> <br>
UDP Port: <input name="NUDPP" maxlength="5" size="2"><br>
Receive notifications: <input type="checkbox" name="NRCVE"> <br>
Send notifications on direct change: <input type="checkbox" name="NSDIR"> <br>
Send notifications on button press: <input type="checkbox" name="NSBTN"> <br>
<h3>Interfaces</h3>
Emulate Alexa device: <input type=checkbox name=ALEXA> <br>
Alexa invocation name: <input name=AINVN maxlength=32><br>
Send Alexa notifications: <input type=checkbox name=NSALX> <br>
Emulate Alexa device: <input type="checkbox" name="ALEXA"> <br>
Alexa invocation name: <input name="AINVN" maxlength="32"><br>
Send Alexa notifications: <input type="checkbox" name="NSALX"> <br>
<h3>Time (experimental!)</h3>
NTP was updated but still causes crashes. Requires reboot. <br>
Get time from NTP server: <input type=checkbox name=NTPON> <br>
Current local time is <span class=times>unknown</span> <br>
Get time from NTP server: <input type="checkbox" name="NTPON"> <br>
Current local time is <span class="times">unknown</span> <br>
<h3>Advanced</h3>
Default overlay ID: <input name=OLDEF maxlength=3 size=2> <br>
WARLS offset: <input name=WOFFS maxlength=3 size=2> negative <input type=checkbox name=WOFFN><br>
Default overlay ID: <input name="OLDEF" type="number" min="0" max="255" required> <br>
WARLS offset: <input name="WOFFS" type="number" min="0" max="255" required> negative <input type="checkbox" name="WOFFN"><br>
<h3>Security</h3>
OTA locked: <input type=checkbox name=NOOTA> <br>
Passphrase: <input type=password name=OPASS maxlength=32> <br>
OTA locked: <input type="checkbox" name="NOOTA"> <br>
Passphrase: <input type="password" name="OPASS" maxlength="32"> <br>
To enable OTA, for security reasons you need to also enter the correct password! <br>
The password may/should be changed when OTA is enabled. <br>
Disable OTA when not in use, otherwise an attacker could reflash device software! <br> <br>
Disable recovery AP: <input type=checkbox name=NORAP> <br>
Disable recovery AP: <input type="checkbox" name="NORAP"> <br>
In case of a connection error there will be no wireless recovery possible! <br>
Completely disables all Access Point functions. <br>
Setting only changable if OTA is enabled! <br><br>
Factory reset: <input type=checkbox name=RESET> <br>
Factory reset: <input type="checkbox" name="RESET"> <br>
All EEPROM content (settings) will be erased. <br> <br>
HTTP traffic is not encrypted. An attacker in the same network could intercept form data!<br>
<h3>About</h3>
WLED version 0.4p <br>
(c) 2016-2017 Christian Schwinne <br>
<i>Licensed under the MIT license</i> <br>
<i>Licensed under the MIT license</i> <br><br>
<i>Uses libraries:</i> <br>
<i>ESP8266 Arduino Core</i> <br>
<i>WS2812FX by kitesurfer1404 (Aircoookie fork)</i> <br>
<i>Timezone library by JChristensen</i> <br>
<i>arduino-esp8266-alexa-multiple-wemo-switch by kakopappa</i> <br>
Server message: <span class=msg> XML response error! </span>
<i>arduino-esp8266-alexa-multiple-wemo-switch by kakopappa</i> <br><br>
<i>UI icons by <a href="https://linearicons.com">Linearicons</a> created by <a href="https://perxis.com">Perxis</a>! (CC-BY-SA 4.0)</i> <br><br>
Server message: <span class="msg"> XML response error! </span>
<br><br><hr>
<div align=center><input type=submit name=SUBM value=Save></div>
<div align="center"><input type="submit" name="SUBM" value="Save"></div>
</form>
</body>
</html>

View File

@ -20,7 +20,7 @@
#include "CallbackFunction.h"
//version in format yymmddb (b = daily build)
#define VERSION 1712022
#define VERSION 1712090
//If you have an RGBW strip, uncomment first line in WS2812FX.h!
@ -31,7 +31,7 @@
//#define USEFS
//overlays, needed for clocks etc.
#define USEOVERLAYS
//#define USEOVERLAYS
#ifdef USEFS
#include <FS.h>

View File

@ -82,7 +82,13 @@ void wledInit()
if(!handleFileRead("/favicon.ico")) server.send(200, "image/x-icon", favicon);
});
server.on("/", HTTP_GET, [](){
if(!handleFileRead("/index.htm")) server.send(200, "text/html", PAGE_index);
if(!handleFileRead("/index.htm")) {
server.setContentLength(strlen_P(PAGE_index0) + strlen_P(PAGE_index1) + strlen_P(PAGE_index2));
server.send(200, "text/html", "");
server.sendContent_P(PAGE_index0);
server.sendContent_P(PAGE_index1);
server.sendContent_P(PAGE_index2);
}
});
server.on("/reset", HTTP_GET, [](){
server.send(200, "text/plain", "Rebooting...");