brilliantsole 0.0.26 → 0.0.28

package/examples/3d/scene.html

@@ -22,8 +22,14 @@
       renderer="colorManagement: true;"
     >
       <a-assets>
-        <a-asset-item id="leftInsole" src="../../assets/3d/leftInsole.glb"></a-asset-item>
-        <a-asset-item id="rightInsole" src="../../assets/3d/rightInsole.glb"></a-asset-item>
+        <a-asset-item
+          id="leftInsole"
+          src="../../assets/3d/leftInsole.glb"
+        ></a-asset-item>
+        <a-asset-item
+          id="rightInsole"
+          src="../../assets/3d/rightInsole.glb"
+        ></a-asset-item>
       </a-assets>
       <a-light type="directional" position="2 2 -2" target=".target"></a-light>
       <a-light type="directional" position="-2 2 2" target=".target"></a-light>
@@ -51,7 +57,11 @@
       <a-entity class="target">
         <a-entity class="rotation">
           <a-entity class="position" position="0 0 0.005">
-            <a-entity class="insole" gltf-model="#rightInsole" visible="true"></a-entity>
+            <a-entity
+              class="insole"
+              gltf-model="#rightInsole"
+              visible="true"
+            ></a-entity>
           </a-entity>
         </a-entity>
       </a-entity>
@@ -65,8 +75,12 @@
         const isDark = params.has("dark");
         if (isDark) {
           document.querySelector("a-sky").setAttribute("color", "black");
-          document.querySelector("a-camera").setAttribute("orbit-controls", "enableRotate", "false");
-          document.querySelector("a-camera").setAttribute("orbit-controls", "enableRotate", "false");
+          document
+            .querySelector("a-camera")
+            .setAttribute("orbit-controls", "enableRotate", "false");
+          document
+            .querySelector("a-camera")
+            .setAttribute("orbit-controls", "enableRotate", "false");
           document.querySelector("a-camera").setAttribute("position", "0 0 1");
         }
       };

package/examples/3d/script.js

@@ -70,7 +70,7 @@ addDeviceButton.addEventListener("click", () => {
   BS.Device.Connect();
 });
 
-const devicePair = BS.DevicePair.shared;
+const devicePair = BS.DevicePair.insoles;
 devicePair.addEventListener("isConnected", () => {
   addDeviceButton.disabled = devicePair.isConnected;
 });
@@ -83,7 +83,7 @@ const insoleTemplate = document.getElementById("insoleTemplate");
 
 window.sensorRate = 20;
 window.interpolationSmoothing = 0.4;
-window.positionScalar = 0.4;
+window.positionScalar = 0.1;
 
 devicePair.sides.forEach((side) => {
   /** @type {HTMLElement} */
@@ -122,7 +122,7 @@ function onIFrameLoaded(insoleContainer) {
   });
   devicePair.addEventListener("deviceIsConnected", (event) => {
     const device = event.message.device;
-    if (device.insoleSide != side) {
+    if (device.side != side) {
       return;
     }
 
@@ -134,7 +134,7 @@ function onIFrameLoaded(insoleContainer) {
 
   devicePair.addEventListener("deviceConnectionStatus", (event) => {
     const device = event.message.device;
-    if (device.insoleSide != side) {
+    if (device.side != side) {
       return;
     }
 
@@ -188,7 +188,7 @@ function onIFrameLoaded(insoleContainer) {
   });
   devicePair.addEventListener("deviceIsConnected", (event) => {
     const device = event.message.device;
-    if (device.insoleSide != side) {
+    if (device.side != side) {
       return;
     }
 
@@ -224,7 +224,7 @@ function onIFrameLoaded(insoleContainer) {
   });
   devicePair.addEventListener("deviceIsConnected", (event) => {
     const device = event.message.device;
-    if (device.insoleSide != side) {
+    if (device.side != side) {
       return;
     }
 
@@ -234,7 +234,7 @@ function onIFrameLoaded(insoleContainer) {
 
   devicePair.addEventListener("deviceGetSensorConfiguration", (event) => {
     const device = event.message.device;
-    if (device.insoleSide != side) {
+    if (device.side != side) {
       return;
     }
 
@@ -276,7 +276,7 @@ function onIFrameLoaded(insoleContainer) {
 
   devicePair.addEventListener("deviceAcceleration", (event) => {
     const device = event.message.device;
-    if (device.insoleSide != side) {
+    if (device.side != side) {
       return;
     }
     const acceleration = event.message.acceleration;
@@ -284,7 +284,7 @@ function onIFrameLoaded(insoleContainer) {
   });
   devicePair.addEventListener("deviceGravity", (event) => {
     const device = event.message.device;
-    if (device.insoleSide != side) {
+    if (device.side != side) {
       return;
     }
 
@@ -293,7 +293,7 @@ function onIFrameLoaded(insoleContainer) {
   });
   devicePair.addEventListener("deviceLinearAcceleration", (event) => {
     const device = event.message.device;
-    if (device.insoleSide != side) {
+    if (device.side != side) {
       return;
     }
 
@@ -325,22 +325,20 @@ function onIFrameLoaded(insoleContainer) {
   };
   devicePair.addEventListener("deviceGameRotation", (event) => {
     const device = event.message.device;
-    if (device.insoleSide != side) {
+    if (device.side != side) {
       return;
     }
 
-    const gameRotation = event.message.gameRotation;
-    //permuteQuaternion(gameRotation);
+    let gameRotation = event.message.gameRotation;
     updateQuaternion(gameRotation, true);
   });
   devicePair.addEventListener("deviceRotation", (event) => {
     const device = event.message.device;
-    if (device.insoleSide != side) {
+    if (device.side != side) {
       return;
     }
 
     const rotation = event.message.rotation;
-    //permuteQuaternion(rotation);
     updateQuaternion(rotation, true);
   });
 
@@ -352,7 +350,7 @@ function onIFrameLoaded(insoleContainer) {
   const orientationQuaternion = new THREE.Quaternion();
   devicePair.addEventListener("deviceOrientation", (event) => {
     const device = event.message.device;
-    if (device.insoleSide != side) {
+    if (device.side != side) {
       return;
     }
 
@@ -371,7 +369,7 @@ function onIFrameLoaded(insoleContainer) {
   const gyroscopeQuaternion = new THREE.Quaternion();
   devicePair.addEventListener("deviceGyroscope", (event) => {
     const device = event.message.device;
-    if (device.insoleSide != side) {
+    if (device.side != side) {
       return;
     }
 
@@ -408,3 +406,78 @@ websocketClient.addEventListener("connectionStatus", () => {
   }
   toggleServerConnectionButton.disabled = disabled;
 });
+
+// /**
+//  *
+//  * @param {BS.Quaternion} quaternion
+//  * @returns {BS.Quaternion}
+//  */
+// function permuteQuaternion(quaternion) {
+//   const newQuaternion = {};
+//   const permutation = permutations[permutationIndex];
+//   const components = ["x", "y", "z", "w"];
+//   permutation.forEach((_index, toIndex) => {
+//     const fromIndex = Math.abs(_index) - 1;
+//     const sign = Math.sign(_index);
+//     newQuaternion[components[toIndex]] = sign * quaternion[components[fromIndex]];
+//   });
+//   return newQuaternion;
+// }
+
+// function generateSignedPermutations(arr) {
+//   function permute(nums, start = 0, result = []) {
+//     if (start === nums.length) {
+//       result.push([...nums]);
+//       return;
+//     }
+//     for (let i = start; i < nums.length; i++) {
+//       [nums[start], nums[i]] = [nums[i], nums[start]];
+//       permute(nums, start + 1, result);
+//       [nums[start], nums[i]] = [nums[i], nums[start]]; // backtrack
+//     }
+//     return result;
+//   }
+
+//   function generateSigns(permutation, index = 0, result = []) {
+//     if (index === permutation.length) {
+//       result.push([...permutation]);
+//       return;
+//     }
+//     permutation[index] = Math.abs(permutation[index]);
+//     generateSigns(permutation, index + 1, result);
+//     permutation[index] = -permutation[index];
+//     generateSigns(permutation, index + 1, result);
+//     return result;
+//   }
+
+//   let permutations = permute(arr);
+//   let signedPermutations = [];
+//   for (let perm of permutations) {
+//     signedPermutations.push(...generateSigns(perm));
+//   }
+//   return signedPermutations;
+// }
+
+// const permutations = generateSignedPermutations([1, 2, 3, 4]);
+// console.log("permutations", permutations);
+
+// let permutationIndex = 0;
+// window.setPermutationIndex = (newPermutationIndex) => {
+//   permutationIndex = newPermutationIndex % permutations.length;
+//   console.log({ permutationIndex }, permutations[permutationIndex]);
+// };
+
+// document.addEventListener("keydown", (event) => {
+//   switch (event.key) {
+//     case "ArrowDown":
+//       if (permutationIndex > 0) {
+//         window.setPermutationIndex(permutationIndex - 1);
+//       }
+//       event.preventDefault();
+//       break;
+//     case "ArrowUp":
+//       window.setPermutationIndex(permutationIndex + 1);
+//       event.preventDefault();
+//       break;
+//   }
+// });

package/examples/3d-generic/index.html

@@ -0,0 +1,144 @@
+<html>
+  <head>
+    <title>3D | 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 src="https://aframe.io/releases/1.5.0/aframe.min.js"></script> -->
+    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
+    <!-- required to get aframe-orbit-controls-component to work -->
+    <script>
+      THREE.Quaternion.prototype.inverse = THREE.Quaternion.prototype.invert;
+      THREE.Math = THREE.MathUtils;
+    </script>
+    <!-- https://github.com/tizzle/aframe-orbit-controls-component -->
+    <script src="https://cdn.rawgit.com/tizzle/aframe-orbit-controls-component/v0.1.14/dist/aframe-orbit-controls-component.min.js"></script>
+    <script type="module" src="./script.js"></script>
+  </head>
+
+  <style>
+    a-scene {
+      width: 500px;
+      height: 500px;
+      margin: auto;
+      border-radius: 2rem;
+      overflow: hidden;
+      border: solid black;
+      box-sizing: border-box;
+    }
+  </style>
+
+  <body>
+    <nav>
+      <a href="../../">home</a>
+    </nav>
+
+    <h1>3D (generic) | BrilliantSole JavaScript SDK</h1>
+
+    <button id="toggleConnection">connect</button>
+
+    <p>
+      <select class="orientation" disabled>
+        <optgroup label="orientation">
+          <option value="none">no orientation</option>
+          <option>gameRotation</option>
+          <option>rotation</option>
+          <option>orientation</option>
+          <option>gyroscope</option>
+        </optgroup>
+      </select>
+      <button disabled class="resetOrientation">reset orientation</button>
+      <br />
+      <select class="position" disabled>
+        <optgroup label="position">
+          <option value="none">no position</option>
+          <option>acceleration</option>
+          <option>gravity</option>
+          <option>linearAcceleration</option>
+        </optgroup>
+      </select>
+    </p>
+
+    <a-scene
+      embedded
+      xr-mode-ui="enabled: false;"
+      device-orientation-permission-ui="enabled: false"
+      renderer="colorManagement: true;"
+    >
+      <a-assets>
+        <a-asset-item
+          id="leftInsoleModel"
+          src="../../assets/3d/leftInsole.glb"
+        ></a-asset-item>
+        <a-asset-item
+          id="rightInsoleModel"
+          src="../../assets/3d/rightInsole.glb"
+        ></a-asset-item>
+        <a-asset-item
+          id="rightHandModel"
+          src="../../assets/3d/rightHand.glb"
+        ></a-asset-item>
+        <a-asset-item
+          id="glassesModel"
+          src="../../assets/3d/glasses.glb"
+        ></a-asset-item>
+      </a-assets>
+      <a-light type="directional" position="2 2 -2" target=".target"></a-light>
+      <a-light type="directional" position="-2 2 2" target=".target"></a-light>
+      <a-light type="directional" position="2 -2 2" target=".target"></a-light>
+
+      <a-entity light="color: #BBB; type: ambient;"></a-entity>
+
+      <a-camera
+        class="camera"
+        camera="fov: 50; zoom: 3.2;"
+        position="0 0 1"
+        orbit-controls="
+        enableZoom: true;
+        autoRotate: false;
+        
+        target: .target;
+        enableDamping: true;
+        dampingFactor: 0.125;
+        rotateSpeed:0.25;
+        minDistance:0.75;
+        maxDistance:2;
+      "
+      ></a-camera>
+
+      <a-sky></a-sky>
+
+      <a-entity class="target">
+        <a-entity class="rotation">
+          <a-entity class="position" position="0 0 0.005">
+            <a-entity
+              gltf-model="#rightInsoleModel"
+              visible="false"
+              data-type="rightInsole"
+            ></a-entity>
+            <a-entity
+              gltf-model="#leftInsoleModel"
+              visible="false"
+              data-type="leftInsole"
+            ></a-entity>
+            <a-entity
+              gltf-model="#glassesModel"
+              visible="false"
+              data-type="glasses"
+            ></a-entity>
+            <a-entity
+              gltf-model="#rightHandModel"
+              visible="false"
+              data-type="rightGlove"
+            ></a-entity>
+            <a-entity
+              gltf-model="#rightHandModel"
+              visible="false"
+              scale="-1 1 1"
+              data-type="leftGlove"
+            ></a-entity>
+          </a-entity>
+        </a-entity>
+      </a-entity>
+    </a-scene>
+  </body>
+</html>

package/examples/3d-generic/script.js

@@ -0,0 +1,266 @@
+import * as BS from "../../build/brilliantsole.module.js";
+window.BS = BS;
+console.log({ BS });
+//BS.setAllConsoleLevelFlags({ log: false });
+
+// 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;
+});
+
+// 3D VISUALIZATION
+
+/** @typedef {import("../utils/three/three.module.min.js").Vector3} TVector3 */
+/** @typedef {import("../utils/three/three.module.min.js").Quaternion} TQuaternion */
+/** @typedef {import("../utils/three/three.module.min.js").Euler} TEuler */
+
+window.sensorRate = 20;
+window.interpolationSmoothing = 0.4;
+window.positionScalar = 0.1;
+
+const scene = document.querySelector("a-scene");
+const targetEntity = scene.querySelector(".target");
+const targetPositionEntity = targetEntity.querySelector(".position");
+const targetRotationEntity = targetEntity.querySelector(".rotation");
+const modelEntities = Array.from(targetEntity.querySelectorAll("[gltf-model]"));
+
+device.addEventListener("connected", () => {
+  modelEntities.forEach((entity) => {
+    entity.setAttribute("visible", entity.dataset.type == device.type);
+  });
+});
+
+/** @type {HTMLSelectElement} */
+const orientationSelect = document.querySelector(".orientation");
+orientationSelect.addEventListener("input", () => {
+  /** @type {BS.SensorConfiguration} */
+  const configuration = {
+    gameRotation: 0,
+    rotation: 0,
+    gyroscope: 0,
+    orientation: 0,
+  };
+
+  switch (orientationSelect.value) {
+    case "none":
+      break;
+    case "gameRotation":
+      configuration.gameRotation = sensorRate;
+      break;
+    case "rotation":
+      configuration.rotation = sensorRate;
+      break;
+    case "orientation":
+      configuration.orientation = sensorRate;
+      break;
+    case "gyroscope":
+      configuration.gyroscope = sensorRate;
+      break;
+    default:
+      console.error(
+        `uncaught orientationSelect value "${orientationSelect.value}"`
+      );
+      break;
+  }
+
+  device.setSensorConfiguration(configuration);
+});
+device.addEventListener("connected", () => {
+  orientationSelect.querySelectorAll("option").forEach((option) => {
+    option.hidden =
+      BS.SensorTypes.includes(option.value) &&
+      !device.sensorTypes.includes(option.value);
+  });
+});
+
+/** @type {HTMLButtonElement} */
+const resetOrientationButton = document.querySelector(".resetOrientation");
+resetOrientationButton.addEventListener("click", () => {
+  resetOrientation();
+});
+device.addEventListener("isConnected", () => {
+  resetOrientationButton.disabled = !device.isConnected;
+});
+
+/** @type {HTMLSelectElement} */
+const positionSelect = document.querySelector(".position");
+positionSelect.addEventListener("input", () => {
+  /** @type {BS.SensorConfiguration} */
+  const configuration = {
+    acceleration: 0,
+    gravity: 0,
+    linearAcceleration: 0,
+  };
+
+  switch (positionSelect.value) {
+    case "none":
+      break;
+    case "acceleration":
+      configuration.acceleration = sensorRate;
+      break;
+    case "gravity":
+      configuration.gravity = sensorRate;
+      break;
+    case "linearAcceleration":
+      configuration.linearAcceleration = sensorRate;
+      break;
+    default:
+      console.error(`uncaught positionSelect value "${positionSelect.value}"`);
+      break;
+  }
+
+  console.log({ configuration });
+
+  device.setSensorConfiguration(configuration);
+});
+device.addEventListener("connected", () => {
+  positionSelect.querySelectorAll("option").forEach((option) => {
+    option.hidden =
+      BS.SensorTypes.includes(option.value) &&
+      !device.sensorTypes.includes(option.value);
+  });
+});
+
+device.addEventListener("isConnected", () => {
+  orientationSelect.disabled = !device.isConnected;
+  positionSelect.disabled = !device.isConnected;
+});
+
+device.addEventListener("getSensorConfiguration", () => {
+  let newOrientationSelectValue = "none";
+  let newPositionSelectValue = "none";
+
+  for (const key in device.sensorConfiguration) {
+    /** @type {BS.SensorType} */
+    const sensorType = key;
+    if (device.sensorConfiguration[sensorType] > 0) {
+      switch (sensorType) {
+        case "gameRotation":
+        case "rotation":
+        case "orientation":
+        case "gyroscope":
+          newOrientationSelectValue = sensorType;
+          break;
+        case "acceleration":
+        case "gravity":
+        case "linearAcceleration":
+          newPositionSelectValue = sensorType;
+          break;
+      }
+    }
+  }
+
+  orientationSelect.value = newOrientationSelectValue;
+  positionSelect.value = newPositionSelectValue;
+});
+
+/** @type {TVector3} */
+const _position = new THREE.Vector3();
+
+/** @param {BS.Vector3} position */
+const updatePosition = (position) => {
+  _position.copy(position).multiplyScalar(window.positionScalar);
+  targetPositionEntity.object3D.position.lerp(
+    _position,
+    window.interpolationSmoothing
+  );
+};
+
+device.addEventListener("acceleration", (event) => {
+  const acceleration = event.message.acceleration;
+  updatePosition(acceleration);
+});
+device.addEventListener("gravity", () => {
+  const gravity = event.message.gravity;
+  updatePosition(gravity);
+});
+device.addEventListener("linearAcceleration", (event) => {
+  const linearAcceleration = event.message.linearAcceleration;
+  updatePosition(linearAcceleration);
+});
+
+/** @type {TQuaternion} */
+const offsetQuaternion = new THREE.Quaternion();
+const resetOrientation = () => {
+  offsetQuaternion.copy(_quaternion).invert();
+};
+
+/** @type {TQuaternion} */
+const _quaternion = new THREE.Quaternion();
+/** @type {TQuaternion} */
+const targetQuaternion = new THREE.Quaternion();
+/**
+ * @param {BS.Quaternion} quaternion
+ * @param {boolean} applyOffset
+ */
+const updateQuaternion = (quaternion, applyOffset = false) => {
+  _quaternion.copy(quaternion);
+  targetQuaternion.copy(_quaternion);
+  if (applyOffset) {
+    targetQuaternion.premultiply(offsetQuaternion);
+  }
+  targetRotationEntity.object3D.quaternion.slerp(
+    targetQuaternion,
+    window.interpolationSmoothing
+  );
+};
+device.addEventListener("gameRotation", (event) => {
+  let gameRotation = event.message.gameRotation;
+  updateQuaternion(gameRotation, true);
+});
+device.addEventListener("rotation", (event) => {
+  const rotation = event.message.rotation;
+  updateQuaternion(rotation, true);
+});
+
+/** @type {TVector3} */
+const orientationVector3 = new THREE.Vector3();
+/** @type {TEuler} */
+const orientationEuler = new THREE.Euler(0, 0, 0, "YXZ");
+/** @type {TQuaternion} */
+const orientationQuaternion = new THREE.Quaternion();
+device.addEventListener("orientation", (event) => {
+  const orientation = event.message.orientation;
+  orientationVector3
+    .set(orientation.pitch, orientation.heading, orientation.roll)
+    .multiplyScalar(THREE.MathUtils.DEG2RAD);
+  orientationEuler.setFromVector3(orientationVector3);
+  orientationQuaternion.setFromEuler(orientationEuler);
+  updateQuaternion(orientationQuaternion);
+});
+
+/** @type {TVector3} */
+const gyroscopeVector3 = new THREE.Vector3();
+/** @type {TEuler} */
+const gyroscopeEuler = new THREE.Euler();
+/** @type {TQuaternion} */
+const gyroscopeQuaternion = new THREE.Quaternion();
+device.addEventListener("gyroscope", (event) => {
+  const gyroscope = event.message.gyroscope;
+  gyroscopeVector3.copy(gyroscope).multiplyScalar(Math.PI / 180);
+  gyroscopeEuler.setFromVector3(gyroscopeVector3);
+  gyroscopeQuaternion.setFromEuler(gyroscopeEuler);
+  updateQuaternion(gyroscopeQuaternion);
+});

package/examples/balance/script.js

@@ -59,7 +59,7 @@ BS.DeviceManager.AddEventListener("availableDevices", (event) => {
 getDevices();
 
 // CONNECTION
-const devicePair = BS.DevicePair.shared;
+const devicePair = BS.DevicePair.insoles;
 
 /** @type {HTMLButtonElement} */
 const addDeviceButton = document.getElementById("addDevice");
@@ -164,6 +164,7 @@ const target = {
 
   reset() {
     balanceContainer.classList.remove("hover");
+    insideTargetTimeoutId = undefined;
 
     this.height = randomValueBetween(0.2, 0.3);
     this.start = randomValueBetween(0, 1 - this.height);