ESPUI/src/dataControlsJS.h

const char JS_CONTROLS[] PROGMEM = R"=====(
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;const C_DARK=8;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"dark";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();};var handleEvent=function(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);break;case UI_LABEL:$("#row").append("<div class='two columns card tcenter "+
colorClass(data.color)+
"'><h5 id='"+
data.id+
"'>"+
data.label+
"</h5><hr /><span id='l"+
data.id+
"' class='label label-wrap'>"+
data.value+
"</span></div>");break;case UI_BUTTON:$("#row").append("<div class='one columns card tcenter "+
colorClass(data.color)+
"'><h5>"+
data.label+
"</h5><hr/><button onmousedown='buttonclick("+
data.id+
", true)' onmouseup='buttonclick("+
data.id+
", false)' id='"+
data.id+
"'>"+
data.value+
"</button></div>");$("#"+data.id).on({touchstart:function(e){e.preventDefault();buttonclick(data.id,true);}});$("#"+data.id).on({touchend:function(e){e.preventDefault();buttonclick(data.id,false);}});break;case UI_SWITCHER:var label="<label id='sl"+data.id+"' class='switch checked'>";var input="<div class='in'><input type='checkbox' id='s"+
data.id+
"' onClick='switcher("+
data.id+
",null)' checked></div>";if(data.value=="0"){label="<label id='sl"+data.id+"' class='switch'>";input="<div class='in'><input type='checkbox' id='s"+
data.id+
"' onClick='switcher("+
data.id+
",null)' ></div>";}
$("#row").append("<div id='"+
data.id+
"' class='one columns card tcenter "+
colorClass(data.color)+
"'><h5>"+
data.label+
"</h5><hr/>"+
label+
input+
"</label>"+
"</div>");break;case UI_CPAD:center="<a class='confirm' onmousedown='padclick(CENTER, "+
data.id+
", true)' onmouseup='padclick(CENTER, "+
data.id+
", false)' href='#' id='pc"+
data.id+
"'>OK</a>";case UI_PAD:$("#row").append("<div class='two columns card tcenter "+
colorClass(data.color)+
"'><h5>"+
data.label+
"</h5><hr/>"+
"<nav class='control'>"+
"<ul>"+
"<li><a onmousedown='padclick(FOR, "+
data.id+
", true)' onmouseup='padclick(FOR, "+
data.id+
", false)' href='#' id='pf"+
data.id+
"'>▲</a></li>"+
"<li><a onmousedown='padclick(RIGHT, "+
data.id+
", true)' onmouseup='padclick(RIGHT, "+
data.id+
", false)' href='#' id='pr"+
data.id+
"'>▲</a></li>"+
"<li><a onmousedown='padclick(LEFT, "+
data.id+
", true)' onmouseup='padclick(LEFT, "+
data.id+
", false)' href='#' id='pl"+
data.id+
"'>▲</a></li>"+
"<li><a onmousedown='padclick(BACK, "+
data.id+
", true)' onmouseup='padclick(BACK, "+
data.id+
", false)' href='#' id='pb"+
data.id+
"'>▲</a></li>"+
"</ul>"+
center+
"</nav>"+
"</div>");$("#pf"+data.id).on({touchstart:function(e){e.preventDefault();padclick(FOR,data.id,true);}});$("#pf"+data.id).on({touchend:function(e){e.preventDefault();padclick(FOR,data.id,false);}});$("#pl"+data.id).on({touchstart:function(e){e.preventDefault();padclick(LEFT,data.id,true);}});$("#pl"+data.id).on({touchend:function(e){e.preventDefault();padclick(LEFT,data.id,false);}});$("#pr"+data.id).on({touchstart:function(e){e.preventDefault();padclick(RIGHT,data.id,true);}});$("#pr"+data.id).on({touchend:function(e){e.preventDefault();padclick(RIGHT,data.id,false);}});$("#pb"+data.id).on({touchstart:function(e){e.preventDefault();padclick(BACK,data.id,true);}});$("#pb"+data.id).on({touchend:function(e){e.preventDefault();padclick(BACK,data.id,false);}});$("#pc"+data.id).on({touchstart:function(e){e.preventDefault();padclick(CENTER,data.id,true);}});$("#pc"+data.id).on({touchend:function(e){e.preventDefault();padclick(CENTER,data.id,false);}});break;case UPDATE_LABEL:$("#l"+data.id).html(data.value);break;case UPDATE_SWITCHER:if(data.value=="0")switcher(data.id,0);else switcher(data.id,1);break;case UI_SLIDER:$("#row").append("<div class='two columns card tcenter card-slider "+
colorClass(data.color)+
"'>"+
"<h5 id='"+
data.id+
"'>"+
data.label+
"</h5><hr />"+
"<div id='sl"+
data.id+
"' class='rkmd-slider slider-discrete slider-"+
colorClass(data.color)+
"'>"+
"<input type='range' min='0' max='100' value='"+
data.value+
"'>"+
"</div>"+
"</div>");$("#row").append("<script>"+"rkmd_rangeSlider('#sl"+data.id+"');"+"</script>");break;case UPDATE_SLIDER:slider_move($("#sl"+data.id),data.value,"100",false);break;case UI_NUMBER:$("#row").append("<div class='two columns card tcenter "+
colorClass(data.color)+
"'>"+
"<h5 id='"+
data.id+
"'>"+
data.label+
"</h5><hr />"+
"<input style='color:black;' id='num"+
data.id+
"' type='number' value='"+
data.value+
"' onchange='numberchange("+
data.id+
")' />"+
"</div>");break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);break;case UI_TEXT_INPUT:$("#row").append("<div class='two columns card tcenter "+
colorClass(data.color)+
"'>"+
"<h5 id='"+
data.id+
"'>"+
data.label+
"</h5><hr />"+
"<input style='color:black;' id='text"+
data.id+
"' value='"+
data.value+
"' onchange='textchange("+
data.id+
")' />"+
"</div>");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);}
function padclick(type,number,isdown){switch(type){case CENTER:if(isdown)websock.send("pcdown:"+number);else websock.send("pcup:"+number);break;case FOR:if(isdown)websock.send("pfdown:"+number);else websock.send("pfup:"+number);break;case BACK: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);}}
)=====";

const uint8_t JS_CONTROLS_GZIP[2118] PROGMEM = { 31,139,8,0,29,85,117,92,2,255,213,89,225,114,219,184,17,254,159,167,224,49,55,145,88,59,178,157,52,215,171,104,122,70,145,149,88,141,78,118,101,249,210,233,31,13,68,66,17,199,20,200,130,160,20,215,163,215,232,131,244,145,250,36,93,0,4,8,210,164,101,91,147,206,244,143,68,46,22,31,62,236,46,22,11,208,143,73,202,172,155,225,108,56,30,78,135,189,209,236,243,205,208,59,57,62,118,125,213,48,29,78,7,35,207,16,140,122,31,65,112,162,4,87,231,189,233,32,23,254,82,104,125,188,153,78,47,199,222,187,66,114,253,117,56,237,95,12,38,222,251,114,87,45,255,83,161,123,213,59,247,254,88,188,246,249,251,7,3,106,52,60,135,14,191,86,128,164,244,207,133,222,248,230,183,143,32,57,57,46,43,42,241,137,49,203,193,223,166,96,131,171,155,169,119,242,174,172,109,54,189,47,122,124,158,244,174,46,188,19,197,178,63,26,244,38,74,168,168,246,206,207,165,104,118,117,57,28,67,127,101,160,79,151,19,109,210,143,189,254,23,109,206,209,224,211,84,27,109,50,252,124,49,213,230,234,15,198,83,96,173,7,156,77,111,38,127,189,185,28,94,15,52,84,127,54,248,109,48,233,141,206,53,94,127,118,53,128,94,147,225,239,208,245,157,22,126,29,76,123,215,87,23,189,145,1,63,187,190,25,127,26,93,126,45,141,209,239,77,38,151,83,109,251,254,172,55,26,254,189,55,25,142,181,175,251,179,241,229,120,160,157,215,159,157,247,38,95,192,53,139,140,248,44,140,137,229,199,81,76,251,17,74,211,182,120,28,6,206,125,254,224,141,179,213,28,83,45,119,211,77,200,252,165,161,135,82,108,206,180,75,49,203,40,177,225,231,31,89,28,166,216,118,115,149,124,226,74,1,175,48,69,81,160,155,11,43,40,141,4,51,76,105,184,198,84,43,21,86,81,74,27,204,80,154,44,81,196,180,146,182,146,210,73,51,178,136,226,141,129,35,141,166,218,125,68,105,92,244,87,6,84,205,40,10,255,137,104,72,180,2,55,167,106,12,16,189,181,221,0,47,80,22,49,37,180,221,237,246,213,26,81,107,131,231,105,236,223,186,198,115,63,38,4,251,12,7,222,2,69,41,46,188,64,113,202,16,101,109,231,254,231,118,16,251,217,10,19,230,116,80,16,180,237,63,216,78,39,94,44,218,142,251,115,219,126,77,227,13,188,47,217,42,106,219,182,227,230,184,29,63,138,83,12,42,57,138,187,125,101,56,152,92,51,196,178,116,0,19,165,48,66,3,23,142,174,117,97,12,138,87,241,26,203,200,176,133,203,223,126,163,24,19,219,121,160,10,60,75,122,20,7,53,90,146,180,96,97,29,89,227,216,202,25,112,146,111,94,255,250,203,251,15,110,77,175,98,234,37,41,105,223,251,81,232,223,118,115,203,109,75,115,94,34,18,68,248,247,48,13,231,97,20,178,187,62,8,190,129,125,238,195,69,251,167,234,252,223,188,249,73,153,188,179,12,131,0,19,231,94,251,131,59,83,195,42,31,105,117,152,248,96,13,15,163,48,101,152,192,82,177,215,122,76,95,140,105,31,214,115,57,20,70,215,14,244,8,222,88,95,241,252,26,158,49,107,219,155,180,123,116,100,31,108,66,18,196,155,78,20,251,136,19,232,44,227,148,17,180,194,7,246,209,38,53,220,31,147,56,193,196,83,68,219,120,205,248,42,38,105,28,97,232,253,13,0,165,166,197,245,158,224,193,38,79,51,252,29,216,105,211,21,20,138,104,98,52,195,238,214,160,38,98,243,41,220,132,34,64,86,35,182,132,134,185,236,17,52,46,168,67,224,171,80,186,66,120,172,130,192,91,3,196,144,247,151,235,203,113,39,65,20,86,19,52,116,184,204,17,125,177,167,189,62,143,131,59,33,243,225,13,83,15,150,124,158,25,185,122,135,221,37,56,207,141,229,157,187,43,154,129,27,163,113,148,118,22,49,29,32,232,132,35,204,97,189,51,193,2,114,201,119,201,240,158,171,119,5,161,148,65,10,250,22,46,238,148,178,179,117,141,201,180,117,39,152,169,227,206,41,70,183,174,34,32,42,132,174,38,207,66,22,193,92,56,147,8,205,113,36,92,188,66,33,185,192,40,128,44,153,175,211,66,161,138,39,106,137,110,145,139,80,2,33,5,121,234,52,8,215,224,66,8,34,175,197,54,49,223,88,178,21,73,45,72,176,129,197,164,169,44,251,224,149,177,225,228,246,128,119,231,224,149,221,58,59,93,126,176,194,192,107,129,150,104,10,3,33,86,175,130,14,72,78,143,150,31,64,23,178,200,217,105,154,32,34,250,68,229,78,138,137,232,99,137,223,183,27,138,146,2,109,141,162,12,11,52,142,113,118,122,4,252,207,236,234,108,101,161,180,99,186,16,149,47,156,110,227,220,96,106,243,140,49,72,58,49,89,197,89,138,33,15,16,175,37,101,34,243,181,75,19,62,180,248,186,1