WLED/wled00/data/index.htm
cschwinne 6ebe889d5e Version 0.5.0 nearly done
Improved user interface
Added Nightlight user interface page
Added Welcome page for new users
Added 12 User Interface Themes
Added option for custom theme, including font
Separated settings page into 6 sub-pages
Fixed Favicon not working
Fixed Alexa discovery bug
Added options to specify receiving brightness/color/effect from notifications
Added effect intensity setting. Only experimental use by 3 effects (blink) at the moment
Improved speed of Access point availability on initial setup
Removed need to reboot after enabling NTP time

TODO: IX bug
Updating readmes
2018-02-23 01:33:32 +01:00

681 lines
36 KiB
HTML

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico'/>
<title>WLED 0.5.0</title>
<script>
var d=document;
var w=window.getComputedStyle(d.querySelector("html"));
resp="";
var nla=false;
var nra=false;
var nsa=false;
var sto=false;
var uwv=false;
var sbf=true;
var firstload=true;
var lastsx = 0;
var nState = 0;
var cv=0;
var lm=0;
aC="";
bC="";
dC="";
function gId(s) //abbrev
{
return d.getElementById(s);
}
function Startup()
{
var w=window.getComputedStyle(d.querySelector("html"));
aC = w.getPropertyValue("--aCol");
bC = w.getPropertyValue("--bCol");
dC = w.getPropertyValue("--dCol");
CV(0);
setInterval('GIO()', 5000);
GIO();
}
function GIO()
{
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseXML != null) {
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) {
d.Cf.SW.value = this.responseXML.getElementsByTagName('wv')[0].childNodes[0].nodeValue;
uwv = true;
} else {
uwv = false;
}
Cf.TX.selectedIndex = this.responseXML.getElementsByTagName('fx')[0].childNodes[0].nodeValue;
d.Cf.SX.value = this.responseXML.getElementsByTagName('sx')[0].childNodes[0].nodeValue;
d.Cf.IX.value = this.responseXML.getElementsByTagName('ix')[0].childNodes[0].nodeValue;
nla = (this.responseXML.getElementsByTagName('nl')[0].innerHTML)!=0?true:false;
if(firstload){
d.Cf.NC.checked = (this.responseXML.getElementsByTagName('nf')[0].innerHTML)!=0?true:false;
d.Cf.SN.value = this.responseXML.getElementsByTagName('nd')[0].childNodes[0].nodeValue;
d.Cf.ST.value = this.responseXML.getElementsByTagName('nt')[0].childNodes[0].nodeValue;
CV(parseInt(this.responseXML.getElementsByTagName('md')[0].childNodes[0].nodeValue));
}firstload=false;
nState = 0;
nState = (this.responseXML.getElementsByTagName('nr')[0].innerHTML)!=0?1:0;
nState += (this.responseXML.getElementsByTagName('ns')[0].innerHTML)!=0?2:0;
d.getElementsByClassName("desc")[0].innerHTML = this.responseXML.getElementsByTagName('desc')[0].innerHTML;
UV();
}
}
}
}
request.open("GET", "win/" +resp +nocache, true);
request.send(null);
resp="";
}
function GC()
{
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 GX()
{
resp+="&FX=" + Cf.TX.selectedIndex;
resp+="&SX=" + Cf.SX.value;
resp+="&IX=" + Cf.IX.value;
UV();
GIO();
}
function GetRGB()
{
var r, g, b, i, f, p, q, t;
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;
}
d.Cf.SR.value=r;
d.Cf.SG.value=g;
d.Cf.SB.value=b;
GC();
}
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";
GIO();
}
function CV(v)
{
if (sto) CloseSettings();
gId("slA").style.display="none";
gId("srgb").style.display="none";
gId("shs").style.display="none";
gId("slW").style.display="none";
gId("tlX").style.display="none";
gId("tlP").style.display="none";
gId("tlN").style.display="none";
if (v<2){
if (uwv) gId("slW").style.display="block";
gId("slA").style.display="block";
}
switch(v){
case 0: gId("srgb").style.display="block";lm=0;break;
case 1: gId("shs").style.display="block";lm=1;break;
case 2: gId("tlP").style.display="block";break;
case 3: gId("tlX").style.display="block";break;
case 4: gId("tlN").style.display="block";
}
cv=v;
mdb.style.fill=(lm>0)?aC:dC;
}
function rgb2hex(red,green,blue) {
var rgb = blue | (green << 8) | (red << 16);
return '#' +(0x1000000 +rgb).toString(16).slice(1)
}
function lingrad(r,g,b) {
return "linear-gradient("+bC+","+rgb2hex(r,g,b)+")";
}
function UV()
{
d.body.style.background = lingrad(Cf.SR.value,Cf.SG.value,Cf.SB.value);
setHS(Cf.SR.value,Cf.SG.value,Cf.SB.value);
fxb.style.fill=(d.Cf.TX.selectedIndex>0)?aC:dC;
nlb.style.fill=(nla)?aC:dC;
ntb.style.fill=(nla)?aC:dC;
switch(nState)
{
case 0: gId("path1").style.fill = dC; gId("path2").style.fill = dC;break;
case 1: gId("path1").style.fill = aC; gId("path2").style.fill = dC;break;
case 2: gId("path1").style.fill = dC;gId("path2").style.fill = aC;break;
case 3: gId("path1").style.fill = aC; gId("path2").style.fill = aC;
}
tgb.style.fill=(Cf.SA.value>0)?aC:dC;
ccX.style.display=(Cf.TX.selectedIndex>52)?"block":"none";
fof.style.fill=(Cf.TX.selectedIndex>52)?aC:dC;
fmr.style.fill=(Cf.TX.selectedIndex<1)?aC:dC;
}
function TgT()
{
if (Cf.SA.value > 0)
{
resp += "&T=0";
Cf.SA.value = 0;
} else
{
resp += "&T=2";
}
UV();
GIO();
}
function SwFX(s)
{
var n=Cf.TX.selectedIndex+s;
Cf.TX.selectedIndex =n;
if (n < 0) Cf.TX.selectedIndex = 0;
if (n > 57) Cf.TX.selectedIndex = 53;
GX();
}
function TgHSB()
{
if (cv<2)
{
(cv)?CV(0):CV(1);
}else{
CV(lm);
}
}
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 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;}
}
}
GIO();
}
function OpenSettings()
{
sto=true;
stb.style.fill=aC;
cdB.style.display="none";
stf.style.display="inline";
if(sbf)stf.src="/settings";
sbf=false;
}
function CloseSettings()
{
sto=false;
stb.style.fill=dC;
cdB.style.display="inline";
stf.style.display="none";
}
function TgS()
{
if(sto)
{
CloseSettings();
}else{
OpenSettings();
}
}
function TgNl()
{
nla=!nla;
if(nla){
resp+="&NL="+d.Cf.SN.value;
resp+="&NT="+d.Cf.ST.value;
resp+=(d.Cf.NC.checked)?"&NF=1":"&NF=0";
}else{
resp+="&NL=0";
}
UV();
GIO();
}
function TgN()
{
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";
}
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),
diffc = function(c){
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);
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 (s>0) d.Cf.SH.value=h;
d.Cf.SS.value=s;
}
function CS(i)
{
switch(i)
{
case 0: resp+="&SW";break;
case 1: resp+="&SB";break;
case 2: resp+="&SR=1";break;
case 3: resp+="&SP";break;
case 4: resp+="&SC";break;
case 5: resp+="&SR=0";
}
GIO();
}
</script>
<style>
:root {
--aCol: #0ac;
--bCol: #124;
--cCol: #334;
--dCol: #288;
--sCol: #FF00FF;
--cFn: Verdana;
}
.ctrl_box {
margin: auto;
width: 80vw;
background-color: var(--cCol);
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow( -5px -5px 5px var(--sCol) );
}
.sds {
width: 100%;
height: 12vh;
margin-top: 2vh;
}
.sl {
margin-left: auto;
margin-right: auto;
margin-top: 2vh;
width: 77vw;
}
#slA {
margin-top: 0vh;
background: linear-gradient(to right, black, yellow);
}
#slR {
background: linear-gradient(to right, black, red);
}
#slG {
background: linear-gradient(to right, black, green);
}
#slB {
background: linear-gradient(to right, black, blue);
}
#slW {
background: linear-gradient(to right, black, white);
}
#slH {
background: linear-gradient(to right, red, orange , yellow, green, cyan, blue, violet, red);
}
#slS {
background: linear-gradient(to right, grey, green);
}
#slN {
background: linear-gradient(to right, black, turquoise);
}
#slT {
background: linear-gradient(to right, black, yellow);
}
.tools {
margin-left: auto;
margin-right: auto;
margin-top: 2vh;
width: 77vw;
}
#slX {
background: linear-gradient(to right, black, white);
}
#slI {
background: linear-gradient(to right, black, red);
}
body {
font-family: var(--cFn), Helvetica, sans-serif;
text-align: center;
background: linear-gradient(var(--bCol),black);
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
color: var(--tCol);
}
html {
height: 100%;
}
iframe {
display:none;
border:none;
filter: drop-shadow( -5px -5px 5px var(--sCol) );
margin: auto;
width: 80vw;
height: 60vh;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
}
svg {
fill: var(--dCol);
width: 12vw;
height: 10vmin;
filter: drop-shadow( -5px -5px 5px var(--sCol) );
}
input {
filter: drop-shadow( -5px -5px 5px var(--sCol) );
font-family: var(--cFn), sans-serif;
}
button {
background: var(--bCol);
color: var(--dCol);
border: 0.5ch solid var(--bCol);
margin-bottom: 1vh;
filter: drop-shadow( -5px -5px 5px var(--sCol) );
font-family: var(--cFn), sans-serif;
}
select {
background: var(--bCol);
color: var(--tCol);
border: 0.5ch solid var(--bCol);
filter: drop-shadow( -5px -5px 5px var(--sCol) );
font-family: var(--cFn), sans-serif;
}
input[type=number] {
background: var(--bCol);
color: var(--tCol);
border: 0.5ch solid var(--bCol);
width: 3em;
}
input[type=range] {
-webkit-appearance: none;
margin: -4px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 12vh;
cursor: pointer;
background: var(--bCol);
}
input[type=range]::-webkit-slider-thumb {
filter: drop-shadow( -5px -5px 5px var(--sCol) );
height: 10vh;
width: 10vh;
background: var(--aCol);
cursor: pointer;
-webkit-appearance: none;
margin-top: 1vh;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 12vh;
cursor: pointer;
background: var(--bCol);
}
input[type=range]::-moz-range-thumb {
filter: drop-shadow( -5px -5px 5px var(--sCol) );
height: 10vh;
width: 10vh;
background: var(--aCol);
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: #var(--bCol);
}
input[type=range]::-ms-fill-upper {
background: #var(--bCol);
}
input[type=range]::-ms-thumb {
width: 10vh;
background: var(--aCol);
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>
//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="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="CV(2)"><use xlink:href="#lnr-heart"></use></svg>
<svg id="fxb" onclick="CV(3)"><use xlink:href="#lnr-star"></use></svg>
<svg id="nlb" onclick="CV(4)"><use xlink:href="#lnr-moon"></use></svg>
<svg id="nsb" onclick="TgN()"><use xlink:href="#lnr-sync"></use></svg>
<svg id="stb" onclick="TgS()"><use xlink:href="#lnr-cog"></use></svg>
</div>
<div id="cdB" class="ctrl_box">
<form id="form_c" name="Cf">
<br>
<div id="slA" class="sl">
<input type="range" title="Brightness" class="sds" name="SA" value="0" min="0" max="255" step="1" onchange="GC()"></div>
<div id="srgb">
<div id="slR" class="sl">
<input type="range" title="Red Value" class="sds" name="SR" value="0" min="0" max="255" step="1" onchange="GC()"></div>
<div id="slG" class="sl">
<input type="range" title="Green Value" class="sds" name="SG" value="0" min="0" max="255" step="1" onchange="GC()"></div>
<div id="slB" class="sl">
<input type="range" title="Blue Value" class="sds" name="SB" value="0" min="0" max="255" step="1" onchange="GC()"></div></div>
<div id="shs">
<div id="slH" class="sl">
<input type="range" title="Hue" class="sds" name="SH" value="0" min="0" max="1" step="0.025" onchange="GetRGB()"></div>
<div id="slS" class="sl">
<input type="range" title="Saturation" class="sds" name="SS" value="0" min="0" max="1" step="0.025" onchange="GetRGB()"></div></div>
<div id="slW" class="sl">
<input type="range" title="White Value" class="sds" name="SW" value="0" min="0" max="255" step="1" onchange="GC()"></div>
<div id="tlX" class = "tools">
Effect Panel<br><br>
<svg id="fmr" onclick="SwFX(-99)"><use xlink:href="#lnr-cross"></use></svg>
<svg id="for" onclick="SwFX(-1)"><use xlink:href="#lnr-arrow-left-circle"></use></svg>
<svg id="fmf" onclick="SwFX(1)"><use xlink:href="#lnr-arrow-right-circle"></use></svg>
<svg id="fof" onclick="SwFX(99)"><use xlink:href="#lnr-rocket"></use></svg><br><br>
<select name="TX" onchange="GX()">
<option value="0" selected>Static (0)</option>
<option value="1">Blink (1)</option>
<option value="2">Breath (2)</option>
<option value="3">Wipe (3)</option>
<option value="4">Wipe Random (4)</option>
<option value="5">Color R (5)</option>
<option value="6">Single Dynamic (6)</option>
<option value="7">All Dynamic (7)</option>
<option value="8">Colorloop (8)</option>
<option value="9">Rainbow (9)</option>
<option value="10">Scan (10)</option>
<option value="11">Scan x2 (11)</option>
<option value="12">Fade (12)</option>
<option value="13">Chase (13)</option>
<option value="14">Chase Cl (14)</option>
<option value="15">Running (15)</option>
<option value="16">Twinkle (16)</option>
<option value="17">Twinkle R (17)</option>
<option value="18">Twinkle Fade (18)</option>
<option value="19">Twinkle RF (19)</option>
<option value="20">Sparkle (20)</option>
<option value="21">Sparkle Inv (21)</option>
<option value="22">Sparkle Inv+ (22)</option>
<option value="23">Strobe (23)</option>
<option value="24">Strobe Cl (24)</option>
<option value="25">Strobe + (25)</option>
<option value="26">Blink Cl (26)</option>
<option value="27">Chase (27)</option>
<option value="28">Chase Inv (28)</option>
<option value="29">Chase R (29)</option>
<option value="30">Chase Rainbow (30)</option>
<option value="31">Chase Flash (31)</option>
<option value="32">Chase RF (32)</option>
<option value="33">Chase Cl Inv (33)</option>
<option value="34">Colorful (34)</option>
<option value="35">Traffic Light (35)</option>
<option value="36">Sweep R(36)</option>
<option value="37">Running 2 (37)</option>
<option value="38">Red/Blue (38)</option>
<option value="39">Running R (39)</option>
<option value="40">Scanner (40)</option>
<option value="41">Lighthouse (41)</option>
<option value="42">Fireworks (42)</option>
<option value="43">Fireworks R (43)</option>
<option value="44">Christmas (44)</option>
<option value="45">Fire Flicker (45)</option>
<option value="46">Unused (46)</option>
<option value="47">Internal (47)</option>
<option value="48">Wipe IO (48)</option>
<option value="49">Wipe II (49)</option>
<option value="50">Wipe OO (50)</option>
<option value="51">Wipe OI (51)</option>
<option value="52">Circus (52)</option>
<option value="53">Custom Chase (53)</option>
<option value="54">CC Colorloop (54)</option>
<option value="55">CC Rainbow (55)</option>
<option value="56">CC Blink (56)</option>
<option value="57">CC Random (57)</option>
</select><br><br>
Set secondary color to
<button type="button" onclick="CS(0)">White</button>
<button type="button" onclick="CS(1)">Black</button>
<button type="button" onclick="CS(2)">Random</button>
<button type="button" onclick="CS(3)">Primary</button>
<button type="button" onclick="CS(4)">Swap P/S</button>
or <button type="button" onclick="CS(5)">Set Primary to Random</button>
<div id="ccX">
<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 id="slX" class="sl">
<input type="range" title="Effect Speed" class="sds" name="SX" value="0" min="0" max="255" step="1" onchange="GX()"></div>
<div id="slI" class="sl">
<input type="range" title="Effect Intensity" class="sds" name="IX" value="0" min="0" max="255" step="1" onchange="GX()"></div>
</div>
<div id="tlP" class = "tools">
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="25" 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.<br>
Effect 0 is the configuration when the light is powered up.
</div>
<div id="tlN" class="tools">
Timed Light<br><br>
<svg id="ntb" onclick="TgNl()"><use xlink:href="#lnr-power-switch"></use></svg><br><br>
Gradually dim down <input type="checkbox" checked="true" name="NC"><br>
1st slider sets duration (1-255min), 2nd sets target brightness.
<div id="slN" class="sl">
<input type="range" title="Duration" class="sds" name="SN" value="60" min="1" max="255" step="1"></div>
<div id="slT" class="sl">
<input type="range" title="Target Brightness" class="sds" name="ST" value="0" min="0" max="255" step="1"></div>
</div>
<br>
</form>
</div>
<iframe id="stf" src="about:blank"></iframe>
</body>
</html>