Add team number variable, add comments, reformat.

Author: NotQuiteApex

README.md

@@ -1,30 +1,19 @@
 # First Robotics Competition Camera Dashboard
-
 A dedicated browser-based app for viewing the camera feed from the WPIlib Camera Server on the RoboRIO.
 
-Most settings are currently hard-coded.
-
-- Fixed IP address.
-- Fixed position and size (1080p widescreen monitor preferred).
-- HUD crosshairs with color inversion to improve visibility.
-
+# Building
+## 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.
 
-# TODO
-
-- [ ] Add user setting for team number. Use to generate hostname (roboRIO-xxxx-FRC.local) or IP address (10.xx.xx.2).
-- [ ] Add user control to save position and size of app.
-- [ ] Load and restore save position and size from config file.
+# Notes
+ * The team number used to connect to the robot is hard-coded and can only be changed in the "index.html" file. Simply change the 1720 number in `const TEAM_NUMBER = "1720";` to use your team's number instead. The IP address of the RoboRIO is also assumed to be "10.TE.AM.2" with the camera server being on port 1181.
+ * 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.
 
 # License
 This project is licensed under the MIT License.
 
 # Acknowledgements
+This app wouldn't be possible without the gracious professionalism exhibited by a fellow team at the Indiana Tippecanoe event.  While struggling with latency in the LabView dashboard, this team advised us to use the web browser instead. That contribution evolved into the app provided here.
 
-This app wouldn't be possible without the gracious professionalism exhibited by
-a fellow team at the Indiana Tippecanoe event.  While struggling with latency
-in the LabView dashboard, this team advised us to use the web browser instead.
-That contribution evolved into the app provided here.
-
-Sadly, we cannot remember which team sparked this effort with their
-contribution, and hope to run into them again, and give them the credit they
-deserve.
+Sadly, we cannot remember which team sparked this effort with their contribution, and hope to run into them again, and give them the credit they deserve.

index.html

@@ -12,12 +12,14 @@
     </div>
 </body>
 
-<!------------ START SCRIPT ------------>
+<!-- JavaScript scripts -->
 <script>
+    /* Electron setups */
     const isReachable = require('is-reachable');
     let ipc = require("electron").ipcRenderer;
 
     function init() {
+        // Quit with the x button
         document.getElementById("close-button").addEventListener("click", function (e) {
             console.log("close");
             ipc.send("win.close");
@@ -30,13 +32,25 @@
     //     }
     // };
     init();
-    </script>
-    <script>
+</script>
+
+<script>
+    /* Camera drawing setups */
+
+    /* Change this number to your team number! */
+    const TEAM_NUMBER = "1720";
+
+    // Pad the team number for the IP address
+    let team_num = "0".repeat(4-TEAM_NUMBER.length) + TEAM_NUMBER;
+    let team_ip = team_num[0] + team_num[1] + "." + team_num[2] + team_num[3];
+
+    // The drawing plane
     const cameraCanvas = document.getElementById("camera-canvas");
     let camCtx = cameraCanvas.getContext('2d');
     camCtx.canvas.width = window.innerWidth;
     camCtx.canvas.height = window.innerHeight;
 
+    // Connection status. Red if not connected, green if connected.
     const statusIndicator = document.getElementById("status-indicator");
     let stCtx = statusIndicator.getContext('2d');
     stCtx.canvas.width = 25;
@@ -54,17 +68,21 @@
         height: height / 2.0,
     };
 
-    let img = new Image();
+    let img = new Image(); // This is where the camera feed goes
 
+    // Used for resizing and centering the image
     let scale = 1;
     let imageX = 0;
     let imageY = 0;
 
     let source = "";
 
+    // Connect to the camera
     (async () => {
-        let sourceMain = "http://10.17.20.2:1181";
-        let sourceUSB = "http://172.22.11.2:1181";
+        let sourceMain = "http://10." + team_ip + ".2:1181"; // IP is team number dependent
+        let sourceUSB = "http://172.22.11.2:1181";           // Always the same
+        
+        // Wait until first contact
         while (true) {
             if (await isReachable(sourceMain)) {
                 source = sourceMain + "/?action=stream";
@@ -77,6 +95,7 @@
         }
         setup(source);
 
+        // Green for go!
         stCtx.fillStyle = "rgb(0, 255, 0)";
         stCtx.fillRect(0, 0, stCtx.canvas.width, stCtx.canvas.height);
     })();