brilliantsole 0.0.26 → 0.0.28

package/examples/pressure/script.js

@@ -67,7 +67,7 @@ addDeviceButton.addEventListener("click", () => {
   BS.Device.Connect();
 });
 
-const devicePair = BS.DevicePair.shared;
+const devicePair = BS.DevicePair.insoles;
 devicePair.addEventListener("isConnected", () => {
   addDeviceButton.disabled = devicePair.isConnected;
 });
@@ -86,6 +86,10 @@ const toggleConnectionButtons = {};
 const togglePressureDataButtons = {};
 /** @type {Object.<string, HTMLElement[]>} */
 const pressureSensorElementsContainers = {};
+/** @type {Object.<string, HTMLElement>} */
+const centerOfPressureElementsContainers = {};
+/** @type {Object.<string, HTMLElement>} */
+const devicePairCenterOfPressureElementsContainers = {};
 
 devicePair.sides.forEach((side) => {
   /** @type {HTMLElement} */
@@ -120,24 +124,44 @@ devicePair.sides.forEach((side) => {
   /** @type {HTMLElement[]} */
   const pressureSensorElements = Array.from(insoleContainer.querySelectorAll("[data-pressure]"));
   pressureSensorElementsContainers[side] = pressureSensorElements;
+
+  centerOfPressureElementsContainers[side] = insoleContainer.querySelector(".center");
+  devicePairCenterOfPressureElementsContainers[side] = insoleContainer.querySelector(".devicePairCenter");
 });
 
 devicePair.addEventListener("deviceIsConnected", (event) => {
   const { device } = event.message;
 
-  const toggleConnectionButton = toggleConnectionButtons[device.insoleSide];
+  const toggleConnectionButton = toggleConnectionButtons[device.side];
   if (device.isConnected) {
     toggleConnectionButton.disabled = false;
   }
   toggleConnectionButton.innerText = device.isConnected ? "disconnect" : "reconnect";
 
-  togglePressureDataButtons[device.insoleSide].disabled = !device.isConnected;
+  togglePressureDataButtons[device.side].disabled = !device.isConnected;
+});
+
+devicePair.addEventListener("deviceIsConnected", (event) => {
+  const { device, side, isConnected } = event.message;
+
+  if (!isConnected) {
+    return;
+  }
+
+  const insoleContainer = insoleContainers[side];
+  const viz = insoleContainer.querySelector(".viz");
+  if (device.isUkaton) {
+    viz.classList.add("ukaton");
+  } else {
+    viz.classList.remove("ukaton");
+  }
+  console.log("insoleContainer", insoleContainer);
 });
 
 devicePair.addEventListener("deviceConnectionStatus", (event) => {
   const { device } = event.message;
 
-  const toggleConnectionButton = toggleConnectionButtons[device.insoleSide];
+  const toggleConnectionButton = toggleConnectionButtons[device.side];
 
   switch (device.connectionStatus) {
     case "connected":
@@ -156,7 +180,7 @@ devicePair.addEventListener("deviceConnectionStatus", (event) => {
 devicePair.addEventListener("deviceGetSensorConfiguration", (event) => {
   const { device } = event.message;
 
-  const togglePressureDataButton = togglePressureDataButtons[device.insoleSide];
+  const togglePressureDataButton = togglePressureDataButtons[device.side];
   const isPressureDataEnabled = device.sensorConfiguration.pressure > 0;
   if (isPressureDataEnabled) {
     togglePressureDataButton.innerText = "disable pressure data";
@@ -169,8 +193,85 @@ devicePair.addEventListener("deviceGetSensorConfiguration", (event) => {
 devicePair.addEventListener("devicePressure", (event) => {
   const { pressure, side } = event.message;
 
-  pressure.sensors.forEach((sensor, index) => {
-    pressureSensorElementsContainers[side][index].style.opacity = sensor.normalizedValue;
+  if (pressureVisualizationMode != "devicePairWeightedValue") {
+    pressure.sensors.forEach((sensor, index) => {
+      var value = 0;
+      switch (pressureVisualizationMode) {
+        case "normalizedValue":
+          value = sensor.normalizedValue;
+          break;
+        case "scaledValue":
+          value = sensor.scaledValue * pressure.sensors.length;
+          break;
+        case "weightedValue":
+          value = (sensor.weightedValue * pressure.sensors.length) / 2;
+          break;
+      }
+      pressureSensorElementsContainers[side][index].style.opacity = value;
+    });
+  }
+});
+
+devicePair.addEventListener("devicePressure", (event) => {
+  const { pressure, side } = event.message;
+
+  const container = centerOfPressureElementsContainers[side];
+  container.style.opacity = pressure.normalizedSum;
+
+  var center;
+  switch (centerOfPressureVisualizationMode) {
+    case "center":
+      center = pressure.center;
+      break;
+    case "normalizedCenter":
+      center = pressure.normalizedCenter;
+      break;
+  }
+  if (!center) {
+    return;
+  }
+
+  container.style.left = `${center.x * 100}%`;
+  container.style.bottom = `${center.y * 100}%`;
+});
+
+devicePair.addEventListener("pressure", (event) => {
+  const { pressure } = event.message;
+  if (pressureVisualizationMode == "devicePairWeightedValue") {
+    devicePair.sides.forEach((side) => {
+      pressure.sensors[side].forEach((sensor, index) => {
+        pressureSensorElementsContainers[side][index].style.opacity = sensor.weightedValue / 2;
+      });
+    });
+  }
+});
+
+devicePair.addEventListener("pressure", (event) => {
+  const { pressure } = event.message;
+
+  var center;
+  switch (centerOfPressureVisualizationMode) {
+    case "center":
+      center = pressure.center;
+      break;
+    case "normalizedCenter":
+      center = pressure.normalizedCenter;
+      break;
+  }
+  var side;
+  if (center) {
+    side = center.x < 0.5 ? "left" : "right";
+  }
+
+  devicePair.sides.forEach((_side) => {
+    const container = devicePairCenterOfPressureElementsContainers[_side];
+    if (side == _side) {
+      container.style.opacity = pressure.normalizedSum;
+      container.style.left = `${(center.x % 0.5) * 2 * 100}%`;
+      container.style.bottom = `${center.y * 100}%`;
+    } else {
+      container.style.opacity = 0;
+    }
   });
 });
 
@@ -199,3 +300,39 @@ websocketClient.addEventListener("connectionStatus", () => {
   }
   toggleServerConnectionButton.disabled = disabled;
 });
+
+// PRESSURE VISUALIZATION
+
+const pressureVisualizationModes = ["scaledValue", "normalizedValue", "weightedValue", "devicePairWeightedValue"];
+let pressureVisualizationMode = "normalizedValue";
+
+/** @type {HTMLSelectElement} */
+const visualizationModeSelect = document.getElementById("pressureVisualizationMode");
+visualizationModeSelect.addEventListener("input", (event) => {
+  pressureVisualizationMode = event.target.value;
+  console.log({ pressureVisualizationMode });
+});
+/** @type {HTMLOptGroupElement} */
+const visualizationModeOptGroup = visualizationModeSelect.querySelector("optgroup");
+pressureVisualizationModes.forEach((pressureVisualizationMode) => {
+  visualizationModeOptGroup.appendChild(new Option(pressureVisualizationMode));
+});
+visualizationModeSelect.value = pressureVisualizationMode;
+
+// CENTER OF PRESSURE VISUALIZATION
+
+const centerOfPressureVisualizationModes = ["normalizedCenter", "center"];
+let centerOfPressureVisualizationMode = "normalizedCenter";
+
+/** @type {HTMLSelectElement} */
+const centerOfPressureVisualizationModeSelect = document.getElementById("centerOfPressureVisualizationMode");
+centerOfPressureVisualizationModeSelect.addEventListener("input", (event) => {
+  centerOfPressureVisualizationMode = event.target.value;
+  console.log({ centerOfPressureVisualizationMode });
+});
+/** @type {HTMLOptGroupElement} */
+const centerOfPressureVisualizationModeOptGroup = centerOfPressureVisualizationModeSelect.querySelector("optgroup");
+centerOfPressureVisualizationModes.forEach((centerOfPressureVisualizationMode) => {
+  centerOfPressureVisualizationModeOptGroup.appendChild(new Option(centerOfPressureVisualizationMode));
+});
+centerOfPressureVisualizationModeSelect.value = centerOfPressureVisualizationMode;

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;
+  }
+});