mirror of
https://github.com/s00500/ESPUI.git
synced 2024-11-16 19:10:54 +00:00
41 lines
7.6 KiB
JavaScript
41 lines
7.6 KiB
JavaScript
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);}} |