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").text("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,149,41,243,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,134,63,50,83,23,44,180,182,54,9,180,132,1,39,249,226,217,119,223,188,126,211,173,152,149,153,94,144,18,243,206,112,124,207,185,53,58,137,239,246,5,171,215,136,184,62,254,197,139,188,165,231,123,236,211,0,4,31,192,67,119,222,202,252,170,236,129,23,47,190,82,78,111,173,61,215,197,196,186,75,35,194,195,153,194,170,40,165,234,96,250,112,11,15,99,47,98,152,64,97,233,219,116,77,71,172,169,55,171,185,52,133,219,211,16,218,4,239,180,247,120,121,13,207,152,153,198,46,234,180,219,70,99,231,17,55,216,181,252,192,65,156,64,107,29,68,140,160,13,110,24,237,93,100,100,9,16,144,32,196,196,86,68,77,188,101,188,230,73,20,248,24,102,127,0,64,169,169,113,61,227,112,12,235,98,45,163,152,186,46,203,193,44,159,24,141,113,119,159,163,38,178,243,24,110,66,17,200,149,115,182,128,134,185,236,1,52,46,120,24,97,131,163,8,125,192,135,48,120,225,186,136,33,251,191,215,211,73,43,68,20,74,12,94,180,184,76,190,197,118,154,8,203,192,253,36,100,14,140,48,181,97,31,72,182,86,174,222,98,159,66,156,108,174,234,72,239,164,115,153,199,124,128,226,122,62,90,98,31,156,110,60,219,32,143,92,98,228,98,106,36,5,159,41,88,249,253,77,221,8,58,124,22,236,15,160,142,66,8,178,107,234,61,215,219,130,83,33,172,182,193,118,1,63,24,226,13,137,52,216,2,93,141,73,166,154,222,200,157,23,98,13,49,182,26,186,113,222,91,191,209,60,215,54,244,134,120,225,185,92,152,12,4,147,134,222,107,175,223,128,30,212,244,121,47,10,17,17,250,126,126,130,98,32,38,104,226,239,203,29,69,97,138,180,69,126,140,57,18,159,127,222,107,3,235,115,189,108,163,188,207,28,48,18,178,227,81,70,214,216,4,38,45,99,198,160,240,33,105,130,56,194,80,139,196,54,164,76,108,63,102,206,208,166,198,51,223,50,148,114,28,62,160,42,171,223,168,245,110,234,19,137,144,121,133,59,192,80,19,146,157,144,5,177,179,22,123,147,209,201,146,218,186,195,173,144,98,190,61,93,200,51,10,234,32,79,40,1,105,10,218,251,253,3,216,224,232,71,33,75,43,