mirror of
https://github.com/s00500/ESPUI.git
synced 2024-12-22 19:30:50 +00:00
Feature: UI reinit on page visible
This commit is contained in:
parent
5ba42e3361
commit
3a905e646a
12
examples/gui/data/js/controls.js
vendored
12
examples/gui/data/js/controls.js
vendored
@ -83,6 +83,7 @@ function colorClass(colorId) {
|
||||
}
|
||||
|
||||
var websock;
|
||||
var websockConnected = false;
|
||||
|
||||
function restart() {
|
||||
$(document).add('*').off();
|
||||
@ -92,21 +93,30 @@ function restart() {
|
||||
}
|
||||
|
||||
function conStatusError() {
|
||||
websockConnected = false;
|
||||
$("#conStatus").removeClass("color-green");
|
||||
$("#conStatus").addClass("color-red");
|
||||
$("#conStatus").text("Error / No Connection (click me to retry)");
|
||||
$("#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');
|
||||
|
7
examples/gui/data/js/controls.min.js
vendored
7
examples/gui/data/js/controls.min.js
vendored
@ -2,9 +2,10 @@ const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const U
|
||||
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>";}
|
||||
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>"+
|
||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user