Missing WS connection fallback for liveview (#3267)

* Missing WS connection fallback for liveview
- fix for #3250

Remove (conditional WLED_ENABLE_LEGACY) legacy URI

Replace /sliders with /?sliders

* Merge liveview and liveviewws pages

Remove /url string subpage
Enable /json/live by default

* WS retry count
Removed appended ws from URL

* Also reset WS retries on successful WS connection

---------

Co-authored-by: Christian Schwinne <cschwinne@gmail.com>

tools/cdata.js

@@ -390,12 +390,6 @@ const char PAGE_dmxmap[] PROGMEM = R"=====()=====";
       method: "gzip",
       filter: "html-minify",
     },
-    {
-      file: "liveviewws.htm",
-      name: "PAGE_liveviewws",
-      method: "gzip",
-      filter: "html-minify",
-    },
     {
       file: "liveviewws2D.htm",
       name: "PAGE_liveviewws2D",

wled00/data/404.htm

@@ -42,6 +42,6 @@
 		<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAbUExURQAAAAB81gCU/zKq/////9bW1oCAgGhoaAAAAGPLX8AAAAAJdFJOU///////////AFNPeBIAAAAJcEhZcwAADsAAAA7AAWrWiQkAAACdSURBVDhPxc9bDoUgEANQebP/FUuHMjBGY/B+3EYR7RH0qC/ZBc6HwCljgHO+xZIVSI2sYgHaG7EBWh8jWoxTrCBFdDJ+BD4lbIHxAcz8APAVLTsrZE4eQD5qzt3cAFTYokC4YCN9Gybgu4yAQtBFLQXHuHABA7JMeOEC/E0W5uy9gv4vo5QHK2i7yq2C8UABM4HmL+CSTXCTF1DrCX6+Gp9zB5dsAAAAAElFTkSuQmCC">
 		<h1>404 Not Found</h1>
 		<b>Akemi does not know where you are headed...</b><br><br>
-		<button onclick="window.location.href='../sliders'">Back to controls</button>
+		<button onclick="window.location.href='../?sliders'">Back to controls</button>
 	</body>
 </html>

wled00/data/index.htm

@@ -379,8 +379,8 @@
 	</div>	
 </div>
 
-<div id="mliveview2D" class="modal">
+<div id="mlv2D" class="modal">
-	<div id="kliveview2D" style="width:100%; height:100%">Loading...</div><br>
+	<div id="klv2D" style="width:100%; height:100%">Loading...</div>
 </div>
 
 <div id="rover" class="modal">

wled00/data/index.js

@@ -22,7 +22,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;
+var ws, cpick, ranges, wsRpt=0;
 var cfg = {
 	theme:{base:"dark", bg:{url:""}, alpha:{bg:0.6,tab:0.8}, color:{bg:""}},
 	comp :{colors:{picker: true, rgb: false, quick: true, hex: false},
@@ -217,7 +217,7 @@ function onLoad()
 		// detect reverse proxy and/or HTTPS
 		let pathn = l.pathname;
 		let paths = pathn.slice(1,pathn.endsWith('/')?-1:undefined).split("/");
-		if (paths[0]==="sliders") paths.shift();
+		//if (paths[0]==="sliders") paths.shift();
 		//while (paths[0]==="") paths.shift();
 		locproto = l.protocol;
 		locip = l.hostname + (l.port ? ":" + l.port : "");
@@ -1331,11 +1331,12 @@ function makeWS() {
 	};
 	ws.onclose = (e)=>{
 		gId('connind').style.backgroundColor = "var(--c-r)";
-		setTimeout(makeWS,1500); // retry WS connection
+		if (wsRpt++ < 5) setTimeout(makeWS,1500); // retry WS connection
 		ws = null;
 	}
 	ws.onopen = (e)=>{
 		//ws.send("{'v':true}"); // unnecessary (https://github.com/Aircoookie/WLED/blob/master/wled00/ws.cpp#L18)
+		wsRpt = 0;
 		reqsLegal = true;
 	}
 }
@@ -1637,6 +1638,7 @@ function requestJson(command=null)
 		//load presets and open websocket sequentially
 		if (!pJson || isEmpty(pJson)) setTimeout(()=>{
 			loadPresets(()=>{
+				wsRpt = 0;
 				if (!(ws && ws.readyState === WebSocket.OPEN)) makeWS();
 			});
 		},25);
@@ -1684,27 +1686,22 @@ function toggleSync()
 
 function toggleLiveview()
 {
-	//WLEDSR adding liveview2D support
 	if (isInfo && isM) toggleInfo();
 	if (isNodes && isM) toggleNodes();
 	isLv = !isLv;
+	let wsOn = ws && ws.readyState === WebSocket.OPEN;
 
 	var lvID = "liveview";
-	if (isM) {   
+	if (isM && wsOn) {   
-		lvID = "liveview2D"
+		lvID += "2D";
-		if (isLv) {
+		if (isLv) gId('klv2D').innerHTML = `<iframe id="${lvID}" src="about:blank"></iframe>`;
-		var cn = '<iframe id="liveview2D" src="about:blank"></iframe>';
+		gId('mlv2D').style.transform = (isLv) ? "translateY(0px)":"translateY(100%)";
-		d.getElementById('kliveview2D').innerHTML = cn;
-		}
-
-		gId('mliveview2D').style.transform = (isLv) ? "translateY(0px)":"translateY(100%)";
 	}
 
 	gId(lvID).style.display = (isLv) ? "block":"none";
-	var url = getURL("/" + lvID);
+	gId(lvID).src = (isLv) ? getURL("/" + lvID + ((wsOn) ? "?ws":"")):"about:blank";
-	gId(lvID).src = (isLv) ? url:"about:blank";
+	gId('buttonSr').classList.toggle("active");
-	gId('buttonSr').className = (isLv) ? "active":"";
+	if (!isLv && wsOn) ws.send('{"lv":false}');
-	if (!isLv && ws && ws.readyState === WebSocket.OPEN) ws.send('{"lv":false}');
 	size();
 }
 

wled00/data/liveview.htm

@@ -17,14 +17,10 @@
     position: absolute;
   }
   </style>
-</head>
-<body>
-  <div id="canv" />
   <script>
-    update();
+    var ws;
-    
     var tmout = null;
-    function update()
+    function update() // via HTTP (/json/live)
     {
       if (document.hidden) {
         clearTimeout(tmout);
@@ -57,8 +53,57 @@
         clearTimeout(tmout);
         tmout = setTimeout(update, 2500);
       })
+    }
+    function S() { // Startup function (onload)
+      let wsOn = (window.location.href.indexOf("?ws") > 0);
+      if (!wsOn) {update(); return;}
 
+      // Initialize WebSocket connection
+      try {
+        ws = top.window.ws;
+      } catch (e) {}
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        //console.info("Peek uses top WS");
+        ws.send("{'lv':true}");
+      } else {
+        //console.info("Peek WS opening");
+        let l = window.location;
+        let pathn = l.pathname;
+        let paths = pathn.slice(1,pathn.endsWith('/')?-1:undefined).split("/");
+        let url = l.origin.replace("http","ws");
+        if (paths.length > 1) {
+          url +=  "/" + paths[0];
+        }
+        ws = new WebSocket(url+"/ws");
+        ws.onopen = function () {
+          //console.info("Peek WS open");
+          ws.send("{'lv':true}");
+        }
+      }
+      ws.binaryType = "arraybuffer";
+      ws.addEventListener('message', (e) => {
+        try {
+          if (toString.call(e.data) === '[object ArrayBuffer]') {
+            let leds = new Uint8Array(event.data);
+            if (leds[0] != 76) return; //'L'
+            let str = "linear-gradient(90deg,";
+            let len = leds.length;
+            let start = leds[1]==2 ? 4 : 2; // 1 = 1D, 2 = 1D/2D (leds[2]=w, leds[3]=h)
+            for (i = start; i < len; i+=3) {
+              str += `rgb(${leds[i]},${leds[i+1]},${leds[i+2]})`;
+              if (i < len -3) str += ","
+            }
+            str += ")";
+            document.getElementById("canv").style.background = str;
+          }
+        } catch (err) {
+          console.error("Peek WS error:",err);
+        } 
+      });
     }
   </script>
+</head>
+<body onload="S()">
+  <div id="canv"></div>
 </body>
 </html>

wled00/data/liveviewws.htm

@@ -1,68 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
-  <meta charset="utf-8">
-  <meta name="theme-color" content="#222222">
-  <title>WLED Live Preview</title>
-  <style>
-  body {
-    margin: 0;
-  }
-  #canv {
-    background: black;
-    filter: brightness(175%);
-    width: 100%;
-    height: 100%;
-    position: absolute;
-  }
-  </style>
-</head>
-<body>
-  <div id="canv"></div>
-  <script>
-    var ws;
-    try {
-      ws = top.window.ws;
-    } catch (e) {}
-    if (ws && ws.readyState === WebSocket.OPEN) {
-      //console.info("Peek uses top WS");
-      ws.send("{'lv':true}");
-    } else {
-      //console.info("Peek WS opening");
-      let l = window.location;
-      let pathn = l.pathname;
-      let paths = pathn.slice(1,pathn.endsWith('/')?-1:undefined).split("/");
-      let url = l.origin.replace("http","ws");
-      if (paths.length > 1) {
-        url +=  "/" + paths[0];
-      }
-      ws = new WebSocket(url+"/ws");
-      ws.onopen = function () {
-        //console.info("Peek WS open");
-        ws.send("{'lv':true}");
-      }
-    }
-    ws.binaryType = "arraybuffer";
-    ws.addEventListener('message', (e) => {
-      try {
-        if (toString.call(e.data) === '[object ArrayBuffer]') {
-          let leds = new Uint8Array(event.data);
-          if (leds[0] != 76) return; //'L'
-          let str = "linear-gradient(90deg,";
-          let len = leds.length;
-          let start = leds[1]==2 ? 4 : 2; // 1 = 1D, 2 = 1D/2D (leds[2]=w, leds[3]=h)
-          for (i = start; i < len; i+=3) {
-            str += `rgb(${leds[i]},${leds[i+1]},${leds[i+2]})`;
-            if (i < len -3) str += ","
-          }
-          str += ")";
-          document.getElementById("canv").style.background = str;
-        }
-      } catch (err) {
-        console.error("Peek WS error:",err);
-      } 
-    });
-  </script>
-</body>
-</html>

wled00/data/welcome.htm

@@ -57,7 +57,7 @@
 			Connect the module to your local WiFi here!<br>
 			<button onclick="window.location.href='./settings/wifi'">WiFi settings</button><br>
 			<i>Just trying this out in AP mode?</i><br>
-			<button onclick="window.location.href='./sliders'">To the controls!</button><br>
+			<button onclick="window.location.href='./?sliders'">To the controls!</button><br>
 		</div>
 	</body>
 </html>

wled00/wled.h

@@ -36,7 +36,7 @@
   #undef WLED_ENABLE_ADALIGHT      // disable has priority over enable
 #endif
 //#define WLED_ENABLE_DMX          // uses 3.5kb (use LEDPIN other than 2)
-//#define WLED_ENABLE_JSONLIVE     // peek LED output via /json/live (WS binary peek is always enabled)
+#define WLED_ENABLE_JSONLIVE     // peek LED output via /json/live (WS binary peek is always enabled)
 #ifndef WLED_DISABLE_LOXONE
   #define WLED_ENABLE_LOXONE       // uses 1.2kb
 #endif

wled00/wled_server.cpp

@@ -116,14 +116,6 @@ void initServer()
   DefaultHeaders::Instance().addHeader(F("Access-Control-Allow-Headers"), "*");
 
 #ifdef WLED_ENABLE_WEBSOCKETS
-  server.on("/liveview", HTTP_GET, [](AsyncWebServerRequest *request){
-    if (handleIfNoneMatchCacheHeader(request)) return;
-    AsyncWebServerResponse *response = request->beginResponse_P(200, "text/html", PAGE_liveviewws, PAGE_liveviewws_length);
-    response->addHeader(FPSTR(s_content_enc),"gzip");
-    setStaticContentCacheHeaders(response);
-    request->send(response);
-    //request->send_P(200, "text/html", PAGE_liveviewws);
-  });
   #ifndef WLED_DISABLE_2D
   server.on("/liveview2D", HTTP_GET, [](AsyncWebServerRequest *request){
     if (handleIfNoneMatchCacheHeader(request)) return;
@@ -131,19 +123,16 @@ void initServer()
     response->addHeader(FPSTR(s_content_enc),"gzip");
     setStaticContentCacheHeaders(response);
     request->send(response);
-    //request->send_P(200, "text/html", PAGE_liveviewws);
   });
   #endif
-#else
+#endif
   server.on("/liveview", HTTP_GET, [](AsyncWebServerRequest *request){
     if (handleIfNoneMatchCacheHeader(request)) return;
     AsyncWebServerResponse *response = request->beginResponse_P(200, "text/html", PAGE_liveview, PAGE_liveview_length);
     response->addHeader(FPSTR(s_content_enc),"gzip");
     setStaticContentCacheHeaders(response);
     request->send(response);
-    //request->send_P(200, "text/html", PAGE_liveview);
   });
-#endif
 
   //settings page
   server.on("/settings", HTTP_GET, [](AsyncWebServerRequest *request){
@@ -167,10 +156,6 @@ void initServer()
     }
   });
 
-  server.on("/sliders", HTTP_GET, [](AsyncWebServerRequest *request){
-    serveIndex(request);
-  });
-
   server.on("/welcome", HTTP_GET, [](AsyncWebServerRequest *request){
     serveSettings(request);
   });
@@ -247,19 +232,15 @@ void initServer()
     request->send(200, "text/plain", (String)ESP.getFreeHeap());
   });
 
+#ifdef WLED_ENABLE_USERMOD_PAGE
   server.on("/u", HTTP_GET, [](AsyncWebServerRequest *request){
     if (handleIfNoneMatchCacheHeader(request)) return;
     AsyncWebServerResponse *response = request->beginResponse_P(200, "text/html", PAGE_usermod, PAGE_usermod_length);
     response->addHeader(FPSTR(s_content_enc),"gzip");
     setStaticContentCacheHeaders(response);
     request->send(response);
-    //request->send_P(200, "text/html", PAGE_usermod);
-  });
-
-  //Deprecated, use of /json/state and presets recommended instead
-  server.on("/url", HTTP_GET, [](AsyncWebServerRequest *request){
-    URL_response(request);
   });
+#endif
 
   server.on("/teapot", HTTP_GET, [](AsyncWebServerRequest *request){
     serveMessage(request, 418, F("418. I'm a teapot."), F("(Tangible Embedded Advanced Project Of Twinkling)"), 254);
@@ -356,9 +337,14 @@ void initServer()
     serveMessage(request, 501, "Not implemented", F("DMX support is not enabled in this build."), 254);
   });
   #endif
+
   server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
     if (captivePortal(request)) return;
-    serveIndexOrWelcome(request);
+    if (!showWelcomePage || request->hasArg(F("sliders"))){
+      serveIndex(request);
+    } else {
+      serveSettings(request);
+    }
   });
 
   #ifdef WLED_ENABLE_PIXART
@@ -420,20 +406,9 @@ void initServer()
     response->addHeader(FPSTR(s_content_enc),"gzip");
     setStaticContentCacheHeaders(response);
     request->send(response);
-    //request->send_P(404, "text/html", PAGE_404);
   });
 }
 
-
-void serveIndexOrWelcome(AsyncWebServerRequest *request)
-{
-  if (!showWelcomePage){
-    serveIndex(request);
-  } else {
-    serveSettings(request);
-  }
-}
-
 bool handleIfNoneMatchCacheHeader(AsyncWebServerRequest* request)
 {
   AsyncWebHeader* header = request->getHeader("If-None-Match");

wled00/xml.cpp

@@ -72,55 +72,6 @@ void XML_response(AsyncWebServerRequest *request, char* dest)
   if (request != nullptr) request->send(200, "text/xml", obuf);
 }
 
-//Deprecated, use of /json/state and presets recommended instead
-void URL_response(AsyncWebServerRequest *request)
-{
-  char sbuf[256];
-  char s2buf[100];
-  obuf = s2buf;
-  olen = 0;
-
-  char s[16];
-  oappend(SET_F("http://"));
-  IPAddress localIP = Network.localIP();
-  sprintf(s, "%d.%d.%d.%d", localIP[0], localIP[1], localIP[2], localIP[3]);
-  oappend(s);
-
-  oappend(SET_F("/win&A="));
-  oappendi(bri);
-  oappend(SET_F("&CL=h"));
-  for (int i = 0; i < 3; i++)
-  {
-   sprintf(s,"%02X", col[i]);
-   oappend(s);
-  }
-  oappend(SET_F("&C2=h"));
-  for (int i = 0; i < 3; i++)
-  {
-   sprintf(s,"%02X", colSec[i]);
-   oappend(s);
-  }
-  oappend(SET_F("&FX="));
-  oappendi(effectCurrent);
-  oappend(SET_F("&SX="));
-  oappendi(effectSpeed);
-  oappend(SET_F("&IX="));
-  oappendi(effectIntensity);
-  oappend(SET_F("&FP="));
-  oappendi(effectPalette);
-
-  obuf = sbuf;
-  olen = 0;
-
-  oappend(SET_F("<html><body><a href=\""));
-  oappend(s2buf);
-  oappend(SET_F("\" target=\"_blank\">"));
-  oappend(s2buf);
-  oappend(SET_F("</a></body></html>"));
-
-  if (request != nullptr) request->send(200, "text/html", obuf);
-}
-
 void extractPin(JsonObject &obj, const char *key) {
   if (obj[key].is<JsonArray>()) {
     JsonArray pins = obj[key].as<JsonArray>();