Screen error message improved.

res/app/components/stf/screen/screen-directive.js

@@ -115,6 +115,10 @@ module.exports = function DeviceScreenDirective($document, ScalingService, Vendo
         scope.control.paste(e.clipboardData.getData('text/plain'))
       }
 
+      scope.retryLoadingScreen = function () {
+        maybeLoadScreen()
+      }
+
       function maybeLoadScreen() {
         if (!loading && scope.$parent.showScreen && scope.device) {
           loading = true

res/app/components/stf/screen/screen.css

@@ -1,13 +1,25 @@
 .screen-error {
   width: 100%;
-  background: rgba(0, 0, 0, 0.6);
+  height: 100%;
-  position: relative;
+  background: rgba(0, 0, 0, 0.7);
-  top: 50%;
-  transform: translateY(-50%);
   z-index: 100;
-  pointer-events: none; /* MUST HAVE */
+  position: absolute;
+  /*pointer-events: none; */
 }
 
 .screen-error .nothing-to-show {
   color: #eee;
 }
+
+.screen-error .screen-error-message {
+  position: relative;
+  top: 35%;
+  transform: translateY(-35%);
+  text-align: center;
+}
+
+.screen-error .screen-error-alert {
+  padding: 15px;
+  margin-bottom: 20px;
+  color: #ccc;
+}

res/app/components/stf/screen/screen.jade

@@ -1,5 +1,15 @@
 canvas(ng-show='device')
 div(ng-if='displayError').screen-error
-  nothing-to-show(message='{{"No device screen"|translate}}', icon='fa-eye-slash', ng-show='true')
+  .screen-error-message
+    nothing-to-show(message='{{"No device screen"|translate}}', icon='fa-eye-slash', ng-show='true')
+
+    // TODO: PING here to check for connectivity http://172.19.9.107:7401/api/v1/displays/0
+    .well
+      .screen-error-alert This might be caused by a network error, or you might be trying to access a secure view.
+
+    .well
+      button(ng-click='retryLoadingScreen()', style='text-align: center;').btn.btn-primary.btn-block
+        i.fa.fa-refresh
+        span(translate) Retry
 textarea(tabindex='-1')
 span.finger