Added auto reconnect to js code and included an error bar to indicate connection issues.

frontend/root/index.html

@@ -95,6 +95,9 @@
 
     <h1 class="display-4 text-center">Inverter GUI</h1>
     <div class="container" id="app">
+      <div class="alert alert-danger" role="alert" v-if="error.has_error">
+        {{ error.error_message }}
+      </div>
       <div class="row">
         <div class="col">
           <hr />
@@ -105,14 +108,18 @@
           <div class="card text-center">
             <div class="card-body">
               <h5 class="card-title">Output Current</h5>
-              <blockquote class="blockquote">{{ output_current }} A</blockquote>
+              <blockquote class="blockquote">
+                {{ state.output_current }} A
+              </blockquote>
             </div>
           </div>
 
           <div class="card text-center">
             <div class="card-body">
               <h5 class="card-title">Output Voltage</h5>
-              <blockquote class="blockquote">{{ output_voltage }} V</blockquote>
+              <blockquote class="blockquote">
+                {{ state.output_voltage }} V
+              </blockquote>
             </div>
           </div>
 
@@ -120,7 +127,7 @@
             <div class="card-body">
               <h5 class="card-title">Output Frequency</h5>
               <blockquote class="blockquote">
-                {{ output_frequency }} Hz
+                {{ state.output_frequency }} Hz
               </blockquote>
             </div>
           </div>
@@ -128,7 +135,9 @@
           <div class="card text-center">
             <div class="card-body">
               <h5 class="card-title">Output Power</h5>
-              <blockquote class="blockquote">{{ output_power }} W</blockquote>
+              <blockquote class="blockquote">
+                {{ state.output_power }} W
+              </blockquote>
             </div>
           </div>
         </div>
@@ -136,14 +145,18 @@
           <div class="card text-center">
             <div class="card-body">
               <h5 class="card-title">Input Current</h5>
-              <blockquote class="blockquote">{{ input_current }} A</blockquote>
+              <blockquote class="blockquote">
+                {{ state.input_current }} A
+              </blockquote>
             </div>
           </div>
 
           <div class="card text-center">
             <div class="card-body">
               <h5 class="card-title">Input Voltage</h5>
-              <blockquote class="blockquote">{{ input_voltage }} V</blockquote>
+              <blockquote class="blockquote">
+                {{ state.input_voltage }} V
+              </blockquote>
             </div>
           </div>
 
@@ -151,7 +164,7 @@
             <div class="card-body">
               <h5 class="card-title">Input Frequency</h5>
               <blockquote class="blockquote">
-                {{ input_frequency }} Hz
+                {{ state.input_frequency }} Hz
               </blockquote>
             </div>
           </div>
@@ -159,7 +172,9 @@
           <div class="card text-center">
             <div class="card-body">
               <h5 class="card-title">Input Power</h5>
-              <blockquote class="blockquote">{{ input_power }} W</blockquote>
+              <blockquote class="blockquote">
+                {{ state.input_power }} W
+              </blockquote>
             </div>
           </div>
         </div>
@@ -168,7 +183,7 @@
             <div class="card-body">
               <h5 class="card-title">Battery Current</h5>
               <blockquote class="blockquote">
-                {{ battery_current }} A
+                {{ state.battery_current }} A
               </blockquote>
             </div>
           </div>
@@ -177,7 +192,7 @@
             <div class="card-body">
               <h5 class="card-title">Battery Voltage</h5>
               <blockquote class="blockquote">
-                {{ battery_voltage }} V
+                {{ state.battery_voltage }} V
               </blockquote>
             </div>
           </div>
@@ -185,14 +200,18 @@
           <div class="card text-center">
             <div class="card-body">
               <h5 class="card-title">Battery Charge</h5>
-              <blockquote class="blockquote">{{ battery_charge }} %</blockquote>
+              <blockquote class="blockquote">
+                {{ state.battery_charge }} %
+              </blockquote>
             </div>
           </div>
 
           <div class="card text-center">
             <div class="card-body">
               <h5 class="card-title">Battery Power</h5>
-              <blockquote class="blockquote">{{ battery_power }} W</blockquote>
+              <blockquote class="blockquote">
+                {{ state.battery_power }} W
+              </blockquote>
             </div>
           </div>
         </div>
@@ -207,7 +226,7 @@
           <div class="card text-center">
             <div class="card-body">
               <h5 class="card-title">Mains</h5>
-              <span v-bind:class="[led_mains]"></span>
+              <span v-bind:class="[state.led_map.led_mains]"></span>
             </div>
           </div>
         </div>
@@ -215,7 +234,7 @@
           <div class="card text-center">
             <div class="card-body">
               <h5 class="card-title">Absorption</h5>
-              <span v-bind:class="[led_absorb]"></span>
+              <span v-bind:class="[state.led_map.led_absorb]"></span>
             </div>
           </div>
         </div>
@@ -223,7 +242,7 @@
           <div class="card text-center">
             <div class="card-body">
               <h5 class="card-title">Bulk</h5>
-              <span v-bind:class="[led_bulk]"></span>
+              <span v-bind:class="[state.led_map.led_bulk]"></span>
             </div>
           </div>
         </div>
@@ -231,7 +250,7 @@
           <div class="card text-center ">
             <div class="card-body">
               <h5 class="card-title">Float</h5>
-              <span v-bind:class="[led_float]"></span>
+              <span v-bind:class="[state.led_map.led_float]"></span>
             </div>
           </div>
         </div>
@@ -239,7 +258,7 @@
           <div class="card text-center">
             <div class="card-body">
               <h5 class="card-title">Inverter</h5>
-              <span v-bind:class="[led_inverter]"></span>
+              <span v-bind:class="[state.led_map.led_inverter]"></span>
             </div>
           </div>
         </div>
@@ -250,7 +269,7 @@
           <div class="card text-center">
             <div class="card-body">
               <h5 class="card-title">Overload</h5>
-              <span v-bind:class="[led_overload]"></span>
+              <span v-bind:class="[state.led_map.led_overload]"></span>
             </div>
           </div>
         </div>
@@ -258,7 +277,7 @@
           <div class="card text-center">
             <div class="card-body">
               <h5 class="card-title">Low Battery</h5>
-              <span v-bind:class="[led_bat_low]"></span>
+              <span v-bind:class="[state.led_map.led_bat_low]"></span>
             </div>
           </div>
         </div>
@@ -266,7 +285,7 @@
           <div class="card text-center">
             <div class="card-body">
               <h5 class="card-title">Temperature</h5>
-              <span v-bind:class="[led_over_temp]"></span>
+              <span v-bind:class="[state.led_map.led_over_temp]"></span>
             </div>
           </div>
         </div>

frontend/root/js/controller.js

@@ -1,69 +1,90 @@
-function loadContent() {
+var app;
-  var conn;
+const timeoutMax = 30000;
+const timeoutMin = 1000;
+var timeout = timeoutMin;
 
-  var app = new Vue({
+function loadContent() {
+  app = new Vue({
     el: "#app",
     data: {
-      output_current: null,
+      error: {
-      output_voltage: 0,
+        has_error: false,
-      output_frequency: 0,
+        error_message: ""
-      output_power: 0,
+      },
-      input_current: 0,
+      state: {
-      input_voltage: 0,
+        output_current: null,
-      input_frequency: 0,
+        output_voltage: 0,
-      input_power: 0,
+        output_frequency: 0,
-      battery_current: 0,
+        output_power: 0,
-      battery_voltage: 0,
+        input_current: 0,
-      battery_charge: 0,
+        input_voltage: 0,
-      battery_power: 0,
+        input_frequency: 0,
-      led_mains: "dot-off",
+        input_power: 0,
-      led_absorb: "dot-off",
+        battery_current: 0,
-      led_bulk: "dot-off",
+        battery_voltage: 0,
-      led_float: "dot-off",
+        battery_charge: 0,
-      led_inverter: "dot-off",
+        battery_power: 0,
-      led_overload: "dot-off",
+        led_map: [
-      led_bat_low: "dot-off",
+          { led_mains: "dot-off" },
-      led_over_temp: "dot-off"
+          { led_absorb: "dot-off" },
+          { led_bulk: "dot-off" },
+          { led_float: "dot-off" },
+          { led_inverter: "dot-off" },
+          { led_overload: "dot-off" },
+          { led_bat_low: "dot-off" },
+          { led_over_temp: "dot-off" }
+        ]
+      }
     }
   });
 
+  connect();
+}
+
+function connect() {
   if (window["WebSocket"]) {
-    conn = new WebSocket("ws://" + document.location.host + "/ws");
+    var conn = new WebSocket(getURI());
     conn.onclose = function(evt) {
-      var item = document.createElement("a");
+      app.error.has_error = true;
-      item.innerHTML = "<b>Connection closed.</b>";
+      app.error.error_message =
+        "Server not reachable. Trying to reconnect in " +
+        timeout / 1000 +
+        " second(s).";
+
+      console.log(app.error.error_message, evt.reason);
+      setTimeout(function() {
+        connect();
+      }, timeout);
+      timeout = timeout * 2;
+      if (timeout > timeoutMax) {
+        timeout = timeoutMax;
+      }
+    };
+
+    conn.onopen = function(evt) {
+      timeout = timeoutMin;
+      app.error.has_error = false;
     };
 
     conn.onmessage = function(evt) {
       var update = JSON.parse(evt.data);
-      console.log(update);
+      app.state = update;
-      app.output_current = update.output_current;
-      app.output_voltage = update.output_voltage;
-      app.output_frequency = update.output_frequency;
-      app.output_power = update.output_power;
-
-      app.input_current = update.input_current;
-      app.input_voltage = update.input_voltage;
-      app.input_frequency = update.input_frequency;
-      app.input_power = update.input_power;
-
-      app.battery_charge = update.battery_charge;
-      app.battery_voltage = update.battery_voltage;
-      app.battery_power = update.battery_power;
-      app.battery_current = update.battery_current;
-
-      leds = update.led_map;
-      app.led_mains = leds.led_mains;
-      app.led_absorb = leds.led_absorb;
-      app.led_bulk = leds.led_bulk;
-      app.led_float = leds.led_float;
-      app.led_inverter = leds.led_inverter;
-      app.led_overload = leds.led_overload;
-      app.led_bat_low = leds.led_bat_low;
-      app.led_over_temp = leds.led_over_temp;
     };
   } else {
-    var item = document.createElement("a");
+    app.error.has_error = true;
-    item.innerHTML = "<b>Your browser does not support WebSockets.</b>";
+    app.error.error_message = "Our browser does not support WebSockets.";
   }
 }
+
+function getURI() {
+  var loc = window.location,
+    new_uri;
+  if (loc.protocol === "https:") {
+    new_uri = "wss:";
+  } else {
+    new_uri = "ws:";
+  }
+  new_uri += "//" + loc.host;
+  new_uri += loc.pathname + "ws";
+  return new_uri;
+}