ESPUI/src/dataControlsJS.h

const char JS_CONTROLS[] PROGMEM = R"=====(
const UI_INITIAL_GUI=200;const UI_TITEL=0;const UI_BUTTON=1;const UI_PAD=2;const UI_CPAD=3;const UI_LABEL=4;const UPDATE_LABEL=104;const UI_SWITCHER=5;const UPDATE_SWITCHER=105;const UI_SLIDER=6;const UPDATE_SLIDER=106;const UI_NUMBER=7;const UPDATE_NUMBER=107;const UI_TEXT_INPUT=8;const UPDATE_TEXT_INPUT=108;const UI_GRAPH=9;const ADD_GRAPH_POINT=10;const CLEAR_GRAPH=109;const UI_TAB=11;const UPDATE_TAB=111;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_DARK=7;const C_NONE=255;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:var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
element.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:var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
element.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>";}
var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
element.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:var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
element.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);},touchend:function(e){e.preventDefault();padclick(FOR,data.id,false);}});$("#pl"+data.id).on({touchstart:function(e){e.preventDefault();padclick(LEFT,data.id,true);},touchend:function(e){e.preventDefault();padclick(LEFT,data.id,false);}});$("#pr"+data.id).on({touchstart:function(e){e.preventDefault();padclick(RIGHT,data.id,true);},touchend:function(e){e.preventDefault();padclick(RIGHT,data.id,false);}});$("#pb"+data.id).on({touchstart:function(e){e.preventDefault();padclick(BACK,data.id,true);},touchend:function(e){e.preventDefault();padclick(BACK,data.id,false);}});$("#pc"+data.id).on({touchstart:function(e){e.preventDefault();padclick(CENTER,data.id,true);},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:var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
element.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>");var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
element.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:var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
element.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:var element;if(data.parentControl){element=$("#tab"+data.parentControl);}else{element=$("#row")}
element.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;case UI_TAB:$("#tabsnav").append("<li><a href='#tab"+data.id+"'>"+data.value+"</a></li>");$("#tabscontent").append("<div id='tab"+data.id+"'></div>");tabs=$('.tabscontent').tabbedContent({loop:true}).data('api');$('a').filter(function(){return $(this).attr('href')==='#click-to-switch';}).on('click',function(e){var tab=prompt('Tab to switch to (number or id)?');if(!tabs.switchTab(tab)){alert('That tab does not exist :\\');}
e.preventDefault();});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[2388] PROGMEM = { 31,139,8,0,174,85,124,92,2,255,237,89,239,114,226,56,18,255,158,167,240,122,166,198,246,133,16,152,221,204,206,226,56,87,132,48,19,118,88,146,35,100,231,234,106,171,40,97,139,193,21,99,251,108,1,201,82,188,198,61,200,61,210,61,201,181,36,75,150,29,147,144,161,110,238,182,234,190,128,213,106,181,126,253,71,173,150,228,70,97,74,180,219,222,184,55,232,141,122,237,254,248,227,109,207,121,219,104,216,174,232,24,245,70,221,190,163,16,206,111,71,163,171,129,211,204,41,215,237,11,231,109,222,236,208,246,247,121,187,223,62,7,9,63,8,194,245,69,123,212,205,136,205,198,15,57,223,205,231,222,168,115,217,29,58,39,69,86,73,111,54,78,20,238,126,239,2,104,239,74,188,156,218,108,188,203,57,7,183,191,156,3,237,199,34,103,70,109,54,126,84,116,237,254,117,4,150,184,190,29,57,239,139,220,74,79,179,241,62,31,241,113,216,190,190,116,126,202,8,237,139,11,78,25,95,95,245,6,148,53,235,232,244,187,237,97,198,220,108,252,164,204,216,62,119,154,205,210,92,140,38,136,31,174,134,210,250,231,237,206,39,105,248,126,247,195,72,154,125,216,251,120,57,146,70,239,116,7,35,208,77,216,182,51,30,221,14,255,114,123,213,187,233,74,81,157,113,247,151,238,176,221,191,144,242,58,227,235,46,140,26,246,126,133,161,111,37,241,115,119,212,190,185,190,108,247,21,241,227,155,219,193,135,254,213,231,194,28,157,246,112,120,53,146,206,235,140,219,253,222,223,218,195,222,64,250,168,51,190,104,15,63,73,71,116,198,131,171,65,215,121,123,114,98,79,23,161,75,252,40,212,220,40,136,146,78,128,210,212,100,159,61,207,90,103,31,206,96,49,159,224,68,210,237,116,229,19,119,166,240,161,20,171,186,182,18,76,22,73,168,195,207,223,23,145,159,98,221,206,88,50,213,5,3,158,227,4,5,158,236,206,237,32,56,98,76,112,146,248,75,156,72,166,220,46,130,105,133,9,74,227,25,10,136,100,146,118,18,60,233,34,156,6,209,74,145,195,205,38,250,93,148,36,81,62,94,152,80,116,163,192,255,29,37,126,40,25,168,5,69,167,135,146,59,221,246,240,20,45,2,34,136,186,189,217,28,44,81,162,173,240,36,141,220,59,91,249,238,68,97,136,93,130,61,103,138,130,20,231,94,72,112,74,80,66,76,107,253,218,244,34,119,49,199,33,177,234,200,243,76,253,79,186,85,143,166,83,211,178,95,155,250,171,36,90,65,123,70,230,129,169,235,150,157,201,173,187,65,148,98,96,201,164,216,155,3,197,193,225,13,65,100,145,118,65,209,4,102,216,130,133,74,151,188,48,71,130,231,209,18,243,200,208,153,203,143,190,36,24,135,186,245,136,21,112,22,248,18,236,85,112,113,208,12,133,118,172,13,34,45,67,64,65,190,121,245,254,221,247,39,118,197,168,92,245,2,53,52,215,110,224,187,119,173,204,114,155,130,206,51,20,122,1,254,213,79,253,137,31,248,228,161,3,132,47,96,159,181,63,53,191,43,235,255,230,205,119,194,228,245,153,239,121,56,180,214,210,31,212,153,82,172,240,145,100,7,197,187,75,248,232,251,41,193,33,44,21,125,41,231,116,217,156,122,173,26,75,141,25,93,58,208,9,241,74,251,140,39,55,240,141,137,169,175,210,214,241,177,126,184,242,67,47,90,213,131,200,69,20,64,125,22,165,36,68,115,124,168,31,175,82,197,253,81,24,197,56,116,4,80,19,47,9,93,197,97,26,5,24,70,127,1,129,156,83,163,124,59,120,112,155,167,9,190,7,116,210,116,57,132,60,154,72,178,192,246,70,129,198,98,115,23,108,140,17,68,150,35,182,32,13,83,218,19,210,40,161,74,2,93,133,220,21,204,99,37,9,180,215,67,4,57,63,223,92,13,234,49,74,96,53,65,71,157,210,44,54,22,59,210,235,147,200,123,96,52,23,90,56,113,96,201,103,153,145,178,215,201,67,140,179,220,88,220,230,91,172,27,176,145,36,10,210,250,52,74,186,8,6,225,0,83,177,206,25,67,1,185,228,158,35,92,83,246,22,3,148,18,72,65,95,252,233,131,96,182,54,182,162,140,41,7,129,166,150,61,73,48,186,179,5,0,86,78,180,36,120,226,147,0,116,161,72,2,52,193,1,115,241,28,249,225,37,70,30,100,201,108,157,230,12,101,121,172,142,104,49,147,112,44,54,44,42,198,14,102,131,102,135,235,103,173,133,94,116,2,130,38,250,97,5,147,189,193,176,12,10,172,44,195,109,14,50,82,29,197,16,177,144,6,79,61,127,9,17,2,49,234,24,100,21,209,125,107,49,15,83,13,242,183,167,17,238,9,77,63,60,80,246,179,204,220,208,182,14,15,116,227,236,116,118,162,249,158,99,0,23,235,242,61,70,22,77,166,45,80,78,143,103,39,192,11,73,234,236,52,141,81,200,198,4,197,65,2,9,27,1