Dashboard things, Robot on field canvas (#16)

* added arm * added PID values * 1: why were none of these added before 2: most of these will most likely need to be updated * the PID values will need to be updated once we get the bot * its telling me these didn't commit so pushing them here * This is inital commit for auto all of the pathing starts in the deploy folder * removing and gitignoring some files that aren't needed * This is waiting on a fix from upstream for pathplannerlib? * Fix all for autonomous * Tidy container * This is for setting the conversion factor * Fix position converson factor * fixup! Fix position converson factor * New manual conversion factor is messy but seems to be working * Functions on the bot * Cleanup earlier from today * place square at robot x, y, postion TODO: check if orientation is correct * added entr to makefile * fixed styling on autonomous selector * This is weird, setting the right motors inverted to false fixes the auto spinning but they breaks the drivetrain into spinning * adding theta * fixed aut-sel styling, aut-sel selection, better robot pos on canvas, added second test autonomous selector option * Revert "fixed aut-sel styling, aut-sel selection, better robot pos on canvas, added second test autonomous selector option" This reverts commit 71edc6f. * Modify entrypoint to accept connection direct to rio, change kredcool color * fixed aut-sel styling, aut-sel selection, better robot pos on canvas, added second test autonomous selector option * place square at robot x, y, postion TODO: check if orientation is correct * added entr to makefile * fixed styling on autonomous selector * fixed aut-sel styling, aut-sel selection, better robot pos on canvas, added second test autonomous selector option * Revert "fixed aut-sel styling, aut-sel selection, better robot pos on canvas, added second test autonomous selector option" This reverts commit 71edc6f. * fixed aut-sel styling, aut-sel selection, better robot pos on canvas, added second test autonomous selector option * idk but somethings out of date * made autotonmous selector highlight based on nt, instead of checked radio input * fixed robot position on field canvas * added entr to readme * fixxed it being inverted but this shows another issue of it turning to the left * I should check if I have anything not commited before pushing * don't kill me joe * added pink switch (lila) * add d3 * added claw buttion command * fixed autonomous selector buttons * added epilepsy * Fix matchtime alerts * add physics support Todo: Not characterized, all these physics numbers are kinda just made up * use constants * added DashHash™ * IT WORKS * adding some pathing items * formatting * changed layout, added cameras, changed sass to scss * this makes the robot turn although it appears to snease or twich when it hits a point * this makes the robot turn although it appears to snease or twich when it hits a point * this is a good func for a top auto, also I don't know why and I don't want to know why this works * fixed robot position on canvas * added DashHash™ coloring * changed styling for sen-tables * fixed a error with a button causing the robot to crash * Add piecewise damping * adding a retracting and extending feature for the arm as well as a release feature for the claw * gameplan this is a very complex and not complex problem * some template and such * added back what was acidently dealeated * removing the last of the wrongness * I have a feeling I will be stuck here for a bit, it is erroring in super init * never will I not feel stupid * This should be tested but can't be due to no arm * removing unessasary files * this should ping code when something goes wrong but I am scared to test it * this have never worked and it still will not * if only there was a way to test remotely * we should remove the try statement once we have the real robot * This is good for basic * A complain that the drivers are having are that there isn't enough space for exponetal to ramping so this fixes that complain * fixing CANsparksucks * I can code and not put stuff in the wrong place * fixing issue with makefile * the encoder values were all messed up * some of these comments will need to be added in the future * 0.1 is causing issues so I changed them to 1 * my final commit of the night * remove duplicated code and edit styles --------- Co-authored-by: Lilapaige13 <[email protected]> Co-authored-by: kredcool <[email protected]> Co-authored-by: KenwoodFox <[email protected]> Co-authored-by: Dark5ter <[email protected]> Co-authored-by: KenwoodFox <[email protected]> Co-authored-by: Kredcool <[email protected]>
FRC-1721 · Feb 14, 2023 · 0269e26 · 0269e26
1 parent 4d72312
commit 0269e26
Show file tree

Hide file tree

Showing 12 changed files with 719 additions and 427 deletions.
diff --git a/dashboard/Makefile b/dashboard/Makefile
@@ -3,6 +3,7 @@
 
 ROOT := $(PWD)
 STAGEDIR := $(ROOT)/dist/
+DASH_HASH := $(shell git describe --tags --always)
 
 all: help
 
@@ -12,26 +13,36 @@ help:
 	@echo "   run           Shortcut for npm run run"
 	@echo "   clean         Shortucut for git clean -fdX"
 	@echo "   build         Shortucut for npm run build, which builds the javascript dist files"
+	@echo "   dev           Automatically runs build when file changes in src/ (requires 'entr')"
 	@echo "   stage         Prepares dist for deployment to the bot."
 	@echo "   deploy        Use scp to deploy the new html/js files to the nuc."
 	@echo
 
 build:
 	npm run build
+	sed -i -e 's/<p><\/p>/<script src="\/networktables\/networktables.js"><\/script><p><\/p>/g' dist/index.html
+	sed -i -e 's/<p><\/p>/<script src="\/networktables\/utils.js"><\/script><p><\/p>/g' dist/index.html
+	sed -i -e 's/<p><\/p>/<script src="\/networktables\/camera.js"><\/script>/g' dist/index.html
+	sed -i -e "s/idiot-dash-hash/$(DASH_HASH)/g" dist/index.html
+#<p>idiot</p>
 
 run:
 	npm run run
 
+# you need to install entr `paru -S entr` `pamac install entr`
+dev:
+	find src/ | entr sh -c 'make build'
+
 clean:
 	git clean -fdX
 
 stage: build
 	cp entrypoint.sh $(STAGEDIR)
 
 deploy: stage
-	@echo "======================================================================================="
+	@echo "═══════════════════════════════════════════════════════════════════════════════════════"
 	@echo "When prompted for a password, type 'dash' and press enter."
-	@echo "======================================================================================="
+	@echo "═══════════════════════════════════════════════════════════════════════════════════════"
 
 	# Transfer
 	scp -r $(STAGEDIR)/* [email protected]:/opt/dashboard

diff --git a/dashboard/README.md b/dashboard/README.md
@@ -2,9 +2,9 @@
 
 ## Getting Started
 
- - Make sure you have sed installed
- - Make sure Robot Simulation is running
- - Install npm
+-   Make sure you have sed installed
+-   Make sure Robot Simulation is running
+-   Install npm
 
 Install deps
 
@@ -21,6 +21,12 @@ npm run build
 make build
 ```
 
+Build automatically on file changed in src/ (requires 'entr', `paru -S entr` `pamac install entr`)
+
+```
+make dev
+```
+
 Run webpage
 
 ```shell

diff --git a/dashboard/package.json b/dashboard/package.json
@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "build": "parcel build src/index.html && sed -i -e 's/<p><\\/p>/<script src=\"\\/networktables\\/networktables.js\"><\\/script>/g' dist/index.html",
+    "build": "parcel build src/index.html",
     "run": "cd dist && python -m pynetworktables2js",
     "clean": "rm dist/*"
   },

diff --git a/dashboard/src/assets/error.png b/dashboard/src/assets/error.png
diff --git a/dashboard/src/assets/no_signal.png b/dashboard/src/assets/no_signal.png
diff --git a/dashboard/src/audioAlerts.js b/dashboard/src/audioAlerts.js
@@ -5,11 +5,12 @@ export function countDownAlerts(key, value) {
     /* Updates on every match time update */
 
     if (key.includes("MatchTime")) {
-        if (wavGlob[value] != undefined) { // If one of the globbed files matches
+        if (wavGlob[value] != undefined) {
+            // If one of the globbed files matches
             let audio = new Audio(wavGlob[value]); // Create the audio object
 
             // Play it!
-            audio.play().catch(function (DOMException) { });
+            audio.play().catch(function (DOMException) {});
         }
     }
 }
diff --git a/dashboard/src/d3.min.js b/dashboard/src/d3.min.js
diff --git a/dashboard/src/index.html b/dashboard/src/index.html
@@ -1,134 +1,126 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>1721 Dashboard</title>
-    <link rel="stylesheet" href="./style.sass" />
-    <link rel="shortcut icon" href="./assets/frc1721.svg" type="image/x-icon" />
-  </head>
-  <body>
-    <header class="header">
-      <img
-        src="./assets/frc1721.svg"
-        alt="Team 1721 Logo"
-        class="header-logo"
-      />
-      <img
-        src="./assets/frc1721.svg"
-        alt="Team 1721 Logo"
-        class="header-logo"
-      />
-      <img
-        src="./assets/frc1721.svg"
-        alt="Team 1721 Logo"
-        class="header-logo"
-      />
-      <p class="header-text">TEAM 1721 ---<>--- DASHBOARD</p>
-    </header>
-
-    <div class="main-wrapper">
-      <main>
-        <input
-          type="range"
-          id="sd-test"
-          class="dub-slider"
-          min="0"
-          max="4"
-          data-key="/SmartDashboard/Test/test"
+    <head>
+        <meta charset="utf-8" />
+        <title>1721 Dashboard</title>
+        <link rel="stylesheet" href="./style.scss" />
+        <link
+            rel="shortcut icon"
+            href="./assets/frc1721.svg"
+            type="image/x-icon"
         />
+    </head>
+    <body>
+        <header>
+            <img src="./assets/frc1721.svg" alt="Team 1721 Logo" />
+            <img src="./assets/frc1721.svg" alt="Team 1721 Logo" />
+            <img src="./assets/frc1721.svg" alt="Team 1721 Logo" />
+            <p class="header-text">TEAM 1721 ---<>--- DASHBOARD</p>
+            <div style="flex: 5"></div>
+            <label for="p-sw" id="p-sw-l">
+                <input type="checkbox" id="p-sw" />
+                <span id="p-sw-s"></span>
+            </label>
+        </header>
 
-        <div id="info-one">
-          <div class="table build-info">
-            <div class="table-info">
-              <div class="table-label">Build Date</div>
-              <div
-                class="table-area dub-text"
-                data-key="/SmartDashboard/BuildData/deploy-date"
-                id="build-date-area"
-              ></div>
-            </div>
-            <div class="table-info">
-              <div class="table-label">Build Host</div>
-              <div
-                class="table-area dub-text"
-                data-key="/SmartDashboard/BuildData/deploy-host"
-                id="build-host-area"
-              ></div>
-            </div>
-            <div class="table-info">
-              <div class="table-label">Builder</div>
-              <div
-                class="table-area dub-text"
-                data-key="/SmartDashboard/BuildData/deploy-user"
-                id="builder-area"
-              ></div>
-            </div>
-          </div>
-          <div class="table git-info">
-            <div class="table-info">
-              <div class="table-label">Git Branch</div>
-              <div
-                class="table-area dub-text"
-                data-key="/SmartDashboard/BuildData/git-branch"
-                id="git-branch-area"
-              ></div>
+        <main>
+            <div class="sen-tables">
+                <div class="table build-info">
+                    <div class="table-info">
+                        <div class="table-label">Build Date</div>
+                        <div
+                            class="table-area dub-text"
+                            data-key="/SmartDashboard/BuildData/deploy-date"
+                            id="build-date-area"
+                        ></div>
+                    </div>
+                    <div class="table-info">
+                        <div class="table-label">Build Host</div>
+                        <div
+                            class="table-area dub-text"
+                            data-key="/SmartDashboard/BuildData/deploy-host"
+                            id="build-host-area"
+                        ></div>
+                    </div>
+                    <div class="table-info">
+                        <div class="table-label">Builder</div>
+                        <div
+                            class="table-area dub-text"
+                            data-key="/SmartDashboard/BuildData/deploy-user"
+                            id="builder-area"
+                        ></div>
+                    </div>
+                </div>
+                <div class="table git-info">
+                    <div class="table-info">
+                        <div class="table-label">Git Branch</div>
+                        <div
+                            class="table-area dub-text"
+                            data-key="/SmartDashboard/BuildData/git-branch"
+                            id="git-branch-area"
+                        ></div>
+                    </div>
+                    <div class="table-info">
+                        <div class="table-label">Git Hash</div>
+                        <div
+                            class="table-area dub-text"
+                            data-key="/SmartDashboard/BuildData/git-desc"
+                            id="git-hash-area"
+                        ></div>
+                    </div>
+                    <div class="table-info">
+                        <div class="table-label">Dash Hash™</div>
+                        <div id="dash-hash" class="table-area">
+                            idiot-dash-hash
+                        </div>
+                    </div>
+                </div>
+                <div class="table nt-info">
+                    <div class="table-info">
+                        <div class="table-label">NT Websocket</div>
+                        <div id="connectstate" class="table-area">Unknown</div>
+                    </div>
+                    <div class="table-info">
+                        <div class="table-label">Robot State</div>
+                        <div id="robotstate" class="table-area">Unknown</div>
+                    </div>
+                    <div class="table-info">
+                        <div class="table-label">Address</div>
+                        <div id="robotAddress" class="table-area">
+                            Disconnected
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class="table-info">
-              <div class="table-label">Git Hash</div>
-              <div
-                class="table-area dub-text"
-                data-key="/SmartDashboard/BuildData/git-desc"
-                id="git-hash-area"
-              ></div>
-            </div>
-            <div class="table-info">
-              <div class="table-label">Test</div>
-              <div
-                class="table-area dub-text"
-                data-key="/SmartDashboard/Test/test"
-                id="ntmtst"
-              >
-                idiot
-              </div>
-            </div>
-          </div>
 
-          <div class="table nt-info">
-            <div class="table-info">
-              <div class="table-label">NT Websocket</div>
-              <div id="connectstate" class="table-area">Unknown</div>
-            </div>
-            <div class="table-info">
-              <div class="table-label">Robot State</div>
-              <div id="robotstate" class="table-area">Unknown</div>
-            </div>
-            <div class="table-info">
-              <div class="table-label">Address</div>
-              <div id="robotAddress" class="table-area">Disconnected</div>
-            </div>
-          </div>
-        </div>
+            <div id="aut-sel"></div>
 
-        <div id="aut-sel"></div>
+            <div class="spacer"></div>
 
-        <div id="info-field">
-          <div class="left-diff-container"></div>
-          <div id="info-field-canvas"></div>
-          <div class="right-diff-container"></div>
-        </div>
+            <div class="test1"></div>
+            <div class="test2"></div>
+
+            <div class="cameras">
+                <div id="cam1"></div>
+                <div class="cam1-text">10.17.21.11</div>
+                <div id="cam2"></div>
+                <div class="cam2-text">10.17.21.13</div>
+            </div>
+
+            <div id="field-canvas"></div>
+        </main>
 
         <div id="raw-nt">
-          <div id="raw-title">Raw NT Table</div>
-          <div id="nt">
-            <div class="table"></div>
-          </div>
+            <div id="raw-title">Raw NT Table</div>
+            <div id="nt">
+                <div class="table"></div>
+            </div>
         </div>
-      </main>
-    </div>
 
-    <script src="./jquery.js"></script>
-    <script src="./p5.min.js"></script>
-    <p></p>
-    <script src="./main.js" type="module"></script>
-  </body>
+        <script src="./jquery.js"></script>
+        <script src="./d3.min.js"></script>
+        <script src="./p5.min.js"></script>
+        <p></p>
+        <script src="./main.js" type="module"></script>
+    </body>
 </html>