GUI -- Added 'mask' layer to alert user of loss of websocket connection.
Change-Id: I13f4cb0176936ec1a7db4efa58e5ad0e7ac9db15
Showing
2 changed files
with
40 additions
and
6 deletions
... | @@ -146,3 +146,24 @@ | ... | @@ -146,3 +146,24 @@ |
146 | border: 0; | 146 | border: 0; |
147 | } | 147 | } |
148 | 148 | ||
149 | +/* Web Socket Closed Mask (starts hidden) */ | ||
150 | + | ||
151 | +#topo-mask { | ||
152 | + display: none; | ||
153 | + position: absolute; | ||
154 | + top: 0; | ||
155 | + left: 0; | ||
156 | + width: 10000px; | ||
157 | + height: 8000px; | ||
158 | + z-index: 5000; | ||
159 | + background-color: rgba(0,0,0,0.75); | ||
160 | + padding: 60px; | ||
161 | +} | ||
162 | + | ||
163 | +#topo-mask p { | ||
164 | + margin: 8px 20px; | ||
165 | + color: #ddd; | ||
166 | + font-size: 14pt; | ||
167 | + font-style: italic; | ||
168 | +} | ||
169 | + | ... | ... |
... | @@ -151,6 +151,7 @@ | ... | @@ -151,6 +151,7 @@ |
151 | debug: false | 151 | debug: false |
152 | }, | 152 | }, |
153 | webSock, | 153 | webSock, |
154 | + sid = 0, | ||
154 | deviceLabelIndex = 0, | 155 | deviceLabelIndex = 0, |
155 | hostLabelIndex = 0, | 156 | hostLabelIndex = 0, |
156 | detailPane, | 157 | detailPane, |
... | @@ -169,7 +170,8 @@ | ... | @@ -169,7 +170,8 @@ |
169 | nodeG, | 170 | nodeG, |
170 | linkG, | 171 | linkG, |
171 | node, | 172 | node, |
172 | - link; | 173 | + link, |
174 | + mask; | ||
173 | 175 | ||
174 | // ============================== | 176 | // ============================== |
175 | // For Debugging / Development | 177 | // For Debugging / Development |
... | @@ -193,10 +195,6 @@ | ... | @@ -193,10 +195,6 @@ |
193 | 195 | ||
194 | function testMe(view) { | 196 | function testMe(view) { |
195 | view.alert('test'); | 197 | view.alert('test'); |
196 | - detailPane.show(); | ||
197 | - setTimeout(function () { | ||
198 | - detailPane.hide(); | ||
199 | - }, 3000); | ||
200 | } | 198 | } |
201 | 199 | ||
202 | function abortIfLive() { | 200 | function abortIfLive() { |
... | @@ -1059,6 +1057,7 @@ | ... | @@ -1059,6 +1057,7 @@ |
1059 | webSock.ws = new WebSocket(webSockUrl()); | 1057 | webSock.ws = new WebSocket(webSockUrl()); |
1060 | 1058 | ||
1061 | webSock.ws.onopen = function() { | 1059 | webSock.ws.onopen = function() { |
1060 | + noWebSock(false); | ||
1062 | }; | 1061 | }; |
1063 | 1062 | ||
1064 | webSock.ws.onmessage = function(m) { | 1063 | webSock.ws.onmessage = function(m) { |
... | @@ -1070,6 +1069,7 @@ | ... | @@ -1070,6 +1069,7 @@ |
1070 | 1069 | ||
1071 | webSock.ws.onclose = function(m) { | 1070 | webSock.ws.onclose = function(m) { |
1072 | webSock.ws = null; | 1071 | webSock.ws = null; |
1072 | + noWebSock(true); | ||
1073 | }; | 1073 | }; |
1074 | }, | 1074 | }, |
1075 | 1075 | ||
... | @@ -1089,7 +1089,9 @@ | ... | @@ -1089,7 +1089,9 @@ |
1089 | 1089 | ||
1090 | }; | 1090 | }; |
1091 | 1091 | ||
1092 | - var sid = 0; | 1092 | + function noWebSock(b) { |
1093 | + mask.style('display',b ? 'block' : 'none'); | ||
1094 | + } | ||
1093 | 1095 | ||
1094 | // TODO: use cache of pending messages (key = sid) to reconcile responses | 1096 | // TODO: use cache of pending messages (key = sid) to reconcile responses |
1095 | 1097 | ||
... | @@ -1273,6 +1275,11 @@ | ... | @@ -1273,6 +1275,11 @@ |
1273 | 1275 | ||
1274 | } | 1276 | } |
1275 | 1277 | ||
1278 | + | ||
1279 | + function para(sel, text) { | ||
1280 | + sel.append('p').text(text); | ||
1281 | + } | ||
1282 | + | ||
1276 | // ============================== | 1283 | // ============================== |
1277 | // View life-cycle callbacks | 1284 | // View life-cycle callbacks |
1278 | 1285 | ||
... | @@ -1367,6 +1374,12 @@ | ... | @@ -1367,6 +1374,12 @@ |
1367 | .on('tick', tick); | 1374 | .on('tick', tick); |
1368 | 1375 | ||
1369 | network.drag = d3u.createDragBehavior(network.force, selectCb, atDragEnd); | 1376 | network.drag = d3u.createDragBehavior(network.force, selectCb, atDragEnd); |
1377 | + | ||
1378 | + // create mask layer for when we lose connection to server. | ||
1379 | + mask = view.$div.append('div').attr('id','topo-mask'); | ||
1380 | + para(mask, 'Oops!'); | ||
1381 | + para(mask, 'Web-socket connection to server closed...'); | ||
1382 | + para(mask, 'Try refreshing the page.'); | ||
1370 | } | 1383 | } |
1371 | 1384 | ||
1372 | function load(view, ctx, flags) { | 1385 | function load(view, ctx, flags) { | ... | ... |
-
Please register or login to post a comment