From 1963aa5c7a5ae643dd8efe51a07d36bd6820b601 Mon Sep 17 00:00:00 2001
From: PhyXTGears-1720 <phyxtgearspro@gmail.com>
Date: Thu, 25 Apr 2019 14:40:30 -0400
Subject: [PATCH] Improve connection indicator

---
 README.md    |  9 +++++++++
 index.html   | 16 +++++++++++++++-
 package.json |  2 +-
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 5937209..f1d640a 100644
--- a/README.md
+++ b/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.
 
diff --git a/index.html b/index.html
index b453e30..8fa3aa8 100644
--- a/index.html
+++ b/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";
diff --git a/package.json b/package.json
index fcbbb0a..8b3adea 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
         "email": "phyxtgearspro@gmail.com",
         "url": "http://phyxtgears.org"
     },
-    "version": "v0.3.0",
+    "version": "v0.4.0",
     "main": "main.js",
     "scripts": {
         "start": "electron .",