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