html update in progress

notification receive and send buttons work
settings iframe works
implemented HSB partially
This commit is contained in:
cschwinne 2017-05-07 23:51:42 +02:00
parent 9c36b4268a
commit ca3c4bb125
10 changed files with 234 additions and 70 deletions

View File

@ -62,9 +62,10 @@ Add one or multiple of the following parameters after the base url to change val
"&T=<0 or 1 or 2-255>" 0: switch off, on, toggle
"&FX=<0-47>" set LED effect (refer to WS2812FX library)
"&SX=<0-255>" set LED effect speed (refer to WS2812FX library)
"&NR=<0 or 1>" receive notifications on or off
"&NS=<0 or 1>" send (direct) notifications on or off
"&RN=<0 or 1>" receive notifications on or off
"&SN=<0 or 1>" send (direct) notifications on or off
"&NL=<0 or 1>" turns nightlight function on or off
"&MD=<0 or 1>" sets client color picker mode (RGB/HSB)
("&OL=<0, 1, 3 or 5>" experimental clock overlays)
("&I=<0-255>" experimental individual LED control)
("&I=<0-255>&I2=<0-255>" experimental individual LED range control)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -7,7 +7,13 @@
strG = "";
strB = "";
strNL = "";
strNR = "";
strNS = "";
var nla = false;
var nra = false;
var nsa = false;
var sto = false;
var hsb = false;
function Startup()
{
@ -28,6 +34,8 @@
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;
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;
document.getElementsByClassName("desc")[0].innerHTML = this.responseXML.getElementsByTagName('desc')[0].innerHTML;
UpdateVals();
}
@ -35,13 +43,15 @@
}
}
// send HTTP request
request.open("GET", "win/" + strA + strR + strG + strB + strNL + nocache, true);
request.open("GET", "win/" + strA + strR + strG + strB + strNL + strNR + strNS + nocache, true);
request.send(null);
strA = "";
strR = "";
strG = "";
strB = "";
strNL = "";
strNR = "";
strNS = "";
}
function GetCheck()
{
@ -63,15 +73,68 @@
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);
if (nla) {
nlb.style.fill="white";
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";
}
}
function ToggleHSB()
{
cdB.style.display="none";
hsb = !hsb;
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";
}
cdB.style.display="inline";
}
function OpenSettings()
{
window.open("/settings","_self");
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()
{
@ -84,14 +147,88 @@
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>
.tool_box {
border: 0.3ch solid grey;
margin: auto;
width: 80vw;
background-color: #B9B9B9;
}
.ctrl_box {
border: 0.3ch solid grey;
margin: auto;
@ -105,6 +242,7 @@
.sliders {
width: 100%;
height: 12vh;
margin-top: 2vh;
}
.sliderA {
margin-left: auto;
@ -115,21 +253,40 @@
.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);
}
body {
text-align: center;
background: linear-gradient(white, black);
@ -141,14 +298,22 @@
html {
height: 100%;
}
iframe {
display:none;
margin: auto;
width: 80vw;
height: 50vh;
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
svg {
width: 11vw;
width: 15vw;
height: 10vmin;
margin: 4px;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: -4px 0;
}
input[type=range]:focus {
@ -206,55 +371,50 @@
<body onload="Startup()" class=" __plain_text_READY__">
<span class="desc"> Loading... </span>
<div id="tbB" class="tool_box">
<svg><use xlink:href="#icon-equalizer"></use></svg>
<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><use xlink:href="#icon-download"></use></svg>
<svg><use xlink:href="#icon-upload"></use></svg>
<svg onclick="OpenSettings()"><use xlink:href="#icon-cog"></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" class="sliders" name="SA" value="0" min="0" max="255" step="1" onchange="GetCheck()"> </div> <br>
<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" class="sliders" name="SR" value="0" min="0" max="255" step="1" onchange="GetCheck()"> </div> <br>
<div id="slR" class="sliderG">
<input type="range" class="sliders" name="SG" value="0" min="0" max="255" step="1" onchange="GetCheck()"> </div> <br>
<div id="slR" class="sliderB">
<input type="range" class="sliders" name="SB" value="0" min="0" max="255" step="1" onchange="GetCheck()"> </div> <br>
<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">
<defs>
<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">
<title>clock</title>
<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-clock2" viewBox="0 0 32 32">
<title>clock2</title>
<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-16zM20.586 23.414l-6.586-6.586v-8.828h4v7.172l5.414 5.414-2.829 2.829z"></path>
</symbol>
<symbol id="icon-download" viewBox="0 0 32 32">
<title>download</title>
<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">
<title>upload</title>
<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-equalizer" viewBox="0 0 32 32">
<title>equalizer</title>
<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-cog" viewBox="0 0 32 32">
<title>cog</title>
<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">
<title>star-full</title>
<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>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

View File

@ -29,9 +29,10 @@
document.S_form.CMDNS.value = this.responseXML.getElementsByTagName('cmdns')[0].innerHTML;
document.S_form.APSSID.value = this.responseXML.getElementsByTagName('apssid')[0].innerHTML;
document.S_form.APHSSID.checked = (this.responseXML.getElementsByTagName('aphssid')[0].innerHTML)!=0?true:false;
document.S_form.APPASS.value = this.responseXML.getElementsByTagName('appass')[0].innerHTML; //fake pass like ******
document.S_form.APPASS.value = this.responseXML.getElementsByTagName('appass')[0].innerHTML; //fake pass
document.S_form.APCHAN.value = this.responseXML.getElementsByTagName('apchan')[0].innerHTML;
document.S_form.DESC.value = this.responseXML.getElementsByTagName('desc')[0].innerHTML;
document.S_form.COLMD.checked = (this.responseXML.getElementsByTagName('colmd')[0].innerHTML)!=0?true:false;
document.S_form.LEDCN.value = this.responseXML.getElementsByTagName('ledcn')[0].innerHTML;
document.S_form.CLDFR.value = this.responseXML.getElementsByTagName('cldef')[0].innerHTML;
document.S_form.CLDFG.value = this.responseXML.getElementsByTagName('cldef')[1].innerHTML;
@ -75,10 +76,6 @@
request.open("GET", "/get-settings", true);
request.send(null);
}
function OpenMain()
{
window.open("/","_self");
}
</script>
<style>
body {
@ -87,13 +84,13 @@
</style>
</head>
<body onload="GetCurrent()" class=" __plain_text_READY__">
<h1>WLED Settings</h1>
<h1 style="text-align:center">WLED Settings</h1>
<form id="form_s" name="S_form" action="set-settings" method="post">
<input type="submit" name="SUBM" value="Save">
<input type="button" name="BACK" value="Back" onclick="OpenMain()">
<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 SSID (leave empty to not connect): <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"> .
@ -119,10 +116,11 @@
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>
<h3>LED setup</h3>
LED count (max. 255): <input name="LEDCN" maxlength="3" size="2"> <br>
Default RGB color:
@ -187,9 +185,8 @@
<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>
<br><br>
<input type="submit" name="SUBM" value="Save">
<input type="button" name="BACK" value="Back" onclick="OpenMain()">
<br><br><hr>
<div align="center"><input type="submit" name="SUBM" value="Save"></div>
</form>
</body>
</html>

View File

@ -3,10 +3,6 @@
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Saved Settings</title>
<script>
function OpenMain()
{
window.open("/","_self");
}
function OpenReboot()
{
window.open("/reset","_self");
@ -16,8 +12,7 @@
<div align="center">
<h2>Settings saved.</h2>
<p>If you made changes to WiFi configuration, please reboot.</p><br>
<input type="button" name="BACK" value="Close" onclick="OpenMain()">
<input type="button" name="BACK" value="Reboot" onclick="OpenReboot()">
<input type="button" value="Reboot" onclick="OpenReboot()">
</div></body>
</html>

View File

@ -22,7 +22,7 @@
#include "CallbackFunction.h"
//version in format yymmddb (b = daily build)
#define VERSION 1704263
#define VERSION 1705071
//to toggle usb serial debug (un)comment following line
#define DEBUG
@ -73,6 +73,7 @@ boolean useap = true;
IPAddress staticip(0, 0, 0, 0);
IPAddress staticgateway(0, 0, 0, 0);
IPAddress staticsubnet(255, 255, 255, 0);
boolean useHSB = false, useHSBDefault = false;
boolean turnOnAtBoot = true;
byte col_s[]{255, 127, 0};
byte bri_s = 127;

View File

@ -100,6 +100,7 @@ void saveSettingsToEEPROM()
EEPROM.write(367, arlsSign);
EEPROM.write(368, abs(arlsOffset));
EEPROM.write(369, turnOnAtBoot);
EEPROM.write(370, useHSBDefault);
EEPROM.commit();
}
@ -209,4 +210,6 @@ void loadSettingsFromEEPROM()
arlsOffset = EEPROM.read(368);
if (!arlsSign) arlsOffset = -arlsOffset;
turnOnAtBoot = EEPROM.read(369);
useHSBDefault = EEPROM.read(370);
useHSB = useHSBDefault;
}

View File

@ -25,20 +25,18 @@ void XML_response()
}
resp = resp + "<ns>";
resp = resp + notifyMaster;
resp = resp + "</ns>";
resp = resp + "<nr>";
resp = resp + "</ns><nr>";
resp = resp + receiveNotifications;
resp = resp + "</nr>";
resp = resp + "<nl>";
resp = resp + "</nr><nl>";
resp = resp + nightlightActive;
resp = resp + "</nl>";
resp = resp + "<fx>";
resp = resp + "</nl><fx>";
resp = resp + effectCurrent;
resp = resp + "</fx>";
resp = resp + "<sx>";
resp = resp + "</fx><sx>";
resp = resp + effectSpeed;
resp = resp + "</sx>";
resp = resp + "<desc>";
resp = resp + "<md>";
resp = resp + bool2int(useHSB);
resp = resp + "</md><desc>";
resp = resp + serverDescription;
resp = resp + "</desc>";
//enable toolbar here
@ -100,6 +98,9 @@ void XML_response_settings()
resp = resp + "<desc>";
resp = resp + serverDescription;
resp = resp + "</desc>";
resp = resp + "<colmd>";
resp = resp + useHSBDefault;
resp = resp + "</colmd>";
resp = resp + "<ledcn>";
resp = resp + ledcount;
resp = resp + "</ledcn>";

View File

@ -98,6 +98,8 @@ void handleSettingsSet()
if (i >= 0 && i <= 255) staticsubnet[3] = i;
}
if (server.hasArg("DESC")) serverDescription = server.arg("DESC");
useHSBDefault = server.hasArg("COLMD");
useHSB = useHSBDefault;
if (server.hasArg("LEDCN"))
{
int i = server.arg("LEDCN").toInt();
@ -264,6 +266,10 @@ boolean handleSet(String req)
effectUpdated = true;
}
}
pos = req.indexOf("MD=");
if (pos > 0) {
useHSB = req.substring(pos + 3).toInt();
}
pos = req.indexOf("OL=");
if (pos > 0) {
overlayCurrent = req.substring(pos + 3).toInt();
@ -281,18 +287,18 @@ boolean handleSet(String req)
strip.setIndividual(index);
}
}
if (req.indexOf("NS=") > 0)
if (req.indexOf("SN=") > 0)
{
notifyMaster = true;
if (req.indexOf("NS=0") > 0)
if (req.indexOf("SN=0") > 0)
{
notifyMaster = false;
}
}
if (req.indexOf("NR=") > 0)
if (req.indexOf("RN=") > 0)
{
receiveNotifications = true;
if (req.indexOf("NR=0") > 0)
if (req.indexOf("RN=0") > 0)
{
receiveNotifications = false;
}