lba.gitea/WLED
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
f878c89069
WLED/wled00/data/index.htm
cschwinne affb99507e Release of WLED 0.3 
version bump
minor tweaks
compressed HTMLs
changed SN behavior to control direct notifications
removed nightlight notification due to severe uselessness
removed unnecessary bool2int function
Updated binary
2017-05-08 21:46:04 +02:00

556 lines
17 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>WLED 0.3</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(event) {
if (event.keyCode == 13) {
event.preventDefault();
GetFX();
}
});
setInterval('GetArduinoIO()', 5000);
GetArduinoIO();
}
function GetArduinoIO()
{
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.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();
}
}
}
}
// send HTTP request
request.open("GET", "win/" + strA + strR + strG + strB + strNL + strNR + strNS + strMD + strFX + strSX +nocache, true);
request.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(red, green, blue) {
var rgb = blue | (green << 8) | (red << 16);
return '#' + (0x1000000 + rgb).toString(16).slice(1)
}
function lingrad(red, green, blue) {
return "linear-gradient(white, " + rgb2hex(red, green, blue) + ")";
}
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(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 > 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.display="block";
mdb.style.fill="green";
} 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";
}
}
function ToggleHSB()
{
if (fxa)
{
fxa = false;
SetFX();
}
if (sto) CloseSettings();
hsb = !hsb;
if (hsb)
{
strMD="&MD=1";
} else {
strMD="&MD=0";
}
SetHSB();
}
function OpenSettings()
{
sto = true;
stb.style.fill="green";
cdB.style.display="none";
stf.style.display="inline";
stf.src="/settings";
}
function CloseSettings()
{
sto = false;
stb.style.fill="black";
cdB.style.display="inline";
stf.style.display="none";
}
function ToggleSettings()
{
if (sto)
{
CloseSettings();
} else {
OpenSettings();
}
}
function ToggleNl()
{
nla = !nla;
if (nla) {
strNL="&NL=1";
} else {
strNL="&NL=0";
}
UpdateVals();
GetArduinoIO();
}
function ToggleNr()
{
nra = !nra;
if (nra) {
strNR="&RN=1";
} else {
strNR="&RN=0";
}
UpdateVals();
GetArduinoIO();
}
function ToggleNs()
{
nsa = !nsa;
if (nsa) {
strNS="&SN=1";
} else {
strNS="&SN=0";
}
UpdateVals();
GetArduinoIO();
}
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;
}
}
document.Ctrl_form.SH.value = h;
document.Ctrl_form.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;
}
document.Ctrl_form.SR.value = r;
document.Ctrl_form.SG.value = g;
document.Ctrl_form.SB.value = b;
GetCheck();
}
</script>
<style>
.ctrl_box {
border: 0.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: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 12vh;
cursor: pointer;
background: #DDDDDD;
}
input[type=range]::-webkit-slider-thumb {
height: 10vh;
width: 10vh;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: 1vh;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 12vh;
cursor: pointer;
background: #DDDDDD;
}
input[type=range]::-moz-range-thumb {
height: 10vh;
width: 10vh;
background: #ffffff;
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: #DDDDDD;
}
input[type=range]::-ms-fill-upper {
background: #DDDDDD;
}
input[type=range]::-ms-thumb {
width: 10vh;
background: #ffffff;
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>
Reference in New Issue View Git Blame Copy Permalink