core index HTML functions implemented

FX control
HSB mode added
integrated favicon into bin, SPIFFS not needed anymore
This commit is contained in:
cschwinne 2017-05-08 20:20:48 +02:00
parent ca3c4bb125
commit bbc9a890a6
4 changed files with 166 additions and 36 deletions

View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>WLED 0.3pd</title> <title>WLED 0.3pd</title>
<script> <script>
strA = ""; strA = "";
@ -9,14 +10,25 @@
strNL = ""; strNL = "";
strNR = ""; strNR = "";
strNS = ""; strNS = "";
strMD = "";
strFX = "";
strSX = "";
var nla = false; var nla = false;
var nra = false; var nra = false;
var nsa = false; var nsa = false;
var sto = false; var sto = false;
var hsb = false; var hsb = false;
var fxa = false;
var lastsx = 0;
function Startup() function Startup()
{ {
document.getElementById("fxI").addEventListener("keypress", function(event) {
if (event.keyCode == 13) {
event.preventDefault();
GetFX();
}
});
setInterval('GetArduinoIO()', 5000); setInterval('GetArduinoIO()', 5000);
GetArduinoIO(); GetArduinoIO();
} }
@ -33,9 +45,12 @@
document.Ctrl_form.SR.value = this.responseXML.getElementsByTagName('cl')[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.SG.value = this.responseXML.getElementsByTagName('cl')[1].childNodes[0].nodeValue;
document.Ctrl_form.SB.value = this.responseXML.getElementsByTagName('cl')[2].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; nla = (this.responseXML.getElementsByTagName('nl')[0].innerHTML)!=0?true:false;
nra = (this.responseXML.getElementsByTagName('nr')[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; 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; document.getElementsByClassName("desc")[0].innerHTML = this.responseXML.getElementsByTagName('desc')[0].innerHTML;
UpdateVals(); UpdateVals();
} }
@ -43,7 +58,7 @@
} }
} }
// send HTTP request // send HTTP request
request.open("GET", "win/" + strA + strR + strG + strB + strNL + strNR + strNS + nocache, true); request.open("GET", "win/" + strA + strR + strG + strB + strNL + strNR + strNS + strMD + strFX + strSX +nocache, true);
request.send(null); request.send(null);
strA = ""; strA = "";
strR = ""; strR = "";
@ -52,6 +67,9 @@
strNL = ""; strNL = "";
strNR = ""; strNR = "";
strNS = ""; strNS = "";
strMD = "";
strFX = "";
strSX = "";
} }
function GetCheck() function GetCheck()
{ {
@ -59,7 +77,13 @@
strR = "&R=" + Ctrl_form.SR.value; strR = "&R=" + Ctrl_form.SR.value;
strG = "&G=" + Ctrl_form.SG.value; strG = "&G=" + Ctrl_form.SG.value;
strB = "&B=" + Ctrl_form.SB.value; strB = "&B=" + Ctrl_form.SB.value;
UpdateVals();
GetArduinoIO();
}
function GetFX()
{
strFX = "&FX=" + Ctrl_form.TF.value;
strSX = "&SX=" + Ctrl_form.SX.value;
UpdateVals(); UpdateVals();
GetArduinoIO(); GetArduinoIO();
} }
@ -74,6 +98,7 @@
{ {
document.body.style.background = lingrad(Ctrl_form.SR.value, Ctrl_form.SG.value, Ctrl_form.SB.value); 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); setHS(Ctrl_form.SR.value, Ctrl_form.SG.value, Ctrl_form.SB.value);
SetHSB();
if (nla) { if (nla) {
nlb.style.fill="green"; nlb.style.fill="green";
} else { } else {
@ -90,10 +115,42 @@
nsb.style.fill="black"; nsb.style.fill="black";
} }
} }
function ToggleHSB() function ToggleFX()
{ {
cdB.style.display="none"; fxa = !fxa;
hsb = !hsb; 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) if (hsb)
{ {
document.getElementById("slR").style.display="none"; document.getElementById("slR").style.display="none";
@ -110,7 +167,23 @@
document.getElementById("slS").style.display="none"; document.getElementById("slS").style.display="none";
mdb.style.fill="black"; mdb.style.fill="black";
} }
cdB.style.display="inline"; }
function ToggleHSB()
{
if (fxa)
{
fxa = false;
SetFX();
}
if (sto) CloseSettings();
hsb = !hsb;
if (hsb)
{
strMD="&MD=1";
} else {
strMD="&MD=0";
}
SetHSB();
} }
function OpenSettings() function OpenSettings()
{ {
@ -287,6 +360,21 @@
width: 77vw; width: 77vw;
background: linear-gradient(to right, grey, green); 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 { body {
text-align: center; text-align: center;
background: linear-gradient(white, black); background: linear-gradient(white, black);
@ -370,35 +458,22 @@
<style id="holderjs-style" type="text/css"></style></head> <style id="holderjs-style" type="text/css"></style></head>
<body onload="Startup()" class=" __plain_text_READY__"> <body onload="Startup()" class=" __plain_text_READY__">
<span class="desc"> Loading... </span> <span class="desc"> Loading... </span>
<div id="tbB" class="tool_box">
<svg id="mdb" onclick="ToggleHSB()"><use xlink:href="#icon-equalizer"></use></svg>
<svg><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> <br>
</form>
</div>
<iframe id="stf" src="about:blank"></iframe>
</body>
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg"> <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs> <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-equalizer" viewBox="0 0 32 32"> <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> <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>
@ -419,4 +494,40 @@
</symbol> </symbol>
</defs> </defs>
</svg> </svg>
<div id="tbB" class="tool_box">
<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> </html>

View File

@ -1,3 +1,22 @@
/*
* favicon
*/
const char favicon[156] PROGMEM = {
0x00, 0x00, 0x01, 0x00, 0x01, 0x00, 0x10, 0x10, 0x00, 0x00, 0x01, 0x00,
0x18, 0x00, 0x86, 0x00, 0x00, 0x00, 0x16, 0x00, 0x00, 0x00, 0x89, 0x50,
0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A, 0x00, 0x00, 0x00, 0x0D, 0x49, 0x48,
0x44, 0x52, 0x00, 0x00, 0x00, 0x10, 0x00, 0x00, 0x00, 0x10, 0x08, 0x06,
0x00, 0x00, 0x00, 0x1F, 0xF3, 0xFF, 0x61, 0x00, 0x00, 0x00, 0x4D, 0x49,
0x44, 0x41, 0x54, 0x38, 0x8D, 0x63, 0xFC, 0xFF, 0xFF, 0x3F, 0x03, 0xB1,
0x80, 0xD1, 0x9E, 0x01, 0x43, 0x31, 0x13, 0xD1, 0xBA, 0x71, 0x00, 0x8A,
0x0D, 0x60, 0x21, 0xA4, 0x00, 0xD9, 0xD9, 0xFF, 0x0F, 0x32, 0x30, 0x52,
0xDD, 0x05, 0xB4, 0xF1, 0x02, 0xB6, 0xD0, 0xA6, 0x99, 0x0B, 0x68, 0x1F,
0x0B, 0xD8, 0x42, 0x9E, 0xAA, 0x2E, 0xA0, 0xD8, 0x00, 0x46, 0x06, 0x3B,
0xCC, 0xCC, 0x40, 0xC8, 0xD9, 0x54, 0x75, 0x01, 0xE5, 0x5E, 0x20, 0x25,
0x3B, 0x63, 0x03, 0x00, 0x3E, 0xB7, 0x11, 0x5A, 0x8D, 0x1C, 0x07, 0xB4,
0x00, 0x00, 0x00, 0x00, 0x49, 0x45, 0x4E, 0x44, 0xAE, 0x42, 0x60, 0x82
};
/* /*
* Index html * Index html
*/ */

View File

@ -22,7 +22,7 @@
#include "CallbackFunction.h" #include "CallbackFunction.h"
//version in format yymmddb (b = daily build) //version in format yymmddb (b = daily build)
#define VERSION 1705071 #define VERSION 1705081
//to toggle usb serial debug (un)comment following line //to toggle usb serial debug (un)comment following line
#define DEBUG #define DEBUG

View File

@ -77,7 +77,7 @@ void wledInit()
if(!handleFileRead("/moon.png")) server.send(404, "text/plain", "FileNotFound"); if(!handleFileRead("/moon.png")) server.send(404, "text/plain", "FileNotFound");
}); });
server.on("/favicon.ico", HTTP_GET, [](){ server.on("/favicon.ico", HTTP_GET, [](){
if(!handleFileRead("/favicon.ico")) server.send(404, "text/plain", "FileNotFound"); if(!handleFileRead("/favicon.ico")) server.send(200, "image/x-icon", favicon);
}); });
server.on("/", HTTP_GET, [](){ server.on("/", HTTP_GET, [](){
if(!handleFileRead("/index.htm")) server.send(200, "text/html", PAGE_index); if(!handleFileRead("/index.htm")) server.send(200, "text/html", PAGE_index);