add nt page

FRC-1721 · Mar 29, 2024 · 2ff43dd · 2ff43dd
1 parent 6a92591
commit 2ff43dd
Show file tree

Hide file tree

Showing 2 changed files with 135 additions and 0 deletions.
diff --git a/src/nt.html b/src/nt.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <title>NT</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="style.scss" type="text/css" />
+  </head>
+  <body>
+    <!--[if lt IE 8]>
+      <p class="browserupgrade">
+        You are using an <strong>outdated</strong> browser. Please
+        <a href="http://browsehappy.com/">upgrade your browser</a> to improve
+        your experience.
+      </p>
+    <![endif]-->
+
+    <div id="nt-table">
+      <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>
+
+    <script src="d3.min.js"></script>
+    <script src="jquery.min.js"></script>
+    <p></p>
+    <script src="nt.js"></script>
+  </body>
+</html>
diff --git a/src/nt.js b/src/nt.js
@@ -0,0 +1,101 @@
+$(function () {
+  // scale to width
+  $("html").css("transform", "scale(" + $(window).width() / 1366 + ")");
+
+  // sets a function that will be called when the websocket connects/disconnects
+  NetworkTables.addWsConnectionListener(onNetworkTablesConnection, true);
+
+  // sets a function that will be called when the robot connects/disconnects
+  NetworkTables.addRobotConnectionListener(onRobotConnection, true);
+
+  // sets a function that will be called when any NetworkTables key/value changes
+  NetworkTables.addGlobalListener(onValueChanged, true);
+});
+function onRobotConnection(connected) {
+  $("#robotstate").text(connected ? "Connected" : "Disconnected");
+  $("#robotAddress").text(
+    connected ? NetworkTables.getRobotAddress() : "Disconnected",
+  );
+}
+
+function onNetworkTablesConnection(connected) {
+  if (connected) {
+    $("#connectstate").text("Connected");
+
+    // clear the table
+    $("#nt tbody > tr").remove();
+  } else {
+    $("#connectstate").text("Disconnected");
+  }
+}
+
+function ntToggle(event) {
+  $(event.parentElement).toggleClass("disabled");
+}
+
+function putNT(key, value) {
+  function put(items, path, data) {
+    var [x, ...xs] = items;
+    if (xs.length) {
+      // if the item has children then it must be a folder
+      // CREATE folder IF NOT EXISTS
+      if ($("#" + NetworkTables.keySelector(path + "/" + x)).length == 0) {
+        var div = $(" <div /> ", {
+          id: NetworkTables.keyToId(path + "/" + x),
+          class: "nt-div disabled",
+        });
+        // folder key label
+        $("<div />", {
+          id: NetworkTables.keyToId(path + "/" + x + "_title"),
+          class: "nt-title",
+          text: x,
+          onClick: "ntToggle(this)",
+        }).appendTo(div);
+        // folder children area
+        $("<div />", {
+          id: NetworkTables.keyToId(path + "/" + x + "/"),
+          class: "nt-div-container",
+        }).appendTo(div);
+        // add folder to parent folder
+        $("#" + NetworkTables.keySelector(path + "/")).append(div);
+      }
+      put(xs, path + "/" + x, data); // make current folder parent folder and call function again
+    } else {
+      // if the item doesn't have children then it must not be a folder
+      var item = $(" <div /> ", {
+        id: NetworkTables.keyToId(path + "/" + x),
+        class: "nt-item",
+      });
+      // item key
+      $(" <div /> ", {
+        class: "nt-key",
+        text: x,
+      }).appendTo(item);
+      // item value
+      $(" <div /> ", {
+        class: "nt-value",
+        id: NetworkTables.keyToId(path + "/" + x) + "--item",
+        text: data,
+      }).appendTo(item);
+      // add item to parent folder
+      $("#" + NetworkTables.keySelector(path + "/")).append(item);
+    }
+  }
+  var [_, ...items] = key.split("/");
+  // start function with initial path blank
+  put(items, "", value);
+}
+function onValueChanged(key, value, isNew) {
+  // key thing here: we're using the various NetworkTable keys as
+  // the id of the elements that we're appending, for simplicity. However,
+  // the key names aren't always valid HTML identifiers, so we use
+  // the NetworkTables.keyToId() function to convert them appropriately
+
+  if (!$("#" + NetworkTables.keySelector(key) + "--item").length) {
+    putNT(key, value);
+  } else {
+    // similarly, use keySelector to convert the key to a valid jQuery
+    // selector. This should work for class names also, not just for ids
+    $("#" + NetworkTables.keySelector(key) + "--item").text(value);
+  }
+}