Merge pull request #3597 from WoodyLetsCode/inline

Inline iro.js and rangetouch.js
wled · Dec 21, 2023 · 6c877b6 · 6c877b6
2 parents 42dba31 + 86d2998
commit 6c877b6
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 72 deletions.
diff --git a/tools/cdata.js b/tools/cdata.js
@@ -380,16 +380,6 @@ const char PAGE_dmxmap[] PROGMEM = R"=====()=====";
       file: "favicon.ico",
       name: "favicon",
       method: "binary",
-    },
-    {
-      file: "iro.js",
-      name: "iroJs",
-      method: "gzip"
-    },
-    {
-      file: "rangetouch.js",
-      name: "rangetouchJs",
-      method: "gzip"
     }
   ],
   "wled00/html_other.h"

diff --git a/wled00/data/index.htm b/wled00/data/index.htm
@@ -7,52 +7,9 @@
 	<meta content="yes" name="apple-mobile-web-app-capable">
 	<link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEAGACGAAAAFgAAAIlQTkcNChoKAAAADUlIRFIAAAAQAAAAEAgGAAAAH/P/YQAAAE1JREFUOI1j/P//PwOxgNGeAUMxE9G6cQCKDWAhpADZ2f8PMjBS3QW08QK20KaZC2gfC9hCnqouoNgARgY7zMxAyNlUdQHlXiAlO2MDAD63EVqNHAe0AAAAAElFTkSuQmCC"/>
 	<title>WLED</title>
-	<script>
-	function feedback(){}
-	// instead of including [script src="iro.js"][/script] and [script src="rangetouch.js"][/script]
-	// (which would be inlined by nodeJS inliner during minimization and compression) we need to load them dynamically
-	// the following is needed to load iro.js and rangetouch.js as consecutive requests to allow ESP8266
-	// to keep up with requests (if requests happent too fast some may not get processed)
-	// it will also call onLoad() after last is loaded (it was removed from [body onload="onLoad()"]).
-	var h  = document.getElementsByTagName('head')[0];
-	var l  = document.createElement('script');
-	l.type = 'application/javascript';
-	l.src = 'iro.js';
-	l.addEventListener('load', (e) => {
-		// after iro is loaded initialize global variable
-		cpick = new iro.ColorPicker("#picker", {
-			width: 260,
-			wheelLightness: false,
-			wheelAngle: 270,
-			wheelDirection: "clockwise",
-			layout: [{
-				component: iro.ui.Wheel,
-				options: {}
-			}]
-		});
-		cpick.on("input:end", () => {setColor(1);});
-		cpick.on("color:change", () => {updatePSliders()});
-		var l  = document.createElement('script');
-		l.type = 'application/javascript';
-		l.src = 'rangetouch.js';
-		l.addEventListener('load', (e) => {
-			// after rangetouch is loaded initialize global variable
-			ranges = RangeTouch.setup('input[type="range"]', {});
-			let stateCheck = setInterval(() => {
-				if (document.readyState === 'complete') {
-					clearInterval(stateCheck);
-					// document ready, start processing UI
-					onLoad();
-				}
-			}, 100);
-		});
-		setTimeout(()=>{h.appendChild(l)},100);
-	});
-	setTimeout(()=>{h.appendChild(l)},200);
-	</script>
 	<link rel="stylesheet" href="index.css">
 </head>
-<body>
+<body onload="onLoad()">
 
 <div id="cv" class="overlay">Loading WLED UI...</div>
 <noscript><div class="overlay" style="opacity:1;">Sorry, WLED UI needs JavaScript!</div></noscript>
@@ -378,6 +335,13 @@
 </div>
 
 <i id="roverstar" class="icons huge" onclick="setLor(0)">&#xe410;</i><br>
+
+<!-- 
+	If you want to load iro.js and rangetouch.js as consecutive requests, you can do it like it was done in 0.14.0:
+	https://github.com/Aircoookie/WLED/blob/v0.14.0/wled00/data/index.htm
+-->
+<script src="iro.js"></script>
+<script src="rangetouch.js"></script>
 <script src="index.js"></script>
 </body>
 </html>
diff --git a/wled00/data/index.js b/wled00/data/index.js
@@ -15,6 +15,7 @@ var pcMode = false, pcModeA = false, lastw = 0, wW;
 var simplifiedUI = false;
 var tr = 7;
 var d = document;
+const ranges = RangeTouch.setup('input[type="range"]', {});
 var palettesData;
 var fxdata = [];
 var pJson = {}, eJson = {}, lJson = {};
@@ -23,7 +24,7 @@ var pN = "", pI = 0, pNum = 0;
 var pmt = 1, pmtLS = 0, pmtLast = 0;
 var lastinfo = {};
 var isM = false, mw = 0, mh=0;
-var ws, cpick, ranges, wsRpt=0;
+var ws, wsRpt=0;
 var cfg = {
 	theme:{base:"dark", bg:{url:"", rnd: false, rndGrayscale: false, rndBlur: false}, alpha:{bg:0.6,tab:0.8}, color:{bg:""}},
 	comp :{colors:{picker: true, rgb: false, quick: true, hex: false},
@@ -39,6 +40,17 @@ var hol = [
 	[0,0,1,1,"https://images.alphacoders.com/119/1198800.jpg"] // new year
 ];
 
+var cpick = new iro.ColorPicker("#picker", {
+	width: 260,
+	wheelLightness: false,
+	wheelAngle: 270,
+	wheelDirection: "clockwise",
+	layout: [{
+		component: iro.ui.Wheel,
+		options: {}
+	}]
+});
+
 function handleVisibilityChange() {if (!d.hidden && new Date () - lastUpdate > 3000) requestJson();}
 function sCol(na, col) {d.documentElement.style.setProperty(na, col);}
 function gId(c) {return d.getElementById(c);}
@@ -260,6 +272,8 @@ function onLoad()
 
 	selectSlot(0);
 	updateTablinks(0);
+	cpick.on("input:end", () => {setColor(1);});
+	cpick.on("color:change", () => {updatePSliders()});
 	pmtLS = localStorage.getItem('wledPmt');
 
 	// Load initial data

diff --git a/wled00/wled.h b/wled00/wled.h
@@ -8,7 +8,7 @@
  */
 
 // version code in format yymmddb (b = daily build)
-#define VERSION 2312160
+#define VERSION 2312190
 
 //uncomment this if you have a "my_config.h" file you'd like to use
 //#define WLED_USE_MY_CONFIG

diff --git a/wled00/wled_server.cpp b/wled00/wled_server.cpp
@@ -254,22 +254,6 @@ void initServer()
                       size_t len, bool final) {handleUpload(request, filename, index, data, len, final);}
   );
 
-  server.on("/iro.js", HTTP_GET, [](AsyncWebServerRequest *request){
-    if (handleIfNoneMatchCacheHeader(request)) return;
-    AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", iroJs, iroJs_length);
-    response->addHeader(FPSTR(s_content_enc),"gzip");
-    setStaticContentCacheHeaders(response);
-    request->send(response);
-  });
-
-  server.on("/rangetouch.js", HTTP_GET, [](AsyncWebServerRequest *request){
-    if (handleIfNoneMatchCacheHeader(request)) return;
-    AsyncWebServerResponse *response = request->beginResponse_P(200, "application/javascript", rangetouchJs, rangetouchJs_length);
-    response->addHeader(FPSTR(s_content_enc),"gzip");
-    setStaticContentCacheHeaders(response);
-    request->send(response);
-  });
-
   createEditHandler(correctPIN);
 
 #ifndef WLED_DISABLE_OTA