Improve connection indicator

Author: PhyXTGears-1720

README.md

@@ -2,6 +2,7 @@
 A dedicated browser-based app for viewing the camera feed from the WPIlib Camera Server on the RoboRIO.
 
 # Building
+You can build the most recent version locally, but the latest release is also available as an executable in the Releases tab.
 ## Windows
 This project uses the [yarn](https://yarnpkg.com/en/) package manager to handle all dependencies. Simply run `yarn install` to gather all the dependencies, and run `yarn start` to test the app. To build for distribution, simply run `yarn dist` to build a single binary as well as an application installer.
 
@@ -10,6 +11,14 @@ This project uses the [yarn](https://yarnpkg.com/en/) package manager to handle
  * The application currently uses the same width, height, and screen position everytime on startup, and is intended for 1080p screens. This can be adjusted by editing the "main.js" file and modifying the arguments passed to the BrowserWindow object creator.
  * The camera, when connected, is given a HUD with a simple crosshair to improve precision.
 
+## Connection Indicator
+Color                       | Meaning
+--------------------------- | --------------------------------------
+Red                         | Waiting for connection
+Green                       | Connected
+Flashing Magenta and Yellow | Previously connected, now disconnected
+Yellow                      | Previously disconnected, now connected
+
 # License
 This project is licensed under the MIT License.
 

index.html

@@ -54,7 +54,7 @@
     const statusIndicator = document.getElementById("status-indicator");
     let stCtx = statusIndicator.getContext('2d');
     stCtx.canvas.width = 25;
-    stCtx.canvas.height = 200;
+    stCtx.canvas.height = 400;
 
     stCtx.fillStyle = "rgb(255, 0, 0)";
     stCtx.fillRect(0, 0, stCtx.canvas.width, stCtx.canvas.height);
@@ -77,6 +77,8 @@
 
     let source = "";
 
+    let disconnected = false;
+
     // Connect to the camera
     (async () => {
         let sourceMain = "http://10." + team_ip + ".2:1181"; // IP is team number dependent
@@ -119,10 +121,22 @@
 
         try {
             camCtx.drawImage(img, imageX, imageY);
+
+            if (disconnected) {
+                stCtx.fillStyle = "rgb(255, 255, 0)";
+                stCtx.fillRect(0, 0, stCtx.canvas.width, stCtx.canvas.height);
+
+                disconnected = false;
+            }
         } catch {
             img.src = source;
             console.log(source);
             console.log("stream unavailable");
+
+            disconnected = true;            
+
+            stCtx.fillStyle = "rgb(255, 0, 255)";
+            stCtx.fillRect(0, 0, stCtx.canvas.width, stCtx.canvas.height);
         }
 
         camCtx.globalCompositeOperation = "difference";

package.json

@@ -7,7 +7,7 @@
         "email": "[email protected]",
         "url": "http://phyxtgears.org"
     },
-    "version": "v0.3.0",
+    "version": "v0.4.0",
     "main": "main.js",
     "scripts": {
         "start": "electron .",