Initial content

README.md

@@ -1,2 +1,7 @@
-# driverstationjs-gyro
-A gyroscope widget addon for DriverStationJS.
+# Gyroscope Widget addon for FRC Dashboard
+Live updating, minimal gyro widget. Supports resetting to zero on click for calibration.
+
+## Installation
+1. Copy the contents of `gyro.html` to wherever in the dashboard you desire.
+2. Copy the contents of `gyro.css` to `style.css` in the dashboard. Of course, you can put it anywhere else you would normally put CSS.
+3. Copy the sections of `gyro.js` to where the comments above each section say they should go.

gyro.css

@@ -0,0 +1,12 @@
+#gyro {
+    width: 175px;
+    height: 175px;
+    border: solid 2px black;
+    border-radius: 50%;
+    z-index: 50;
+    margin-left: 30px;
+    margin-top: 15px;
+}
+#gyroArm {
+    transform-origin: bottom;
+}

gyro.html

@@ -0,0 +1,5 @@
+<svg id="gyro">
+    <circle id="gyroCircle" cx="85" cy="85" r="50" stroke="black" />
+    <rect id="gyroArm" x="80" y="5" width="10" height="80" stroke="black" />
+    <text id="gyroNumber" x="90" y="115" fill="black">0º</text>
+</svg>

gyro.js

@@ -0,0 +1,41 @@
+// This should be added inside the definition of the 'ui' object at the starting of ui.js.
+
+    gyro: {
+        container: document.getElementById('gyro'),
+        val: 0,
+        offset: 0,
+        visualVal: 0,
+        arm: document.getElementById('gyroArm'),
+        number: document.getElementById('gyroNumber'),
+        button: document.getElementById('gyroButton')
+    },
+
+// End section
+
+
+
+// Copy this portion of the code into the large switch statement in the onValueChanged function
+
+case '/SmartDashboard/Drive/NavX | Yaw': // Gyro rotation
+    ui.gyro.val = value;
+    ui.gyro.visualVal = Math.floor(ui.gyro.val - ui.gyro.offset);
+    if (ui.gyro.visualVal < 0) { // Corrects for negative values
+        ui.gyro.visualVal += 360;
+    }
+    ui.gyro.arm.style.transform = ('rotate(' + ui.gyro.visualVal + 'deg)');
+    ui.gyro.number.innerHTML = ui.gyro.visualVal + 'º';
+    break;
+
+// End section
+
+
+
+// Add this at the bottom of ui.js with the other listeners.
+// You can skip this part if you don't want the gyro to have reset on click functionality.
+
+ui.gyro.container.addEventListener('click', function() {
+	ui.gyro.offset = ui.gyro.val;
+    onValueChanged('/SmartDashboard/Drive/NavX | Yaw', ui.gyro.val);
+});
+
+// End section