From ec1862cfe68f9e0579931d12a3942c5a82f1be9d Mon Sep 17 00:00:00 2001
From: Ian Gray <iangray001@github.com>
Date: Sun, 2 Jan 2022 21:56:32 +0000
Subject: [PATCH] Support for dynamic custom inline styling.

Adds two functions in ESPUI.h:
setPanelStyle()
setElementStyle()
These allow for custom inline CSS styles to be applied to the panel and to
the specific UI element repectively.

For example:

```
char stylecol1[30]
sprintf(stylecol1, "background-color: #%06X;", (unsigned int) random(0x0, 0xFFFFFF));
ESPUI.setPanelStyle(switch1, stylecol1);
```
This will set the panel of the given control to a random hex colour.

This is supported by both the initial UI message, and by control update messages, so you
can change these styles dynamically in response to other events.

setElementStyle() is not perfect. Because CSS inline styles can only style one specific
DOM element, for controls made up of multiple elements (like the "pad") this is limited.
I have tried to make an appropriate choice for each supported control.
---
 data/js/controls.js     | 67 +++++++++++++++++++++++++++++------------
 data/js/controls.min.js | 50 +++++++++++++++++-------------
 src/ESPUI.cpp           | 20 ++++++++++++
 src/ESPUI.h             |  5 +++
 src/dataControlsJS.h    | 52 ++++++++++++++++++--------------
 5 files changed, 132 insertions(+), 62 deletions(-)

diff --git a/data/js/controls.js b/data/js/controls.js
index 728ed7b..f8a8101 100644
--- a/data/js/controls.js
+++ b/data/js/controls.js
@@ -233,6 +233,9 @@ function start() {
     var e = document.body;
     var center = "";
 
+    panelStyle = data.hasOwnProperty('panelStyle') ? " style='" + data.panelStyle + "'" : "";
+    elementStyle = data.hasOwnProperty('elementStyle') ? " style='" + data.elementStyle + "'" : "";
+
     switch (data.type) {
       case UI_INITIAL_GUI:
         // Clear current elements
@@ -278,9 +281,9 @@ function start() {
         }
 		if (data.visible) {
         parent.append(
-          "<div id='id" +
+          "<div id='id" + 
             data.id +
-            "' class='two columns card tcenter " +
+            "' " + panelStyle + " class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -288,7 +291,7 @@ function start() {
             "</h5><hr/>" +
             "<span id='l" +
             data.id +
-            "' class='label label-wrap'>" +
+            "' " + elementStyle + " class='label label-wrap'>" +
             data.value +
             "</span>" +
             "</div>"
@@ -307,7 +310,7 @@ function start() {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='one columns card tcenter " +
+            "' " + panelStyle + " class='one columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -315,7 +318,7 @@ function start() {
             "</h5><hr/>" +
             "<button id='btn" +
             data.id +
-            "' " +
+            "' " + elementStyle + " " +
             "onmousedown='buttonclick(" +
             data.id +
             ", true)' " +
@@ -349,7 +352,7 @@ function start() {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='one columns card tcenter " +
+            "' " + panelStyle + " class='one columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -357,7 +360,7 @@ function start() {
             "</h5><hr/>" +
             "<label id='sl" +
             data.id +
-            "' class='switch " +
+            "' " + elementStyle + " class='switch " +
             (data.value == "1" ? "checked" : "") +
             "'>" +
             "<div class='in'><input type='checkbox' id='s" +
@@ -386,7 +389,7 @@ function start() {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='two columns card tcenter " +
+            "' " + panelStyle + " class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -501,7 +504,7 @@ function start() {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='two columns card tcenter card-slider " +
+            "' " + panelStyle + " class='two columns card tcenter card-slider " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -512,7 +515,7 @@ function start() {
             data.id +
             "' type='range' min='0' max='100' value='" +
             data.value +
-            "' class='range-slider__range'>" +
+            "' " + elementStyle + " class='range-slider__range'>" +
             "<span class='range-slider__value'>" +
             data.value +
             "</span>" +
@@ -534,13 +537,13 @@ function start() {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='two columns card tcenter " +
+            "' " + panelStyle + " class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
             data.label +
             "</h5><hr/>" +
-            "<input style='color:black;' id='num" +
+            "<input style='color:black;' " + elementStyle + " id='num" +
             data.id +
             "' type='number' value='" +
             data.value +
@@ -563,13 +566,13 @@ function start() {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='two columns card tcenter " +
+            "' " + panelStyle + " class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
             data.label +
             "</h5><hr/>" +
-            "<input style='color:black;' id='text" +
+            "<input style='color:black;' " + elementStyle + " id='text" +
             data.id +
             "' value='" +
             data.value +
@@ -615,13 +618,13 @@ function start() {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='two columns card tcenter " +
+            "' " + panelStyle + " class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
             data.label +
             "</h5><hr/>" +
-            "<select style='color:black;' id='select" +
+            "<select style='color:black;' " + elementStyle + " id='select" +
             data.id +
             "' onchange='selectchange(" +
             data.id +
@@ -685,7 +688,7 @@ function start() {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='two columns card tcenter " +
+            "' " + panelStyle + " class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -726,7 +729,7 @@ function start() {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='two columns card tcenter " +
+            "' " + panelStyle + " class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -757,7 +760,7 @@ function start() {
         parent.append(
           "<div id='id" +
             data.id +
-            "' class='two columns card tcenter " +
+            "' " + panelStyle + " class='two columns card tcenter " +
             colorClass(data.color) +
             "'>" +
             "<h5>" +
@@ -779,26 +782,44 @@ function start() {
 
       case UPDATE_LABEL:
         $("#l" + data.id).html(data.value);
+        if(data.hasOwnProperty('elementStyle')) {
+          $("#l" + data.id).attr("style", data.elementStyle);
+        }
         break;
 
       case UPDATE_SWITCHER:
         switcher(data.id, data.value == "0" ? 0 : 1);
+        if(data.hasOwnProperty('elementStyle')) {
+          $("#sl" + data.id).attr("style", data.elementStyle);
+        }
         break;
 
       case UPDATE_SLIDER:
         slider_move($("#id" + data.id), data.value, "100", false);
+        if(data.hasOwnProperty('elementStyle')) {
+          $("#sl" + data.id).attr("style", data.elementStyle);
+        }
         break;
 
       case UPDATE_NUMBER:
         $("#num" + data.id).val(data.value);
+        if(data.hasOwnProperty('elementStyle')) {
+          $("#num" + data.id).attr("style", data.elementStyle);
+        }
         break;
 
       case UPDATE_TEXT_INPUT:
         $("#text" + data.id).val(data.value);
+        if(data.hasOwnProperty('elementStyle')) {
+          $("#text" + data.id).attr("style", data.elementStyle);
+        }
         break;
 
       case UPDATE_SELECT:
         $("#select" + data.id).val(data.value);
+        if(data.hasOwnProperty('elementStyle')) {
+          $("#select" + data.id).attr("style", data.elementStyle);
+        }
         break;
 
       case UPDATE_BUTTON:
@@ -807,6 +828,9 @@ function start() {
         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;
@@ -818,6 +842,11 @@ function start() {
 
     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.type == UPDATE_SLIDER) {
         element.removeClass(
           "slider-turquoise slider-emerald slider-peterriver slider-wetasphalt slider-sunflower slider-carrot slider-alizarin"
diff --git a/data/js/controls.min.js b/data/js/controls.min.js
index 4ef95e3..6667c78 100644
--- a/data/js/controls.min.js
+++ b/data/js/controls.min.js
@@ -7,11 +7,11 @@ function restart(){$(document).add("*").off();$("#row").html("");websock.close()
 function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection &#8635;");$("#conStatus").off();$("#conStatus").on({click:restart,});}
 function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}}
 function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);if(window.location.port!=""||window.location.port!=80||window.location.port!=443){websock=new WebSocket("ws://"+window.location.hostname+":"+window.location.port+"/ws");}else{websock=new WebSocket("ws://"+window.location.hostname+"/ws");}
-websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:$("#row").html("");$("#tabsnav").html("");$("#tabscontent").html("");if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
+websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";panelStyle=data.hasOwnProperty('panelStyle')?" style='"+data.panelStyle+"'":"";elementStyle=data.hasOwnProperty('elementStyle')?" style='"+data.elementStyle+"'":"";switch(data.type){case UI_INITIAL_GUI:$("#row").html("");$("#tabsnav").html("");$("#tabscontent").html("");if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
 data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});break;case UI_EXTEND_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});break;case UI_RELOAD:window.location.reload();break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='two columns card tcenter "+
+"' "+panelStyle+" class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -19,14 +19,14 @@ data.label+
 "</h5><hr/>"+
 "<span id='l"+
 data.id+
-"' class='label label-wrap'>"+
+"' "+elementStyle+" class='label label-wrap'>"+
 data.value+
 "</span>"+
 "</div>");}
 break;case UI_BUTTON:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='one columns card tcenter "+
+"' "+panelStyle+" class='one columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -34,7 +34,7 @@ data.label+
 "</h5><hr/>"+
 "<button id='btn"+
 data.id+
-"' "+
+"' "+elementStyle+" "+
 "onmousedown='buttonclick("+
 data.id+
 ", true)' "+
@@ -46,7 +46,7 @@ data.value+
 break;case UI_SWITCHER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='one columns card tcenter "+
+"' "+panelStyle+" class='one columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -54,7 +54,7 @@ data.label+
 "</h5><hr/>"+
 "<label id='sl"+
 data.id+
-"' class='switch "+
+"' "+elementStyle+" class='switch "+
 (data.value=="1"?"checked":"")+
 "'>"+
 "<div class='in'><input type='checkbox' id='s"+
@@ -69,7 +69,7 @@ data.id+
 break;case UI_CPAD:case UI_PAD:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='two columns card tcenter "+
+"' "+panelStyle+" class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -118,7 +118,7 @@ data.id+
 break;case UI_SLIDER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='two columns card tcenter card-slider "+
+"' "+panelStyle+" class='two columns card tcenter card-slider "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -129,7 +129,7 @@ data.label+
 data.id+
 "' type='range' min='0' max='100' value='"+
 data.value+
-"' class='range-slider__range'>"+
+"' "+elementStyle+" class='range-slider__range'>"+
 "<span class='range-slider__value'>"+
 data.value+
 "</span>"+
@@ -138,13 +138,13 @@ data.value+
 break;case UI_NUMBER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='two columns card tcenter "+
+"' "+panelStyle+" class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
 data.label+
 "</h5><hr/>"+
-"<input style='color:black;' id='num"+
+"<input style='color:black;' "+elementStyle+" id='num"+
 data.id+
 "' type='number' value='"+
 data.value+
@@ -155,13 +155,13 @@ data.id+
 break;case UI_TEXT_INPUT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='two columns card tcenter "+
+"' "+panelStyle+" class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
 data.label+
 "</h5><hr/>"+
-"<input style='color:black;' id='text"+
+"<input style='color:black;' "+elementStyle+" id='text"+
 data.id+
 "' value='"+
 data.value+
@@ -174,13 +174,13 @@ e.preventDefault();});}
 break;case UI_SELECT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='two columns card tcenter "+
+"' "+panelStyle+" class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
 data.label+
 "</h5><hr/>"+
-"<select style='color:black;' id='select"+
+"<select style='color:black;' "+elementStyle+" id='select"+
 data.id+
 "' onchange='selectchange("+
 data.id+
@@ -201,7 +201,7 @@ break;case UI_STEP:if(data.parentControl){var parent=$("#id"+data.parentControl+
 break;case UI_GRAPH:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='two columns card tcenter "+
+"' "+panelStyle+" class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -218,7 +218,7 @@ data.label+
 break;case ADD_GRAPH_POINT:var ts=Math.round(new Date().getTime()/1000);graphData[data.id].push({x:ts,y:data.value});saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case CLEAR_GRAPH:graphData[data.id]=[];saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case UI_GAUGE:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='two columns card tcenter "+
+"' "+panelStyle+" class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -235,7 +235,7 @@ data.id+
 break;case UI_ACCEL:if(hasAccel)break;var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 hasAccel=true;if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='two columns card tcenter "+
+"' "+panelStyle+" class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -249,8 +249,16 @@ data.id+
 data.id+
 "'></pre>"+
 "</div>");requestOrientationPermission();}
-break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);break;case UPDATE_SWITCHER:switcher(data.id,data.value=="0"?0:1);break;case UPDATE_SLIDER:slider_move($("#id"+data.id),data.value,"100",false);break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);break;case UPDATE_BUTTON:case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);break;case UPDATE_ACCEL: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.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));}}
+break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);if(data.hasOwnProperty('elementStyle')){$("#l"+data.id).attr("style",data.elementStyle);}
+break;case UPDATE_SWITCHER:switcher(data.id,data.value=="0"?0:1);if(data.hasOwnProperty('elementStyle')){$("#sl"+data.id).attr("style",data.elementStyle);}
+break;case UPDATE_SLIDER:slider_move($("#id"+data.id),data.value,"100",false);if(data.hasOwnProperty('elementStyle')){$("#sl"+data.id).attr("style",data.elementStyle);}
+break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#num"+data.id).attr("style",data.elementStyle);}
+break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#text"+data.id).attr("style",data.elementStyle);}
+break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#select"+data.id).attr("style",data.elementStyle);}
+break;case UPDATE_BUTTON: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;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.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);}
 function numberchange(number){var val=$("#num"+number).val();websock.send("nvalue:"+val+":"+number);}
diff --git a/src/ESPUI.cpp b/src/ESPUI.cpp
index 16e18f5..a8e1056 100644
--- a/src/ESPUI.cpp
+++ b/src/ESPUI.cpp
@@ -756,6 +756,8 @@ void ESPUIClass::updateControl(Control* control, int clientId)
     root["value"] = control->value;
     root["id"] = control->id;
     root["color"] = (int)control->color;
+    if(control->panelStyle != 0) root["panelStyle"] = control->panelStyle;
+    if(control->elementStyle != 0) root["elementStyle"] = control->elementStyle;
     serializeJson(document, json);
 
 #if defined(DEBUG_ESPUI)
@@ -796,6 +798,22 @@ void ESPUIClass::updateControl(Control* control, int clientId)
     }
 }
 
+void ESPUIClass::setPanelStyle(uint16_t id, String style, int clientId) {
+    Control* control = getControl(id);
+    if(control) {
+        control->panelStyle = style;
+        updateControl(control, clientId);
+    }
+}
+
+void ESPUIClass::setElementStyle(uint16_t id, String style, int clientId) {
+    Control* control = getControl(id);
+    if(control) {
+        control->elementStyle = style;
+        updateControl(control, clientId);
+    }
+}
+
 void ESPUIClass::updateControl(uint16_t id, int clientId)
 {
     Control* control = getControl(id);
@@ -998,6 +1016,8 @@ Control *ESPUIClass::prepareJSONChunk(AsyncWebSocketClient* client, Control* con
         item["value"] = String(control->value);
         item["color"] = (int)control->color;
         item["visible"] = control->visible;
+        if(control->panelStyle != 0) item["panelStyle"] = String(control->panelStyle);
+        if(control->elementStyle != 0) item["elementStyle"] = String(control->elementStyle);
 
         if (control->parentControl != Control::noParent) {
             item["parentControl"] = String(control->parentControl);
diff --git a/src/ESPUI.h b/src/ESPUI.h
index fee406f..af26ce3 100644
--- a/src/ESPUI.h
+++ b/src/ESPUI.h
@@ -138,6 +138,8 @@ public:
     ControlColor color;
     bool visible;
     uint16_t parentControl;
+    String panelStyle;
+    String elementStyle;
     Control* next;
 
     static constexpr uint16_t noParent = 0xffff;
@@ -281,6 +283,9 @@ public:
     void clearGraph(uint16_t id, int clientId = -1);
     void addGraphPoint(uint16_t id, int nValue, int clientId = -1);
 
+    void setPanelStyle(uint16_t id, String style, int clientId = -1);
+    void setElementStyle(uint16_t id, String style, int clientId = -1);
+
     // Variables
     const char* ui_title = "ESPUI"; // Store UI Title and Header Name
     Control* controls = nullptr;
diff --git a/src/dataControlsJS.h b/src/dataControlsJS.h
index aa74c6b..35a274a 100644
--- a/src/dataControlsJS.h
+++ b/src/dataControlsJS.h
@@ -8,11 +8,11 @@ function restart(){$(document).add("*").off();$("#row").html("");websock.close()
 function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection &#8635;");$("#conStatus").off();$("#conStatus").on({click:restart,});}
 function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}}
 function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);if(window.location.port!=""||window.location.port!=80||window.location.port!=443){websock=new WebSocket("ws://"+window.location.hostname+":"+window.location.port+"/ws");}else{websock=new WebSocket("ws://"+window.location.hostname+"/ws");}
-websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_INITIAL_GUI:$("#row").html("");$("#tabsnav").html("");$("#tabscontent").html("");if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
+websock.onopen=function(evt){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected");websockConnected=true;};websock.onclose=function(evt){console.log("websock close");conStatusError();};websock.onerror=function(evt){console.log(evt);conStatusError();};var handleEvent=function(evt){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";panelStyle=data.hasOwnProperty('panelStyle')?" style='"+data.panelStyle+"'":"";elementStyle=data.hasOwnProperty('elementStyle')?" style='"+data.elementStyle+"'":"";switch(data.type){case UI_INITIAL_GUI:$("#row").html("");$("#tabsnav").html("");$("#tabscontent").html("");if(data.sliderContinuous){sliderContinuous=data.sliderContinuous;}
 data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});break;case UI_EXTEND_GUI:data.controls.forEach(element=>{var fauxEvent={data:JSON.stringify(element),};handleEvent(fauxEvent);});break;case UI_RELOAD:window.location.reload();break;case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='two columns card tcenter "+
+"' "+panelStyle+" class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -20,14 +20,14 @@ data.label+
 "</h5><hr/>"+
 "<span id='l"+
 data.id+
-"' class='label label-wrap'>"+
+"' "+elementStyle+" class='label label-wrap'>"+
 data.value+
 "</span>"+
 "</div>");}
 break;case UI_BUTTON:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='one columns card tcenter "+
+"' "+panelStyle+" class='one columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -35,7 +35,7 @@ data.label+
 "</h5><hr/>"+
 "<button id='btn"+
 data.id+
-"' "+
+"' "+elementStyle+" "+
 "onmousedown='buttonclick("+
 data.id+
 ", true)' "+
@@ -47,7 +47,7 @@ data.value+
 break;case UI_SWITCHER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='one columns card tcenter "+
+"' "+panelStyle+" class='one columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -55,7 +55,7 @@ data.label+
 "</h5><hr/>"+
 "<label id='sl"+
 data.id+
-"' class='switch "+
+"' "+elementStyle+" class='switch "+
 (data.value=="1"?"checked":"")+
 "'>"+
 "<div class='in'><input type='checkbox' id='s"+
@@ -70,7 +70,7 @@ data.id+
 break;case UI_CPAD:case UI_PAD:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='two columns card tcenter "+
+"' "+panelStyle+" class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -119,7 +119,7 @@ data.id+
 break;case UI_SLIDER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='two columns card tcenter card-slider "+
+"' "+panelStyle+" class='two columns card tcenter card-slider "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -130,7 +130,7 @@ data.label+
 data.id+
 "' type='range' min='0' max='100' value='"+
 data.value+
-"' class='range-slider__range'>"+
+"' "+elementStyle+" class='range-slider__range'>"+
 "<span class='range-slider__value'>"+
 data.value+
 "</span>"+
@@ -139,13 +139,13 @@ data.value+
 break;case UI_NUMBER:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='two columns card tcenter "+
+"' "+panelStyle+" class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
 data.label+
 "</h5><hr/>"+
-"<input style='color:black;' id='num"+
+"<input style='color:black;' "+elementStyle+" id='num"+
 data.id+
 "' type='number' value='"+
 data.value+
@@ -156,13 +156,13 @@ data.id+
 break;case UI_TEXT_INPUT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='two columns card tcenter "+
+"' "+panelStyle+" class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
 data.label+
 "</h5><hr/>"+
-"<input style='color:black;' id='text"+
+"<input style='color:black;' "+elementStyle+" id='text"+
 data.id+
 "' value='"+
 data.value+
@@ -175,13 +175,13 @@ e.preventDefault();});}
 break;case UI_SELECT:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='two columns card tcenter "+
+"' "+panelStyle+" class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
 data.label+
 "</h5><hr/>"+
-"<select style='color:black;' id='select"+
+"<select style='color:black;' "+elementStyle+" id='select"+
 data.id+
 "' onchange='selectchange("+
 data.id+
@@ -202,7 +202,7 @@ break;case UI_STEP:if(data.parentControl){var parent=$("#id"+data.parentControl+
 break;case UI_GRAPH:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='two columns card tcenter "+
+"' "+panelStyle+" class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -219,7 +219,7 @@ data.label+
 break;case ADD_GRAPH_POINT:var ts=Math.round(new Date().getTime()/1000);graphData[data.id].push({x:ts,y:data.value});saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case CLEAR_GRAPH:graphData[data.id]=[];saveGraphData();renderGraphSvg(graphData[data.id],"graph"+data.id);break;case UI_GAUGE:var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='two columns card tcenter "+
+"' "+panelStyle+" class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -236,7 +236,7 @@ data.id+
 break;case UI_ACCEL:if(hasAccel)break;var parent;if(data.parentControl){parent=$("#tab"+data.parentControl);}else{parent=$("#row");}
 hasAccel=true;if(data.visible){parent.append("<div id='id"+
 data.id+
-"' class='two columns card tcenter "+
+"' "+panelStyle+" class='two columns card tcenter "+
 colorClass(data.color)+
 "'>"+
 "<h5>"+
@@ -250,8 +250,16 @@ data.id+
 data.id+
 "'></pre>"+
 "</div>");requestOrientationPermission();}
-break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);break;case UPDATE_SWITCHER:switcher(data.id,data.value=="0"?0:1);break;case UPDATE_SLIDER:slider_move($("#id"+data.id),data.value,"100",false);break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);break;case UPDATE_BUTTON:case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);break;case UPDATE_ACCEL: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.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));}}
+break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);if(data.hasOwnProperty('elementStyle')){$("#l"+data.id).attr("style",data.elementStyle);}
+break;case UPDATE_SWITCHER:switcher(data.id,data.value=="0"?0:1);if(data.hasOwnProperty('elementStyle')){$("#sl"+data.id).attr("style",data.elementStyle);}
+break;case UPDATE_SLIDER:slider_move($("#id"+data.id),data.value,"100",false);if(data.hasOwnProperty('elementStyle')){$("#sl"+data.id).attr("style",data.elementStyle);}
+break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#num"+data.id).attr("style",data.elementStyle);}
+break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#text"+data.id).attr("style",data.elementStyle);}
+break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#select"+data.id).attr("style",data.elementStyle);}
+break;case UPDATE_BUTTON: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;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.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);}
 function numberchange(number){var val=$("#num"+number).val();websock.send("nvalue:"+val+":"+number);}
@@ -265,4 +273,4 @@ var rangeSlider=function(isDiscrete){var range=$(".range-slider__range");var sli
 $(this).attr("callbackSet","true");}});};
 )=====";
 
-const uint8_t JS_CONTROLS_GZIP[3420] PROGMEM = { 31,139,8,0,27,207,208,97,2,255,237,27,107,115,219,56,238,123,127,133,162,118,106,233,226,248,209,54,221,174,29,165,227,58,110,235,91,55,201,37,206,118,231,186,189,12,45,209,177,166,178,164,149,168,60,54,235,255,126,224,75,34,101,217,113,147,125,221,244,190,180,22,8,2,32,0,2,32,137,184,81,152,18,227,108,120,62,60,28,142,135,189,209,249,187,179,161,243,172,213,234,186,114,224,100,48,58,234,29,0,172,45,97,199,7,189,241,224,252,232,237,219,211,193,216,105,171,184,131,159,198,131,195,3,78,163,173,192,199,195,241,96,228,40,128,99,160,88,162,199,64,5,147,225,121,159,66,158,233,72,125,142,245,172,192,122,115,54,30,31,29,58,207,117,60,1,109,183,158,23,152,163,222,27,16,226,133,142,200,129,237,214,139,2,239,244,227,112,220,127,63,56,113,118,117,212,28,222,110,237,42,216,163,225,1,192,94,150,112,57,180,221,122,89,96,30,158,125,120,3,176,239,116,76,1,109,183,190,83,212,5,122,4,131,28,159,141,157,87,58,182,50,210,110,189,42,102,188,59,233,29,191,119,190,23,128,222,193,1,135,156,31,31,13,15,41,170,24,232,143,6,189,19,129,220,110,125,175,112,236,189,113,218,37,131,112,152,98,144,211,193,104,208,7,106,37,155,72,112,91,177,202,209,241,120,72,245,95,50,139,4,183,21,179,124,24,2,160,100,21,6,107,43,54,249,208,251,201,105,151,236,193,96,109,213,20,227,193,177,211,46,91,130,1,219,138,29,222,245,206,222,13,156,118,201,14,2,218,86,204,208,235,247,169,111,20,38,24,51,76,1,86,8,228,158,125,112,244,241,48,247,235,209,224,237,56,247,223,147,225,187,247,227,220,75,251,131,195,49,24,93,46,176,127,62,62,59,249,215,217,209,240,116,144,147,234,159,15,62,12,78,122,163,98,159,244,207,143,7,48,235,100,248,35,76,125,150,3,63,14,198,189,211,227,247,189,145,66,254,252,244,236,240,237,232,232,163,198,163,223,59,57,57,26,231,94,221,63,239,141,134,255,238,157,128,170,95,230,160,131,222,201,15,185,135,246,207,15,143,14,7,206,179,221,221,238,37,74,140,139,4,197,179,3,68,144,19,226,43,163,151,36,232,198,178,217,200,12,165,61,215,197,129,51,69,65,138,25,40,13,124,15,39,253,40,36,126,152,69,89,42,134,166,89,232,18,63,10,13,55,10,162,164,31,160,52,181,216,207,161,103,223,138,31,206,97,54,159,224,36,135,119,211,43,159,184,51,5,15,165,88,213,89,39,193,36,75,66,19,254,249,37,139,252,20,155,93,129,34,84,40,17,240,28,39,40,240,242,225,66,159,18,35,198,4,39,137,127,137,147,28,169,208,175,68,186,194,4,165,241,12,5,36,71,202,245,45,113,210,44,156,6,209,149,66,135,171,95,142,187,40,73,162,98,190,52,133,28,70,129,255,43,74,252,48,71,160,150,144,131,30,74,190,152,93,15,79,81,22,16,9,52,187,139,197,35,170,249,43,60,73,35,247,75,87,249,13,102,8,177,75,176,87,182,66,130,127,201,112,74,142,18,31,135,4,81,208,49,78,230,126,154,194,47,203,190,93,60,202,49,83,116,137,223,73,7,128,161,32,114,81,112,74,162,4,93,224,70,138,201,144,224,185,101,226,52,206,124,230,39,169,89,255,231,233,209,97,35,37,176,138,11,127,122,99,229,238,99,219,93,133,112,2,252,163,68,161,237,131,133,153,7,1,71,143,185,155,198,235,162,146,87,65,188,235,79,173,124,234,150,19,102,65,96,223,22,180,152,80,49,74,82,92,96,217,93,174,195,130,229,39,223,251,12,66,114,240,167,207,101,121,81,66,64,5,79,44,47,114,179,57,104,206,110,32,207,179,204,127,152,118,35,154,78,97,83,60,177,204,199,73,116,5,223,51,50,15,44,211,180,187,194,20,13,55,136,128,55,56,53,167,162,146,134,93,119,10,86,200,210,1,248,70,2,28,86,152,143,82,207,113,129,71,130,231,209,37,230,155,201,100,187,100,231,34,193,56,52,237,37,84,144,83,195,75,176,87,129,197,133,102,82,24,77,227,48,50,132,4,84,200,167,143,95,189,124,190,219,173,152,85,44,93,131,134,214,173,27,248,238,151,142,208,92,125,161,45,122,134,66,47,192,63,250,169,63,241,3,159,220,244,1,112,1,10,186,5,59,110,149,21,240,244,233,150,212,121,99,230,123,30,14,237,219,220,32,116,3,20,254,42,140,148,163,195,202,7,151,240,99,228,167,4,135,16,94,204,203,156,167,203,120,154,245,106,89,234,76,235,204,177,174,252,208,139,174,26,212,33,41,151,70,28,37,100,203,49,205,223,126,171,30,121,213,90,53,242,226,197,243,220,190,44,158,126,196,147,83,248,141,137,101,94,165,157,102,211,220,46,79,156,69,41,9,209,28,111,155,157,229,65,74,117,219,108,94,129,202,187,11,12,242,222,155,184,160,241,72,58,108,20,70,49,14,29,169,89,11,95,18,26,170,195,52,10,48,204,191,0,146,28,211,160,120,27,248,220,42,223,36,248,26,228,203,109,93,236,153,194,255,73,146,225,238,162,91,136,198,118,211,38,178,49,68,32,89,222,99,26,53,76,97,107,168,81,64,21,5,158,3,169,239,48,23,187,139,2,69,247,74,193,8,6,26,30,139,69,116,20,59,185,223,78,34,239,134,193,92,248,194,9,56,155,204,135,20,189,65,110,98,44,50,162,94,196,119,42,98,16,5,17,52,73,67,116,89,5,6,65,97,107,16,117,8,124,158,177,41,167,115,8,169,229,4,95,137,7,126,196,224,148,116,18,5,105,99,26,37,3,4,194,227,0,211,229,57,251,44,214,67,38,187,230,170,187,165,232,157,82,234,16,200,118,125,209,85,212,108,229,179,192,6,118,119,146,96,244,165,43,53,81,156,68,58,127,141,0,252,216,212,41,239,179,4,7,17,242,172,50,54,59,32,117,114,163,19,159,4,152,107,52,64,19,28,48,19,205,145,31,190,199,8,244,43,45,84,32,148,233,177,99,77,135,174,12,220,11,40,230,134,228,159,125,174,13,251,150,127,58,194,3,204,237,10,28,17,78,20,76,230,85,96,89,73,147,5,210,0,75,106,13,20,67,32,128,124,184,231,249,151,134,239,57,53,223,51,183,185,31,248,222,246,35,179,6,187,17,226,129,83,35,87,17,45,4,179,121,152,26,80,16,121,6,225,78,110,0,186,82,32,10,3,194,183,77,103,239,195,168,185,55,219,221,151,68,153,6,40,172,9,192,189,89,210,228,24,105,140,66,198,62,168,230,206,166,25,236,223,157,43,168,31,106,57,193,75,20,100,152,17,164,52,56,181,38,44,102,159,45,91,215,52,63,105,254,237,85,13,193,237,15,84,245,36,35,36,226,202,158,144,176,36,1,197,136,194,57,68,3,12,91,33,4,20,134,205,138,2,75,195,173,27,52,192,219,218,148,44,94,59,129,231,230,42,211,241,73,251,185,225,168,58,153,112,98,58,47,77,72,148,185,51,86,44,116,138,168,109,223,226,70,156,96,186,179,15,120,149,77,55,172,34,132,32,81,103,226,118,23,117,70,5,12,113,31,26,162,186,88,240,186,72,119,46,121,229,240,141,187,23,223,169,148,127,186,98,47,243,148,72,185,89,133,27,56,142,217,54,95,155,96,25,40,125,60,168,154,76,133,43,93,145,152,236,135,181,253,61,63,140,51,98,208,116,234,212,216,140,73,116,93,227,60,75,44,163,176,79,13,40,153,210,82,82,243,73,118,228,168,109,36,75,83,186,39,91,51,91,166,30,109,114,22,210,91,10,138,203,222,66,47,199,58,242,131,254,254,182,227,63,84,57,146,145,200,254,98,106,38,148,28,248,251,123,200,208,66,83,140,60,190,59,207,142,235,70,117,108,82,226,210,58,108,17,152,216,250,227,169,190,254,253,167,143,191,127,185,219,234,238,53,17,56,0,136,113,167,56,236,250,232,107,36,170,158,160,9,149,60,84,40,122,193,245,53,50,85,226,107,34,5,15,21,137,94,192,125,141,72,149,248,154,72,147,77,68,106,114,151,42,74,114,199,17,251,241,181,9,178,22,94,56,245,147,121,109,133,236,252,82,176,190,185,240,98,194,90,241,221,146,248,71,63,80,201,101,252,217,107,194,38,209,35,14,221,224,212,95,239,153,37,213,45,113,223,44,89,69,67,205,146,76,196,224,225,34,50,127,124,176,144,26,149,37,49,147,135,139,201,183,242,131,229,212,201,44,9,58,121,184,160,108,51,61,88,78,141,202,146,152,238,195,197,20,219,230,193,130,150,232,172,173,227,216,115,208,255,110,62,166,31,59,252,108,255,251,228,102,165,250,74,232,29,155,32,46,230,243,90,172,178,222,227,5,26,155,83,51,230,62,196,207,22,252,143,174,157,90,187,5,191,120,173,85,43,159,6,106,85,204,206,207,57,25,229,180,88,137,197,136,108,114,56,84,195,40,35,113,202,40,88,91,75,183,39,75,14,194,95,1,191,241,130,141,155,61,37,55,1,173,193,233,244,206,36,64,238,151,46,207,101,97,54,175,116,134,144,61,23,173,177,61,156,184,216,69,174,68,229,95,122,213,14,249,178,185,254,160,95,60,189,254,223,76,235,204,68,175,113,75,98,109,96,25,58,235,158,118,233,189,233,44,105,76,191,233,204,21,167,149,142,180,150,2,28,121,173,32,121,82,150,179,4,79,157,154,98,58,10,167,10,82,228,55,139,18,176,234,10,117,201,88,101,98,249,130,232,60,106,255,134,78,0,190,38,216,235,243,111,235,54,136,162,184,67,115,213,194,102,23,197,150,137,98,159,115,70,128,61,245,3,48,176,149,231,46,250,46,194,222,180,158,88,100,230,167,32,15,33,112,80,165,11,51,109,7,78,163,143,217,186,119,72,180,195,207,152,102,119,193,50,170,201,224,102,93,205,130,212,223,65,28,39,78,162,121,76,44,115,140,38,6,137,12,113,232,134,95,22,223,88,70,148,192,82,237,215,252,226,120,139,174,167,193,145,96,134,5,159,182,125,139,2,156,80,18,51,68,40,77,195,139,112,106,132,17,49,240,181,159,18,163,243,243,207,204,198,21,137,183,42,175,178,214,131,111,253,158,19,7,216,93,179,33,249,248,210,37,134,220,121,124,248,126,123,143,247,115,116,86,40,189,48,11,83,167,148,163,74,247,101,141,70,49,123,197,163,226,243,159,155,70,20,9,225,204,48,197,174,208,31,167,89,181,162,15,195,77,151,67,141,189,140,182,109,26,44,62,242,45,32,150,149,250,191,98,203,46,252,134,109,69,40,94,76,253,58,103,73,150,222,79,127,150,44,232,250,14,89,104,27,205,159,36,76,74,112,124,135,52,172,131,233,27,223,246,83,255,34,75,48,19,128,117,63,148,14,250,18,199,69,194,215,151,168,233,131,28,0,20,245,29,159,55,86,124,18,196,63,59,75,29,27,242,64,214,5,245,64,157,203,6,78,47,47,172,229,185,117,83,136,154,79,209,44,91,234,91,99,6,38,169,243,1,145,89,35,137,50,80,58,125,204,6,138,224,52,180,17,100,236,207,225,87,19,42,255,86,149,164,141,56,75,103,214,237,117,135,164,245,155,78,225,80,144,72,74,237,44,247,145,92,145,91,105,171,235,84,40,236,211,231,223,153,159,108,98,251,182,119,192,199,225,104,100,188,25,24,61,131,41,195,184,171,48,189,64,217,5,254,43,79,16,172,113,144,6,81,217,47,103,243,241,63,216,138,121,119,30,235,158,248,123,219,148,169,200,104,210,166,35,98,248,243,152,191,187,99,207,152,102,65,112,179,165,222,27,32,186,38,12,21,41,109,217,227,22,102,160,146,212,251,234,156,9,10,202,87,204,220,90,123,80,109,86,18,142,50,66,147,86,121,78,92,142,147,235,59,233,74,174,160,180,30,179,54,13,245,46,179,120,216,23,201,111,121,98,254,42,184,230,117,8,42,252,150,249,186,213,105,87,18,224,215,81,226,130,131,54,143,89,90,226,6,57,20,82,117,19,2,172,41,239,183,150,169,137,187,11,74,129,29,209,243,165,192,236,59,86,162,156,169,153,111,179,163,227,87,204,23,245,255,82,117,185,217,108,241,116,175,130,138,23,180,162,223,188,179,60,147,71,95,202,86,4,149,175,224,202,163,0,135,203,30,78,217,34,196,26,144,44,243,44,252,18,70,87,33,139,78,244,76,197,14,66,166,36,86,196,101,58,190,239,104,253,248,79,159,230,35,123,122,67,16,175,211,100,219,75,217,222,93,149,166,227,104,142,98,223,138,89,122,167,33,119,159,157,188,235,86,244,252,238,136,46,91,249,89,180,212,74,72,209,63,43,33,121,183,172,4,240,246,88,249,149,119,195,218,93,41,73,209,84,38,112,204,237,234,224,35,3,99,229,18,10,217,165,208,138,180,170,152,185,124,66,176,117,18,173,148,99,241,136,158,242,43,174,32,225,252,142,105,79,146,114,122,23,199,246,79,173,207,98,63,235,231,120,6,99,167,127,14,13,105,239,156,8,30,149,152,252,248,172,244,186,205,113,154,34,200,104,74,63,147,218,150,201,229,19,121,142,39,61,238,64,64,143,159,230,32,104,9,56,115,250,162,195,53,101,121,36,13,24,231,142,185,13,255,179,150,69,129,173,114,209,178,105,21,23,22,80,214,177,9,55,224,162,220,45,85,241,224,81,103,29,19,178,9,19,121,147,84,201,130,38,237,181,28,208,100,3,30,218,81,189,210,40,34,8,174,53,204,6,140,212,62,21,62,92,247,83,250,92,201,218,114,197,79,157,236,132,194,20,106,116,211,25,37,148,44,174,102,151,63,169,208,224,83,47,49,20,221,142,74,163,35,127,120,233,172,146,36,118,239,22,37,118,53,89,180,40,189,154,240,116,3,194,211,85,132,233,187,214,106,210,27,168,47,158,172,34,77,159,32,87,147,14,54,32,29,172,34,205,94,13,87,211,78,54,160,157,84,208,214,90,181,101,21,35,12,159,66,253,132,153,163,177,95,142,232,225,135,111,230,226,133,119,251,16,193,59,178,163,198,206,219,169,165,159,35,32,127,137,21,214,229,176,165,52,38,75,34,122,239,180,164,228,135,119,210,210,123,240,11,114,140,158,81,172,165,205,239,166,239,18,163,140,19,39,81,92,140,203,55,203,18,237,214,50,237,21,98,221,65,94,62,101,242,63,40,81,158,178,138,206,102,63,61,240,83,55,193,68,92,15,51,36,103,101,126,83,254,38,200,157,56,74,158,211,242,140,158,185,160,60,161,11,136,225,8,135,173,230,127,126,62,216,110,94,212,77,150,202,248,243,26,123,0,102,135,190,206,114,230,212,82,34,133,136,138,108,177,16,143,115,171,82,238,170,137,93,230,128,170,128,46,156,38,38,112,190,60,197,80,156,109,57,38,181,138,201,255,112,65,85,143,156,84,72,43,21,177,144,254,166,162,112,93,104,56,143,86,243,173,11,174,221,5,203,239,255,5,247,243,3,32,207,57,0,0 };
+const uint8_t JS_CONTROLS_GZIP[3564] PROGMEM = { 31,139,8,0,182,30,210,97,2,255,237,91,109,115,219,54,18,254,158,95,65,51,157,136,60,43,122,73,226,52,149,76,103,20,89,73,212,42,182,207,150,155,206,165,57,15,68,66,22,199,20,201,146,160,95,234,234,191,223,226,141,4,40,74,86,236,180,157,222,228,139,45,46,22,139,7,187,11,236,2,92,186,81,152,18,227,116,120,54,60,24,142,135,189,209,217,187,211,161,243,172,213,234,186,178,225,120,48,58,236,237,3,173,45,105,71,251,189,241,224,236,240,237,219,147,193,216,105,171,188,131,95,198,131,131,125,46,163,173,208,199,195,241,96,228,40,132,35,144,88,146,199,72,197,32,195,179,62,165,60,211,153,250,156,235,89,193,245,230,116,60,62,60,112,158,235,124,130,218,110,61,47,56,71,189,55,0,226,133,206,200,137,237,214,139,130,239,228,227,112,220,127,63,56,118,118,116,214,156,222,110,237,40,220,163,225,62,208,94,150,120,57,181,221,122,89,112,30,156,126,120,3,180,239,117,78,65,109,183,190,87,212,5,122,4,131,28,157,142,157,87,58,183,210,210,110,189,42,122,188,59,238,29,189,119,126,16,132,222,254,62,167,156,29,29,14,15,40,171,104,232,143,6,189,99,193,220,110,253,160,140,216,123,227,180,75,6,225,52,197,32,39,131,209,160,15,210,74,54,145,228,182,98,149,195,163,241,144,234,191,100,22,73,110,43,102,249,48,4,66,201,42,140,214,86,108,242,161,247,139,211,46,217,131,209,218,170,41,198,131,35,167,93,182,4,35,182,21,59,188,235,157,190,27,56,237,146,29,4,181,173,152,161,215,239,83,223,40,76,48,102,156,130,172,8,200,61,123,255,240,227,65,238,215,163,193,219,113,238,191,199,195,119,239,199,185,151,246,7,7,99,48,186,156,96,255,108,124,122,252,239,211,195,225,201,32,23,213,63,27,124,24,28,247,70,197,58,233,159,29,13,160,215,241,240,103,232,250,44,39,126,28,140,123,39,71,239,123,35,69,252,217,201,233,193,219,209,225,71,109,140,126,239,248,248,112,156,123,117,255,172,55,26,254,167,119,12,170,126,153,147,246,123,199,63,229,30,218,63,59,56,60,24,56,207,118,118,186,151,40,49,206,19,20,207,246,17,65,78,136,175,140,94,146,160,27,203,102,45,51,148,246,92,23,7,206,20,5,41,102,164,52,240,61,156,244,163,144,248,97,22,101,169,104,154,102,161,75,252,40,52,220,40,136,146,126,128,210,212,98,63,135,158,125,43,126,56,7,217,124,130,147,156,222,77,175,124,226,206,20,62,148,98,85,103,157,4,147,44,9,77,248,243,91,22,249,41,54,187,130,69,168,80,50,224,57,78,80,224,229,205,133,62,37,71,140,9,78,18,255,18,39,57,83,161,95,201,116,133,9,74,227,25,10,72,206,148,235,91,242,164,89,56,13,162,43,69,14,87,191,108,119,81,146,68,69,127,105,10,217,140,2,255,119,148,248,97,206,64,45,33,27,61,148,92,152,93,15,79,81,22,16,73,52,187,139,197,35,170,249,43,60,73,35,247,162,171,252,6,51,132,216,37,216,43,91,33,193,191,101,56,37,135,137,143,67,130,40,233,8,39,115,63,77,225,151,101,223,46,30,229,156,41,186,196,239,164,3,64,83,16,185,40,56,33,81,130,206,113,35,197,100,72,240,220,50,113,26,103,62,243,147,212,172,255,120,114,120,208,72,9,204,226,220,159,222,88,185,251,216,118,87,17,156,192,248,81,162,200,246,193,194,204,131,96,68,143,185,155,54,214,121,229,88,133,240,174,63,181,242,174,91,78,152,5,129,125,91,200,98,160,98,148,164,184,224,178,187,92,135,197,144,159,124,239,51,128,228,228,79,159,203,120,81,66,64,5,223,89,94,228,102,115,208,156,221,64,158,103,153,255,50,237,70,52,157,194,162,248,206,50,31,39,209,21,60,207,200,60,176,76,211,238,10,83,52,220,32,130,177,193,169,185,20,85,52,172,186,19,176,66,150,14,192,55,18,24,97,133,249,168,244,156,23,198,72,240,60,186,196,124,49,153,108,149,60,61,79,48,14,77,123,137,21,112,106,124,9,246,42,184,56,104,134,194,104,26,7,145,33,16,80,144,79,30,191,122,249,124,167,91,209,171,152,186,70,13,173,91,55,240,221,139,142,208,92,125,161,77,122,134,66,47,192,63,251,169,63,241,3,159,220,244,129,112,14,10,186,5,59,110,149,21,240,228,201,150,212,121,99,230,123,30,14,237,219,220,32,116,1,20,254,42,140,148,179,195,204,7,151,240,99,228,167,4,135,176,189,152,151,249,152,46,27,211,172,87,99,169,51,173,51,199,186,242,67,47,186,106,80,135,164,163,52,226,40,33,91,142,105,254,241,71,117,203,171,214,170,150,23,47,158,231,246,101,251,233,71,60,57,129,223,152,88,230,85,218,105,54,205,237,114,199,89,148,146,16,205,241,182,217,89,110,164,82,183,205,230,21,168,188,187,192,128,247,222,194,133,140,71,210,97,163,48,138,113,232,72,205,90,248,146,208,173,58,76,163,0,67,255,115,16,201,57,13,202,183,129,207,173,242,77,130,175,1,95,110,235,98,205,20,254,79,146,12,119,23,221,2,26,91,77,155,96,99,140,32,178,188,198,52,105,152,210,214,72,163,132,42,9,60,6,82,223,97,46,118,151,4,202,238,149,54,35,104,104,120,108,47,162,173,216,201,253,118,18,121,55,140,230,194,19,78,192,217,186,49,10,49,236,135,55,1,176,65,151,6,132,223,195,171,240,40,1,253,39,228,198,170,21,237,53,251,181,9,75,129,114,214,204,109,198,92,52,110,155,53,240,36,179,139,3,76,71,90,35,80,229,168,16,169,54,75,161,34,102,179,118,114,19,99,17,181,245,131,70,167,98,159,164,36,130,38,105,136,46,171,200,160,76,88,190,68,109,130,117,201,134,41,167,28,176,237,151,147,144,74,62,240,117,70,167,162,147,40,72,27,211,40,25,32,0,47,230,229,236,177,120,4,209,246,154,155,247,150,178,119,74,225,77,48,219,245,69,87,113,5,43,239,5,126,98,119,39,9,70,23,93,169,137,226,180,212,249,123,0,240,163,93,167,188,23,36,56,136,144,103,149,185,217,33,174,147,59,38,241,137,244,151,0,77,112,192,76,52,71,126,248,30,35,208,175,180,80,193,80,150,199,142,94,29,58,51,88,2,32,49,55,36,127,236,115,109,216,183,252,209,17,30,144,187,177,202,35,182,60,133,147,121,21,88,86,202,100,155,125,128,165,180,6,138,97,179,130,152,189,235,249,151,134,239,57,53,223,51,183,185,31,248,222,246,35,179,102,152,219,234,82,129,13,4,182,48,167,70,174,34,154,187,102,243,48,53,32,135,243,12,194,215,37,176,63,82,114,90,97,79,120,182,169,176,61,104,53,119,103,59,123,114,12,166,16,74,107,2,113,119,150,52,57,71,10,67,50,52,193,18,24,125,145,73,56,76,142,193,254,62,189,130,28,168,150,143,112,137,130,12,179,17,168,80,46,190,9,147,221,99,106,209,45,193,79,203,255,52,83,192,126,253,39,154,98,146,17,18,113,99,76,72,120,151,57,104,151,40,156,195,110,130,97,41,133,208,135,117,103,137,143,165,117,174,27,52,136,217,53,181,75,22,175,237,192,243,143,42,211,242,78,123,185,97,169,186,25,90,209,157,167,95,36,202,220,25,75,136,58,69,100,178,111,113,35,78,48,221,25,246,249,73,130,46,120,5,132,16,81,103,112,187,139,58,147,2,134,186,143,12,145,65,45,120,238,167,59,159,188,86,249,230,126,170,251,241,133,77,225,164,155,238,5,60,228,210,225,173,194,77,28,199,108,155,175,77,176,28,164,127,30,13,205,10,12,58,99,209,217,15,107,123,187,126,24,103,196,160,225,218,169,177,30,147,232,186,198,65,148,48,68,97,159,26,88,14,74,211,105,205,103,217,177,171,182,17,150,166,116,95,166,4,54,111,125,183,202,135,144,222,84,72,92,246,38,122,65,216,145,15,244,247,183,248,162,120,21,36,85,114,32,145,108,136,174,153,208,121,224,239,237,34,67,219,201,98,228,241,197,124,122,84,55,170,183,50,101,27,91,199,45,246,49,166,142,120,170,171,99,239,201,227,31,94,238,180,186,187,77,4,254,0,48,238,132,195,110,212,190,4,81,117,7,13,84,242,80,80,244,206,239,75,48,85,242,107,144,130,135,66,162,119,146,95,2,169,146,95,131,52,217,4,82,147,187,84,113,2,112,28,177,60,95,155,128,181,240,194,169,159,204,107,43,176,243,123,210,250,230,224,69,135,181,240,221,18,252,195,159,40,114,185,29,237,54,97,145,232,27,16,93,239,212,95,239,25,84,213,37,113,223,160,90,37,67,13,170,12,98,240,112,136,204,31,31,12,82,147,178,4,51,121,56,76,190,148,31,140,83,23,179,4,116,242,112,160,108,49,61,24,167,38,101,9,166,251,112,152,98,217,60,24,104,73,206,218,180,143,189,33,251,191,9,207,244,225,41,191,89,248,58,161,90,201,205,18,122,11,41,132,139,254,60,83,171,76,15,121,250,198,250,212,140,185,15,219,105,11,254,163,107,167,214,110,193,47,158,137,213,202,103,137,213,105,165,58,250,217,25,151,171,156,86,43,185,152,212,77,206,162,234,54,203,68,156,48,9,214,214,210,101,206,146,3,241,23,167,223,242,59,213,105,184,91,136,219,57,214,189,51,9,144,123,209,173,48,47,5,29,102,243,74,239,9,217,27,184,53,206,2,7,60,118,55,46,89,249,147,126,8,128,120,219,92,127,239,80,188,205,254,102,198,135,152,145,222,156,151,96,111,96,57,218,235,158,118,235,189,233,44,105,84,191,184,205,21,171,165,166,52,87,3,30,121,203,33,199,164,67,206,18,60,117,106,138,105,41,157,106,76,193,111,22,41,102,213,141,240,146,49,203,194,242,9,209,126,212,63,26,186,0,120,154,96,175,207,159,173,219,32,138,226,14,141,133,11,155,221,205,91,38,138,125,62,50,2,238,169,31,128,197,173,60,54,210,87,81,236,53,226,119,22,153,249,41,224,33,4,206,197,116,98,166,237,192,225,247,49,155,247,83,18,61,229,71,90,179,187,96,17,219,100,116,179,174,70,89,186,30,0,142,19,39,209,60,38,150,57,70,19,131,68,134,56,227,195,47,139,47,60,35,74,96,170,246,107,126,15,190,69,231,211,224,76,208,195,130,71,219,190,69,1,78,168,136,25,34,84,166,225,69,56,53,194,136,24,248,218,79,137,209,249,245,87,102,227,138,192,94,21,183,89,181,199,183,245,170,93,219,194,154,116,191,100,193,242,14,75,119,42,114,101,242,230,251,173,77,94,98,211,89,97,148,194,108,76,221,18,71,149,109,202,26,143,98,246,98,149,194,231,63,55,221,113,36,133,15,134,41,119,133,66,185,204,170,25,125,24,110,58,29,234,12,203,108,84,231,116,67,229,75,68,76,43,245,127,199,150,93,248,21,91,170,144,45,153,250,237,210,18,150,222,47,127,21,22,116,125,7,22,90,217,244,23,129,73,9,142,239,64,195,138,202,190,109,11,234,182,48,245,207,179,4,51,60,172,62,165,116,239,32,121,92,36,92,127,73,154,222,200,9,32,81,223,0,242,210,151,79,66,248,103,103,169,166,70,158,15,187,160,45,72,171,89,195,201,229,185,181,220,183,110,10,168,121,23,205,208,165,202,66,102,111,146,58,31,16,153,53,146,40,3,27,208,114,3,144,8,62,68,75,117,198,254,28,126,53,225,228,209,170,66,218,136,179,116,102,221,94,119,72,90,191,233,20,254,5,113,167,84,112,116,31,228,10,110,165,240,177,83,161,176,79,159,191,242,120,178,204,240,219,130,80,22,196,199,225,104,100,188,25,24,61,131,233,198,88,151,231,178,69,131,178,115,252,119,158,79,88,165,39,221,98,101,129,163,205,219,255,100,163,230,229,148,172,220,229,31,101,98,166,49,163,73,139,198,136,225,207,99,158,250,96,207,152,102,65,112,179,165,222,106,32,58,69,12,233,45,45,185,228,6,103,164,210,36,246,212,62,19,20,148,239,195,185,241,118,33,117,173,20,28,101,132,70,184,114,159,184,188,139,174,175,132,44,121,134,82,58,206,74,88,212,139,215,162,232,65,68,74,105,191,245,69,53,252,252,164,10,146,145,23,154,69,232,85,123,84,67,202,223,165,174,121,103,6,7,145,150,249,186,213,105,127,25,180,244,193,216,248,133,159,184,34,162,21,139,150,150,154,128,92,5,101,221,132,152,97,42,165,119,127,29,80,113,177,68,101,177,251,145,92,24,0,187,183,101,117,73,247,129,165,92,150,176,109,133,157,249,191,10,182,146,168,123,25,151,159,10,151,206,20,15,133,182,36,236,62,224,68,121,139,74,42,222,18,23,223,149,116,150,123,242,24,78,129,136,88,244,85,38,85,150,117,159,57,241,208,196,233,178,18,92,22,26,178,50,70,203,60,13,47,194,232,42,100,33,147,94,19,176,179,189,41,211,148,34,119,160,237,123,142,246,85,207,147,39,121,203,174,94,178,199,143,22,178,48,173,188,128,87,170,65,45,73,228,74,80,187,85,104,160,232,96,151,160,58,142,182,161,216,183,2,140,94,6,205,183,153,167,249,39,1,226,131,132,167,226,19,0,249,88,212,251,75,74,81,220,47,41,121,41,191,36,240,218,125,249,148,151,234,219,178,146,82,169,120,21,60,230,118,117,100,149,73,64,229,20,10,236,18,180,130,86,133,153,227,19,192,214,33,90,137,99,241,136,222,135,85,92,246,155,118,3,211,98,68,229,158,75,92,112,125,106,125,22,33,69,191,241,98,52,118,79,198,169,33,45,236,21,145,177,146,147,95,52,41,133,184,115,156,166,8,178,55,165,144,81,173,25,231,248,68,78,199,19,60,238,151,32,207,145,49,64,208,217,74,45,202,239,83,150,51,165,1,27,185,99,110,195,127,86,79,45,184,213,81,180,204,177,106,20,182,167,175,27,38,220,96,20,229,22,182,106,12,190,55,175,27,132,108,50,136,188,115,173,28,130,38,168,107,71,64,147,13,198,208,46,173,42,141,34,246,242,181,134,217,96,32,181,192,140,55,215,253,148,22,14,176,111,6,196,79,93,236,132,210,20,105,116,209,25,37,150,44,174,30,46,127,185,73,55,159,122,105,64,81,230,172,84,56,243,87,160,157,85,72,98,247,110,40,177,171,97,209,54,255,213,130,167,27,8,158,174,18,76,223,48,175,22,189,129,250,226,201,42,209,180,24,96,181,232,96,3,209,193,42,209,236,253,253,106,217,201,6,178,147,10,217,218,119,36,50,145,22,134,79,225,112,128,153,163,177,95,142,248,192,8,158,153,139,23,222,237,195,14,222,145,165,110,118,254,173,135,244,115,4,226,47,177,50,116,121,219,82,190,154,144,66,244,15,59,164,36,63,188,83,150,254,129,80,33,142,201,51,138,185,180,139,12,122,29,140,50,79,12,97,190,104,151,213,3,37,217,173,101,217,43,96,221,33,94,22,21,240,175,221,148,151,198,197,103,23,126,186,239,167,110,130,137,120,145,194,152,156,149,241,77,249,96,209,157,56,74,156,211,226,140,30,185,32,125,161,19,136,3,228,98,171,249,223,95,247,183,155,231,117,147,133,50,254,34,155,149,98,176,11,142,206,114,228,212,66,34,165,136,52,114,177,16,175,193,87,133,220,85,29,187,204,1,85,128,46,28,149,39,200,189,56,193,144,243,109,57,38,181,138,201,191,170,82,213,35,59,21,104,165,34,22,210,223,84,22,174,11,141,231,209,234,113,235,98,212,238,130,197,247,255,1,115,164,240,143,108,62,0,0 };