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