diff --git a/examples/gui/data/js/controls.js b/examples/gui/data/js/controls.js index 01a30e4..cb571be 100644 --- a/examples/gui/data/js/controls.js +++ b/examples/gui/data/js/controls.js @@ -1,3 +1,4 @@ +const UI_INITIAL_GUI = 100; const UI_TITEL = 0; const UI_LABEL = 1; @@ -112,26 +113,37 @@ function handleVisibilityChange() { function start() { document.addEventListener("visibilitychange", handleVisibilityChange, false); websock = new WebSocket("ws://" + window.location.hostname + "/ws"); - websock.onopen = function(evt) { + websock.onopen = function (evt) { console.log("websock open"); $("#conStatus").addClass("color-green"); $("#conStatus").text("Connected"); websockConnected = true; }; - websock.onclose = function(evt) { + + websock.onclose = function (evt) { console.log("websock close"); conStatusError(); }; - websock.onerror = function(evt) { + + websock.onerror = function (evt) { console.log(evt); conStatusError(); }; - websock.onmessage = function(evt) { - console.log(evt); + + 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: + data.controls.forEach(element => { + var fauxEvent = { + data: JSON.stringify(element) + }; + handleEvent(fauxEvent); + }); + break; case UI_TITEL: document.title = data.label; $("#mainHeader").html(data.label); @@ -139,42 +151,42 @@ function start() { case UI_LABEL: $("#row").append( "
" + - data.label + - "
" + - data.value + - "
" + colorClass(data.color) + + "'>
" + + data.label + + "
" + + data.value + + "" ); break; case UI_BUTTON: $("#row").append( "
" + - data.label + - "
" + colorClass(data.color) + + "'>
" + + data.label + + "
" ); $("#" + data.id).on({ - touchstart: function(e) { + touchstart: function (e) { e.preventDefault(); buttonclick(data.id, true); } }); $("#" + data.id).on({ - touchend: function(e) { + touchend: function (e) { e.preventDefault(); buttonclick(data.id, false); } @@ -199,16 +211,16 @@ function start() { } $("#row").append( "
" + - data.label + - "
" + - label + - input + - "" + - "
" + data.id + + "' class='one columns card tcenter " + + colorClass(data.color) + + "'>
" + + data.label + + "
" + + label + + input + + "" + + "" ); break; case UI_CPAD: @@ -220,106 +232,106 @@ function start() { ", false)' href='#' id='pc" + data.id + "'>OK"; - //NO BREAK + //NO BREAK case UI_PAD: $("#row").append( "
" + - data.label + - "
" + - "" + - "
" + colorClass(data.color) + + "'>
" + + data.label + + "
" + + "" + + "" ); $("#pf" + data.id).on({ - touchstart: function(e) { + touchstart: function (e) { e.preventDefault(); padclick(FOR, data.id, true); } }); $("#pf" + data.id).on({ - touchend: function(e) { + touchend: function (e) { e.preventDefault(); padclick(FOR, data.id, false); } }); $("#pl" + data.id).on({ - touchstart: function(e) { + touchstart: function (e) { e.preventDefault(); padclick(LEFT, data.id, true); } }); $("#pl" + data.id).on({ - touchend: function(e) { + touchend: function (e) { e.preventDefault(); padclick(LEFT, data.id, false); } }); $("#pr" + data.id).on({ - touchstart: function(e) { + touchstart: function (e) { e.preventDefault(); padclick(RIGHT, data.id, true); } }); $("#pr" + data.id).on({ - touchend: function(e) { + touchend: function (e) { e.preventDefault(); padclick(RIGHT, data.id, false); } }); $("#pb" + data.id).on({ - touchstart: function(e) { + touchstart: function (e) { e.preventDefault(); padclick(BACK, data.id, true); } }); $("#pb" + data.id).on({ - touchend: function(e) { + touchend: function (e) { e.preventDefault(); padclick(BACK, data.id, false); } }); $("#pc" + data.id).on({ - touchstart: function(e) { + touchstart: function (e) { e.preventDefault(); padclick(CENTER, data.id, true); } }); $("#pc" + data.id).on({ - touchend: function(e) { + touchend: function (e) { e.preventDefault(); padclick(CENTER, data.id, false); } @@ -336,23 +348,23 @@ function start() { case UI_SLIDER: $("#row").append( "
" + - "
" + - data.label + - "
" + - "
" + - "" + - "
" + - "
" + colorClass(data.color) + + "'>" + + "
" + + data.label + + "
" + + "
" + + "" + + "
" + + "" ); $("#row").append( "" @@ -366,21 +378,21 @@ function start() { case UI_NUMBER: $("#row").append( "
" + - "
" + - data.label + - "
" + - "" + - "
" + colorClass(data.color) + + "'>" + + "
" + + data.label + + "
" + + "" + + "" ); break; @@ -391,21 +403,21 @@ function start() { case UI_TEXT_INPUT: $("#row").append( "
" + - "
" + - data.label + - "
" + - "" + - "
" + colorClass(data.color) + + "'>" + + "
" + + data.label + + "
" + + "" + + "" ); break; @@ -418,6 +430,8 @@ function start() { break; } }; + + websock.onmessage = handleEvent; } function numberchange(number) { @@ -478,4 +492,4 @@ function switcher(number, state) { $("#sl" + number).removeClass("checked"); $("#sl" + number).prop("checked", false); } -} +} \ No newline at end of file diff --git a/examples/gui/data/js/controls.min.js b/examples/gui/data/js/controls.min.js index 591dfc7..b1b7401 100644 --- a/examples/gui/data/js/controls.min.js +++ b/examples/gui/data/js/controls.min.js @@ -1,8 +1,8 @@ -const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const UI_SWITCHER=3;const UPDATE_SWITCHER=7;const UI_PAD=4;const UI_CPAD=5;const UI_SLIDER=8;const UPDATE_SLIDER=9;const UI_NUMBER=10;const UPDATE_NUMBER=11;const UI_TEXT_INPUT=12;const UPDATE_TEXT_INPUT=13;const UI_GRAPH=14;const CLEAR_GRAPH=15;const ADD_GRAPH_POINT=16;const FOR=0;const BACK=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_NONE=7;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";break;case C_EMERALD:return"emerald";break;case C_PETERRIVER:return"peterriver";break;case C_WETASPHALT:return"wetasphalt";break;case C_SUNFLOWER:return"sunflower";break;case C_CARROT:return"carrot";break;case C_ALIZARIN:return"alizarin";break;case C_NONE:return"";break;default:return"";}} +const UI_INITIAL_GUI=100;const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const UI_SWITCHER=3;const UPDATE_SWITCHER=7;const UI_PAD=4;const UI_CPAD=5;const UI_SLIDER=8;const UPDATE_SLIDER=9;const UI_NUMBER=10;const UPDATE_NUMBER=11;const UI_TEXT_INPUT=12;const UPDATE_TEXT_INPUT=13;const UI_GRAPH=14;const CLEAR_GRAPH=15;const ADD_GRAPH_POINT=16;const FOR=0;const BACK=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_NONE=7;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";break;case C_EMERALD:return"emerald";break;case C_PETERRIVER:return"peterriver";break;case C_WETASPHALT:return"wetasphalt";break;case C_SUNFLOWER:return"sunflower";break;case C_CARROT:return"carrot";break;case C_ALIZARIN:return"alizarin";break;case C_NONE:return"";break;default:return"";}} var websock;var websockConnected=false;function restart(){$(document).add("*").off();$("#row").html("");websock.close();start();} function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection ↻");$("#conStatus").off();$("#conStatus").on({click:restart});} function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}} -function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);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();};websock.onmessage=function(evt){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:$("#row").append("
"+ -"
");break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;default:console.error("Unknown type or event");break;}};} +"");break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;default:console.error("Unknown type or event");break;}};websock.onmessage=handleEvent;} function numberchange(number){var val=$("#num"+number).val();websock.send("nvalue:"+val+":"+number);console.log(val);} function textchange(number){var val=$("#text"+number).val();websock.send("tvalue:"+val+":"+number);console.log(val);} function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else websock.send("bup:"+number);} diff --git a/src/ESPUI.cpp b/src/ESPUI.cpp index 8e8437a..44929fa 100644 --- a/src/ESPUI.cpp +++ b/src/ESPUI.cpp @@ -613,25 +613,39 @@ bool ESPUIClass::labelExists(String label) { return false; } -// Convert & Transfer Arduino elements to JSON elements +/* +Convert & Transfer Arduino elements to JSON elements +Initially this function used to send the control element data individually. +Due to a change in the ESPAsyncWebserver library this had top be changed to be +sent as one blob at the beginning. Therefore a new type is used as well +*/ void ESPUIClass::jsonDom(AsyncWebSocketClient *client) { + String json; + DynamicJsonBuffer jsonBuffer(2000); + JsonObject &root = jsonBuffer.createObject(); + root["type"] = UI_INITIAL_GUI; + JsonArray &items = jsonBuffer.createArray(); + for (int i = -1; i < cIndex; i++) { - String json; - StaticJsonBuffer<200> jsonBuffer; - JsonObject &root = jsonBuffer.createObject(); + JsonObject &item = jsonBuffer.createObject(); + if (i == -1) { - root["type"] = UI_TITEL; - root["label"] = String(ui_title); + item["type"] = UI_TITEL; + item["label"] = String(ui_title); } else { - root["type"] = controls[i]->type; - root["label"] = String(controls[i]->label); - root["value"] = String(controls[i]->value); - root["color"] = String(controls[i]->color); - root["id"] = String(i); + item["type"] = controls[i]->type; + item["label"] = String(controls[i]->label); + item["value"] = String(controls[i]->value); + item["color"] = String(controls[i]->color); + item["id"] = String(i); } - root.printTo(json); - client->text(json); + items.add(item); } + + // Send as one big bunch + root["controls"] = items; + root.printTo(json); + client->text(json); } void ESPUIClass::beginSPIFFS(const char *_title) { diff --git a/src/ESPUI.h b/src/ESPUI.h index 6fff855..738fdd7 100644 --- a/src/ESPUI.h +++ b/src/ESPUI.h @@ -40,6 +40,7 @@ typedef struct Control { } Control; // Message Types (and control types) +#define UI_INITIAL_GUI 100 #define UI_TITEL 0 #define UI_LABEL 1 diff --git a/src/dataControlsJS.h b/src/dataControlsJS.h index 8f4cabc..c9ed0fa 100644 --- a/src/dataControlsJS.h +++ b/src/dataControlsJS.h @@ -1,9 +1,9 @@ const char JS_CONTROLS[] PROGMEM = R"=====( -const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const UI_SWITCHER=3;const UPDATE_SWITCHER=7;const UI_PAD=4;const UI_CPAD=5;const UI_SLIDER=8;const UPDATE_SLIDER=9;const UI_NUMBER=10;const UPDATE_NUMBER=11;const UI_TEXT_INPUT=12;const UPDATE_TEXT_INPUT=13;const UI_GRAPH=14;const CLEAR_GRAPH=15;const ADD_GRAPH_POINT=16;const FOR=0;const BACK=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_NONE=7;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";break;case C_EMERALD:return"emerald";break;case C_PETERRIVER:return"peterriver";break;case C_WETASPHALT:return"wetasphalt";break;case C_SUNFLOWER:return"sunflower";break;case C_CARROT:return"carrot";break;case C_ALIZARIN:return"alizarin";break;case C_NONE:return"";break;default:return"";}} +const UI_INITIAL_GUI=100;const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const UI_SWITCHER=3;const UPDATE_SWITCHER=7;const UI_PAD=4;const UI_CPAD=5;const UI_SLIDER=8;const UPDATE_SLIDER=9;const UI_NUMBER=10;const UPDATE_NUMBER=11;const UI_TEXT_INPUT=12;const UPDATE_TEXT_INPUT=13;const UI_GRAPH=14;const CLEAR_GRAPH=15;const ADD_GRAPH_POINT=16;const FOR=0;const BACK=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_NONE=7;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";break;case C_EMERALD:return"emerald";break;case C_PETERRIVER:return"peterriver";break;case C_WETASPHALT:return"wetasphalt";break;case C_SUNFLOWER:return"sunflower";break;case C_CARROT:return"carrot";break;case C_ALIZARIN:return"alizarin";break;case C_NONE:return"";break;default:return"";}} var websock;var websockConnected=false;function restart(){$(document).add("*").off();$("#row").html("");websock.close();start();} function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection ↻");$("#conStatus").off();$("#conStatus").on({click:restart});} function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}} -function start(){document.addEventListener("visibilitychange",handleVisibilityChange,false);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();};websock.onmessage=function(evt){console.log(evt);var data=JSON.parse(evt.data);var e=document.body;var center="";switch(data.type){case UI_TITEL:document.title=data.label;$("#mainHeader").html(data.label);break;case UI_LABEL:$("#row").append("
"+ -"
");break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;default:console.error("Unknown type or event");break;}};} +"");break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);break;default:console.error("Unknown type or event");break;}};websock.onmessage=handleEvent;} function numberchange(number){var val=$("#num"+number).val();websock.send("nvalue:"+val+":"+number);console.log(val);} function textchange(number){var val=$("#text"+number).val();websock.send("tvalue:"+val+":"+number);console.log(val);} function buttonclick(number,isdown){if(isdown)websock.send("bdown:"+number);else websock.send("bup:"+number);} @@ -143,4 +143,4 @@ function padclick(type,number,isdown){switch(type){case CENTER:if(isdown)websock 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);}} )====="; -const uint8_t JS_CONTROLS_GZIP[2028] PROGMEM = { 31,139,8,0,56,43,252,91,2,255,213,89,237,114,226,54,23,254,159,171,112,189,157,5,55,44,36,187,239,246,3,112,102,88,194,54,188,165,144,18,210,237,244,15,35,108,177,120,98,100,87,146,97,183,25,110,227,189,144,94,82,175,228,61,146,44,127,197,14,36,204,118,166,127,18,251,232,232,209,163,243,165,99,225,4,132,113,227,118,56,159,13,103,131,145,125,214,113,180,96,212,123,7,130,115,45,184,190,236,205,6,177,240,219,84,235,221,237,108,54,25,219,175,83,201,205,135,225,172,127,53,152,218,111,242,83,19,249,119,169,238,117,239,210,254,79,250,218,23,239,111,51,80,163,225,37,76,248,190,0,164,164,63,164,122,227,219,159,223,129,228,252,44,175,168,197,231,169,230,108,240,219,108,62,28,95,223,206,236,243,215,121,237,236,208,155,116,198,143,211,222,245,149,125,174,89,246,71,131,222,84,11,53,213,222,229,165,18,205,175,39,195,49,204,215,6,122,63,153,38,38,125,215,235,255,148,152,115,52,120,63,75,140,54,29,254,120,53,75,204,213,31,140,103,192,58,89,112,62,187,157,254,114,59,25,222,12,18,168,254,124,240,243,96,218,27,93,38,120,253,249,245,0,102,77,135,191,194,212,215,137,240,195,96,214,187,185,190,234,141,50,240,243,155,219,241,251,209,228,67,110,141,126,111,58,157,204,18,219,247,231,189,209,240,247,222,116,56,78,124,221,159,143,39,227,1,56,111,25,17,135,123,1,49,156,192,15,104,223,71,140,213,229,227,208,181,238,227,7,123,28,173,23,152,38,242,14,219,122,220,89,101,244,16,195,217,173,181,41,230,17,37,38,252,249,35,10,60,134,205,206,130,98,116,215,137,21,227,253,106,53,188,198,20,249,110,65,41,53,129,214,11,49,199,148,122,27,76,11,170,169,97,180,234,22,115,196,194,21,242,121,65,53,49,151,214,100,17,89,250,193,246,1,166,178,161,214,114,16,165,65,17,75,91,85,43,33,223,251,19,81,143,20,212,132,165,181,138,30,114,241,18,69,62,79,197,187,221,201,6,81,99,139,23,44,112,238,58,153,231,126,64,8,118,56,118,237,37,242,25,78,61,70,49,227,136,242,186,117,255,117,221,13,156,104,141,9,183,154,200,117,235,230,55,166,213,12,150,203,186,213,249,186,110,190,160,193,22,222,87,124,237,215,77,211,234,196,184,77,199,15,24,6,149,24,165,179,59,201,4,3,185,225,136,71,108,0,219,166,176,66,5,23,129,158,232,194,26,20,175,131,13,86,81,100,202,240,120,245,145,98,76,76,235,129,42,240,204,233,81,236,150,104,41,210,146,133,209,50,198,129,17,51,16,36,95,190,248,254,219,55,111,59,37,179,210,173,231,164,164,126,239,248,158,115,215,142,45,183,203,237,121,133,136,235,227,95,61,230,45,60,223,227,159,251,32,248,8,246,185,247,150,245,175,138,251,127,249,242,43,109,242,230,202,115,93,76,172,251,196,31,194,153,9,172,246,81,162,14,27,31,108,224,97,228,49,142,9,164,149,185,73,214,116,228,154,102,163,156,75,67,26,61,113,160,77,240,214,248,128,23,55,240,140,121,221,220,178,118,171,101,158,110,61,226,6,219,166,31,56,72,16,104,174,2,198,9,90,227,83,179,181,101,25,247,7,36,8,49,177,53,209,58,222,112,145,241,132,5,62,134,217,31,1,80,105,26,66,239,0,15,86,121,154,227,79,192,46,49,93,74,33,141,38,78,35,220,217,101,168,201,216,60,132,155,84,4,200,98,196,230,208,176,144,61,130,38,4,143,35,172,49,99,232,35,222,135,33,210,214,69,28,217,255,189,153,140,155,33,162,144,96,48,208,20,50,53,138,237,36,16,22,129,251,89,202,28,120,195,212,134,42,16,23,86,161,222,228,159,67,28,151,86,125,160,183,147,185,220,227,62,64,9,61,31,45,176,47,141,190,70,30,185,194,200,133,90,22,103,78,170,96,101,107,146,238,7,218,105,117,64,33,56,25,42,71,215,245,54,96,84,112,171,93,227,219,64,28,11,209,154,48,3,10,160,107,112,197,212,48,79,79,50,199,133,92,68,190,91,167,39,102,237,162,187,122,107,120,174,93,3,45,57,228,185,82,172,95,37,29,144,116,91,171,183,160,11,121,125,209,101,33,34,114,142,159,159,164,153,200,57,134,252,251,106,75,81,152,162,109,144,31,97,137,38,48,46,186,45,224,127,97,22,119,171,250,154,61,219,133,56,121,230,118,43,247,6,91,91,68,156,67,25,128,16,10,34,134,33,51,137,93,83,50,89,139,234,185,13,55,12,145,9,86,77,171,71,225,163,202,170,30,212,30,179,118,106,31,133,147,90,72,24,195,60,141,231,168,234,200,131,200,89,201,130,213,78,3,221,186,199,205,144,98,81,178,46,213,169,5,185,145,37,21,67,52,36,117,168,125,213,208,96,242,231,0,199,101,79,32,231,221,170,155,208,182,200,34,105,123,219,236,170,88,17,38,97,126,66,226,52,141,37,149,99,6,176,129,178,233,130,165,100,14,122,36,140,184,157,139,7,143,128,115,165,220,16,185,104,215,228,148,69,240,73,25,156,21,66,53,32,125,193,90,47,32,10,123,206,91,36,242,125,240,85,188,174,246,67,7,78,151,212,81,182,109,158,153,214,253,211,182,34,182,240,143,209,79,120,239,78,42,178,233,97,48,126,209,4,131,145,88,40,247,42,199,164,64,140,152,21,245,64,124,154,180,117,217,237,34,77,16,234,249,210,163,235,90,62,91,67,228,170,120,84,189,124,195,216,155,178,251,102,232,188,93,81,188,180,107,47,148,67,66,167,144,194,147,159,186,45,4,150,214,164,5,231,47,85,176,31,55,176,217,37,104,147,49,18,167,129,95,83,3,81,108,103,223,187,0,59,150,219,13,190,155,158,98,180,50,245,114,139,45,11,22,251,251,127,127,9,147,65,0,120,251,89,201,239,180,167,240,42,159,80,206,140,30,195,76,124,78,62,133,88,169,126,57,47,255,24,94,226,155,247,41,188,74,245,203,121,45,246,241,106,169,64,83,241,44,5,16,146,249,20,23,185,33,66,226,153,71,90,46,254,202,207,180,114,244,3,78,181,82,236,204,177,38,193,253,227,169,203,72,168,224,238,31,203,61,7,94,36,79,143,39,175,242,171,130,61,61,150,125,30,189,72,127,113,60,125,25,237,21,236,23,199,178,207,129,23,201,59,199,147,143,15,170,10,250,206,177,244,11,240,21,13,93,230,82,82,30,116,217,136,77,63,103,100,163,84,54,49,233,6,75,90,170,164,169,209,20,206,172,14,6,18,198,131,129,243,7,77,166,188,160,124,238,201,43,94,94,49,223,115,247,158,194,178,150,61,249,211,73,206,210,109,23,171,248,124,162,119,235,132,132,250,247,202,245,152,67,49,199,250,253,0,110,217,94,146,138,251,136,154,177,246,224,124,56,131,255,232,147,93,59,63,131,39,101,243,90,241,243,163,150,45,213,197,162,93,48,43,16,243,66,14,106,166,224,61,151,75,221,72,150,245,218,139,124,35,108,117,64,11,62,253,226,25,165,81,161,220,167,182,57,23,215,83,117,177,102,6,199,106,164,84,27,38,236,194,212,1,154,15,4,117,1,253,101,90,176,35,156,175,220,194,248,103,95,244,248,2,178,189,240,145,115,215,81,71,43,137,214,133,160,80,30,36,242,78,183,218,97,112,162,171,219,40,173,170,222,242,95,5,112,142,183,170,251,236,236,189,189,52,155,228,146,164,52,44,85,153,209,217,187,253,127,155,197,197,125,87,193,228,7,24,89,204,122,174,137,11,182,82,4,246,216,89,223,64,235,59,44,121,71,86,55,111,201,29,129,174,79,6,137,17,80,67,86,244,100,209,221,46,123,99,154,139,11,245,98,221,139,143,105,88,200,78,252,29,15,72,26,233,237,35,147,126,36,146,82,219,60,133,255,167,102,59,81,238,100,111,214,96,44,119,81,155,177,84,217,162,106,247,143,173,202,159,179,106,246,98,66,233,55,60,38,26,100,121,65,28,63,230,215,89,8,89,6,94,30,56,5,149,40,204,40,100,150,75,142,78,225,136,70,97,193,248,154,48,115,67,168,14,216,118,21,147,208,217,79,37,116,114,92,50,81,6,77,107,53,242,242,0,228,101,21,178,104,107,170,161,15,176,95,184,168,130,22,221,106,53,180,127,0,180,95,5,45,91,201,106,108,122,0,54,45,193,206,253,106,160,219,146,216,243,208,205,113,44,35,77,62,217,182,188,142,17,239,242,48,75,227,221,99,117,179,29,223,49,153,86,242,195,77,188,46,67,0,191,193,153,165,245,89,168,231,103,46,245,53,72,103,39,118,80,68,242,200,94,172,252,175,65,41,156,196,51,210,189,156,139,95,176,246,211,40,234,132,52,8,211,113,221,179,22,176,207,30,98,87,208,218,3,159,244,172,255,7,65,240,22,173,100,31,0,0 }; +const uint8_t JS_CONTROLS_GZIP[2108] PROGMEM = { 31,139,8,0,72,101,35,92,2,255,213,89,209,114,226,56,22,125,207,87,120,220,83,13,222,208,16,186,183,103,103,33,78,21,77,232,14,51,12,100,9,153,222,218,23,74,216,162,113,197,200,94,89,134,206,166,248,141,249,144,249,164,249,146,189,146,44,91,118,236,64,66,245,84,205,75,98,95,93,29,29,157,123,117,37,11,39,32,17,51,110,135,243,225,120,56,27,246,70,243,79,183,67,187,125,118,214,117,84,195,108,56,27,140,108,205,48,234,125,0,67,91,25,174,47,123,179,65,98,252,33,243,250,112,59,155,77,198,246,219,204,114,243,121,56,235,95,13,166,246,187,124,215,212,254,143,204,247,186,119,105,255,61,123,237,243,247,247,26,212,104,120,9,29,126,44,0,73,235,63,51,191,241,237,47,31,192,210,62,203,59,42,115,91,155,229,224,223,51,208,224,250,118,102,183,223,230,189,245,166,119,89,143,79,211,222,245,149,221,86,44,251,163,65,111,170,140,138,106,239,242,82,154,230,215,147,225,24,250,43,129,62,78,166,169,164,31,122,253,159,83,57,71,131,143,179,84,180,233,240,211,213,44,149,171,63,24,207,128,117,58,224,124,118,59,253,215,237,100,120,51,72,161,250,243,193,47,131,105,111,116,153,226,245,231,215,3,232,53,29,254,10,93,223,166,198,207,131,89,239,230,250,170,55,210,224,231,55,183,227,143,163,201,231,220,24,253,222,116,58,153,165,218,247,231,189,209,240,63,189,233,112,156,198,186,63,31,79,198,3,8,222,50,38,14,243,2,98,56,129,31,208,190,143,162,168,46,30,135,174,245,144,60,216,227,120,189,192,52,181,119,163,173,199,156,149,230,135,34,172,79,173,67,49,139,41,49,225,207,127,227,192,139,176,217,93,80,140,238,186,137,99,50,95,229,134,215,152,34,223,45,56,101,18,40,191,16,51,76,169,183,193,180,224,154,9,163,92,183,152,161,40,92,33,159,21,92,83,185,148,103,20,147,165,31,108,31,97,74,13,149,151,131,40,13,138,88,74,85,229,132,124,239,127,136,122,164,224,198,149,86,46,170,201,197,75,20,251,44,51,239,118,39,27,68,141,45,94,68,129,115,215,213,158,251,1,33,216,97,216,181,151,200,143,112,22,49,138,35,134,40,171,91,15,223,215,221,192,137,215,152,48,171,137,92,183,110,254,205,180,154,193,114,89,183,186,223,215,205,87,52,216,194,251,138,173,253,186,105,90,221,4,183,233,248,65,132,193,37,65,233,238,78,180,100,32,55,12,177,56,26,192,180,41,140,80,193,133,163,167,190,48,6,197,235,96,131,101,22,153,34,61,222,124,161,24,19,211,122,228,10,60,115,126,20,187,37,94,146,180,96,97,180,140,113,96,36,12,56,201,215,175,126,252,225,221,251,110,73,175,108,234,57,43,169,63,56,190,231,220,117,18,229,118,185,57,175,16,113,125,252,171,23,121,11,207,247,216,125,31,12,95,64,159,7,111,89,255,174,56,255,215,175,191,83,146,55,87,158,235,98,98,61,164,241,224,193,76,97,85,140,82,119,152,248,96,3,15,35,47,98,152,192,178,50,55,233,152,142,24,211,108,148,115,105,8,209,211,0,218,4,111,141,207,120,113,3,207,152,213,205,109,212,105,181,204,211,173,71,220,96,219,244,3,7,113,2,205,85,16,49,130,214,248,212,108,109,35,45,252,1,9,66,76,108,69,180,142,55,140,175,120,18,5,62,134,222,95,0,80,122,26,220,239,128,8,86,69,154,225,175,192,46,149,46,163,144,101,19,163,49,238,238,52,106,34,55,15,225,38,28,1,178,152,177,57,52,204,109,79,160,113,67,25,2,95,133,50,20,34,98,5,4,222,234,34,134,236,159,110,38,227,102,136,40,172,38,104,104,114,155,37,250,98,59,141,250,34,112,239,133,205,129,55,76,109,88,242,73,21,229,238,77,118,31,226,164,142,230,183,245,142,104,6,110,140,6,126,212,92,6,116,128,160,19,246,49,135,181,47,4,11,168,37,95,37,195,7,238,222,17,132,34,6,165,232,139,183,188,87,206,214,174,171,77,166,158,118,130,153,90,122,197,82,199,135,78,74,158,121,204,135,185,112,38,62,90,96,95,132,120,141,60,114,133,145,11,149,51,89,167,153,67,17,79,28,52,58,89,45,66,33,164,20,212,169,115,215,219,64,8,33,137,236,26,219,6,124,19,138,215,36,50,160,220,186,6,147,82,25,230,233,137,182,57,37,122,192,187,117,122,98,214,46,206,87,239,13,207,181,107,224,37,154,60,87,152,213,171,160,3,150,243,214,234,61,248,66,21,185,56,143,66,68,68,31,63,223,73,49,17,125,12,241,247,205,150,162,48,67,219,32,63,198,2,141,99,92,156,183,128,255,133,89,156,173,60,69,237,153,46,100,229,11,167,91,57,55,152,218,34,102,12,138,78,64,214,65,28,97,168,3,196,174,73,155,168,124,245,220,132,27,6,95,119,86,77,185,199,225,147,206,178,250,212,158,82,59,211,71,226,100,10,113,49,204,211,164,143,172,197,44,136,157,149,40,143,157,108,97,89,15,184,25,82,204,243,242,82,238,145,176,18,117,82,9,68,67,80,135,74,91,13,13,146,191,4,56,41,178,187,71,139,66,29,121,59,124,201,9,237,109,243,92,230,10,151,36,242,83,18,167,89,46,201,69,110,0,27,40,210,46,40,37,138,128,71,194,152,217,185,124,240,8,4,87,216,13,94,12,236,154,232,178,8,190,74,193,163,66,170,6,164,207,89,171,1,248,54,146,139,22,137,125,31,98,149,140,171,226,208,133,189,44,11,148,109,155,103,166,245,240,188,169,240,41,252,105,244,83,222,187,147,138,213,244,56,25,191,233,2,131,150,196,40,230,42,218,132,129,183,152,21,245,128,127,8,117,84,221,63,71,138,32,20,245,165,71,215,181,252,106,13,145,43,243,81,126,57,52,140,189,75,118,95,15,181,110,87,20,47,237,218,43,25,144,208,41,44,225,201,207,231,45,4,74,43,210,156,243,183,42,216,79,11,108,158,19,180,209,68,226,59,95,77,54,196,137,206,190,119,1,58,150,235,6,95,105,207,17,173,204,189,92,177,101,65,177,63,126,251,157,75,6,9,224,237,103,37,190,10,159,195,171,188,67,57,51,122,12,51,254,241,250,28,98,165,254,229,188,252,99,120,241,47,236,231,240,42,245,47,231,181,216,199,171,37,19,77,230,179,48,64,74,230,151,56,95,27,60,37,94,184,165,229,242,175,124,79,43,71,63,96,87,43,197,214,182,53,1,238,31,79,93,100,66,5,119,255,88,238,57,240,34,121,122,60,121,185,190,42,216,211,99,217,231,209,139,244,23,199,211,23,217,94,193,126,113,44,251,28,120,145,188,115,60,249,100,163,170,160,239,28,75,191,0,95,113,160,211,174,64,197,70,167,103,108,246,57,35,14,74,101,29,211,211,96,201,145,42,61,212,40,10,103,86,23,3,9,227,81,67,251,209,33,83,92,135,190,116,231,229,47,111,34,223,115,247,238,194,162,150,61,251,211,73,244,82,199,174,168,226,243,137,222,173,83,18,242,223,27,215,139,28,138,25,86,239,7,112,211,207,146,148,223,126,212,140,181,7,251,195,25,252,71,95,237,90,251,12,158,164,230,181,226,231,71,77,47,213,197,162,93,144,21,136,121,33,3,55,147,243,158,139,161,110,4,203,122,237,85,254,32,108,117,193,11,62,253,146,30,165,89,33,195,39,167,57,231,151,97,117,62,166,134,99,53,50,170,13,19,102,97,170,4,205,39,130,188,238,254,54,71,176,35,130,47,195,18,177,123,159,159,241,57,100,103,225,35,231,174,43,183,86,18,175,11,73,33,35,72,196,13,114,117,192,96,71,151,119,95,202,85,190,229,191,10,96,31,111,85,159,179,245,95,9,132,108,130,75,186,164,97,168,202,21,173,255,146,240,87,83,156,223,174,21,36,63,64,100,222,235,165,18,23,180,146,4,246,232,172,238,187,213,173,155,184,145,171,155,183,228,142,192,169,79,36,137,17,80,67,84,244,116,208,157,126,135,183,198,81,132,128,186,118,133,165,223,222,230,178,70,190,200,27,58,160,97,167,217,144,52,8,146,217,77,104,36,162,76,4,225,142,121,10,255,79,205,78,234,220,213,111,10,161,45,119,105,172,233,88,54,168,212,230,169,81,217,75,70,213,175,45,164,127,195,139,248,241,89,92,86,39,143,249,113,22,220,166,193,139,237,168,224,18,135,154,131,54,92,186,177,242,48,53,10,3,38,183,152,218,5,166,220,126,59,85,76,66,103,63,149,208,201,113,209,114,16,142,180,213,200,203,3,144,151,85,200,252,208,83,13,125,128,126,225,162,10,154,159,101,171,161,253,3,160,253,42,104,113,208,172,198,166,7,96,211,18,236,220,47,24,234,208,146,68,30,206,122,12,139,76,19,79,182,45,46,107,248,187,216,234,178,124,247,162,186,217,73,110,160,76,43,253,17,41,25,55,66,0,191,193,218,208,106,167,84,253,181,31,24,20,72,119,199,103,80,68,242,200,94,172,252,47,83,25,156,192,51,178,185,180,249,175,105,251,105,20,125,66,26,132,89,187,58,209,22,176,207,30,99,87,208,218,3,159,158,104,255,15,153,88,55,124,9,32,0,0 };