Disable UI if server is not reachable.

Implements #1

Cura/webui/static/css/ui.css

@@ -55,4 +55,41 @@ table th.gcode_files_action, table td.gcode_files_action {
 
 #connection_ports, #connection_baudrates {
     width: 100%;
-}
+}
+
+#offline_overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+    z-index: 10000;
+    display: none;
+}
+
+#offline_overlay_background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #000000;
+    filter:alpha(opacity=50);
+    -moz-opacity:0.5;
+    -khtml-opacity: 0.5;
+    opacity: 0.5;
+}
+
+#offline_overlay_wrapper {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding-top: 60px;
+}
+
+#offline_overlay_wrapper .container {
+    margin: auto;
+}

Cura/webui/static/js/ui.js

@@ -352,6 +352,7 @@ function DataUpdater(connectionViewModel, printerStateViewModel, temperatureView
     var self = this;
 
     self.updateInterval = 500;
+    self.updateIntervalOnError = 10000;
     self.includeTemperatures = true;
     self.includeLogs = true;
 
@@ -375,6 +376,9 @@ function DataUpdater(connectionViewModel, printerStateViewModel, temperatureView
             dataType: "json",
             data: parameters,
             success: function(response) {
+                if ($("#offline_overlay").is(":visible"))
+                    $("#offline_overlay").hide();
+
                 self.printerStateViewModel.fromResponse(response);
                 self.connectionViewModel.fromStateResponse(response);
                 self.speedViewModel.fromResponse(response);
@@ -384,13 +388,16 @@ function DataUpdater(connectionViewModel, printerStateViewModel, temperatureView
 
                 if (response.log)
                     self.terminalViewModel.fromResponse(response);
+
+                setTimeout(self.requestData, self.updateInterval);
             },
             error: function(jqXHR, textState, errorThrows) {
-                //alert(textState);
+                // if the updated fails to communicate with the backend, we interpret this as a missing backend
+                if (!$("#offline_overlay").is(":visible"))
+                    $("#offline_overlay").show();
+                setTimeout(self.requestData, self.updateIntervalOnError);
             }
         });
-
-        setTimeout(self.requestData, self.updateInterval);
     }
 }
 var dataUpdater = new DataUpdater(connectionViewModel, printerStateViewModel, temperatureViewModel, speedViewModel, terminalViewModel);
@@ -522,6 +529,9 @@ $(function() {
             }
         });
 
+        //~~ Offline overlay
+        $("#offline_overlay_reconnect").click(function() {dataUpdater.requestData()});
+
         //~~ knockout.js bindings
 
         ko.applyBindings(connectionViewModel, document.getElementById("connection"));

Cura/webui/templates/index.html

@@ -212,6 +212,27 @@
                                 <button class="btn" type="button" id="terminal-send">Send</button>
                             </div>
                         </div>
+                        <div class="tab-pane" id="webcam">
+                            Here be webcam stuff
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="offline_overlay">
+            <div id="offline_overlay_background"></div>
+            <div id="offline_overlay_wrapper">
+                <div class="container">
+                    <div class="hero-unit">
+                        <h1>Server is offline</h1>
+                        <p>
+                            The server appears to be offline, at least I'm not getting any response from it. I'll try to reconnect
+                            automatically <strong>every 10 seconds</strong>, however you are welcome to try a manual reconnect
+                            anytime using the button below.
+                        </p>
+                        <p>
+                            <a class="btn btn-primary btn-large" id="offline_overlay_reconnect">Attempt to reconnect</a>
+                        </p>
                     </div>
                 </div>
             </div>