Skip to content

Commit 0c9792e

Browse files
benkfrabenkfra
committed
#39: Add ERROR-Overlay and automatic reconnect on lost connection
1 parent a01c262 commit 0c9792e

5 files changed

Lines changed: 142 additions & 14 deletions

File tree

‎src/WebVisuDev.pp.html‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,14 @@
2222
<div id="contain" style="position:relative">
2323
<canvas id="canvas" style="position:absolute;z-index:1" width="50" height="50"></canvas>
2424
</div>
25+
<!-- Bei Verbindungsproblemen wird dieses ERROR-Overlay eingeblendet -->
26+
<div id="errorcontainer" style="display:none;left:0;top:0;width:100%;height:100%;z-index:999;overflow:hidden;position:absolute;">
27+
<div style="background-color:black;filter:alpha(opacity=50);opacity:0.5;left:0;top:0;width:100%;height:100%;position:absolute;">&nbsp;</div>
28+
<div style="background-color:lightcoral;border:0.2em solid red;border-radius:0.5em;left:50%;top:50%;position:absolute;padding:1em;transform:translate(-50%,-50%);">
29+
<p align="center"><b>ERROR</b><br/>Connection to PLC lost!<br/>Please try to refresh your browser.<br/><br/>Automatic attempt to reconnect in <b id="errorcountdown">10</b> seconds...</p>
30+
</div>
31+
</div>
32+
2533
<script src="drawing.pp.js"></script>
2634
<script src="codesys.pp.js"></script>
2735
<script>
@@ -31,6 +39,8 @@
3139
Log("logOverlayWriteout enabled");
3240
}
3341

42+
Log("detected browser OS: " + getBrowserOS());
43+
3444
/*
3545
#ifdef USE_STEELSERIES
3646
*/
@@ -124,7 +134,7 @@
124134
}
125135

126136
// update wieder im Intervall aufrufen (definiert in drawings.js)
127-
setInterval(update, updateInterval);
137+
updateIntervalId = setInterval(update, updateInterval);
128138
</script>
129139
</body>
130140
</html>

‎src/codesys.pp.js‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -347,11 +347,8 @@ function parseClickInfo(myMedia, objId) {
347347
var expr_zoom = myMedia.find('expr-zoom');
348348
value = '';
349349
if (expr_zoom.length) {
350-
var expr_zoom_exp = expr_zoom.find('expr');
351-
if (expr_zoom_exp.length) {
352-
newvisu = expr_zoom_exp.find('placeholder').text();
353-
registerClickObj_Zoom(objId, newvisu);
354-
}
350+
exprZoom = parseExpression(expr_zoom);
351+
registerClickObj_Zoom(objId, exprZoom);
355352
}
356353
}
357354

@@ -449,6 +446,10 @@ function load_visu_success(content) {
449446
perfLoadEnd = new Date().getTime();
450447
perfLoad = perfLoadEnd - perfLoadStart;
451448

449+
// Die VISU wurde erfolgreich geladen, lass uns mal das ERROR-Overlay abschalten
450+
var errorcontainer = document.getElementById("errorcontainer");
451+
errorcontainer.style.display = "none";
452+
452453
var dynTextFile = '';
453454

454455
//Log("load_visu_success in " + perfLoad + "ms");
@@ -521,6 +522,9 @@ function load_visu_success(content) {
521522
if (visuUseDynamicText) {
522523
load_dyntextfile(plcDir + "/" + dynTextFile);
523524
}
525+
526+
// Das einmalige Aufrufen der Update-Funktion startet den zyklischen Ablauf
527+
update();
524528
}
525529

526530

@@ -992,6 +996,7 @@ function load_visu(filename) {
992996
success: load_visu_compressed_success,
993997
error: function (jqXHR, textStatus, errorThrown) {
994998
Log("load_visu " + textStatus + " " + errorThrown);
999+
errorStateEnable();
9951000
}
9961001
});
9971002
} else {
@@ -1003,6 +1008,7 @@ function load_visu(filename) {
10031008
success: load_visu_success,
10041009
error: function (jqXHR, textStatus, errorThrown) {
10051010
Log("load_visu " + textStatus + " " + errorThrown);
1011+
errorStateEnable();
10061012
}
10071013
});
10081014
}
@@ -1164,6 +1170,16 @@ function update_vars_std() {
11641170
perfUpdateEnd = new Date().getTime();
11651171
perfUpdate = perfUpdateEnd - perfUpdateStart;
11661172
//Log("update_vars finished in " + perfUpdate + "ms");
1173+
},
1174+
error: function (jqXHR, textStatus, errorThrown) {
1175+
Log("update vars failed " + textStatus + " " + errorThrown);
1176+
1177+
// Um die Reentrant-Sperre dieser Funktion aufzuheben:
1178+
perfUpdateStart = 0;
1179+
perfUpdateEnd = 0;
1180+
perfUpdate = 0;
1181+
1182+
errorStateEnable();
11671183
}
11681184
});
11691185
}
@@ -1312,6 +1328,10 @@ function update_vars_soap() {
13121328

13131329
perfUpdateEnd = new Date().getTime();
13141330
perfUpdate = perfUpdateEnd - perfUpdateStart;
1331+
},
1332+
error: function (jqXHR, textStatus, errorThrown) {
1333+
Log("update vars failed " + textStatus + " " + errorThrown);
1334+
errorStateEnable();
13151335
}
13161336
});
13171337

@@ -1438,7 +1458,9 @@ function onClick( e ) {
14381458
update();
14391459
}
14401460
} else if (event.isA == 'Zoom') {
1441-
switchToVisu(event.visu);
1461+
// Wir hoffen mal, dass die Expression wirklich einen String ausspuckt
1462+
var newVisu = evalExpression(event.exprZoom);
1463+
switchToVisu(newVisu);
14421464
// Bei "ZOOM" müssen wir abbrechen, da eine neue Visu geladen wird...
14431465
return;
14441466
} else if (event.isA == 'Edit') {

‎src/drawing.pp.js‎

Lines changed: 50 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,20 @@ var clickContext = null;
1616
// Dict (objID -> "ARRAY von Actions")
1717
var clickObject = {};
1818

19+
// Variablen, welche aus der Visu-XML gefüllt werden
1920
var visuName = "";
2021
var visuSizeX = 0;
2122
var visuSizeY = 0;
23+
24+
var currentVisuLoaded = "";
25+
2226
var visuCompressed = 0;
2327
var visuUseDynamicText = false;
2428
var visuDynTextDefaultLanguage = 'english';
2529

2630
// globale variablen
2731
var updateInterval = 500;
32+
var updateIntervalId;
2833
var plcDir = "../PLC";
2934
var startVisu = "plc_visu";
3035

@@ -38,7 +43,7 @@ var canvObjects = [];
3843
#endif
3944
*/
4045

41-
// performance-Z�hler
46+
// performance-Zaehler
4247
var perfWriteout = 0;
4348
var perfCount = 0;
4449
var perfLoadStart = 0;
@@ -58,9 +63,40 @@ var logOverlayText = "LogOverlay:\n";
5863
// use touch instead of mouse-down and -up
5964
var useTouchEvents = ('ontouchstart' in window);
6065

66+
var errorCountdown = 0;
67+
68+
function errorCountdownUpdate()
69+
{
70+
var errorcountdown = document.getElementById("errorcountdown");
71+
errorcountdown.innerHTML = errorCountdown;
72+
73+
if(errorCountdown<1) {
74+
switchToVisu(currentVisuLoaded);
75+
updateIntervalId = setInterval(update, updateInterval);
76+
} else {
77+
errorCountdown--;
78+
setTimeout(errorCountdownUpdate, 1000);
79+
}
80+
}
81+
82+
function errorStateEnable()
83+
{
84+
// ERROR-Overlay anzeigen
85+
var errorcontainer = document.getElementById("errorcontainer");
86+
errorcontainer.style.display = "block";
87+
88+
// zyklischen Update stoppen
89+
// dürfte wegen der Zeitüberschreitung aber ohnehin schon vom Browser
90+
// gestoppt sein.
91+
clearInterval(updateIntervalId);
92+
93+
// wir versuchen automatisch alle 10 Sekunden wieder neu zu starten
94+
errorCountdown = 10;
95+
errorCountdownUpdate();
96+
}
6197

6298
function switchToVisu(visu) {
63-
// alle Arrays und Variablenzuordnungen l�schen
99+
// alle Arrays und Variablenzuordnungen löschen
64100
visuVariables = {};
65101
drawObjects = [];
66102
clickObject = {};
@@ -84,11 +120,12 @@ function switchToVisu(visu) {
84120
#endif
85121
*/
86122

87-
88123
visuName = "";
89124
visuSizeX = 0;
90125
visuSizeY = 0;
91126

127+
currentVisuLoaded = visu;
128+
92129
// INIs neu laden
93130
load_ini(plcDir + "/visu_ini.xml");
94131

@@ -527,16 +564,16 @@ function registerClickObj_Tap(objId, variable, newval) {
527564
// ClickZoom
528565

529566
// constructor
530-
function clickObj_Zoom(visu) {
567+
function clickObj_Zoom(exprZoom) {
531568
this.isA = 'Zoom';
532-
this.visu = visu;
569+
this.exprZoom = exprZoom;
533570
}
534571

535-
function registerClickObj_Zoom(objId, visu) {
572+
function registerClickObj_Zoom(objId, exprZoom) {
536573
if(!(objId in clickObject)) {
537574
clickObject[objId] = []; // Array von Klick-Info
538575
}
539-
clickObject[objId].push(new clickObj_Zoom(visu));
576+
clickObject[objId].push(new clickObj_Zoom(exprZoom));
540577
}
541578

542579
// ****************************************************************************
@@ -787,6 +824,12 @@ function evalExpression(expr) {
787824
}
788825
}
789826
}
827+
} else if (expr[i].operation == 'placeholder') {
828+
//Log("evalExpression: placeholder: " + expr[i].value)
829+
// TODO: eigentlich sind "placeholder" Strings mit Dollar-Syntax:
830+
// <placeholder>$FUB$.farbwechsel</placeholder>
831+
// entsprechend müssten wir hier noch eine Textersetzung durchführen.
832+
result.push(expr[i].value);
790833
} else {
791834
Log("error: expression operation < " + expr[i].operation + " > unknown");
792835
}

‎src/release.sh‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
#! /bin/sh
22

3+
# svn ci -m "..."
4+
35
make clean
46
make ../release/WebVisu.html
57

@@ -10,3 +12,8 @@ make clean
1012
make ../release/WebVisuPlusConfig.html
1113

1214
make clean
15+
16+
# cd ..
17+
# svn ci -m "Release r87"
18+
# svn cp svn+ssh://benkfra@svn.code.sf.net/p/webvisu/code/trunk svn+ssh://benkfra@svn.code.sf.net/p/webvisu/code/tags/v087_20180602 -m "Tagging r87"
19+

‎src/utils.pp.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,4 +148,50 @@ function doPerfTest() {
148148
//perfTestEnd = new Date().getTime();
149149
//perfTest = perfTestEnd - perfTestStart;
150150
//Log("perTest replaceAll2=" + perfTest + "ms");
151+
}
152+
153+
function getBrowserOS() {
154+
var os = 'unknown';
155+
var ua = navigator.userAgent;
156+
157+
if (ua.match(/Win(dows )?NT 6\.0/)) {
158+
os = "Windows Vista";
159+
} else if (ua.match(/Win(dows )?(NT 5\.1|XP)/)) {
160+
os = "Windows XP";
161+
} else {
162+
if ((ua.indexOf("Windows NT 5.1") != -1) || (ua.indexOf("Windows XP") != -1)) {
163+
os = "Windows XP";
164+
} else if ((ua.indexOf("Windows NT 7.0") != -1) || (ua.indexOf("Windows NT 6.1") != -1)) {
165+
os = "Windows 7";
166+
} else if ((ua.indexOf("Windows NT 8.0") != -1) || (ua.indexOf("Windows NT 6.2") != -1)) {
167+
os = "Windows 8";
168+
} else if ((ua.indexOf("Windows NT 8.1") != -1) || (ua.indexOf("Windows NT 6.3") != -1)) {
169+
os = "Windows 8.1";
170+
} else if ((ua.indexOf("Windows NT 10.0") != -1) || (ua.indexOf("Windows NT 6.4") != -1)) {
171+
os = "Windows 10";
172+
} else if ((ua.indexOf("iPad") != -1) || (ua.indexOf("iPhone") != -1) || (ua.indexOf("iPod") != -1)) {
173+
os = "Apple iOS";
174+
} else if (ua.indexOf("Android" != -1)) {
175+
os = "Android Phone";
176+
} else if (ua.match(/Win(dows )?NT( 4\.0)?/)) {
177+
os = "Windows NT";
178+
} else if (ua.match(/Mac|PPC/)) {
179+
os = "Mac OS";
180+
} else if (ua.match(/Linux/)) {
181+
os = "Linux";
182+
} else if (ua.match(/(Free|Net|Open)BSD/)) {
183+
os = RegExp.$1 + "BSD";
184+
} else if (ua.match(/SunOS/)) {
185+
os = "Solaris";
186+
}
187+
}
188+
if (os.indexOf("Windows") != -1) {
189+
if (ua.indexOf('WOW64') > -1 || ua.indexOf('Win64') > -1) {
190+
os += ' 64bit';
191+
} else {
192+
os += ' 32bit';
193+
}
194+
}
195+
196+
return os;
151197
}

0 commit comments

Comments
 (0)