README revamp, getting ready for Electron integration

README.md

@@ -1,65 +1,39 @@
-# [FRC Dashboard](https://frcdashboard.github.io)
-FRC Dashboard is a fully customizable web-based dashboard for [FIRST Robotics Competition (FRC)](http://firstinspires.org/robotics/frc).
+# FRC Dashboard
+FRC Dashboard is a fully customizable dashboard for [FIRST Robotics Competition (FRC)](http://firstinspires.org/robotics/frc) which is based on web languages (JavaScript/CSS/HTML). It's completely legal for competition, and can be used to give your secondary (or primary) operator significantly richer control of your robot.
 
-![Red theme](screenshots/red.png)
-![Blue theme](screenshots/blue.png)
-![Light theme](screenshots/light.png)
-![Dark theme](screenshots/dark.png)
-
-__Contributions are VERY welcome! Please feel free to open a pull request or issue with improvements or a new feature.__
-
-* Completely legal for competition as it works alongside standard DriverStation
-* Web browser interface provides richer control interface for secondary robot operator
-  * Works with or without touchscreen
-* Lots of code commenting to help you easily understand code and add your robot's functions
-* Inbuilt camera streaming system, SVG gyroscope, encoder control, and example buttons
-* Lots of addons to easily create new dashboard widgets for your own use!
-
-## Training
-FRC Dashboard is full of comments and is designed to be easy to understand. However, if you need some help, check out [the official training repository.](https://github.com/FRCDashboard/training).
+This system is designed to be 100% accessible, tweakable, and expandable. To help in this aim, the code is rigorously documented with thousands of inline comments and [a set of training exercises](https://github.com/FRCDashboard/training). In addition, the base system comes with several functioning example widgets and features, and [many addons](https://github.com/FRCDashboard?query=addon-) have been created to speed up the development of your team's dashboard.
 
-## Setting up
+__Contributions are VERY welcome! Please feel free to open a pull request or issue!__
 
-* For the camera to work, you must change the source in `index.html` to the IP of your live camera feed. This may take some tweaking depending on how your camera stream works. We use and recommend [MJPG Streamer](https://github.com/jacksonliam/mjpg-streamer).
-* It is recommended that you close the top panel of the FRC DriverStation to make room for a sized-down Chrome window.
+![Red theme](screenshots/red.png)
 
-## Running the code
+## Using the Dashboard
 
 ### Dependencies
+* Python 3 (__MUST be 3, not 2!__)
+* pynetworktables2js (`pip3 install pynetworktables2js`, or, if you don't have administrator privileges, put `--user` at the end of that command.)
 
-Python 3 must be installed!
-
-Make sure you have pynetworktables2 installed:
-
-    pip3 install pynetworktables2js
-
-(If you don't have administrator privileges, put `--user` at the end of that command.)
-
-### Start dashboard server
+### Setup
+* For the camera to work, you must change the source in `style.css` to the IP of your live camera feed.
 
-Run this command:
+### Running
+1. Connect to your robot's network. (If you're just testing the dashboard and don't currently need to use it with the robot, you can skip this step.)
+2. Start dashboard server:
 
-    python3 dashboardServer.py
+        python3 dashboardServer.py
 
-### Open dashboard
-
-Open Chrome and go to:
-
-    http://localhost:8888
-
-If you're on Windows, you can open `launch.bat`, which will start the server and open Chrome.
-
-## Addons
-
-There are several prebuilt addons for FRC Dashboard. You can find a full list on the [FRC Dashboard website](https://frcdashboard.github.io) or on the [FRC DB GitHub page](https://github.com/FRCDashboard).
+3. View dashboard at `http://localhost:8888`.
+4. It is recommended that you close the top panel of the FRC DriverStation to make room for the dashboard.
 
 ## Authors
-
-* This library is primarily maintained by [Erik Boesen](https://github.com/ErikBoesen).
+* [Erik Boesen](https://github.com/ErikBoesen) is the primary
 * [FRC Team 1418](https://github.com/frc1418) used earlier versions of this code in 2015 and 2016.
-* [Leon Tan](https://github.com/lleontan) led the original 1418 UI team and coded the first iteration of the UI and pynetworktables2js
-* [Dustin Spicuzza](https://github.com/virtuald), 1418 mentor and head of the [RobotPy](https://github.com/robotpy) project.
+* [Leon Tan](https://github.com/lleontan) led the original 1418 UI team, coded pynetworktables2js, and developed the original web-browser-based UI which was later developed into FRC Dashboard.
+* [Dustin Spicuzza](https://github.com/virtuald) mentored team 1418 through much of this technology's genesis and leads the [RobotPy](https://github.com/robotpy) project.
 
 ## License
-
 This software is licensed under the `Apache 2.0` license. Basically, do whatever you want, as long as you give credit to the [original source](https://github.com/FRCDashboard/FRCDashboard), and keep the license with it. More information in `LICENSE`.
+
+![Blue theme](screenshots/blue.png)
+![Light theme](screenshots/light.png)
+![Dark theme](screenshots/dark.png)

index.html

@@ -11,7 +11,7 @@
     <!-- Clock that shows up in top left -->
     <div id="timer">2:15</div>
     <header>
-        <!-- Tells whether robot is connected to UI. -->
+        <!-- Tells whether robot is connected to dashboard. -->
         <div id="robot-state">Unknown state</div>
         <button id="tuning-button">Tuning</button>
     </header>
@@ -23,7 +23,7 @@
         <button id="set">Set</button>
         <button id="get">Get</button>
     </div>
-    <!-- The main body of the UI, by default contains the gyro monitor and the robot diagram -->
+    <!-- The main body of the dashboard, by default contains the gyro monitor and the robot diagram -->
     <article>
         <!-- Gyroscope -->
         <svg id="gyro">
@@ -43,6 +43,7 @@
             <rect x="60" y="380" width="250" height="30" />
         </svg>
     </article>
+    <!-- The sidebar of the dashboard. Designed for smaller control elements like selection boxes and small buttons. -->
     <aside>
         <!-- Example button which toggles /SmartDashboard/exampleValue NetworkTables value.
             The <p> below then says the value. -->

ui.js

@@ -44,7 +44,7 @@ function onRobotConnection(connected) {
 }
 
 function onValueChanged(key, value, isNew) {
-	// Sometimes, NetworkTables will pass strings instead of bools. This corrects for that.
+	// Sometimes, NetworkTables will pass booleans as strings. This corrects for that.
 	if (value == 'true') {
 		value = true;
 	} else if (value == 'false') {