Dynamic visibility support

The ability to make controls visible and invisible
was basically already supported, we just need to add
some minor handling in controls.js.

README.md

@@ -35,6 +35,7 @@ The Library runs on any kind of **ESP8266** and **ESP32** (NodeMCU, AI Thinker,
 - [Log output](#log-output)
 - [Colours](#colours)
 - [Advanced Features](#advanced-features)
+  * [Dynamic Visibility](#dynamic-visibility)
   * [Inline Styles](#inline-styles)
   * [Grouped controls](#grouped-controls)
   * [Wide controls](#wide-controls)
@@ -423,6 +424,17 @@ If you want more control over the UI design, see the Inline Styles section below
 ESPUI includes a range of advanced features that can customise your UIs.
 
 
+### Dynamic Visibility
+
+Cotrols can be made visible or invisible at runtime with the `updateVisibility()` function.
+
+```
+ESPUI.updateVisibility(controlId, false);
+```
+
+Note that you cannot hide individual controls from a [control group](#grouped-controls), you have to hide the entire group.
+
+
 ### Inline Styles
 
 You can add custom CSS styles to controls. This allows you to style the UI with custom colors, drop shadows, 

data/js/controls.js

@@ -575,6 +575,13 @@ function start() {
         $("#id" + data.id).attr("style", data.panelStyle);
       }
 
+      if(data.hasOwnProperty('visible')) {
+        if(data['visible']) 
+          $("#id" + data.id).show();
+        else
+          $("#id" + data.id).hide();
+      }
+
       if (data.type == UPDATE_SLIDER) {
         element.removeClass(
           "slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin"

data/js/controls.min.js

@@ -41,6 +41,9 @@ break;case UPDATE_BUTTON:$("#btn"+data.id).val(data.value);$("#btn"+data.id).tex
 break;case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#gauge"+data.id).attr("style",data.elementStyle);}
 break;case UPDATE_ACCEL:break;case UPDATE_TIME:var rv=new Date().toISOString();websock.send("time:"+rv+":"+data.id);break;default:console.error("Unknown type or event");break;}
 if(data.type>=UPDATE_OFFSET&&data.type<UI_INITIAL_GUI){var element=$("#id"+data.id);if(data.hasOwnProperty('panelStyle')){$("#id"+data.id).attr("style",data.panelStyle);}
+if(data.hasOwnProperty('visible')){if(data['visible'])
+$("#id"+data.id).show();else
+$("#id"+data.id).hide();}
 if(data.type==UPDATE_SLIDER){element.removeClass("slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin");element.addClass("slider-"+colorClass(data.color));}else{element.removeClass("turquoise emerald peterriver wetasphalt sunflower carrot alizarin");element.addClass(colorClass(data.color));}}
 $(".range-slider__range").each(function(){$(this)[0].value=$(this).attr("value");$(this).next().html($(this).attr("value"));});};websock.onmessage=handleEvent;}
 function sliderchange(number){var val=$("#sl"+number).val();websock.send("slvalue:"+val+":"+number);$(".range-slider__range").each(function(){$(this).attr("value",$(this)[0].value);});}

src/ESPUI.cpp

@@ -910,6 +910,15 @@ void ESPUIClass::updateControlValue(uint16_t id, const String& value, int client
     updateControlValue(control, value, clientId);
 }
 
+void ESPUIClass::updateVisibility(uint16_t id, bool visibility, int clientId) {
+    Control* control = getControl(id);
+    if(control)
+    {
+        control->visible = visibility;
+        updateControl(id);
+    }
+}
+
 void ESPUIClass::print(uint16_t id, const String& value)
 {
     updateControlValue(id, value);

src/ESPUI.h

@@ -301,6 +301,7 @@ public:
 
     void setPanelWide(uint16_t id, bool wide);
     void setVertical(uint16_t id, bool vert = true);
+    void updateVisibility(uint16_t id, bool visibility, int clientId = -1);
 
     // Variables
     const char* ui_title = "ESPUI"; // Store UI Title and Header Name