make nt tree toggle show button, add camera overlay

FRC-1721 · Mar 29, 2024 · 70c5497 · 70c5497
1 parent 4dcfd28
commit 70c5497
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 11 deletions.
diff --git a/src/asset/camera-overlay.png b/src/asset/camera-overlay.png
diff --git a/src/asset/cotton.mp3 b/src/asset/cotton.mp3
diff --git a/src/index.html b/src/index.html
@@ -35,8 +35,14 @@
         </div>
       </div>
       Dashboard version %baked_ver%
-      <img id="camera-error" src="asset/doh.png" alt=" " />
+      <!-- <img id="camera-error" class="hue-cycle" src="asset/doh.png" alt=" " /> -->
       <img id="camera" src="http://10.17.21.11:5800" alt=" " />
+      <img
+        id="camera-overlay"
+        class="hue-cycle"
+        src="asset/camera-overlay.png"
+        alt=" "
+      />
       <div id="thermal">
         <div id="thermal-title">TOP 10 THERMALS YOU *NEED* TO SEE!!</div>
         <div id="thermal-content"></div>
@@ -66,14 +72,15 @@
       </div>
       <div id="autonomous-selector"></div>
     </main>
-    <div id="nt-table">
+    <div id="nt-table" style="display: none">
       <div id="nt" class="nt-div disabled">
         <div class="nt-title" id="__title" onClick="ntToggle(this)">
           NetworkTables
         </div>
         <div class="nt-div-container" id="%2F"></div>
       </div>
     </div>
+    <div id="nt-toggler" onClick='$("#nt-table").toggle()'>NT Tree</div>
     <!--
          camera
          temps

diff --git a/src/nt.scss b/src/nt.scss
@@ -1,4 +1,13 @@
 #nt-table {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10000;
+    background-color: #282828;
+    overflow-y: scroll;
+
     & > * {
         font-size: 0.9rem !important;
         line-height: 1.5rem;
@@ -59,3 +68,19 @@
         }
     }
 }
+
+#nt-toggler {
+    z-index: 100000;
+    position: fixed;
+    cursor: pointer;
+    top: 0;
+    right: 0;
+    background-color: #504945;
+    border: 1px solid #665c54;
+    border-radius: 0 0 0 10px;
+    padding: 3px 5px;
+
+    &:hover {
+        background-color: #3c3836;
+    }
+}
diff --git a/src/style.scss b/src/style.scss
@@ -11,7 +11,8 @@ body {
     padding: 0;
     overflow: hidden;
     width: 1366px;
-    max-height: 100vh;
+    min-height: 528px;
+    max-height: 528px;
 }
 
 .spacer {
@@ -45,14 +46,14 @@ body {
 
 main {
     display: grid;
-    min-height: 528px;
-    max-height: 528px;
     grid-template:
-        "cam thermal swerve" 240px
         "cam thermal empty" auto
+        "cam thermal swerve" 240px
         "menu menu menu" 43px
         "autonomous autonomous autonomous" 43px
         / 647px auto 240px;
+    min-height: 528px;
+    max-height: 528px;
 }
 body.auto {
     main {
@@ -199,7 +200,7 @@ body.auto {
     grid-area: swerve;
     background: #3c3836;
     position: relative;
-    border-bottom: 1px solid #665c54;
+    border-top: 1px solid #665c54;
 
     &-actual,
     &-desired {
@@ -241,6 +242,13 @@ body.auto {
         width: 100%;
         z-index: 1;
     }
+
+    &-overlay {
+        z-index: 3;
+        grid-area: cam;
+        height: 100%;
+        width: 100%;
+    }
 }
 
 #thermal {
@@ -249,20 +257,20 @@ body.auto {
     background-color: #1d2021;
     border: 1px #665c54;
     border-style: none solid;
+    overflow-y: scroll;
+    max-height: 100%;
 
     &-title {
         background-color: #282828;
         padding: 8px 12px;
     }
 
     &-content {
-        overflow-y: scroll;
-        max-height: 100%;
         & > div {
             border-top: 1px solid #3c3836;
             display: flex;
             flex-direction: row;
-            padding: 3px 5px;
+            padding: 2px 4px;
             & > .thermal-name {
                 flex: 1;
             }
@@ -277,7 +285,7 @@ body.auto {
 #auto-mode {
     position: fixed;
     font-size: 10rem;
-    z-index: 100000;
+    z-index: 1000;
     width: 100vw;
 }