new updates

simgui.json

@@ -37,13 +37,14 @@
           "Auto Chooser": {
             "open": true
           },
-          "open": true
+          "Column": {
+            "open": true
+          }
         },
         "Main Driver": {
           "Next Position": {
             "open": true
-          },
-          "open": true
+          }
         },
         "open": true
       },

src/main/deploy/nodeselector/auto.html

@@ -18,30 +18,33 @@
     <div w3-include-html="nav.html"></div>
     <div class="row">
       <div class="col-sm">
+        <label class="form-check-label" for="autoChooser">Select Auto</label>
         <select id="autoChooser" class="form-select form-select-lg mb-3"></select>
       </div>
       <div class="col-sm">
+        <label class="form-check-label" for="columnChooser">Select Column</label>
         <select id="columnChooser" class="form-select form-select-lg mb-3"></select>
       </div>
       <div class="col-sm">
+        <label class="form-check-label" for="levelChooser">Select Level (High, Medium, Low)</label>
         <select id="levelChooser" class="form-select form-select-lg mb-3"></select>
       </div>
     </div>
     <div class="row">
       <div class="col-sm">
-        <div class="form-check">
-          <input class="form-check-input" type="checkbox" value="" id="enableDock">
-          <label class="form-check-label" for="enableDock">
-            Enable Dock
-          </label>
-        </div>
+        <label class="form-check-label" for="enableDock">Dock????</label>
+        <select id="enableDock" class="form-select form-select-lg mb-3">
+          <option value="true">Dock</option>
+          <option value="false">Don't Dock</option>
+        </select>
       </div>
       <div class="col-sm">
         <label for="waitAfterScore" class="form-label">Wait After Score</label>
         <input type="range" class="form-range" min="0" max="10" step="1" id="waitAfterScore">
       </div>
-      <div>
-      </div>
+    </div>
+    <div class="row" id="aprilTagStatus">
+      adsfasdfasdfasdf
     </div>
 </body>
 

src/main/deploy/nodeselector/css/style.css

@@ -135,4 +135,12 @@ div#confirm-node>div {
     display: inline-block; */
     font-size: 10vh;
     text-align: center;
+}
+
+.aprilgood {
+    background-color: #00ff08;
+}
+
+.aprilbad {
+    background-color: red;
 }

src/main/deploy/nodeselector/js/index.js

@@ -23,6 +23,7 @@ const ColumnActive = "/Shuffleboard/Auto/Column/active";
 const ColumnSelected = "/Shuffleboard/Auto/Column/selected";
 const fieldPos = "/Shuffleboard/Auto/Field Pos/Robot";
 const enableDock = "/Shuffleboard/Auto/Enable Dock";
+const aprilTagStatus = "/Shuffleboard/Auto/Currently Seeing April Tag";
 
 
 let active = null;
@@ -153,18 +154,23 @@ let client = new NT4_Client(
         $("#columnChooser").append(new Option(value[i], value[i]));
       }
     } else if (topic.name == ColumnActive) {
-      // console.log("Auto Chooser Active - " + value);
       $("#columnChooser").val(value);
     } else if (topic.name == LevelOptions) {
-      // console.log("Auto Chooser Options - " + value);
       // let values = value.split(",");
       $("#levelChooser").children("option").remove();
       for (let i = 0; i < value.length; i++) {
         $("#levelChooser").append(new Option(value[i], value[i]));
       }
     } else if (topic.name == LevelActive) {
-      // console.log("Auto Chooser Active - " + value);
       $("#levelChooser").val(value);
+    } else if (topic.name == aprilTagStatus) {
+      let element = $("#aprilTagStatus");
+      element.removeClass("aprilgood aprilbad");
+      if (value) {
+        element.addClass("aprilgood");
+      } else {
+        element.addClass("aprilbad");
+      }
     }
   },
   () => {
@@ -213,6 +219,7 @@ window.addEventListener("load", () => {
       ColumnActive,
       ColumnOptions,
       ColumnSelected,
+      aprilTagStatus,
     ],
     false,
     false,
@@ -268,7 +275,8 @@ window.addEventListener("load", () => {
     client.addSample(LevelSelected, value);
   })
   $("#enableDock").change(function () {
-    let value = $("#enableDock").prop('checked');
+    // let value = $("#enableDock").prop('checked');
+    let value = $("#enableDock").val() === "true";
     client.addSample(enableDock, value);
   })
   // each((cell, index) => {

src/main/deploy/nodeselector/nav.html

@@ -8,7 +8,7 @@
         <div class="navbar-nav">
             <a class="nav-item nav-link" href="index.html">Home</a>
             <a class="nav-item nav-link" href="auto.html">Auto</a>
-            <a class="nav-item nav-link" href="#">TeleOp</a>
+            <a class="nav-item nav-link" href="">TeleOp</a>
         </div>
     </div>
 </nav>

src/main/deploy/nodeselector/react.html

@@ -0,0 +1,47 @@
+<html>
+
+<head>
+
+    <title>Let’s React with npm</title>
+    <!-- Load React Libraries
+
+    Note: when deploying, replace “development.js” with “production.min.js”. -->
+
+    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
+
+    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
+
+
+</head>
+
+
+
+<body>
+
+    <div id="input-field"></div>
+    <!-- This is embedded JavaScript. You can even place this in separate .js file -->
+
+    <script>
+        const element = React.createElement;
+
+        class InputField extends React.Component {
+            constructor(props) {
+                super(props);
+                this.state = { name: '' };
+            }
+
+            render() {
+                return element('input', {
+                    onChange: e => this.setState({ name: e.target.value }),
+                    value: this.state.name,
+                    type: 'text'
+                });
+            }
+        }
+
+        const domContainer = document.querySelector('#input-field');
+        ReactDOM.render(element(InputField), domContainer);
+    </script>
+</body>
+
+</html>