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