works with bootstrap

Frc5572 · Oct 12, 2023 · b0e3a88 · b0e3a88
1 parent e863165
commit b0e3a88
Show file tree

Hide file tree

Showing 11 changed files with 228 additions and 104 deletions.
diff --git a/simgui.json b/simgui.json
@@ -33,6 +33,12 @@
   "NetworkTables": {
     "transitory": {
       "Shuffleboard": {
+        "Auto": {
+          "Auto Chooser": {
+            "open": true
+          },
+          "open": true
+        },
         "Main Driver": {
           "Next Position": {
             "open": true

diff --git a/src/main/deploy/nodeselector/auto.html b/src/main/deploy/nodeselector/auto.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <!--
+      Copyright (c) 2023 FRC 6328
+      http://github.com/Mechanical-Advantage
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file at
+      the root directory of this project.
+    -->
+
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  <link rel="stylesheet" href="./css/style.css">
+  <link rel="stylesheet" href="./css/bootstrap.min-5.2.3.css">
+  <script src="./js/jquery-3.7.1.min.js"></script>
+  <script src="./js/bootstrap.bundle-5.2.3.min.js"></script>
+  <script src="./js/index.js" type="module"></script>
+  <title>Node Selector &mdash; Banana Split</title>
+</head>
+
+<body>
+  <select id="autoChooser"></select>
+</body>
+
+</html>
diff --git a/src/main/deploy/nodeselector/css/bootstrap.min-5.2.3.css b/src/main/deploy/nodeselector/css/bootstrap.min-5.2.3.css
diff --git a/src/main/deploy/nodeselector/style.css → src/main/deploy/nodeselector/css/style.css b/src/main/deploy/nodeselector/style.css → src/main/deploy/nodeselector/css/style.css
@@ -1,9 +1,14 @@
+html {
+    height: 100%;
+}
+
 body {
     background-color: red;
     overscroll-behavior: none;
     overflow: hidden;
     font-family: sans-serif;
     user-select: none;
+    height: 100%;
 }
 
 table {
@@ -21,55 +26,55 @@ td {
     font-size: 5vw;
 }
 
-td.hybrid {
+div.hybrid {
     background-color: #777777;
 }
 
-td.cone {
+div.cone {
     background-color: #ffd91e;
 }
 
-td.cube {
+div.cube {
     background-color: #aa00ff;
 }
 
-td.hybrid-center {
+div.hybrid-center {
     background-color: #353535;
     color: white;
 }
 
-td.cone-center {
+div.cone-center {
     background-color: #968011;
     color: white;
 }
 
-td.cube-center {
+div.cube-center {
     background-color: #5a0088;
     color: white;
 }
 
-td.active {
+div.active {
     background-color: #00ff08;
     color: black;
 }
 
-td.confirmed {
+div.confirmed {
     background-color: blue;
     color: black;
 }
 
-td.confirmed.active {
+div.confirmed.active {
     /* background-color: red; */
     background: linear-gradient(45deg, #00ff08 50%, blue 50% 50%);
     color: black;
 }
 
 #time {
-    position: absolute;
+    /* position: absolute;
     left: 0%;
     width: 33%;
     bottom: 0%;
-    height: 20%;
+    height: 20%; */
     font-size: 18vh;
     text-align: center;
 }
@@ -95,11 +100,11 @@ td.confirmed.active {
 }
 
 div.cone-orientation {
-    position: absolute;
+    /* position: absolute;
     left: 66%;
     width: 33%;
     bottom: 0%;
-    height: 20%;
+    height: 20%; */
     background-color: #ffd91e;
 }
 
@@ -108,10 +113,10 @@ div.cone-orientation.tipped {
 }
 
 div.cone-orientation svg {
-    position: absolute;
+    /* position: absolute;
     top: 50%;
-    height: 80%;
-    transform: translate(-50%, -50%);
+    height: 80%; */
+    /* transform: translate(50%, 50%); */
     transition: transform 0.25s ease;
 }
 
@@ -120,23 +125,14 @@ div.cone-orientation svg {
 }
 
 div.cone-orientation.tipped svg {
-    transform: translate(-50%, -50%) rotate(90deg);
+    transform: rotate(90deg);
 }
 
-div#confirm-node {
-    position: absolute;
-    left: 33%;
-    width: 33%;
-    bottom: 0%;
-    height: 20%;
-    /* vertical-align: 50%; */
-    text-align: center;
-    line-height: 15;
-    background-color: purple;
-}
+
 
 div#confirm-node>div {
-    line-height: 1.5;
-    display: inline-block;
-    font-size: xxx-large;
+    /* line-height: 1.5;
+    display: inline-block; */
+    font-size: 18vh;
+    text-align: center;
 }
diff --git a/src/main/deploy/nodeselector/index.html b/src/main/deploy/nodeselector/index.html
@@ -14,62 +14,118 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="icon" type="image/x-icon" href="favicon.ico" />
-  <link rel="stylesheet" href="style.css">
-  <script src="jquery-3.7.1.min.js"></script>
-  <script src="index.js" type="module"></script>
+  <link rel="stylesheet" href="./css/style.css">
+  <link rel="stylesheet" href="./css/bootstrap.min-5.2.3.css">
+  <script src="./js/jquery-3.7.1.min.js"></script>
+  <script src="./js/bootstrap.bundle-5.2.3.min.js"></script>
+  <script src="./js/index.js" type="module"></script>
   <title>Node Selector &mdash; Banana Split</title>
 </head>
 
 <body>
-  <table>
-    <tbody>
-      <tr id="row-high">
-        <td class="node cone high">H1</td>
-        <td class="node cube high">H2</td>
-        <td class="node cone high">H3</td>
-        <td class="node cone-center high">H4</td>
-        <td class="node cube-center high">H5</td>
-        <td class="node cone-center high">H6</td>
-        <td class="node cone high">H7</td>
-        <td class="node cube high">H8</td>
-        <td class="node cone high">H9</td>
-      </tr>
-      <tr id="row-med">
-        <td class="node cone med">M1</td>
-        <td class="node cube med">M2</td>
-        <td class="node cone med">M3</td>
-        <td class="node cone-center med">M4</td>
-        <td class="node cube-center med">M5</td>
-        <td class="node cone-center med">M6</td>
-        <td class="node cone med">M7</td>
-        <td class="node cube med">M8</td>
-        <td class="node cone med">M9</td>
-      </tr>
-      <tr id="row-low">
-        <td class="node hybrid low">L1</td>
-        <td class="node hybrid low">L2</td>
-        <td class="node hybrid low">L3</td>
-        <td class="node hybrid-center low">L4</td>
-        <td class="node hybrid-center low">L5</td>
-        <td class="node hybrid-center low">L6</td>
-        <td class="node hybrid low">L7</td>
-        <td class="node hybrid low">L8</td>
-        <td class="node hybrid low">L9</td>
-      </tr>
-    </tbody>
-  </table>
-  <div>
-    <div id="time" class="time teleop-1">0:00</div>
-    <div id="confirm-node">
-      <div>CONFIRM</div>
+  <div class="container-fluid h-100 d-flex flex-column">
+    <div class="row h-25" id="row-high">
+      <div class="col-sm node cone high">
+        H1
+      </div>
+      <div class="col-sm node cube high">
+        H2
+      </div>
+      <div class="col-sm node cone high">
+        H3
+      </div>
+      <div class="col-sm node cone-center high">
+        H4
+      </div>
+      <div class="col-sm node cube-center high">
+        H5
+      </div>
+      <div class="col-sm node cone-center high">
+        H6
+      </div>
+      <div class="col-sm node cone high">
+        H7
+      </div>
+      <div class="col-sm node cube high">
+        H8
+      </div>
+      <div class="col-sm node cone high">
+        H9
+      </div>
     </div>
-    <div class="cone-orientation">
-      <svg viewbox="0 0 16 16">
-        <path
-          d="M7.03 1.88c.252-1.01 1.688-1.01 1.94 0l2.905 11.62H14a.5.5 0 0 1 0 1H2a.5.5 0 0 1 0-1h2.125L7.03 1.88z" />
-      </svg>
+    <div class="row h-25" id="row-med">
+      <div class="col-sm node cone med">
+        M1
+      </div>
+      <div class="col-sm node cube med">
+        M2
+      </div>
+      <div class="col-sm node cone med">
+        M3
+      </div>
+      <div class="col-sm node cone-center med">
+        M4
+      </div>
+      <div class="col-sm node cube-center med">
+        M5
+      </div>
+      <div class="col-sm node cone-center med">
+        M6
+      </div>
+      <div class="col-sm node cone med">
+        M7
+      </div>
+      <div class="col-sm node cube med">
+        M8
+      </div>
+      <div class="col-sm node cone med">
+        M9
+      </div>
+    </div>
+    <div class="row h-25" id="row-low">
+      <div class="col-sm node cone low">
+        L1
+      </div>
+      <div class="col-sm node cube low">
+        L2
+      </div>
+      <div class="col-sm node cone low">
+        L3
+      </div>
+      <div class="col-sm node cone-center low">
+        L4
+      </div>
+      <div class="col-sm node cube-center low">
+        L5
+      </div>
+      <div class="col-sm node cone-center low">
+        L6
+      </div>
+      <div class="col-sm node cone low">
+        L7
+      </div>
+      <div class="col-sm node cube low">
+        L8
+      </div>
+      <div class="col-sm node cone low">
+        L9
+      </div>
+    </div>
+    <div class="row h-25">
+      <div id="time" class="col-sm time teleop-1">0:00</div>
+      <div id="confirm-node" class="col-sm">
+        <div class="btn btn-lg btn-block btn-danger">CONFIRM</div>
+      </div>
+      <div class="cone-orientation col-sm" align="center">
+        <svg viewbox="0 0 16 16" width="50%">
+          <path
+            d="M7.03 1.88c.252-1.01 1.688-1.01 1.94 0l2.905 11.62H14a.5.5 0 0 1 0 1H2a.5.5 0 0 1 0-1h2.125L7.03 1.88z" />
+        </svg>
+      </div>
     </div>
   </div>
+
+
 </body>
 
 </html>
diff --git a/src/main/deploy/nodeselector/NT4.js → src/main/deploy/nodeselector/js/NT4.js b/src/main/deploy/nodeselector/NT4.js → src/main/deploy/nodeselector/js/NT4.js
diff --git a/src/main/deploy/nodeselector/js/bootstrap.bundle-5.2.3.min.js b/src/main/deploy/nodeselector/js/bootstrap.bundle-5.2.3.min.js