ESPUI/src/dataControlsJS.h

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"";}}
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("<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;}};}
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[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,