Merge pull request #48 from AndrewLester/master

Add pitch angle to target display
frc1418 · Feb 27, 2020 · 290894b · 290894b
2 parents 1b21158 + 0938026
commit 290894b
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 14 deletions.
diff --git a/src/css/ui.css b/src/css/ui.css
@@ -347,6 +347,10 @@ body.enabled > svg {
     transform: translate(-50%, -50%);
 }
 
+#target-pitch-angle {
+    text-anchor: middle;
+}
+
 .spinningRot {
     animation: spin-color-panel-Rot 0.5s linear infinite forwards;
 }

diff --git a/src/index.html b/src/index.html
@@ -147,22 +147,24 @@
     </svg>
     <svg id="spinning-svg" class="hidden"></svg>
     <svg id="failed-svg" class="hidden"></svg>
-    <svg id="target-svg" width="320" height="250">
+    <svg id="target-svg" width="320" height="350">
+        <!-- pitch angle to target -->
+        <text id="target-pitch-angle" x="150" y="100" font-size=30>No angle</text>
         <!--message-->
-        <text id="target-message" x="150" y="50" font-size=40>No Target</text>
+        <text id="target-message" x="150" y="150" font-size=40>No Target</text>
         <!--target icon-->
-        <rect class="target" x="136" y="80" width="8" height="150" />
-        <rect class="target" x="65" y="150" width="150" height="8" />
-        <circle class="target" style="stroke-width:5px" cx="140" cy="155" r="60" />
-        <circle class="target" style="stroke-width:5px" cx="140" cy="155" r="50" />
+        <rect class="target" x="136" y="180" width="8" height="150" />
+        <rect class="target" x="65" y="250" width="150" height="8" />
+        <circle class="target" style="stroke-width:5px" cx="140" cy="255" r="60" />
+        <circle class="target" style="stroke-width:5px" cx="140" cy="255" r="50" />
         <!--camera brackets-->
-        <text style="fill: black; stroke-width:0px" x="20" y="200" font-size=180>[</text>
-        <text style="fill: black; stroke-width:0px" x="215" y="200" font-size=180>]</text>
+        <text style="fill: black; stroke-width:0px" x="20" y="300" font-size=180>[</text>
+        <text style="fill: black; stroke-width:0px" x="215" y="300" font-size=180>]</text>
         <!--X and checkmark-->
-        <line class="target-X" x1="70" y1="90" x2="210" y2="220"></line>
-        <line class="target-X" x1="210" y1="90" x2="70" y2="220"></line>
-        <line class="target-check" x1="100" y1="165" x2="130" y2="195"></line>
-        <line class="target-check" x1="125" y1="195" x2="170" y2="125"></line>
+        <line class="target-X" x1="70" y1="190" x2="210" y2="320"></line>
+        <line class="target-X" x1="210" y1="190" x2="70" y2="320"></line>
+        <line class="target-check" x1="100" y1="265" x2="130" y2="295"></line>
+        <line class="target-check" x1="125" y1="295" x2="170" y2="225"></line>
     </svg>
     <div id="message-text"></div>
     <button id="message-button">Click for random message</button>

diff --git a/src/settings/window.json b/src/settings/window.json
@@ -1 +1 @@
-{"width":1366,"height":600}
+{"width":1366,"height":648}
diff --git a/src/ui.js b/src/ui.js
@@ -44,6 +44,7 @@ const cameraRefresh2 = document.getElementById('camera2-refresh');
 const ballsIndicatorBar = document.getElementsByClassName("balls-bar");
 const messageButton = document.getElementById("message-button");
 const messageText = document.getElementById("message-text");
+const pitchAngleText = document.getElementById('target-pitch-angle');
 const camera1OptionSelect = document.getElementById("camera1-options-select");
 const camera2OptionSelect = document.getElementById("camera2-options-select");
 
@@ -266,6 +267,19 @@ NetworkTables.addKeyListener('/components/intake/ballsCollected', (_, value, __)
     }
 });
 
+NetworkTables.addKeyListener('/limelight/ty', (_, value, __) => {
+    value = ~~(parseFloat(value) * 1000) / 1000;
+
+    //var target = NetworkTables.getValue('/components/launcher/target_rpm');
+    var target = 2.2;
+    var redDistance = 2;
+    pitchAngleText.textContent = value + "˚";
+
+    //sets text color to a color on an hsv gradient between red (0, 100, 90) and green (120, 100, 94)
+    let [r, g, b] = sampleHSVGradient(target, redDistance, value)
+    pitchAngleText.style.fill = 'rgb(' + r + ' , ' + g + ' , ' + b + ')'
+});
+
 function displayClass(classname, visible){
     if(visible){
         for (let element of document.getElementsByClassName(classname)) {
@@ -318,4 +332,4 @@ function hsvToRgb(h, s, v) {
     }
 
     return [r * 255, g * 255, b * 255];
-}
+}