diff --git a/examples/gui/data/js/controls.js b/examples/gui/data/js/controls.js index 748caa2..359d2c7 100644 --- a/examples/gui/data/js/controls.js +++ b/examples/gui/data/js/controls.js @@ -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'); diff --git a/examples/gui/data/js/controls.min.js b/examples/gui/data/js/controls.min.js index d965e12..123ac5b 100644 --- a/examples/gui/data/js/controls.min.js +++ b/examples/gui/data/js/controls.min.js @@ -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("
"+data.label+"

"+data.value+"
");break;case UI_BUTTON:$('#row').append("
"+data.label+"

");$('#'+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="