mirror of
https://github.com/s00500/ESPUI.git
synced 2024-11-29 15:51:29 +00:00
1 line
5.8 KiB
JavaScript
1 line
5.8 KiB
JavaScript
|
const UI_TITEL=0;const UI_LABEL=1;const UI_BUTTON=2;const UI_SWITCHER=3;const UI_PAD=4;const UI_CPAD=5;const UPDATE_LABEL=6;const UPDATE_SWITCHER=7;const UI_SLIDER=8;const UPDATE_SLIDER=9;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(a){a=Number(a);switch(a){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 start(){websock=new WebSocket("ws://"+window.location.hostname+"/ws");websock.onopen=function(a){console.log("websock open");$("#conStatus").addClass("color-green");$("#conStatus").text("Connected")};websock.onclose=function(a){console.log("websock close");$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").text("Error / No Connection")};websock.onerror=function(a){console.log(a);$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").text("Error / No Connection")};websock.onmessage=function(b){console.log(b);var f=JSON.parse(b.data);var g=document.body;var a="";switch(f.type){case UI_TITEL:document.title=f.label;$("#mainHeader").html(f.label);break;case UI_LABEL:$("#row").append("<div class='two columns card tcenter "+colorClass(f.color)+"'><h5 id='"+f.id+"'>"+f.label+"</h5><hr /><span id='l"+f.id+"' class='label'>"+f.value+"</span></div>");break;case UI_BUTTON:$("#row").append("<div class='one columns card tcenter "+colorClass(f.color)+"'><h5>"+f.label+"</h5><hr/><button onmousedown='buttonclick("+f.id+", true)' onmouseup='buttonclick("+f.id+", false)' id='"+f.id+"'>"+f.value+"</button></div>");$("#"+f.id).on({touchstart:function(h){h.preventDefault();buttonclick(f.id,true)}});$("#"+f.id).on({touchend:function(h){h.preventDefault();buttonclick(f.id,false)}});break;case UI_SWITCHER:var d="<label id='sl"+f.id+"' class='switch checked'>";var c="<input type='checkbox' id='s"+f.id+"' onClick='switcher("+f.id+",null)' checked>";if(f.value=="0"){d="<label id='sl"+f.id+"' class='switch'>";c="<input type='checkbox' id='s"+f.id+"' onClick='switcher("+f.id+",null)' >"}$("#row").append("<div id='"+f.id+"' class='one columns card tcenter "+colorClass(f.color)+"'><h5>"+f.label+"</h5><hr/>"+d+"<i class='icon-ok'></i><i class='icon-remove'></i>"+c+"</label></div>");break;case UI_CPAD:a="<a class='confirm' onmousedown='padclick(CENTER, "+f.id+", true)' onmouseup='padclick(CENTER, "+f.id+", false)' href='#' id='pc"+f.id+"'>OK</a>";case UI_PAD:$("#row").append("<div class='two columns card tcenter "+colorClass(f.color)+"'><h5>"+f.label+"</h5><hr/><nav class='control'><ul><li><a onmousedown='padclick(FOR, "+f.id+", true)' onmouseup='padclick(FOR, "+f.id+", false)' href='#' id='pf"+f.id+"'>▲</a></li><li><a onmousedown='padclick(RIGHT, "+f.id+", true)' onmouseup='padclick(RIGHT, "+f.id+", false)' href='#' id='pr"+f.id+"'>▲</a></li><li><a onmousedown='padclick(LEFT, "+f.id+", true)' onmouseup='padclick(LEFT, "+f.id+", false)' href='#' id='pl"+f.id+"'>▲</a></li><li><a onmousedown='padclick(BACK, "+f.id+", true)' onmouseup='padclick(BACK, "+f.id+", false)' href='#' id='pb"+f.id+"'>▲</a></li></ul>"+a+"</nav></div>");$("#pf"+f.id).on({touchstart:function(h){h.preventDefault();padclick(FOR,f.id,true)}});$("#pf"+f.id).on({touchend:function(h){h.preventDefault();padclick(FOR,f.id,false)}});$("#pl"+f.id).on({touchstart:function(h){h.preventDefault();padclick(LEFT,f.id,true)}});$("#pl"+f.id).on({touchend:function(h){h.preventDefault();padclick(LEFT,f.id,false)}});$("#pr"+f.id).on({touchstart:function(h){h.preventDefault();padclick(RIGHT,f.id,true)}});$("#pr"+f.id).on({touchend:function(h){h.preventDefault();padclick(RIGHT,f.id,false)}});$("#pb"+f.id).on({touchstart:function(h)
|