Use 'LED' to show AHRS status.

web/css/stratux.css

@@ -19,12 +19,28 @@ body
   max-width: 400px;
 }
 
-.setting
+#RY835AI_connected-container
 {
-  display: block;
+  display: table-cell;
+  vertical-align: middle;
 }
 
-.setting-element
+.led-red
 {
   display: inline-block;
+  width: 12px;
+  height: 12px;
+  background-color: #940;
+  border-radius: 50%;
+  box-shadow: #000 0 -1px 7px 1px, inset #600 0 -1px 9px, #F00 0 2px 12px;
+}
+
+.led-green
+{
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  background-color: #00FF00;
+  border-radius: 50%;
+  box-shadow: #000 0 -1px 7px 1px, inset #460 0 -1px 9px, #7D0 0 2px 12px;
 }

web/index.html

@@ -51,7 +51,9 @@
             </div>
             <div class="row">
               <label class="col-sm-6">AHRS:</label>
-              <span id="RY835AI_connected" class="col-sm-6">--</span>
+              <div id="RY835AI_connected-container" class="col-sm-6">
+                <div id="RY835AI_connected" class="led-red"></div>
+              </div>
             </div>
             <div class="row">
               <label class="col-sm-6">Uptime:</label>

web/js/stratux.js

@@ -1,5 +1,16 @@
 var socket;
 
+function setLEDstatus (ledElement, status) {
+  if(status) {
+    ledElement.removeClass('led-green');
+    ledElement.addClass('led-red');
+  }
+  else {
+    ledElement.removeClass('led-green');
+    ledElement.addClass('led-red');
+  }
+}
+
 function setConnectedClass (cssClass) {
   $('#connectedLabel').removeClass('label-success');
   $('#connectedLabel').removeClass('label-warning');
@@ -43,7 +54,7 @@ function connect() {
     $('#ES_messages_last_minute').text(status.ES_messages_last_minute);
     $('#ES_messages_max').text(status.ES_messages_max);
     $('#GPS_satellites_locked').text(status.GPS_satellites_locked);
-    $('#RY835AI_connected').text(status.RY835AI_connected);
+    setLEDstatus($('#RY835AI_connected'), status.RY835AI_connected);
     $('#Uptime').text(status.Uptime);
   };
 }