add swerve visual svg

FRC-1721 · Jan 20, 2024 · f052320 · f052320
1 parent 854ffc8
commit f052320
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 3 deletions.
diff --git a/dashboard/src/index.html b/dashboard/src/index.html
@@ -13,13 +13,24 @@
             <div class="cameras">
                 <!--<img src="asset/doh.png" alt="" />
                 <img src="asset/doh.png" alt="" />-->
-                <canvas id="cool" width="430" height="300"></canvas>
+                <!--<canvas id="cool" width="430" height="300"></canvas>-->
+            </div>
+            <div class="swerve">
+                <div class="swerve-row">
+                    <!--FL-->
+                    <!--FR-->
+                </div>
+                <div class="swerve-row">
+                    <!--RL-->
+                    <!--RR-->
+                </div>
+                <!-- makefile inserts swerve.svg inline here -->
             </div>
             <script src="d3.min.js"></script>
             <script src="jquery.min.js"></script>
             <p></p>
             <script src="main.js"></script>
-            <script src="canvas.js"></script>
+            <!--<script src="canvas.js"></script>-->
             <div id="nt-table"></div>
         </main>
         <!--

diff --git a/dashboard/src/main.js b/dashboard/src/main.js
@@ -72,4 +72,10 @@ function onValueChanged(key, value, isNew) {
             "/SmartDashboard/Autonomous/options"
         );
     }
+
+    if (key.includes("/SmartDashboard/Swerve/")) {
+        wheel = key.split("/").at(-1);
+        console.log(wheel);
+        $("#" + wheel).css("transform", "rotate(" + value + "deg)");
+    }
 }
diff --git a/dashboard/src/style.scss b/dashboard/src/style.scss
@@ -13,13 +13,14 @@ body {
 
 html {
     transform-origin: center;
-    transform: scale(0.65) rotate(30deg);
+    // transform: scale(0.65) rotate(30deg);
 }
 
 * {
     font-family: "FiraCode Nerd Font";
     color: #ebdbb2;
     font-size: 20px;
+    box-sizing: border-box;
 }
 
 body {
@@ -52,3 +53,24 @@ main {
     margin: 0.5rem;
     padding: 0.5rem;
 }
+
+.swerve {
+    width: 320px;
+    height: 320px;
+    padding: 25px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background: #3c3836;
+
+    &-row {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+}
+
+.wheel {
+    height: 120px;
+    width: 120px;
+}