lba.gitea/WLED
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

core index HTML functions implemented

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
wled00/data/index.htm
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>

19
wled00/htmls00.h
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
*/ */

2
wled00/wled00.ino
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

2
wled00/wled05_init.ino
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);