From a57b793d2c0e1b8bfd70d86d4e409686daf1f57a Mon Sep 17 00:00:00 2001
From: ErikBoesen <me@erikboesen.com>
Date: Tue, 3 May 2016 21:12:43 -0400
Subject: [PATCH] Initial content

---
 README.md |  9 +++++++--
 gyro.css  | 12 ++++++++++++
 gyro.html |  5 +++++
 gyro.js   | 41 +++++++++++++++++++++++++++++++++++++++++
 4 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 gyro.css
 create mode 100644 gyro.html
 create mode 100644 gyro.js

diff --git a/README.md b/README.md
index a7a90ec..ac5cbbd 100644
--- a/README.md
+++ b/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.
\ No newline at end of file
diff --git a/gyro.css b/gyro.css
new file mode 100644
index 0000000..bef40ca
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/gyro.html b/gyro.html
new file mode 100644
index 0000000..1d9f8f7
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/gyro.js b/gyro.js
new file mode 100644
index 0000000..53283ff
--- /dev/null
+++ b/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
\ No newline at end of file