build a premitive fsr value display

package.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "@nmann/struct-buffer": "^5.4.0",
     "baconjs": "patch:baconjs@npm%3A3.0.17#~/.yarn/patches/baconjs-npm-3.0.17-1a95474784.patch",
+    "classnames": "^2.5.1",
     "jotai": "^2.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

sdk/commands/sensor_test.ts

@@ -75,7 +75,7 @@ const detail_data_t = new StructBuffer("detail_data_t", {
  * This class represents the results of an SensorTestData request for a single
  * panel.
  */
-class SMXPanelTestData {
+export class SMXPanelTestData {
   have_data_from_panel: boolean;
   sensor_level: EachSensor<number> = {
     up: 0,
@@ -115,21 +115,21 @@ class SMXPanelTestData {
      * off in the config tool.
      */
     this.bad_sensor_input = {
-      up: Boolean(data.sig_bad.bad_sensor_0),
-      right: Boolean(data.sig_bad.bad_sensor_1),
-      down: Boolean(data.sig_bad.bad_sensor_2),
-      left: Boolean(data.sig_bad.bad_sensor_3),
+      up: data.sig_bad.bad_sensor_0,
+      right: data.sig_bad.bad_sensor_1,
+      down: data.sig_bad.bad_sensor_2,
+      left: data.sig_bad.bad_sensor_3,
     };
 
     // This is what the dipswitch is set to for this panel
     this.dip_switch_value = data.dips.dip;
 
     // These are true if the sensor has the incorrect jumper set
     this.bad_jumper = {
-      up: Boolean(data.dips.bad_sensor_dip_0),
-      right: Boolean(data.dips.bad_sensor_dip_1),
-      down: Boolean(data.dips.bad_sensor_dip_2),
-      left: Boolean(data.dips.bad_sensor_dip_3),
+      up: !!data.dips.bad_sensor_dip_0,
+      right: !!data.dips.bad_sensor_dip_1,
+      down: !!data.dips.bad_sensor_dip_2,
+      left: !!data.dips.bad_sensor_dip_3,
     };
 
     this.sensor_level = {

ui/pad-coms.ts

@@ -75,7 +75,7 @@ export async function requestConfig(dev: HIDDevice) {
 
 export async function requestTestData(dev: HIDDevice) {
   const response = await getSensorTestData(dev);
-  const test_obj = new SMXSensorTestData(response);
+  return new SMXSensorTestData(response);
 }
 
 /** anything here will appear in the debug UI to dispatch at will */

ui/stage/fsr-panel.tsx

@@ -0,0 +1,46 @@
+import cn from "classnames";
+import type { SMXPanelTestData } from "../../sdk/commands/sensor_test";
+
+interface EnabledProps {
+  data: SMXPanelTestData;
+}
+
+export function FsrPanel(props: EnabledProps) {
+  const { bad_sensor_input, have_data_from_panel, sensor_level } = props.data;
+  return (
+    <div className={cn("panel", { active: have_data_from_panel })}>
+      <Fsr
+        className="top horiz"
+        badInput={!bad_sensor_input.up}
+        value={sensor_level.up}
+      />
+      <Fsr
+        className="right vert"
+        badInput={!bad_sensor_input.right}
+        value={sensor_level.right}
+      />
+      <Fsr
+        className="bottom horiz"
+        badInput={!bad_sensor_input.down}
+        value={sensor_level.down}
+      />
+      <Fsr
+        className="left vert"
+        badInput={!bad_sensor_input.left}
+        value={sensor_level.left}
+      />
+    </div>
+  );
+}
+
+function Fsr({
+  className,
+  badInput,
+  value,
+}: {
+  className?: string;
+  badInput: boolean;
+  value: number;
+}) {
+  return <div className={cn("fsr", className)}>{badInput ? "!!" : value}</div>;
+}

ui/simple-pad.tsx → ui/stage/simple-pad.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
-import { SmxStage } from "../sdk";
-import { StageInputs } from "../sdk/commands/inputs.ts";
-import { HID_REPORT_INPUT_STATE } from "../sdk/packet.ts";
+import { SmxStage } from "../../sdk";
+import { StageInputs } from "../../sdk/commands/inputs.ts";
+import { HID_REPORT_INPUT_STATE } from "../../sdk/packet.ts";
 
 interface Props {
   dev: HIDDevice;

ui/stage/stage-test.tsx

@@ -0,0 +1,39 @@
+import { useAtomValue, type Atom } from "jotai";
+import { useEffect, useState } from "react";
+import type { SMXSensorTestData } from "../../sdk/commands/sensor_test";
+import { requestTestData } from "../pad-coms";
+import { FsrPanel } from "./fsr-panel";
+
+export function StageTest({
+  deviceAtom,
+}: {
+  deviceAtom: Atom<HIDDevice | undefined>;
+}) {
+  const device = useAtomValue(deviceAtom);
+  const [testData, setTestData] = useState<SMXSensorTestData>();
+
+  useEffect(() => {
+    if (!device) {
+      return;
+    }
+
+    const handle = requestAnimationFrame(async () => {
+      const data = await requestTestData(device);
+      setTestData(data);
+    });
+
+    return () => cancelAnimationFrame(handle);
+  }, [device]);
+
+  if (!testData) {
+    return null;
+  }
+
+  return (
+    <div className="pad">
+      {Object.entries(testData.panels).map(([key, data]) => (
+        <FsrPanel key={key} data={data} />
+      ))}
+    </div>
+  );
+}

ui/styles.css

@@ -84,7 +84,33 @@ button:focus {
 }
 .panel {
   outline: 2px solid #ddd;
+  position: relative;
 }
 .panel.active {
   background-color: yellow;
 }
+
+.fsr {
+  position: absolute;
+  font-family: monospace;
+}
+
+.fsr.top {
+  top: 0;
+}
+.fsr.left {
+  left: 0;
+}
+.fsr.right {
+  right: 0;
+}
+.fsr.bottom {
+  bottom: 0;
+}
+
+.fsr.vert {
+  top: 50%;
+}
+.fsr.horiz {
+  left: 50%;
+}

ui/ui.tsx

@@ -2,8 +2,9 @@ import { useAtomValue } from "jotai";
 import { useEffect } from "react";
 
 import { DebugCommands } from "./DebugCommands.tsx";
-import { open_smx_device, promptSelectDevice, requestConfig, requestTestData } from "./pad-coms.ts";
-import { browserSupported, p1Dev$, statusText$ } from "./state.ts";
+import { open_smx_device, promptSelectDevice } from "./pad-coms.ts";
+import { browserSupported, p1Dev$, p2Dev$, statusText$ } from "./state.ts";
+import { StageTest } from "./stage/stage-test.tsx";
 
 export function UI() {
   useEffect(() => {
@@ -21,18 +22,24 @@ export function UI() {
   return (
     <>
       <h1>SMX Web Config</h1>
+      <StageTest deviceAtom={p1Dev$} />
+      <StageTest deviceAtom={p2Dev$} />
       <PickDeviceButton /> <DebugCommands />
       <StatusDisplay />
     </>
   );
+}
 
-  function PickDeviceButton() {
-    return (
-      <button type="button" disabled={!browserSupported} onClick={promptSelectDevice}>
-        Pick device...
-      </button>
-    );
-  }
+function PickDeviceButton() {
+  return (
+    <button
+      type="button"
+      disabled={!browserSupported}
+      onClick={promptSelectDevice}
+    >
+      Pick device...
+    </button>
+  );
 }
 
 function StatusDisplay() {

yarn.lock

@@ -962,6 +962,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"classnames@npm:^2.5.1":
+  version: 2.5.1
+  resolution: "classnames@npm:2.5.1"
+  checksum: 10c0/afff4f77e62cea2d79c39962980bf316bacb0d7c49e13a21adaadb9221e1c6b9d3cdb829d8bb1b23c406f4e740507f37e1dcf506f7e3b7113d17c5bab787aa69
+  languageName: node
+  linkType: hard
+
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -1876,6 +1883,7 @@ __metadata:
     "@types/w3c-web-hid": "npm:1.0.6"
     "@vitejs/plugin-react": "npm:^4.2.1"
     baconjs: "patch:baconjs@npm%3A3.0.17#~/.yarn/patches/baconjs-npm-3.0.17-1a95474784.patch"
+    classnames: "npm:^2.5.1"
     jotai: "npm:^2.7.2"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"