brilliantsole 0.0.27 → 0.0.28

package/examples/graph/script.js

@@ -12,7 +12,9 @@ window.device = device;
 // GET DEVICES
 
 /** @type {HTMLTemplateElement} */
-const availableDeviceTemplate = document.getElementById("availableDeviceTemplate");
+const availableDeviceTemplate = document.getElementById(
+  "availableDeviceTemplate"
+);
 const availableDevicesContainer = document.getElementById("availableDevices");
 /** @param {BS.Device[]} availableDevices */
 function onAvailableDevices(availableDevices) {
@@ -24,19 +26,24 @@ function onAvailableDevices(availableDevices) {
       const availableDeviceContainer = availableDeviceTemplate.content
         .cloneNode(true)
         .querySelector(".availableDevice");
-      availableDeviceContainer.querySelector(".name").innerText = availableDevice.name;
-      availableDeviceContainer.querySelector(".type").innerText = availableDevice.type;
+      availableDeviceContainer.querySelector(".name").innerText =
+        availableDevice.name;
+      availableDeviceContainer.querySelector(".type").innerText =
+        availableDevice.type;
 
       /** @type {HTMLButtonElement} */
-      const toggleConnectionButton = availableDeviceContainer.querySelector(".toggleConnection");
+      const toggleConnectionButton =
+        availableDeviceContainer.querySelector(".toggleConnection");
       toggleConnectionButton.addEventListener("click", () => {
         device.connectionManager = availableDevice.connectionManager;
         device.reconnect();
       });
       device.addEventListener("connectionStatus", () => {
-        toggleConnectionButton.disabled = device.connectionStatus != "notConnected";
+        toggleConnectionButton.disabled =
+          device.connectionStatus != "notConnected";
       });
-      toggleConnectionButton.disabled = device.connectionStatus != "notConnected";
+      toggleConnectionButton.disabled =
+        device.connectionStatus != "notConnected";
 
       availableDevicesContainer.appendChild(availableDeviceContainer);
     });
@@ -75,7 +82,9 @@ device.addEventListener("connectionStatus", () => {
     case "connected":
     case "notConnected":
       toggleConnectionButton.disabled = false;
-      toggleConnectionButton.innerText = device.isConnected ? "disconnect" : "connect";
+      toggleConnectionButton.innerText = device.isConnected
+        ? "disconnect"
+        : "connect";
       break;
     case "connecting":
     case "disconnecting":
@@ -99,15 +108,20 @@ function onConnectedDevice(connectedDevice) {
 // SENSOR CONFIGURATION
 
 /** @type {HTMLTemplateElement} */
-const sensorTypeConfigurationTemplate = document.getElementById("sensorTypeConfigurationTemplate");
+const sensorTypeConfigurationTemplate = document.getElementById(
+  "sensorTypeConfigurationTemplate"
+);
 BS.ContinuousSensorTypes.forEach((sensorType) => {
-  const sensorTypeConfigurationContainer = sensorTypeConfigurationTemplate.content
-    .cloneNode(true)
-    .querySelector(".sensorTypeConfiguration");
-  sensorTypeConfigurationContainer.querySelector(".sensorType").innerText = sensorType;
+  const sensorTypeConfigurationContainer =
+    sensorTypeConfigurationTemplate.content
+      .cloneNode(true)
+      .querySelector(".sensorTypeConfiguration");
+  sensorTypeConfigurationContainer.querySelector(".sensorType").innerText =
+    sensorType;
 
   /** @type {HTMLInputElement} */
-  const sensorRateInput = sensorTypeConfigurationContainer.querySelector(".sensorRate");
+  const sensorRateInput =
+    sensorTypeConfigurationContainer.querySelector(".sensorRate");
   sensorRateInput.value = 0;
   sensorRateInput.max = BS.MaxSensorRate;
   sensorRateInput.step = BS.SensorRateStep;
@@ -117,15 +131,20 @@ BS.ContinuousSensorTypes.forEach((sensorType) => {
     device.setSensorConfiguration({ [sensorType]: sensorRate });
   });
 
-  sensorTypeConfigurationTemplate.parentElement.appendChild(sensorTypeConfigurationContainer);
+  sensorTypeConfigurationTemplate.parentElement.appendChild(
+    sensorTypeConfigurationContainer
+  );
   sensorTypeConfigurationContainer.dataset.sensorType = sensorType;
 });
 /** @param {BS.Device} device */
 function onSensorConfiguration(device) {
-  for (const sensorType in device.sensorConfiguration) {
-    const sensorRate = device.sensorConfiguration[sensorType];
+  BS.SensorTypes.forEach((sensorType) => {
+    const sensorRate = device.sensorConfiguration[sensorType] ?? 0;
+
     /** @type {HTMLInputElement?} */
-    const input = document.querySelector(`.sensorTypeConfiguration[data-sensor-type="${sensorType}"] .input`);
+    const input = document.querySelector(
+      `.sensorTypeConfiguration[data-sensor-type="${sensorType}"] .input`
+    );
     if (input) {
       input.value = sensorRate;
     }
@@ -146,17 +165,21 @@ function onSensorConfiguration(device) {
         chartContainer.style.display = display;
       });
     }
-  }
+  });
 }
 /** @param {BS.Device} device */
 function updateSensorRateInputs(device) {
-  for (const sensorType in device.sensorConfiguration) {
+  BS.SensorTypes.forEach((sensorType) => {
     /** @type {HTMLInputElement?} */
-    const input = document.querySelector(`[data-sensor-type="${sensorType}"] .input`);
+    const input = document.querySelector(
+      `[data-sensor-type="${sensorType}"] .input`
+    );
     if (input) {
-      input.disabled = !device.isConnected;
+      const containsSensorType = sensorType in device.sensorConfiguration;
+      input.closest("label").style.display = containsSensorType ? "" : "none";
+      input.disabled = !device.isConnected || !containsSensorType;
     }
-  }
+  });
 }
 
 // GRAPHING
@@ -276,7 +299,9 @@ window.chartContainers = chartContainers;
 /** @type {HTMLTemplateElement} */
 const chartTemplate = document.getElementById("chartTemplate");
 BS.ContinuousSensorTypes.forEach((sensorType) => {
-  const chartContainer = chartTemplate.content.cloneNode(true).querySelector(".chart");
+  const chartContainer = chartTemplate.content
+    .cloneNode(true)
+    .querySelector(".chart");
   chartsContainer.appendChild(chartContainer);
   chartContainers[sensorType] = chartContainer;
 
@@ -299,6 +324,12 @@ BS.ContinuousSensorTypes.forEach((sensorType) => {
     case "rotation":
       axesLabels = ["x", "y", "z", "w"];
       break;
+    case "orientation":
+      axesLabels = ["heading", "pitch", "roll"];
+      break;
+    case "barometer":
+      axesLabels = ["barometer"];
+      break;
     default:
       console.warn(`uncaught sensorType "${sensorType}"`);
       return;
@@ -323,36 +354,53 @@ BS.ContinuousSensorTypes.forEach((sensorType) => {
       yRange = { min: -360, max: 360 };
       break;
     case "magnetometer":
-      // FILL
+      yRange = { min: -100, max: 100 };
       break;
     case "gameRotation":
     case "rotation":
       yRange = { min: -1, max: 1 };
       break;
+    case "orientation":
+      yRange = { min: -360, max: 360 };
+      break;
   }
 
   switch (sensorType) {
     case "gameRotation":
     case "rotation":
       {
-        const eulerChartContainer = chartTemplate.content.cloneNode(true).querySelector(".chart");
+        const eulerChartContainer = chartTemplate.content
+          .cloneNode(true)
+          .querySelector(".chart");
         chartsContainer.appendChild(eulerChartContainer);
         chartContainers[`${sensorType}.euler`] = eulerChartContainer;
-        createChart(eulerChartContainer.querySelector("canvas"), sensorType + "Euler", ["yaw", "pitch", "roll"], {
-          min: -Math.PI,
-          max: Math.PI,
-        });
+        createChart(
+          eulerChartContainer.querySelector("canvas"),
+          sensorType + "Euler",
+          ["yaw", "pitch", "roll"],
+          {
+            min: -Math.PI,
+            max: Math.PI,
+          }
+        );
       }
       break;
     case "pressure":
       {
-        const pressureMetadataChartContainer = chartTemplate.content.cloneNode(true).querySelector(".chart");
+        const pressureMetadataChartContainer = chartTemplate.content
+          .cloneNode(true)
+          .querySelector(".chart");
         chartsContainer.appendChild(pressureMetadataChartContainer);
         chartContainers["pressureMetadata"] = pressureMetadataChartContainer;
-        createChart(pressureMetadataChartContainer.querySelector("canvas"), "pressureMetadata", ["sum", "x", "y"], {
-          min: 0,
-          max: 1,
-        });
+        createChart(
+          pressureMetadataChartContainer.querySelector("canvas"),
+          "pressureMetadata",
+          ["sum", "x", "y"],
+          {
+            min: 0,
+            max: 1,
+          }
+        );
       }
       break;
   }
@@ -361,7 +409,12 @@ BS.ContinuousSensorTypes.forEach((sensorType) => {
   const euler = new THREE.Euler();
   euler.reorder("YXZ");
 
-  createChart(chartContainer.querySelector("canvas"), sensorType, axesLabels, yRange);
+  createChart(
+    chartContainer.querySelector("canvas"),
+    sensorType,
+    axesLabels,
+    yRange
+  );
 });
 
 /** @param {BS.Device} device */
@@ -437,12 +490,16 @@ if (false)
 
 const websocketClient = new BS.WebSocketClient();
 /** @type {HTMLButtonElement} */
-const toggleServerConnectionButton = document.getElementById("toggleServerConnection");
+const toggleServerConnectionButton = document.getElementById(
+  "toggleServerConnection"
+);
 toggleServerConnectionButton.addEventListener("click", () => {
   websocketClient.toggleConnection();
 });
 websocketClient.addEventListener("isConnected", () => {
-  toggleServerConnectionButton.innerText = websocketClient.isConnected ? "disconnect from server" : "connect to server";
+  toggleServerConnectionButton.innerText = websocketClient.isConnected
+    ? "disconnect from server"
+    : "connect to server";
 });
 websocketClient.addEventListener("connectionStatus", () => {
   let disabled;

package/examples/punch/index.html

@@ -0,0 +1,135 @@
+<html>
+  <head>
+    <title>Punch | BrilliantSole JavaScript SDK</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
+    <script type="module" src="./script.js"></script>
+    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
+    <script src="../utils/aframe/force-pushable.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-physics-system@v4.2.3/dist/aframe-physics-system.min.js"></script>
+  </head>
+  <style>
+    #scene {
+      width: 700px;
+      height: 700px;
+      margin: auto;
+      border-radius: 2rem;
+      overflow: hidden;
+      border: solid black;
+      box-sizing: border-box;
+    }
+
+    #title {
+      margin: auto;
+      height: 70px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+
+      font-size: xx-large;
+    }
+  </style>
+  <body>
+    <nav>
+      <a href="../../">home</a>
+    </nav>
+
+    <h1>Punch | BrilliantSole JavaScript SDK</h1>
+
+    <button id="toggleConnection">connect</button>
+
+    <progress value="0" id="fileTransferProgress"></progress>
+
+    <label>
+      is model ready <input type="checkbox" disabled id="isModelReady" />
+    </label>
+
+    <div id="title">
+      <h1 id="maxClass">Punch</h1>
+    </div>
+
+    <a-scene
+      id="scene"
+      physics="debug: false"
+      embedded
+      xr-mode-ui="enabled: false;"
+      device-orientation-permission-ui="enabled: false"
+    >
+      <a-assets></a-assets>
+
+      <a-camera
+        id="camera"
+        look-controls="enabled: false;"
+        wasd-controls="enabled: false"
+        position="0 0.2 0.65"
+        rotation="-20 0 0"
+      ></a-camera>
+      <a-sky></a-sky>
+
+      <a-entity position="0 -0.55 0">
+        <a-sphere
+          id="punchingBag2"
+          class="punchingBag 2"
+          data-section="2"
+          radius="0.125"
+          color="#777"
+          position="0 0.75 0"
+          dynamic-body
+          force-pushable
+          constraint="type: coneTwist;
+                 target: #punchingBag1;
+                 pivot: 0 -0.13 0;       
+                 targetPivot: 0 0.13 0;   
+                 axis: 0 1 0;
+                 targetAxis: 0 1 0"
+        ></a-sphere>
+        <a-box
+          id="punchingBag1"
+          class="punchingBag 1"
+          data-section="1"
+          width="0.5"
+          height="0.25"
+          depth="0.25"
+          color="#B00"
+          position="0 0.5 0"
+          dynamic-body
+          force-pushable
+          constraint="type: coneTwist;
+                 target: #punchingBag0;
+                 pivot: 0 -0.13 0;       
+                 targetPivot: 0 0.13 0;   
+                 axis: 0 1 0;
+                 targetAxis: 0 1 0"
+        >
+        </a-box>
+        <a-box
+          id="punchingBag0"
+          class="punchingBag"
+          data-section="0"
+          width="0.25"
+          height="0.25"
+          depth="0.25"
+          color="#F00"
+          position="0 0.25 0"
+          dynamic-body
+          force-pushable
+          constraint="type: coneTwist;
+                 target: #punchingBagBase;
+                 pivot: 0 -0.125 0;       
+                 targetPivot: 0 0.125 0;   
+                 axis: 0 1 0;
+                 targetAxis: 0 1 0"
+        >
+        </a-box>
+        <a-sphere
+          id="punchingBagBase"
+          radius="0.125"
+          color="#777"
+          position="0 0 0"
+          static-body
+        ></a-sphere>
+      </a-entity>
+    </a-scene>
+  </body>
+</html>

package/examples/punch/script.js

@@ -0,0 +1,169 @@
+import * as BS from "../../build/brilliantsole.module.js";
+window.BS = BS;
+console.log(BS);
+
+// DEVICE
+
+const device = new BS.Device();
+console.log({ device });
+window.device = device;
+
+// CONNECT
+
+const toggleConnectionButton = document.getElementById("toggleConnection");
+toggleConnectionButton.addEventListener("click", () =>
+  device.toggleConnection()
+);
+device.addEventListener("connectionStatus", () => {
+  let disabled = false;
+  let innerText = device.connectionStatus;
+  switch (device.connectionStatus) {
+    case "notConnected":
+      innerText = "connect";
+      break;
+    case "connected":
+      innerText = "disconnect";
+      break;
+  }
+  toggleConnectionButton.disabled = disabled;
+  toggleConnectionButton.innerText = innerText;
+});
+
+// FILE TRANSFER
+/** @type {HTMLProgressElement} */
+const fileTransferProgress = document.getElementById("fileTransferProgress");
+device.addEventListener("fileTransferProgress", (event) => {
+  const progress = event.message.progress;
+  console.log({ progress });
+  fileTransferProgress.value = progress == 1 ? 0 : progress;
+});
+
+// MODEL
+/** @type {HTMLInputElement} */
+const isModelReadyCheckbox = document.getElementById("isModelReady");
+device.addEventListener("getTfliteInferencingEnabled", () => {
+  isModelReadyCheckbox.checked = device.tfliteInferencingEnabled;
+});
+device.addEventListener("fileTransferStatus", () => {
+  if (device.fileTransferStatus == "idle") {
+    fileTransferProgress.value = 0;
+  }
+});
+
+/** @type {HTMLSpanElement} */
+const maxClassSpan = document.getElementById("maxClass");
+let gestureTimeout;
+device.addEventListener("tfliteInference", (event) => {
+  maxClassSpan.innerText =
+    event.message.tfliteInference.maxClass.toUpperCase() + "!";
+  if (gestureTimeout) {
+    clearTimeout(gestureTimeout);
+  }
+  gestureTimeout = setTimeout(() => {
+    maxClassSpan.innerText = "";
+  }, 600);
+});
+
+// GLOVE
+/** @type {BS.TfliteFileConfiguration} */
+const punchConfiguration = {
+  name: "punch",
+  task: "classification",
+  sensorTypes: ["gyroscope", "linearAcceleration"],
+  sampleRate: 20,
+  captureDelay: 200,
+  classes: ["idle", "punch", "hook", "uppercut"],
+};
+fetch("./punch.tflite")
+  .then((response) => response.arrayBuffer())
+  .then((buffer) => {
+    punchConfiguration.file = buffer;
+    console.log("updated punchModelConfiguration", punchConfiguration);
+  })
+  .catch((err) => {
+    console.error("Error loading punch model:", err);
+  });
+
+device.addEventListener("connected", async () => {
+  if (device.type != "rightGlove") {
+    console.error("expected right glove");
+    device.disconnect();
+    return;
+  }
+  device.sendTfliteConfiguration(punchConfiguration);
+});
+device.addEventListener("tfliteIsReady", () => {
+  if (device.tfliteIsReady) {
+    device.enableTfliteInferencing();
+  }
+});
+
+// GAME
+device.addEventListener("tfliteInference", (event) => {
+  switch (event.message.tfliteInference.maxClass) {
+    case "punch":
+      punch();
+      break;
+    case "hook":
+      hook();
+      break;
+    case "uppercut":
+      uppercut();
+      break;
+  }
+});
+
+// PHYSICS
+const punchingBagBaseEntity = document.getElementById("punchingBagBase");
+const punchingBagEntities = Array.from(
+  document.querySelectorAll(".punchingBag")
+).sort((a, b) => a.dataset.section - b.dataset.section);
+
+const forces = {
+  punch: new THREE.Vector3(0, 0, -110),
+  hook: new THREE.Vector3(-30, 0, -20),
+  uppercut: new THREE.Vector3(-10, 0, -70),
+};
+function punch() {
+  window.force = forces.punch;
+  punchingBagEntities[1].click();
+  triggerWaveformEffect("strongClick100");
+}
+function hook() {
+  window.force = forces.hook;
+  punchingBagEntities[2].click();
+  triggerWaveformEffect("strongBuzz100");
+}
+function uppercut() {
+  window.force = forces.uppercut;
+  punchingBagEntities[2].click();
+  triggerWaveformEffect("pulsingStrong100");
+}
+
+/** @param {BS.VibrationWaveformEffect} waveformEffect */
+function triggerWaveformEffect(waveformEffect) {
+  if (!device.isConnected) {
+    return;
+  }
+  device.triggerVibration([
+    {
+      type: "waveformEffect",
+      locations: ["rear"],
+      segments: [{ effect: waveformEffect }],
+    },
+  ]);
+}
+
+document.addEventListener("keydown", (event) => {
+  switch (event.key) {
+    case "p":
+      punch();
+      break;
+    case "h":
+      hook();
+      break;
+    case "u":
+      uppercut();
+      break;
+  }
+});