From f5dd757240b83ac5ea312aabc3dfb6337253fbf0 Mon Sep 17 00:00:00 2001 From: Ian Gray Date: Sat, 8 Jan 2022 21:25:10 +0000 Subject: [PATCH] Add support for wide panels. Allows for panels to be displayed in single column mode, regardless of screen width. For more information, see updates to README.md --- README.md | 19 ++++++++++++++++++- data/js/controls.js | 3 ++- data/js/controls.min.js | 2 +- src/ESPUI.cpp | 10 ++++++++++ src/ESPUI.h | 4 ++++ src/dataControlsJS.h | 4 ++-- 6 files changed, 37 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 823ae76..40d53f9 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ The Library runs fine on any kind of **ESP8266** and **ESP32** (NodeMCU Boards, - Graph Widget (Persist save graph in local storage #10) - Inline CSS styles by @iangray001 - Separators by @iangray001 -- Grouped controls by @iangray001 +- Grouped and wide controls by @iangray001 ## Further Roadmap @@ -431,6 +431,23 @@ and buttons. If you group too many elements it might throw the layout of the rest of the UI out of line. Consider adding separators to correct this. +### Advanced: Wide controls + +Controls can be set to be displayed "wide" with the function: + +``` + ESPUI.setPanelWide(controlid, true); +``` + +*Important!* This function should be called _before_ `ESPUI.begin` or results will be unreliable. + +Setting a control to wide tells ESPUI to lay out that control as if there was only a single column, even on wide displays. +This can be applied to every element to force a single column layout, or to individual elements to customise the display. + +![Wide controls](docs/ui_widecontrols.png) + +Note that this will have no effect on small screens. + # Notes for Development If you want to work on the HTML/CSS/JS files, do make changes in the _data_ diff --git a/data/js/controls.js b/data/js/controls.js index 3a57493..19f0a19 100644 --- a/data/js/controls.js +++ b/data/js/controls.js @@ -662,6 +662,7 @@ var rangeSlider = function (isDiscrete) { var addToHTML = function(data) { panelStyle = data.hasOwnProperty('panelStyle') ? " style='" + data.panelStyle + "' " : ""; elementStyle = data.hasOwnProperty('elementStyle') ? " style='" + data.elementStyle + "' " : ""; + panelwide = data.hasOwnProperty('wide') ? "wide" : ""; if(!data.hasOwnProperty('parentControl') || $("#tab" + data.parentControl).length > 0) { //We add the control with its own panel @@ -683,7 +684,7 @@ var addToHTML = function(data) { case UI_GRAPH: case UI_GAUGE: case UI_ACCEL: - html = "
" + data.label + "
" + elementHTML(data.type, data.id, data.value, elementStyle) + "
"; diff --git a/data/js/controls.min.js b/data/js/controls.min.js index 1c0f96a..08cd597 100644 --- a/data/js/controls.min.js +++ b/data/js/controls.min.js @@ -48,7 +48,7 @@ function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else function padclick(type,number,isdown){switch(type){case CENTER:if(isdown)websock.send("pcdown:"+number);else websock.send("pcup:"+number);break;case UP:if(isdown)websock.send("pfdown:"+number);else websock.send("pfup:"+number);break;case DOWN:if(isdown)websock.send("pbdown:"+number);else websock.send("pbup:"+number);break;case LEFT:if(isdown)websock.send("pldown:"+number);else websock.send("plup:"+number);break;case RIGHT:if(isdown)websock.send("prdown:"+number);else websock.send("prup:"+number);break;}} function switcher(number,state){if(state==null){if($("#s"+number).is(":checked")){websock.send("sactive:"+number);$("#sl"+number).addClass("checked");}else{websock.send("sinactive:"+number);$("#sl"+number).removeClass("checked");}}else if(state==1){$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else if(state==0){$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}} var rangeSlider=function(isDiscrete){var range=$(".range-slider__range");var slidercb=function(){sliderchange($(this).attr("id").replace(/^\D+/g,""));};range.on({input:function(){$(this).next().html(this.value)}});range.each(function(){$(this).next().html(this.value);if($(this).attr("callbackSet")!="true"){if(!isDiscrete){$(this).on({input:slidercb});}else{$(this).on({change:slidercb});} -$(this).attr("callbackSet","true");}});};var addToHTML=function(data){panelStyle=data.hasOwnProperty('panelStyle')?" style='"+data.panelStyle+"' ":"";elementStyle=data.hasOwnProperty('elementStyle')?" style='"+data.elementStyle+"' ":"";if(!data.hasOwnProperty('parentControl')||$("#tab"+data.parentControl).length>0){var parent=data.hasOwnProperty('parentControl')?$("#tab"+data.parentControl):$("#row");var html="";switch(data.type){case UI_LABEL:case UI_BUTTON:case UI_SWITCHER:case UI_CPAD:case UI_PAD:case UI_SLIDER:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GRAPH:case UI_GAUGE:case UI_ACCEL:html="
0){var parent=data.hasOwnProperty('parentControl')?$("#tab"+data.parentControl):$("#row");var html="";switch(data.type){case UI_LABEL:case UI_BUTTON:case UI_SWITCHER:case UI_CPAD:case UI_PAD:case UI_SLIDER:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GRAPH:case UI_GAUGE:case UI_ACCEL:html="
"+data.label+"
"+ elementHTML(data.type,data.id,data.value,elementStyle)+ "
";break;case UI_SEPARATOR:html="
"+ diff --git a/src/ESPUI.cpp b/src/ESPUI.cpp index 3fd67fe..a462ef0 100644 --- a/src/ESPUI.cpp +++ b/src/ESPUI.cpp @@ -825,6 +825,14 @@ void ESPUIClass::setElementStyle(uint16_t id, String style, int clientId) } } +void ESPUIClass::setPanelWide(uint16_t id, bool wide) { + Control* control = getControl(id); + if (control) + { + control->wide = wide; + } +} + void ESPUIClass::updateControl(uint16_t id, int clientId) { Control* control = getControl(id); @@ -1038,6 +1046,8 @@ Control* ESPUIClass::prepareJSONChunk(AsyncWebSocketClient* client, Control* con item["panelStyle"] = String(control->panelStyle); if (control->elementStyle != 0) item["elementStyle"] = String(control->elementStyle); + if (control->wide == true) + item["wide"] = true; if (control->parentControl != Control::noParent) { diff --git a/src/ESPUI.h b/src/ESPUI.h index 946b71c..b16c4c2 100644 --- a/src/ESPUI.h +++ b/src/ESPUI.h @@ -139,6 +139,7 @@ public: String value; ControlColor color; bool visible; + bool wide; uint16_t parentControl; String panelStyle; String elementStyle; @@ -154,6 +155,7 @@ public: value(value), color(color), visible(visible), + wide(false), parentControl(parentControl), next(nullptr) { @@ -289,6 +291,8 @@ public: void setPanelStyle(uint16_t id, String style, int clientId = -1); void setElementStyle(uint16_t id, String style, int clientId = -1); + void setPanelWide(uint16_t id, bool wide); + // 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 fc06d73..bbaebe4 100644 --- a/src/dataControlsJS.h +++ b/src/dataControlsJS.h @@ -49,7 +49,7 @@ function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else function padclick(type,number,isdown){switch(type){case CENTER:if(isdown)websock.send("pcdown:"+number);else websock.send("pcup:"+number);break;case UP:if(isdown)websock.send("pfdown:"+number);else websock.send("pfup:"+number);break;case DOWN:if(isdown)websock.send("pbdown:"+number);else websock.send("pbup:"+number);break;case LEFT:if(isdown)websock.send("pldown:"+number);else websock.send("plup:"+number);break;case RIGHT:if(isdown)websock.send("prdown:"+number);else websock.send("prup:"+number);break;}} function switcher(number,state){if(state==null){if($("#s"+number).is(":checked")){websock.send("sactive:"+number);$("#sl"+number).addClass("checked");}else{websock.send("sinactive:"+number);$("#sl"+number).removeClass("checked");}}else if(state==1){$("#sl"+number).addClass("checked");$("#sl"+number).prop("checked",true);}else if(state==0){$("#sl"+number).removeClass("checked");$("#sl"+number).prop("checked",false);}} var rangeSlider=function(isDiscrete){var range=$(".range-slider__range");var slidercb=function(){sliderchange($(this).attr("id").replace(/^\D+/g,""));};range.on({input:function(){$(this).next().html(this.value)}});range.each(function(){$(this).next().html(this.value);if($(this).attr("callbackSet")!="true"){if(!isDiscrete){$(this).on({input:slidercb});}else{$(this).on({change:slidercb});} -$(this).attr("callbackSet","true");}});};var addToHTML=function(data){panelStyle=data.hasOwnProperty('panelStyle')?" style='"+data.panelStyle+"' ":"";elementStyle=data.hasOwnProperty('elementStyle')?" style='"+data.elementStyle+"' ":"";if(!data.hasOwnProperty('parentControl')||$("#tab"+data.parentControl).length>0){var parent=data.hasOwnProperty('parentControl')?$("#tab"+data.parentControl):$("#row");var html="";switch(data.type){case UI_LABEL:case UI_BUTTON:case UI_SWITCHER:case UI_CPAD:case UI_PAD:case UI_SLIDER:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GRAPH:case UI_GAUGE:case UI_ACCEL:html="
0){var parent=data.hasOwnProperty('parentControl')?$("#tab"+data.parentControl):$("#row");var html="";switch(data.type){case UI_LABEL:case UI_BUTTON:case UI_SWITCHER:case UI_CPAD:case UI_PAD:case UI_SLIDER:case UI_NUMBER:case UI_TEXT_INPUT:case UI_SELECT:case UI_GRAPH:case UI_GAUGE:case UI_ACCEL:html="
"+data.label+"
"+ elementHTML(data.type,data.id,data.value,elementStyle)+ "
";break;case UI_SEPARATOR:html="
"+ @@ -86,4 +86,4 @@ value+"
";case UI_NUMBER:return"
";default:return"";}}
 )=====";
 
-const uint8_t JS_CONTROLS_GZIP[3743] PROGMEM = { 31,139,8,0,160,250,217,97,2,255,197,91,91,119,218,72,18,126,247,175,144,149,57,65,44,132,75,110,147,128,229,28,130,73,194,14,49,94,27,79,230,108,38,235,35,68,99,116,44,36,141,36,124,25,135,255,190,213,213,23,117,11,129,25,156,157,125,137,81,169,186,250,235,170,234,238,186,40,110,24,36,169,113,222,191,232,31,247,71,253,206,224,226,227,121,223,126,222,104,180,93,241,226,180,55,24,118,142,128,214,20,180,147,163,206,168,119,49,252,240,225,172,55,178,155,42,111,239,183,81,239,248,136,201,104,42,244,81,127,212,27,216,10,225,4,36,230,228,33,41,155,164,127,209,165,148,231,58,83,151,113,61,207,184,222,159,143,70,195,99,251,133,206,199,169,205,198,139,140,115,208,121,15,32,94,234,140,140,216,108,188,204,248,206,190,244,71,221,79,189,83,251,149,206,42,233,205,198,43,133,123,208,63,2,218,235,28,47,163,54,27,175,51,206,227,243,207,239,129,246,179,206,201,169,205,198,207,138,186,64,143,96,144,147,243,145,253,70,231,86,222,52,27,111,178,17,31,79,59,39,159,236,183,156,208,57,58,98,148,139,147,97,255,152,178,242,23,221,65,175,115,202,153,155,141,183,202,140,157,247,118,51,103,16,70,83,12,114,214,27,244,186,32,45,103,19,65,110,42,86,25,158,140,250,84,255,57,179,8,114,83,49,203,231,62,16,114,86,65,90,83,177,201,231,206,111,118,51,103,15,164,53,85,83,140,122,39,118,51,111,9,36,54,21,59,124,236,156,127,236,217,205,156,29,56,181,169,152,161,211,237,82,223,200,153,128,83,155,111,84,197,156,116,78,59,163,33,152,241,109,94,55,242,141,242,74,238,132,163,225,151,99,185,15,6,189,15,35,233,239,167,253,143,159,70,210,171,187,189,227,17,56,137,80,72,247,98,116,126,250,175,243,97,255,172,39,69,117,47,122,159,123,167,157,65,182,175,186,23,39,61,24,117,218,255,21,134,62,151,196,47,189,81,231,236,228,83,103,160,136,191,56,59,63,254,48,24,126,209,230,232,118,78,79,135,35,185,11,186,23,157,65,255,223,157,83,48,205,107,73,58,234,156,254,34,61,186,123,113,60,60,238,217,207,95,189,106,95,59,177,113,25,59,209,236,200,73,29,59,32,55,70,39,142,157,59,171,140,111,102,78,210,113,93,226,219,83,199,79,8,146,18,223,155,144,184,27,6,169,23,44,194,69,194,95,77,23,129,155,122,97,96,184,161,31,198,93,223,73,18,11,127,246,39,229,123,254,195,62,94,204,199,36,150,244,118,114,227,165,238,76,225,115,18,162,234,172,21,147,116,17,7,38,252,243,199,34,244,18,98,182,57,11,87,161,96,32,115,18,59,254,68,190,206,244,41,56,34,146,146,56,246,174,73,44,153,50,253,10,166,27,146,58,73,52,115,252,84,50,73,125,11,158,100,17,76,253,240,70,145,195,212,47,222,187,78,28,135,217,120,97,10,241,218,241,189,63,157,216,11,36,3,181,132,120,57,113,226,43,179,61,33,83,103,225,167,130,104,182,151,203,61,170,249,27,50,78,66,247,170,173,252,6,51,4,196,77,201,36,111,133,152,252,177,32,73,58,140,61,18,164,14,37,157,144,120,238,37,9,252,178,202,247,203,61,201,153,56,215,228,163,112,0,120,229,135,174,227,159,165,97,236,92,146,90,66,210,126,74,230,150,73,146,104,225,161,159,36,102,245,159,103,195,227,90,146,194,42,46,189,233,157,37,221,167,92,110,43,130,99,152,63,140,21,217,30,88,24,61,8,102,156,160,187,105,115,93,22,206,149,9,111,123,83,75,14,221,183,131,133,239,151,239,51,89,8,42,114,226,132,100,92,229,54,211,97,54,229,87,111,242,13,64,50,242,215,111,121,188,78,156,130,10,126,178,38,161,187,152,131,230,202,53,103,50,177,204,127,152,229,90,56,157,194,166,248,201,50,159,196,225,13,60,207,210,185,111,153,102,185,205,77,81,115,253,16,230,6,167,102,82,84,209,176,235,206,192,10,139,164,7,190,17,195,12,107,204,71,165,75,94,152,35,38,243,240,154,176,205,100,226,46,121,118,25,19,18,152,229,21,86,192,169,241,197,100,82,192,197,64,35,10,163,110,28,135,6,71,64,65,62,125,242,230,245,139,87,237,130,81,217,210,53,106,96,221,187,190,231,94,181,184,230,170,75,109,209,51,39,152,248,228,87,47,241,198,158,239,165,119,93,32,92,130,130,238,193,142,251,121,5,60,125,186,47,116,94,155,121,147,9,9,202,247,210,32,116,3,100,254,202,141,36,217,97,229,189,107,248,49,240,146,148,4,112,188,152,215,114,78,23,231,52,171,197,88,170,168,117,116,172,27,47,152,132,55,53,234,144,116,150,90,20,198,233,190,109,154,223,191,23,191,121,211,88,247,230,229,203,23,210,190,120,158,126,33,227,51,248,77,82,203,188,73,90,245,186,89,201,15,156,133,73,26,56,115,82,49,91,171,47,169,212,138,89,191,1,149,183,151,4,240,238,44,156,203,216,19,14,27,6,97,68,2,91,104,214,34,215,41,61,170,131,36,244,9,140,191,4,145,140,211,160,124,91,248,220,58,223,76,201,45,224,147,182,206,246,76,230,255,105,188,32,237,101,59,131,134,187,105,27,108,200,8,34,243,123,76,147,70,40,109,131,52,74,40,146,192,238,64,234,59,232,98,15,73,160,236,147,220,97,4,47,106,19,60,139,232,91,98,75,191,29,135,147,59,164,185,240,68,98,112,54,113,31,82,246,90,122,23,17,126,35,234,65,127,171,224,12,162,164,212,25,39,129,115,93,68,6,160,176,53,82,245,21,248,60,78,147,191,206,225,72,205,95,240,133,124,224,71,72,167,162,227,208,79,106,211,48,238,57,0,158,248,132,46,207,62,196,179,30,110,178,91,166,186,123,202,222,202,93,29,156,185,92,93,182,21,53,91,114,20,216,160,220,30,199,196,185,106,11,77,100,153,75,235,255,3,128,165,89,173,252,62,139,137,31,58,19,43,207,141,9,85,75,26,61,245,82,159,48,141,250,206,152,248,104,162,185,227,5,159,136,3,250,21,22,202,24,242,242,48,13,106,137,39,150,147,200,199,44,233,144,36,22,243,203,71,12,158,149,151,60,232,109,9,119,192,163,211,39,101,216,218,163,240,211,232,243,192,98,190,171,131,96,73,219,202,160,251,252,40,186,184,113,26,152,21,100,131,251,31,47,141,52,92,184,51,60,198,91,217,126,42,223,147,90,20,19,170,243,35,22,255,80,85,46,210,148,30,5,112,201,88,92,68,149,158,20,96,149,42,74,33,193,100,23,25,252,220,95,178,27,75,95,155,72,30,31,94,29,219,173,112,225,8,177,140,221,241,17,96,78,44,205,135,165,222,233,239,173,148,23,77,119,214,93,228,76,216,162,207,79,170,187,234,174,72,134,170,59,132,232,63,30,34,77,168,30,15,82,147,178,2,51,126,60,76,76,245,30,143,83,23,179,2,116,252,120,160,52,91,125,60,78,77,202,10,76,247,241,48,89,178,252,120,160,57,57,27,119,55,150,123,30,222,124,49,141,15,207,240,206,179,246,87,238,200,21,177,163,206,251,85,153,250,165,236,68,16,68,65,46,113,224,123,135,7,142,17,6,115,144,68,22,145,93,2,30,182,14,169,209,138,89,46,25,179,152,76,237,18,149,160,208,75,135,252,1,143,153,138,121,80,119,14,15,234,32,178,240,182,151,115,78,188,107,195,155,224,84,154,176,131,58,188,161,99,233,56,27,4,212,116,1,240,52,38,147,46,123,182,32,55,12,163,22,53,211,178,140,49,141,101,58,145,199,102,118,128,123,234,249,16,200,88,210,108,52,132,199,244,235,39,43,157,121,9,224,73,83,8,207,233,194,204,178,109,219,16,37,210,117,63,75,195,103,236,44,133,84,23,157,201,68,186,89,85,29,128,94,230,0,199,142,226,112,30,65,56,57,114,198,70,26,26,108,32,253,101,5,88,93,48,32,181,1,159,124,199,98,156,125,186,158,26,99,130,17,22,60,150,193,218,62,137,169,136,153,147,82,153,198,36,36,137,17,132,169,65,110,33,137,48,90,191,255,142,129,114,129,207,21,184,20,43,149,73,243,67,212,7,35,186,44,42,97,176,25,137,170,247,73,2,1,135,155,114,27,232,172,109,246,152,25,45,140,48,225,161,118,99,63,205,202,158,176,221,158,89,50,208,5,236,146,160,50,143,160,47,4,133,77,70,40,247,161,160,97,80,1,132,131,58,147,121,104,174,174,232,115,127,219,229,120,147,162,165,84,76,195,11,162,69,202,76,192,151,149,120,127,66,242,87,190,23,171,68,87,152,123,129,169,95,155,43,88,58,191,253,93,88,156,219,7,176,208,10,229,223,4,6,82,217,232,1,52,88,28,126,248,36,147,5,148,175,220,119,190,217,43,149,25,113,144,183,1,1,156,116,248,226,236,250,210,90,29,91,53,145,150,157,253,186,243,228,234,217,45,220,180,137,253,217,73,103,181,56,92,128,91,211,164,21,36,194,138,105,193,103,228,205,225,87,189,217,104,52,138,144,214,162,69,50,179,238,111,91,105,82,189,107,101,218,128,93,152,43,91,237,130,92,193,173,148,219,91,5,10,251,250,237,7,207,39,106,214,212,124,162,198,90,102,239,101,201,21,83,226,135,47,170,141,133,190,220,214,86,58,41,152,69,170,161,91,150,119,112,135,19,83,3,160,225,77,112,18,135,17,28,154,119,86,137,167,76,103,233,157,79,74,101,118,205,169,130,132,3,195,107,238,193,234,136,98,72,50,232,222,16,83,195,125,209,48,223,53,90,205,191,6,45,121,52,54,22,50,176,32,224,130,22,228,44,109,135,131,92,5,101,213,4,103,54,149,202,210,223,7,148,39,131,84,22,92,133,138,48,0,182,179,101,117,73,187,192,82,146,82,140,80,200,109,250,131,176,229,68,237,100,92,150,30,175,92,205,143,133,182,34,108,23,112,60,205,86,73,89,22,153,181,89,91,171,35,89,154,79,129,92,58,139,75,242,131,22,149,151,181,203,154,216,177,199,232,162,209,33,234,104,88,165,179,204,243,224,42,8,111,2,131,86,192,104,52,135,33,152,41,206,207,229,158,128,76,223,31,218,90,147,251,233,83,249,230,64,175,154,177,27,90,212,134,242,27,120,173,26,34,39,32,190,166,4,117,88,129,6,178,1,229,28,84,219,214,14,20,72,105,24,24,189,202,207,142,153,103,178,227,197,251,109,207,120,135,75,60,102,237,44,65,201,122,87,130,34,59,85,130,192,90,83,226,73,118,162,202,109,129,36,43,232,114,30,179,162,180,243,120,185,13,158,203,162,20,93,184,132,12,187,0,173,160,85,97,74,124,28,216,38,68,107,113,44,247,104,218,130,249,218,51,126,70,95,224,19,36,36,132,214,3,149,116,132,231,33,95,27,223,248,149,162,39,38,72,195,116,134,81,3,90,183,230,55,99,33,39,203,7,148,58,243,156,36,137,115,73,108,165,150,168,182,68,24,62,214,148,224,233,10,243,75,144,103,139,59,128,211,113,167,102,221,165,4,115,130,196,199,153,91,102,5,254,98,187,128,115,171,179,48,210,134,89,240,76,223,52,77,176,197,44,244,240,221,48,7,59,155,55,77,146,110,51,137,72,141,11,167,160,201,236,198,25,156,241,22,115,176,163,122,147,81,248,89,190,209,48,91,76,164,86,34,217,235,170,151,76,224,164,195,150,24,255,169,139,29,83,154,34,141,110,58,35,199,178,136,138,167,147,229,17,122,248,84,115,19,242,78,131,210,100,96,69,148,214,58,36,145,251,48,148,200,213,176,104,135,255,122,193,211,45,4,79,215,9,166,53,170,245,162,183,80,95,52,94,39,154,150,19,215,139,246,183,16,237,175,19,141,21,192,245,178,227,45,100,199,5,178,181,54,169,8,164,185,225,19,72,14,8,58,26,254,178,121,255,28,158,209,197,51,239,246,224,4,111,193,72,247,138,118,234,100,43,83,248,185,3,226,175,137,50,117,254,216,82,154,130,66,136,222,183,20,146,188,224,65,89,122,255,59,19,135,242,140,108,45,205,44,130,222,4,35,207,19,193,53,159,189,23,245,199,156,236,198,170,236,53,176,30,16,47,202,146,236,99,14,165,192,152,117,21,189,228,200,75,220,152,164,188,222,133,76,246,218,251,77,249,30,199,29,219,202,61,167,221,51,250,205,5,225,11,93,64,228,59,46,177,234,255,249,253,168,82,191,172,154,120,149,177,162,39,22,115,177,74,209,90,189,57,181,43,145,82,120,24,185,92,242,146,233,186,43,119,221,192,54,58,160,10,208,117,124,127,236,184,87,103,4,98,190,125,219,164,86,49,217,71,3,170,122,196,160,12,173,80,196,82,248,155,202,194,116,161,241,236,173,159,183,202,103,109,47,151,162,11,44,243,238,76,207,152,128,223,103,1,159,253,96,4,249,206,52,48,86,164,69,187,92,180,88,161,117,187,150,105,182,213,16,218,222,34,52,95,145,169,190,150,82,169,250,214,192,83,234,83,165,242,247,239,242,102,45,168,114,213,124,18,92,166,179,195,134,86,239,218,70,238,187,77,98,179,142,54,107,184,131,143,108,238,134,235,77,80,45,77,82,26,120,107,91,111,185,102,192,238,205,84,172,23,21,183,86,89,158,195,150,34,203,239,74,238,128,150,169,168,246,55,92,122,160,216,165,244,38,164,31,209,45,230,65,66,3,227,137,145,178,15,4,104,89,183,56,10,198,74,254,236,149,104,13,176,18,175,121,80,7,210,193,44,174,211,218,47,119,10,89,56,66,133,86,87,139,44,85,45,131,195,58,49,118,8,114,197,171,172,113,188,203,10,19,246,197,17,138,20,75,165,141,13,152,109,195,42,116,36,203,61,189,92,78,113,136,141,191,85,45,54,95,111,223,77,67,242,60,87,134,103,39,4,138,128,209,5,3,11,34,48,233,216,252,195,191,131,4,148,135,90,133,75,69,232,83,219,221,123,82,165,168,45,3,255,125,118,19,59,17,85,167,108,17,81,57,135,102,190,123,47,102,97,97,41,206,131,189,250,117,51,241,142,21,141,77,128,83,137,101,217,144,170,129,247,39,109,71,152,106,119,171,136,147,93,133,104,114,9,146,241,41,48,229,62,22,64,217,26,41,206,228,97,133,240,190,144,89,177,68,241,176,105,190,147,151,49,28,137,101,214,76,219,99,190,203,71,121,1,167,225,149,130,21,8,187,132,131,198,225,109,137,205,45,166,14,131,46,93,148,152,138,126,120,198,150,135,145,21,118,97,54,204,45,252,249,160,142,203,82,214,189,114,92,137,245,7,142,196,201,63,122,129,109,191,240,25,96,173,171,200,108,164,118,239,13,221,72,20,156,169,24,169,144,149,91,9,87,77,63,68,96,45,195,167,79,222,190,126,213,104,103,141,199,135,102,103,237,238,109,1,228,184,53,12,241,206,24,240,211,128,109,33,232,204,26,2,127,103,4,216,76,223,22,129,206,172,33,24,111,68,80,103,238,96,241,122,19,115,166,119,38,160,202,28,103,234,197,243,210,26,148,188,147,190,37,76,206,93,12,212,21,64,135,191,80,140,204,237,41,68,112,99,117,151,179,59,88,248,184,178,23,213,144,87,219,149,250,9,192,246,40,50,151,140,185,7,171,105,192,95,231,214,46,53,27,13,165,73,202,15,26,92,141,30,34,21,77,200,99,108,216,96,120,8,23,114,160,68,253,16,195,147,86,92,84,185,184,66,44,145,45,130,199,108,120,129,183,198,16,141,95,181,87,78,51,19,151,138,213,26,222,242,101,139,101,9,70,209,218,224,160,197,64,87,240,240,20,128,233,10,44,83,87,96,41,241,205,174,208,88,145,39,223,142,46,64,163,20,139,10,177,240,192,74,94,124,88,113,249,11,64,68,137,134,67,201,38,214,138,59,133,83,179,32,78,204,60,245,46,23,49,65,153,188,125,199,63,148,128,23,174,195,59,230,21,25,155,40,84,124,128,177,170,104,140,8,185,232,47,253,193,192,120,223,51,58,6,146,141,77,202,198,233,89,177,253,127,96,120,22,154,114,88,248,96,212,233,199,224,176,179,230,17,211,45,153,24,83,184,197,238,246,213,13,233,208,182,36,137,195,57,173,230,50,144,72,146,32,15,85,238,49,228,83,82,123,236,170,139,64,179,69,178,194,69,74,155,226,146,57,66,45,22,252,55,136,255,2,191,111,104,3,4,55,0,0 };
+const uint8_t JS_CONTROLS_GZIP[3761] PROGMEM = { 31,139,8,0,198,0,218,97,2,255,197,91,91,119,218,72,18,126,247,175,144,149,57,65,172,9,151,220,38,1,203,57,4,147,132,29,98,188,54,158,204,217,76,214,71,136,198,232,88,72,26,73,24,123,28,254,251,86,87,95,212,45,4,102,112,118,246,37,134,234,234,234,175,171,170,187,235,66,220,48,72,82,227,162,119,217,59,233,13,123,237,254,229,199,139,158,253,188,94,111,185,98,224,172,219,31,180,143,129,214,16,180,211,227,246,176,123,57,248,240,225,188,59,180,27,42,111,247,183,97,247,228,152,201,104,40,244,97,111,216,237,219,10,225,20,36,230,228,33,41,91,164,119,217,161,148,231,58,83,135,113,61,207,184,222,95,12,135,131,19,251,133,206,199,169,141,250,139,140,179,223,126,15,32,94,234,140,140,216,168,191,204,248,206,191,244,134,157,79,221,51,251,149,206,42,233,141,250,43,133,187,223,59,6,218,235,28,47,163,54,234,175,51,206,147,139,207,239,129,246,179,206,201,169,141,250,207,138,186,64,143,96,144,211,139,161,253,70,231,86,70,26,245,55,217,140,143,103,237,211,79,246,91,78,104,31,31,51,202,229,233,160,119,66,89,249,64,167,223,109,159,113,230,70,253,173,178,98,251,189,221,200,25,132,209,20,131,156,119,251,221,14,72,203,217,68,144,27,138,85,6,167,195,30,213,127,206,44,130,220,80,204,242,185,7,132,156,85,144,214,80,108,242,185,253,155,221,200,217,3,105,13,213,20,195,238,169,221,200,91,2,137,13,197,14,31,219,23,31,187,118,35,103,7,78,109,40,102,104,119,58,212,55,114,38,224,212,198,27,85,49,167,237,179,246,112,0,102,124,155,215,141,28,81,134,228,73,56,30,124,57,145,231,160,223,253,48,148,254,126,214,251,248,105,40,189,186,211,61,25,130,147,8,133,116,46,135,23,103,255,186,24,244,206,187,82,84,231,178,251,185,123,214,238,103,231,170,115,121,218,133,89,103,189,95,97,234,115,73,252,210,29,182,207,79,63,181,251,138,248,203,243,139,147,15,253,193,23,109,141,78,251,236,108,48,148,167,160,115,217,238,247,254,221,62,3,211,188,150,164,227,246,217,47,210,163,59,151,39,131,147,174,253,252,213,171,214,141,19,27,87,177,19,77,143,157,212,177,3,178,48,218,113,236,220,89,101,28,153,58,73,219,117,137,111,79,28,63,33,72,74,124,111,76,226,78,24,164,94,48,15,231,9,31,154,204,3,55,245,194,192,112,67,63,140,59,190,147,36,22,126,236,141,203,247,252,131,125,50,159,141,72,44,233,173,100,225,165,238,84,225,115,18,162,234,172,25,147,116,30,7,38,252,243,199,60,244,18,98,182,56,11,87,161,96,32,51,18,59,254,88,14,103,250,20,28,17,73,73,28,123,55,36,150,76,153,126,5,211,130,164,78,18,77,29,63,149,76,82,223,130,39,153,7,19,63,92,40,114,152,250,197,184,235,196,113,152,205,23,166,16,195,142,239,253,233,196,94,32,25,168,37,196,224,216,137,175,205,214,152,76,156,185,159,10,162,217,90,46,247,168,230,23,100,148,132,238,117,75,249,12,102,8,136,155,146,113,222,10,49,249,99,78,146,116,16,123,36,72,29,74,58,37,241,204,75,18,248,100,149,239,151,123,146,51,113,110,200,71,225,0,48,228,135,174,227,159,167,97,236,92,145,106,66,210,94,74,102,150,73,146,104,238,161,159,36,102,229,159,231,131,147,106,146,194,46,174,188,201,157,37,221,167,92,110,41,130,99,88,63,140,21,217,30,88,24,61,8,86,28,163,187,105,107,93,21,174,149,9,111,121,19,75,78,221,183,131,185,239,151,239,51,89,8,42,114,226,132,100,92,229,22,211,97,182,228,87,111,252,13,64,50,242,215,111,121,188,78,156,130,10,126,178,198,161,59,159,129,230,202,85,103,60,182,204,127,152,229,106,56,153,192,161,248,201,50,159,196,225,2,190,79,211,153,111,153,102,185,197,77,81,117,253,16,214,6,167,102,82,84,209,112,234,206,193,10,243,164,11,190,17,195,10,107,204,71,165,75,94,88,35,38,179,240,134,176,195,100,226,41,121,118,21,19,18,152,229,21,86,192,169,241,197,100,92,192,197,64,35,10,163,102,156,132,6,71,64,65,62,125,242,230,245,139,87,173,130,89,217,214,53,106,96,221,187,190,231,94,55,185,230,42,75,109,211,83,39,24,251,228,87,47,241,70,158,239,165,119,29,32,92,129,130,238,193,142,251,121,5,60,125,186,47,116,94,157,122,227,49,9,202,247,210,32,244,0,100,254,202,141,36,217,97,231,221,27,248,208,247,146,148,4,112,189,152,55,114,77,23,215,52,43,197,88,42,168,117,116,172,133,23,140,195,69,149,58,36,93,165,26,133,113,186,111,155,230,247,239,197,35,111,234,235,70,94,190,124,33,237,139,247,233,23,50,58,135,207,36,181,204,69,210,172,213,204,131,252,196,105,152,164,129,51,35,7,102,115,117,144,74,61,48,107,11,80,121,107,73,0,239,206,194,185,140,61,225,176,97,16,70,36,176,133,102,45,114,147,210,171,58,72,66,159,192,252,43,16,201,56,13,202,183,133,207,173,243,205,148,220,2,62,105,235,236,204,100,254,159,198,115,210,90,182,50,104,120,154,182,193,134,140,32,50,127,198,52,105,132,210,54,72,163,132,34,9,236,13,164,190,131,46,246,144,4,202,62,206,93,70,48,80,29,227,93,68,71,137,45,253,118,20,142,239,144,230,194,55,18,131,179,137,247,144,178,87,211,187,136,240,23,81,15,250,155,5,119,16,37,165,206,40,9,156,155,34,50,0,133,163,145,170,67,224,243,184,76,254,57,135,43,53,255,192,23,242,129,31,33,157,138,142,67,63,169,78,194,184,235,0,120,226,19,186,61,251,8,239,122,120,201,110,153,234,238,41,123,51,247,116,112,230,114,101,217,82,212,108,201,89,96,131,114,107,20,19,231,186,37,52,145,101,46,205,255,15,0,150,102,53,243,231,44,38,126,232,140,173,60,55,38,84,77,105,244,212,75,125,194,52,234,59,35,226,163,137,102,142,23,124,34,14,232,87,88,40,99,200,203,195,52,168,41,190,177,156,68,126,205,146,14,73,98,49,191,252,138,193,179,50,200,131,222,166,112,7,188,58,125,82,134,163,61,12,63,13,63,247,45,230,187,58,8,150,180,173,76,186,207,207,162,155,27,165,129,121,128,108,240,254,227,163,145,134,115,119,138,215,120,51,59,79,229,123,82,141,98,66,117,126,204,226,31,170,202,121,154,210,171,0,30,25,139,139,168,208,155,2,172,82,65,41,36,24,239,34,131,223,251,75,246,98,233,123,19,201,227,195,187,99,167,21,30,28,33,150,177,59,62,2,204,137,165,249,176,212,59,253,188,149,242,162,201,206,186,139,156,49,219,244,197,105,101,87,221,21,201,80,117,135,16,253,199,67,164,9,213,227,65,106,82,86,96,198,143,135,137,169,222,227,113,234,98,86,128,142,30,15,148,102,171,143,199,169,73,89,129,233,62,30,38,75,150,31,15,52,39,103,227,233,198,114,207,195,135,47,166,241,225,57,190,121,214,254,202,27,185,34,118,216,126,191,42,83,127,148,157,8,130,40,200,37,14,125,239,232,208,49,194,96,6,146,200,60,178,75,192,195,246,33,53,122,96,150,75,198,52,38,19,187,68,37,40,244,210,17,255,130,215,204,129,121,88,115,142,14,107,32,178,240,181,151,107,142,189,27,195,27,227,82,154,176,195,26,140,208,185,116,158,13,2,170,186,0,248,54,34,227,14,251,110,65,110,24,70,77,106,166,101,25,99,26,203,116,34,143,173,236,0,247,196,243,33,144,177,164,217,104,8,143,233,215,79,86,58,245,18,192,147,166,16,158,211,141,153,101,219,182,33,74,164,251,126,150,134,207,216,93,10,169,46,58,147,137,116,179,162,58,0,125,204,1,142,29,197,225,44,130,112,114,232,140,140,52,52,216,68,250,201,10,176,186,96,64,106,3,62,249,142,197,56,251,116,63,85,198,4,51,44,248,90,6,107,251,36,166,34,166,78,74,101,26,227,144,36,70,16,166,6,185,133,36,194,104,254,254,59,6,202,5,62,87,224,82,172,84,38,205,15,81,31,204,232,176,168,132,193,102,36,170,222,39,9,4,28,110,202,109,160,179,182,216,215,204,104,97,132,9,15,181,27,251,104,30,236,9,219,237,153,37,3,93,192,46,9,42,243,8,58,32,40,108,49,66,185,143,4,13,131,10,32,28,214,152,204,35,115,117,71,159,123,219,110,199,27,23,109,229,192,52,188,32,154,167,204,4,124,91,137,247,39,36,127,229,123,177,75,116,133,153,23,152,250,179,185,130,165,253,219,223,133,197,185,125,0,11,173,80,254,77,96,32,149,141,30,64,131,197,225,135,111,50,89,64,249,202,125,231,155,189,82,153,17,23,121,11,16,192,77,135,3,231,55,87,214,234,220,138,137,180,236,238,215,157,39,87,207,110,226,161,77,236,207,78,58,173,198,225,28,220,154,38,173,32,17,118,76,11,62,67,111,6,159,106,141,122,189,94,132,180,26,205,147,169,117,127,219,76,147,202,93,51,211,6,156,194,92,217,106,23,228,10,110,165,220,222,44,80,216,215,111,63,120,61,81,179,166,230,19,53,214,50,27,151,37,87,76,137,31,126,168,54,22,250,114,71,91,233,164,96,22,169,134,110,89,222,193,29,78,44,13,128,6,139,224,52,14,35,184,52,239,172,18,79,153,206,211,59,159,148,202,236,153,83,5,9,7,134,97,238,193,234,140,98,72,50,232,222,16,83,195,123,81,55,223,213,155,141,191,6,45,121,52,54,22,50,176,32,224,146,22,228,44,237,132,131,92,5,101,197,4,103,54,149,202,210,223,7,148,39,131,84,22,60,133,138,48,0,182,179,101,117,73,187,192,82,146,82,140,80,200,109,250,131,176,229,68,237,100,92,150,30,175,60,205,143,133,182,34,108,23,112,60,205,86,73,89,22,153,181,89,155,171,51,89,154,79,129,92,57,243,43,242,131,54,149,151,181,203,158,216,181,199,232,162,209,33,234,104,88,165,179,204,139,224,58,8,23,129,65,43,96,52,154,195,16,204,20,247,231,114,79,64,166,227,71,182,214,228,126,250,84,142,28,234,85,51,246,66,139,218,80,254,0,175,85,67,228,4,196,215,148,160,78,43,208,64,54,161,156,131,106,219,218,133,2,41,13,3,163,87,249,217,53,243,76,118,188,120,191,237,25,239,112,137,175,89,59,75,80,178,222,149,160,200,78,149,32,176,214,148,248,38,59,81,229,150,64,146,21,116,57,143,121,160,180,243,120,185,13,190,151,69,41,186,112,11,25,118,1,90,65,171,194,148,248,56,176,77,136,214,226,88,238,209,180,5,243,181,103,252,142,190,196,111,144,144,16,90,15,84,210,17,158,135,124,173,127,227,79,138,158,152,32,13,211,25,70,13,104,221,154,191,140,133,156,44,31,80,234,204,51,146,36,206,21,177,149,90,162,218,18,97,248,88,83,130,167,43,204,47,65,158,45,222,0,78,199,147,154,117,151,18,204,9,18,31,87,110,154,7,240,23,219,5,156,91,93,133,145,54,172,130,119,250,166,101,130,45,86,161,151,239,134,53,216,221,188,105,145,116,155,69,68,106,92,184,4,77,102,55,174,224,140,182,88,131,93,213,155,140,194,239,242,141,134,217,98,33,181,18,201,134,43,94,50,134,155,14,91,98,252,163,46,118,68,105,138,52,122,232,140,28,203,60,42,94,78,150,71,232,229,83,201,45,200,59,13,74,147,129,21,81,154,235,144,68,238,195,80,34,87,195,162,93,254,235,5,79,182,16,60,89,39,152,214,168,214,139,222,66,125,209,104,157,104,90,78,92,47,218,223,66,180,191,78,52,86,0,215,203,142,183,144,29,23,200,214,218,164,34,144,230,134,79,32,57,32,232,104,248,201,230,253,115,248,142,46,158,121,183,7,55,120,19,102,186,215,180,83,39,91,153,194,207,29,16,127,67,148,165,243,215,150,210,20,20,66,244,190,165,144,228,5,15,202,210,251,223,153,56,148,103,100,123,105,100,17,244,38,24,121,158,8,158,249,108,92,212,31,115,178,235,171,178,215,192,122,64,188,40,75,178,31,115,40,5,198,172,171,232,37,199,94,226,198,36,229,245,46,100,178,215,190,111,202,239,113,220,145,173,188,115,218,59,163,191,92,16,190,208,13,68,190,227,18,171,246,159,223,143,15,106,87,21,19,159,50,86,244,196,98,46,86,41,154,171,47,167,246,36,82,10,15,35,151,75,94,50,93,247,228,174,155,216,66,7,84,1,186,142,239,143,28,247,250,156,64,204,183,111,155,212,42,38,251,209,128,170,30,49,41,67,43,20,177,20,254,166,178,48,93,104,60,123,235,215,173,240,85,91,203,165,232,2,203,188,59,211,51,38,224,247,89,192,103,63,24,65,190,51,13,140,21,105,209,46,23,45,30,208,186,93,211,52,91,106,8,109,111,17,154,175,200,84,135,165,84,92,104,1,155,47,22,73,71,168,40,250,23,249,169,186,215,108,71,169,103,149,202,223,191,203,151,184,160,42,86,245,73,112,149,78,143,234,90,125,108,27,185,239,54,137,205,58,224,172,65,15,62,181,185,123,174,55,77,181,180,74,105,248,173,109,213,229,154,7,187,55,95,177,190,84,220,138,101,121,17,219,138,44,215,43,185,6,90,242,64,245,23,195,165,23,144,93,74,23,33,253,209,221,124,22,36,130,131,154,145,50,56,241,216,72,217,207,11,104,81,184,56,134,198,62,192,244,149,104,44,176,2,177,121,88,3,210,225,52,174,209,202,49,119,41,89,118,66,245,86,86,75,52,21,45,255,195,42,51,246,23,114,165,175,172,237,188,203,126,19,246,123,37,20,41,54,78,219,34,176,218,134,93,232,72,150,123,122,177,157,226,16,215,198,86,149,220,124,181,126,55,13,201,215,64,153,158,221,47,40,2,102,23,76,44,136,223,164,155,243,159,13,30,38,160,60,212,42,60,73,66,159,218,221,176,39,85,138,218,50,240,223,103,139,216,137,168,58,101,131,137,202,57,50,243,189,127,177,10,11,106,113,29,236,244,175,91,137,247,187,104,100,3,156,74,36,204,166,84,12,124,125,105,51,195,84,123,99,69,156,236,33,69,147,75,144,140,79,129,41,79,181,0,202,246,72,113,38,15,43,132,119,149,204,3,75,148,30,27,230,59,249,148,195,5,89,102,173,184,61,230,187,124,150,23,112,26,62,72,88,191,176,75,56,105,20,222,150,216,218,98,233,48,232,208,77,137,165,232,207,214,216,246,48,46,195,30,206,134,181,133,63,31,214,112,91,202,190,87,46,47,177,255,192,145,56,249,79,102,224,216,207,125,6,88,235,73,50,27,169,189,127,67,55,18,5,103,42,70,42,100,229,86,194,93,211,159,49,176,134,227,211,39,111,95,191,170,183,178,182,229,67,171,179,102,249,182,0,114,220,26,134,120,103,12,248,195,130,109,33,232,204,26,2,127,103,4,216,138,223,22,129,206,172,33,24,109,68,80,99,238,96,241,106,21,115,166,119,38,160,202,28,103,226,197,179,210,26,148,188,15,191,37,76,206,93,12,212,21,64,7,191,80,140,204,237,41,68,112,99,245,148,179,23,89,248,184,114,22,213,128,89,59,149,250,13,192,206,40,50,151,140,153,7,187,169,195,95,231,214,46,53,234,117,165,197,202,47,26,220,141,30,96,21,45,200,35,116,56,96,120,9,23,114,160,68,253,18,195,155,86,60,84,185,40,67,108,145,109,130,71,124,248,128,55,71,16,203,95,183,86,110,51,19,183,138,181,30,222,48,102,155,101,233,73,209,222,224,162,197,48,89,240,240,4,130,233,10,44,83,83,96,41,209,206,174,208,88,137,40,223,204,46,64,163,148,154,10,177,240,48,75,62,124,88,175,249,11,64,68,129,135,67,201,22,214,74,67,133,75,179,144,78,172,60,241,174,230,49,65,153,188,249,199,127,102,1,3,174,195,251,237,7,50,54,81,168,248,5,230,170,162,49,62,228,162,191,244,250,125,227,125,215,104,27,72,54,54,41,27,151,103,165,250,255,129,225,89,160,202,97,225,23,163,70,127,74,14,39,107,22,49,221,146,177,49,129,87,236,110,95,61,144,14,109,106,146,56,156,209,90,48,3,137,36,9,242,72,229,30,65,54,38,181,199,158,186,8,52,91,36,43,156,167,180,165,46,153,35,212,98,193,127,162,248,47,48,50,219,133,66,55,0,0 };