brilliantsole 0.0.25 → 0.0.27

package/examples/pressure/index.html

@@ -12,7 +12,6 @@
     }
     .insole {
       position: relative;
-      height: 500px;
     }
     img:not(.overlay) {
       position: relative;
@@ -20,7 +19,9 @@
     img.overlay {
       position: absolute;
     }
-    .insole.left .viz {
+    .insole.left * [data-pressure],
+    .insole.left * [data-haptics],
+    .insole.left * img {
       -webkit-transform: scaleX(-1);
       transform: scaleX(-1);
     }
@@ -45,47 +46,180 @@
     [data-haptics] {
       /* background-color: blue;*/
     }
-    [data-pressure="0"] {
+
+    /* Default pressure images */
+    .viz:not(.ukaton) [data-pressure="0"] {
       -webkit-mask-image: url(../../assets/images/pressure-0.svg);
       mask-image: url(../../assets/images/pressure-0.svg);
     }
-    [data-pressure="1"] {
+    .viz:not(.ukaton) [data-pressure="1"] {
       -webkit-mask-image: url(../../assets/images/pressure-1.svg);
       mask-image: url(../../assets/images/pressure-1.svg);
     }
-    [data-pressure="2"] {
+    .viz:not(.ukaton) [data-pressure="2"] {
       -webkit-mask-image: url(../../assets/images/pressure-2.svg);
       mask-image: url(../../assets/images/pressure-2.svg);
     }
-    [data-pressure="3"] {
+    .viz:not(.ukaton) [data-pressure="3"] {
       -webkit-mask-image: url(../../assets/images/pressure-3.svg);
       mask-image: url(../../assets/images/pressure-3.svg);
     }
-    [data-pressure="4"] {
+    .viz:not(.ukaton) [data-pressure="4"] {
       -webkit-mask-image: url(../../assets/images/pressure-4.svg);
       mask-image: url(../../assets/images/pressure-4.svg);
     }
-    [data-pressure="5"] {
+    .viz:not(.ukaton) [data-pressure="5"] {
       -webkit-mask-image: url(../../assets/images/pressure-5.svg);
       mask-image: url(../../assets/images/pressure-5.svg);
     }
-    [data-pressure="6"] {
+    .viz:not(.ukaton) [data-pressure="6"] {
       -webkit-mask-image: url(../../assets/images/pressure-6.svg);
       mask-image: url(../../assets/images/pressure-6.svg);
     }
-    [data-pressure="7"] {
+    .viz:not(.ukaton) [data-pressure="7"] {
       -webkit-mask-image: url(../../assets/images/pressure-7.svg);
       mask-image: url(../../assets/images/pressure-7.svg);
     }
+    .viz:not(.ukaton) [data-pressure="8"] {
+      display: none;
+    }
+    .viz:not(.ukaton) [data-pressure="9"] {
+      display: none;
+    }
+    .viz:not(.ukaton) [data-pressure="10"] {
+      display: none;
+    }
+    .viz:not(.ukaton) [data-pressure="11"] {
+      display: none;
+    }
+    .viz:not(.ukaton) [data-pressure="12"] {
+      display: none;
+    }
+    .viz:not(.ukaton) [data-pressure="13"] {
+      display: none;
+    }
+    .viz:not(.ukaton) [data-pressure="14"] {
+      display: none;
+    }
+    .viz:not(.ukaton) [data-pressure="15"] {
+      display: none;
+    }
+
+    /* Ukaton-specific pressure images */
+    .viz.ukaton [data-pressure="0"] {
+      -webkit-mask-image: url(../../assets/images/ukaton-pressure-0.svg);
+      mask-image: url(../../assets/images/ukaton-pressure-0.svg);
+    }
+    .viz.ukaton [data-pressure="1"] {
+      -webkit-mask-image: url(../../assets/images/ukaton-pressure-1.svg);
+      mask-image: url(../../assets/images/ukaton-pressure-1.svg);
+    }
+    .viz.ukaton [data-pressure="2"] {
+      -webkit-mask-image: url(../../assets/images/ukaton-pressure-2.svg);
+      mask-image: url(../../assets/images/ukaton-pressure-2.svg);
+    }
+    .viz.ukaton [data-pressure="3"] {
+      -webkit-mask-image: url(../../assets/images/ukaton-pressure-3.svg);
+      mask-image: url(../../assets/images/ukaton-pressure-3.svg);
+    }
+    .viz.ukaton [data-pressure="4"] {
+      -webkit-mask-image: url(../../assets/images/ukaton-pressure-4.svg);
+      mask-image: url(../../assets/images/ukaton-pressure-4.svg);
+    }
+    .viz.ukaton [data-pressure="5"] {
+      -webkit-mask-image: url(../../assets/images/ukaton-pressure-5.svg);
+      mask-image: url(../../assets/images/ukaton-pressure-5.svg);
+    }
+    .viz.ukaton [data-pressure="6"] {
+      -webkit-mask-image: url(../../assets/images/ukaton-pressure-6.svg);
+      mask-image: url(../../assets/images/ukaton-pressure-6.svg);
+    }
+    .viz.ukaton [data-pressure="7"] {
+      -webkit-mask-image: url(../../assets/images/ukaton-pressure-7.svg);
+      mask-image: url(../../assets/images/ukaton-pressure-7.svg);
+    }
+    .viz.ukaton [data-pressure="8"] {
+      -webkit-mask-image: url(../../assets/images/ukaton-pressure-8.svg);
+      mask-image: url(../../assets/images/ukaton-pressure-8.svg);
+    }
+    .viz.ukaton [data-pressure="9"] {
+      -webkit-mask-image: url(../../assets/images/ukaton-pressure-9.svg);
+      mask-image: url(../../assets/images/ukaton-pressure-9.svg);
+    }
+    .viz.ukaton [data-pressure="10"] {
+      -webkit-mask-image: url(../../assets/images/ukaton-pressure-10.svg);
+      mask-image: url(../../assets/images/ukaton-pressure-10.svg);
+    }
+    .viz.ukaton [data-pressure="11"] {
+      -webkit-mask-image: url(../../assets/images/ukaton-pressure-11.svg);
+      mask-image: url(../../assets/images/ukaton-pressure-11.svg);
+    }
+    .viz.ukaton [data-pressure="12"] {
+      -webkit-mask-image: url(../../assets/images/ukaton-pressure-12.svg);
+      mask-image: url(../../assets/images/ukaton-pressure-12.svg);
+    }
+    .viz.ukaton [data-pressure="13"] {
+      -webkit-mask-image: url(../../assets/images/ukaton-pressure-13.svg);
+      mask-image: url(../../assets/images/ukaton-pressure-13.svg);
+    }
+    .viz.ukaton [data-pressure="14"] {
+      -webkit-mask-image: url(../../assets/images/ukaton-pressure-14.svg);
+      mask-image: url(../../assets/images/ukaton-pressure-14.svg);
+    }
+    .viz.ukaton [data-pressure="15"] {
+      -webkit-mask-image: url(../../assets/images/ukaton-pressure-15.svg);
+      mask-image: url(../../assets/images/ukaton-pressure-15.svg);
+    }
 
-    [data-haptics="front"] {
+    .viz [data-haptics="front"] {
       -webkit-mask-image: url(../../assets/images/haptics-front.svg);
       mask-image: url(../../assets/images/haptics-front.svg);
     }
-    [data-haptics="rear"] {
+    .viz [data-haptics="rear"] {
       -webkit-mask-image: url(../../assets/images/haptics-rear.svg);
       mask-image: url(../../assets/images/haptics-rear.svg);
     }
+    .viz:not(.ukaton) [data-haptics] {
+      display: none;
+    }
+
+    .viz {
+      position: relative;
+      height: 500px;
+    }
+
+    .center,
+    .devicePairCenter {
+      position: absolute;
+      left: 0%;
+      bottom: 0%;
+      width: 20px;
+      height: 20px;
+      opacity: 0;
+      z-index: 2;
+    }
+    .center > div,
+    .devicePairCenter > div {
+      border-radius: 50%;
+      position: relative;
+      top: 50%;
+      left: -50%;
+      width: 100%;
+      height: 100%;
+    }
+    .center > div {
+      background-color: green;
+    }
+    .devicePairCenter > div {
+      background-color: orange;
+    }
+
+    .viz:not(.ukaton) img.ukaton {
+      display: none;
+    }
+    .viz.ukaton img:not(.ukaton) {
+      display: none;
+    }
   </style>
   <body>
     <nav>
@@ -115,6 +249,24 @@
       <button id="addDevice">add device</button>
     </p>
 
+    <p>
+      <label>
+        pressure visualization
+        <select id="pressureVisualizationMode">
+          <optgroup label="pressure visualization mode"></optgroup>
+        </select>
+      </label>
+    </p>
+
+    <p>
+      <label>
+        center of pressure visualization
+        <select id="centerOfPressureVisualizationMode">
+          <optgroup label="center of pressure visualization mode"></optgroup>
+        </select>
+      </label>
+    </p>
+
     <div id="insoles"></div>
 
     <template id="insoleTemplate">
@@ -125,6 +277,12 @@
           <button class="togglePressureData" disabled>enable pressure data</button>
         </p>
         <div class="viz">
+          <div class="center">
+            <div></div>
+          </div>
+          <div class="devicePairCenter">
+            <div></div>
+          </div>
           <div data-pressure="0"></div>
           <div data-pressure="1"></div>
           <div data-pressure="2"></div>
@@ -134,10 +292,20 @@
           <div data-pressure="6"></div>
           <div data-pressure="7"></div>
 
+          <div data-pressure="8" class="ukaton"></div>
+          <div data-pressure="9" class="ukaton"></div>
+          <div data-pressure="10" class="ukaton"></div>
+          <div data-pressure="11" class="ukaton"></div>
+          <div data-pressure="12" class="ukaton"></div>
+          <div data-pressure="13" class="ukaton"></div>
+          <div data-pressure="14" class="ukaton"></div>
+          <div data-pressure="15" class="ukaton"></div>
+
           <div data-haptics="front"></div>
           <div data-haptics="rear"></div>
 
           <img src="../../assets/images/right-insole.svg" />
+          <img class="ukaton" src="../../assets/images/ukaton-right-insole.svg" />
         </div>
       </div>
     </template>

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;