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