From bbc9a890a6e3a0f71cd26c09e48e75553e963fe1 Mon Sep 17 00:00:00 2001
From: cschwinne <cschwinne@gmail.com>
Date: Mon, 8 May 2017 20:20:48 +0200
Subject: [PATCH] core index HTML functions implemented FX control HSB mode
 added integrated favicon into bin, SPIFFS not needed anymore

---
 wled00/data/index.htm  | 179 +++++++++++++++++++++++++++++++++--------
 wled00/htmls00.h       |  19 +++++
 wled00/wled00.ino      |   2 +-
 wled00/wled05_init.ino |   2 +-
 4 files changed, 166 insertions(+), 36 deletions(-)
diff --git a/wled00/data/index.htm b/wled00/data/index.htm
index 18023213..4ed086c3 100644
--- a/wled00/data/index.htm
+++ b/wled00/data/index.htm
@@ -1,5 +1,6 @@
 <!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>
 	<script>
 	    strA = "";
@@ -9,14 +10,25 @@
 		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();
 		}
@@ -33,9 +45,12 @@
 							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();
 						}
@@ -43,7 +58,7 @@
 				}
 			}
 			// 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);
 			strA = "";
 			strR = "";
@@ -52,6 +67,9 @@
 			strNL = "";
 			strNR = "";
 			strNS = "";
+			strMD = "";
+			strFX = "";
+			strSX = "";
 		}
 		function GetCheck()
 		{
@@ -59,7 +77,13 @@
 			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();
 		}
@@ -74,6 +98,7 @@
 		{
 			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 {
@@ -90,10 +115,42 @@
 				nsb.style.fill="black";
 			}
 		}
-		function ToggleHSB()
+		function ToggleFX()
 		{
-			cdB.style.display="none";
-			hsb = !hsb;
+			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";
@@ -110,7 +167,23 @@
 				document.getElementById("slS").style.display="none";
 				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()
 		{
@@ -287,6 +360,21 @@
 			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);
@@ -370,35 +458,22 @@
 <style id="holderjs-style" type="text/css"></style></head>
 <body onload="Startup()" class=" __plain_text_READY__">
 	<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">
 <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">
 <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>
@@ -419,4 +494,40 @@
 </symbol>
 </defs>
 </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>
\ No newline at end of file
diff --git a/wled00/htmls00.h b/wled00/htmls00.h
index e6d157f2..591aebd2 100644
--- a/wled00/htmls00.h
+++ b/wled00/htmls00.h
@@ -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
  */
diff --git a/wled00/wled00.ino b/wled00/wled00.ino
index 2f89b349..a2f35a09 100644
--- a/wled00/wled00.ino
+++ b/wled00/wled00.ino
@@ -22,7 +22,7 @@
 #include "CallbackFunction.h"
 
 //version in format yymmddb (b = daily build)
-#define VERSION 1705071
+#define VERSION 1705081
 
 //to toggle usb serial debug (un)comment following line
 #define DEBUG
diff --git a/wled00/wled05_init.ino b/wled00/wled05_init.ino
index 7744c266..9639016a 100644
--- a/wled00/wled05_init.ino
+++ b/wled00/wled05_init.ino
@@ -77,7 +77,7 @@ void wledInit()
     if(!handleFileRead("/moon.png")) server.send(404, "text/plain", "FileNotFound");
   });
   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, [](){
     if(!handleFileRead("/index.htm")) server.send(200, "text/html", PAGE_index);
