Sync Interfaces settings: hide sections for disabled features (#2865)

* Add network debug printer

* hide settings for disabled features

If not enabled at compile time, this change hides "Sync interfaces" settings for Alexa, MQTT, Blynk, HueSync.
The html sections are just hidden by a <div> with style display:none.

* Update Animated Staircas for 0.14

* Faster strip updates.

* Add ESP32 variant display in update page.

* Net debug optimizations

Fix ESP8266 (unaligned progmem flash string reads)
Do not send an extra package for \n in println
Only resolve IP/hostname once

* Compile time option for PIR sensor off timer

* Fix Gitpod compiling (#2875)

* Install Platformio not in Gitpod Image

* Install platformio at runtime

remove outdated extensions

* Bugfix for color transitioning.
Return palette option for Candle.
Fix for "* Color..." palette hiding.
Comment out debug output.

* Optimization & bugfix for net debug.
- Inherited from Print class.
- Added UI option to disable net  debug output.

* Reduce fxdata size by about 200 bytes

Removed redundant commas before semicolon delimiter (`,;` -> `;`)
No need to transmit `@` in /json/fxdata

* NetworkDebugPrinter packet optimization.

* Revert NetworkDebugPrinter changes.

* Remove flush() in bus manager.

* Optimizations.

Co-authored-by: Shaheen Gandhi <shaheen@fb.com>
Co-authored-by: Blaz Kristan <blaz@kristan-sp.si>
Co-authored-by: cschwinne <dev.aircoookie@gmail.com>
Co-authored-by: Jason2866 <24528715+Jason2866@users.noreply.github.com>

wled00/data/settings_2D.htm

@@ -70,7 +70,7 @@
 	function addPanel(i=0) {
 		let p = gId("panels");
 		if (p.children.length >= maxPanels) return;
-		let b = `<div id="pnl${i}">${i===0?"":'<hr style="width:260px">'}Panel ${i}<br>1<sup>st</sup> LED: <select name="P${i}B">
+		let b = `<div id="pnl${i}">${i===0?"":'<hr class="sml">'}Panel ${i}<br>1<sup>st</sup> LED: <select name="P${i}B">
 	<option value="0">Top</option>
 	<option value="1">Bottom</option>
 </select><select name="P${i}R">
@@ -134,11 +134,11 @@ Serpentine: <input type="checkbox" name="P${i}S"></div>`;
 			<option value="1">Vertical</option>
 		</select><br>
 		Serpentine: <input type="checkbox" name="PS">
-		<hr style="width:260px">
+		<hr class="sml">
 		<i>A matrix is made of 1 or more physical LED panels of the same dimensions.<br>
 		Panels should be arranged from top-left to bottom-right order, starting with lower panel number on the left (or top if transposed).<br>
 		Each panel can have different LED orientation and/or starting point and/or layout.</i><br>
-		<hr style="width:260px">
+		<hr class="sml">
 		<h3>LED panel layout</h3>
 		<div id="panels">
 		</div>

wled00/data/settings_leds.htm

@@ -322,7 +322,7 @@
       if (n==1) {
 // npm run build has trouble minimizing spaces inside string
         var cn = `<div class="iST">
-<hr style="width:260px">
+<hr class="sml">
 ${i+1}:
 <select name="LT${i}" onchange="UI(true)">
 <option value="22" selected>WS281x</option>
@@ -388,7 +388,7 @@ ${i+1}:
       if (i >= 10) return;
 
       var b = `<div class="com_entry">
-<hr style="width:260px">
+<hr class="sml">
 ${i+1}: Start: <input type="number" name="XS${i}" id="xs${i}" class="l starts" min="0" max="65535" value="${start}" oninput="UI();" required="">&nbsp;
 Length: <input type="number" name="XC${i}" id="xc${i}" class="l" min="1" max="65535" value="${len}" required="" oninput="UI()">
 <div style="display:inline">Color Order:
@@ -594,7 +594,7 @@ Length: <input type="number" name="XC${i}" id="xc${i}" class="l" min="1" max="65
     </div>
     <h3>Hardware setup</h3>
     <div id="mLC">LED outputs:</div>
-    <hr style="width:260px">
+    <hr class="sml">
     <button type="button" id="+" onclick="addLEDs(1,false)">+</button>
     <button type="button" id="-" onclick="addLEDs(-1,false)">-</button><br>
     LED Memory Usage: <span id="m0">0</span> / <span id="m1">?</span> B<br>
@@ -603,19 +603,19 @@ Length: <input type="number" name="XC${i}" id="xc${i}" class="l" min="1" max="65
       &#9888; You might run into stability or lag issues.<br>
       Use less than <span id="wreason">800 LEDs per output</span> for the best experience!<br>
     </div>
-    <hr style="width:260px">
+    <hr class="sml">
     Make a segment for each output: <input type="checkbox" name="MS"><br>
     Custom bus start indices: <input type="checkbox" onchange="tglSi(this.checked)" id="si"><br>
     Use global LED buffer: <input type="checkbox" name="LD"><br>
-    <hr style="width:260px">
+    <hr class="sml">
     <div id="color_order_mapping">
       Color Order Override:
       <div id="com_entries"></div>
-      <hr style="width:260px">
+      <hr class="sml">
       <button type="button" id="com_add" onclick="addCOM()">+</button>
       <button type="button" id="com_rem" onclick="remCOM()">-</button><br>
     </div>
-    <hr style="width:260px">
+    <hr class="sml">
     <div id="btns"></div>
     Touch threshold: <input type="number" class="s" min="0" max="100" name="TT" required><br>
     IR GPIO: <input type="number" min="-1" max="48" name="IR" onchange="UI()" class="xs"><select name="IT" onchange="UI()">
@@ -633,7 +633,7 @@ Length: <input type="number" name="XC${i}" id="xc${i}" class="l" min="1" max="65
     <div id="json" style="display:none;">JSON file: <input type="file" name="data" accept=".json"><button type="button" class="sml" onclick="uploadFile('/ir.json')">Upload</button><br></div>
     <a href="https://kno.wled.ge/interfaces/infrared/" target="_blank">IR info</a><br>
     Relay GPIO: <input type="number" min="-1" max="48" name="RL" onchange="UI()" class="xs"> Invert <input type="checkbox" name="RM"><span style="cursor: pointer;" onclick="off('RL')">&nbsp;&#x2715;</span><br>
-    <hr style="width:260px">
+    <hr class="sml">
 		<h3>Defaults</h3>
 		Turn LEDs on after power up/reset: <input type="checkbox" name="BO"><br>
     Default brightness: <input name="CA" type="number" class="m" min="0" max="255" required> (0-255)<br><br>
@@ -679,7 +679,7 @@ Length: <input type="number" name="XC${i}" id="xc${i}" class="l" min="1" max="65
 			<option value="3">None (not recommended)</option>
 		</select><br>
 		Target refresh rate: <input type="number" class="s" min="1" max="120" name="FR" required> FPS
-    <hr style="width:260px">
+    <hr class="sml">
     <div id="cfg">Config template: <input type="file" name="data2" accept=".json"><button type="button" class="sml" onclick="loadCfg(d.Sf.data2)">Apply</button><br></div>
     <hr>
     <button type="button" onclick="B()">Back</button><button type="submit">Save</button>

wled00/data/settings_sync.htm

@@ -7,10 +7,8 @@
   <title>Sync Settings</title>
   <script>var d=document;
   var loc = false, locip;
-  function gId(s)
+  function gId(s){return d.getElementById(s);}
-  {
+  function toggle(el){gId(el).classList.toggle("hide"); gId('No'+el).classList.toggle("hide");}
-    return d.getElementById(s);
-  }
   function H(){window.open("https://kno.wled.ge/interfaces/udp-notifier/");}
   function B(){window.open("/settings","_self");}
   function adj(){if (d.Sf.DI.value == 6454) {if (d.Sf.EU.value == 1) d.Sf.EU.value = 0;}
@@ -81,11 +79,11 @@
 <h2>Sync setup</h2>
 <h3>WLED Broadcast</h3>
 UDP Port: <input name="UP" type="number" min="1" max="65535" class="d5" required><br>
-2nd Port: <input name="U2" type="number" min="1" max="65535" class="d5" required><br><br>
+2nd Port: <input name="U2" type="number" min="1" max="65535" class="d5" required><br>
-<input name="GS" id="GS" type="number" style="display: none;"> <!-- hidden inputs for bitwise group checkboxes -->
+<h3>Sync grups</h3>
+<input name="GS" id="GS" type="number" style="display: none;"><!-- hidden inputs for bitwise group checkboxes -->
 <input name="GR" id="GR" type="number" style="display: none;">
 <table style="margin: 0 auto;">
-    <tr><td colspan="9" style="text-align:center">Sync groups</td></tr>
     <tr>
         <td></td>
         <td>1</td>
@@ -129,9 +127,11 @@ Send Philips Hue change notifications: <input type="checkbox" name="SH"><br>
 Send Macro notifications: <input type="checkbox" name="SM"><br>
 UDP packet retransmissions: <input name="UR" type="number" min="0" max="30" class="d5" required><br><br>
 <i>Reboot required to apply changes. </i>
+<hr class="sml">
 <h3>Instance List</h3>
 Enable instance list: <input type="checkbox" name="NL"><br>
 Make this instance discoverable: <input type="checkbox" name="NB">
+<hr class="sml">
 <h3>Realtime</h3>
 Receive UDP realtime: <input type="checkbox" name="RD"><br>
 Use main segment only: <input type="checkbox" name="MO"><br><br>
@@ -163,20 +163,38 @@ Timeout: <input name="ET" type="number" min="1" max="65000" required> ms<br>
 Force max brightness: <input type="checkbox" name="FB"><br>
 Disable realtime gamma correction: <input type="checkbox" name="RG"><br>
 Realtime LED offset: <input name="WO" type="number" min="-255" max="255" required>
+<hr class="sml">
 <h3>Alexa Voice Assistant</h3>
+<div id="NoAlexa" class="hide">
+  <em style="color:#fa0;">This firmware build does not include Alexa support.<br></em><br>
+</div>
+<div id="Alexa">
 Emulate Alexa device: <input type="checkbox" name="AL"><br>
 Alexa invocation name: <input type="text" name="AI" maxlength="32"><br>
-Also emulate devices to call the first <input name="AP" type="number" class="s" min="0" max="9" required> presets
+Also emulate devices to call the first <input name="AP" type="number" class="s" min="0" max="9" required> presets<br><br>
-<h3>Blynk</h3>
+</div>
-<b>Blynk, MQTT and Hue sync all connect to external hosts!<br>
+<hr class="sml">
-This may impact the responsiveness of the ESP8266.</b><br>
+<div style="color: #fa0;">&#9888; <b>Blynk, MQTT and Hue sync all connect to external hosts!<br>
+This may impact the responsiveness of WLED.</b><br>
+</div>
 For best results, only use one of these services at a time.<br>
-(alternatively, connect a second ESP to them and use the UDP sync)<br><br>
+(alternatively, connect a second ESP to them and use the UDP sync)
+<hr class="sml">
+<h3>Blynk</h3>
+<div id="NoBlynk" class="hide">
+  <em style="color:#fa0;">This firmware build does not include Blynk support.<br></em>
+</div>
+<div id="Blynk">
 Host: <input type="text" name="BH" maxlength="32">
 Port: <input name="BP" type="number" min="1" max="65535" value="80" class="d5"><br>
 Device Auth token: <input name="BK" maxlength="33"><br>
 <i>Clear the token field to disable. </i><a href="https://kno.wled.ge/interfaces/blynk/" target="_blank">Setup info</a>
+</div>
 <h3>MQTT</h3>
+<div id="NoMQTT" class="hide">
+  <em style="color:#fa0;">This firmware build does not include MQTT support.<br></em>
+</div>
+<div id="MQTT">
 Enable MQTT: <input type="checkbox" name="MQ"><br>
 Broker: <input type="text" name="MS" maxlength="32">
 Port: <input name="MQPORT" type="number" min="1" max="65535" class="d5"><br>
@@ -189,7 +207,12 @@ Device Topic: <input type="text" name="MD" maxlength="32"><br>
 Group Topic: <input type="text" name="MG" maxlength="32"><br>
 Publish on button press: <input type="checkbox" name="BM"><br>
 <i>Reboot required to apply changes. </i><a href="https://kno.wled.ge/interfaces/mqtt/" target="_blank">MQTT info</a>
+</div>
 <h3>Philips Hue</h3>
+<div id="NoHue" class="hide">
+  <em style="color:#fa0;">This firmware build does not include Philips Hue support.<br></em>
+</div>
+<div id="Hue">
 <i>You can find the bridge IP and the light number in the 'About' section of the hue app.</i><br>
 Poll Hue light <input name="HL" type="number" min="1" max="99" > every <input name="HI" type="number" min="100" max="65000"> ms: <input type="checkbox" name="HP"><br>
 Then, receive <input type="checkbox" name="HO"> On/Off, <input type="checkbox" name="HB"> Brightness, and <input type="checkbox" name="HC"> Color<br>
@@ -201,6 +224,7 @@ Hue Bridge IP:<br>
 <b>Press the pushlink button on the bridge, after that save this page!</b><br>
 (when first connecting)<br>
 Hue status: <span class="sip"> Disabled in this build </span>
+</div>
 <h3>Serial</h3>
 Baud rate:
 <select name=BD>

wled00/data/settings_um.htm

@@ -106,7 +106,7 @@
 	}
 	function addField(k,f,o,a=false) {  //key, field, (sub)object, isArray
 		if (isO(o)) {
-			urows += '<hr style="width:260px">';
+			urows += '<hr class="sml">';
 			for (const [s,v] of Object.entries(o)) {
 				// possibility to nest objects (only 1 level)
 				if (f!=='unknown' && !k.includes(":")) addField(k+":"+f,s,v);
@@ -236,7 +236,7 @@
 		<i style="color: orange;">(only changable on ESP32, change requires reboot!)</i><br>
 		SDA:<input type="number" min="-1" max="48" name="SDA" onchange="check(this,'if')" class="s" placeholder="SDA">
 		SCL:<input type="number" min="-1" max="48" name="SCL" onchange="check(this,'if')" class="s" placeholder="SCL">
-		<hr style="width:260px">
+		<hr class="sml">
 		Global SPI GPIOs (HW)<br>
 		<i style="color: orange;">(only changable on ESP32, change requires reboot!)</i><br>
 		MOSI:<input type="number" min="-1" max="48" name="MOSI" onchange="check(this,'if')" class="s" placeholder="MOSI">

wled00/data/style.css

@@ -13,6 +13,9 @@ body {
 hr {
   border-color: #666;
 }
+hr.sml {
+  width: 260px;
+}
 a, a:hover {
   color: #28f;
   text-decoration: none;
@@ -52,6 +55,9 @@ button.sml {
   position: absolute;
   width: 60px;
 }
+.hide {
+  display: none;
+}
 input {
   background: #333;
   color: #fff;

wled00/xml.cpp

@@ -510,10 +510,15 @@ void getSettingsJS(byte subPage, char* dest)
     sappends('s',SET_F("AI"),alexaInvocationName);
     sappend('c',SET_F("SA"),notifyAlexa);
     sappend('v',SET_F("AP"),alexaNumPresets);
+    #ifdef WLED_DISABLE_ALEXA
+    oappend(SET_F("toggle('Alexa');"));  // hide Alexa settings
+    #endif
     sappends('s',SET_F("BK"),(char*)((blynkEnabled)?SET_F("Hidden"):""));
     #ifndef WLED_DISABLE_BLYNK
     sappends('s',SET_F("BH"),blynkHost);
     sappend('v',SET_F("BP"),blynkPort);
+    #else
+    oappend(SET_F("toggle('Blynk');"));    // hide BLYNK settings
     #endif
 
     #ifdef WLED_ENABLE_MQTT
@@ -530,6 +535,8 @@ void getSettingsJS(byte subPage, char* dest)
     sappends('s',"MD",mqttDeviceTopic);
     sappends('s',SET_F("MG"),mqttGroupTopic);
     sappend('c',SET_F("BM"),buttonPublishMqtt);
+    #else
+    oappend(SET_F("toggle('MQTT');"));    // hide MQTT settings
     #endif
 
     #ifndef WLED_DISABLE_HUESYNC
@@ -557,6 +564,8 @@ void getSettingsJS(byte subPage, char* dest)
     }
     
     sappends('m',SET_F("(\"sip\")[0]"),hueErrorString);
+    #else
+    oappend(SET_F("toggle('Hue');"));    // hide Hue Sync settings
     #endif
     sappend('v',SET_F("BD"),serialBaud);
   }