brilliantsole 0.0.26 → 0.0.28

package/examples/graph/index.html

@@ -67,7 +67,17 @@
       <template id="sensorTypeConfigurationTemplate">
         <label class="sensorTypeConfiguration">
           <b class="sensorType"></b>
-          <input class="sensorRate" type="number" min="0" value="" disabled />
+          <!-- <input class="sensorRate" type="number" min="0" value="" disabled /> -->
+          <select class="sensorRate input">
+            <optgroup label="sensor rate (ms)">
+              <option value="0">0ms</option>
+              <option value="5">5ms</option>
+              <option value="10">10ms</option>
+              <option value="20">20ms</option>
+              <option value="40">40ms</option>
+              <option value="100">100ms</option>
+            </optgroup>
+          </select>
         </label>
       </template>
     </div>

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/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>