npm - brilliantsole - Versions diffs - 0.0.25 → 0.0.27 - Mend

brilliantsole 0.0.25 → 0.0.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (110) hide show

package/README.md +16 -10
package/assets/3d/rightHand.glb +0 -0
package/assets/images/ukaton-pressure-0.svg +9 -0
package/assets/images/ukaton-pressure-1.svg +9 -0
package/assets/images/ukaton-pressure-10.svg +9 -0
package/assets/images/ukaton-pressure-11.svg +9 -0
package/assets/images/ukaton-pressure-12.svg +9 -0
package/assets/images/ukaton-pressure-13.svg +9 -0
package/assets/images/ukaton-pressure-14.svg +9 -0
package/assets/images/ukaton-pressure-15.svg +9 -0
package/assets/images/ukaton-pressure-2.svg +9 -0
package/assets/images/ukaton-pressure-3.svg +9 -0
package/assets/images/ukaton-pressure-4.svg +9 -0
package/assets/images/ukaton-pressure-5.svg +9 -0
package/assets/images/ukaton-pressure-6.svg +9 -0
package/assets/images/ukaton-pressure-7.svg +9 -0
package/assets/images/ukaton-pressure-8.svg +9 -0
package/assets/images/ukaton-pressure-9.svg +9 -0
package/assets/images/ukaton-right-insole.svg +798 -0
package/build/brilliantsole.cjs +255 -119
package/build/brilliantsole.cjs.map +1 -1
package/build/brilliantsole.js +283 -140
package/build/brilliantsole.js.map +1 -1
package/build/brilliantsole.ls.js +210 -103
package/build/brilliantsole.ls.js.map +1 -1
package/build/brilliantsole.min.js +1 -1
package/build/brilliantsole.min.js.map +1 -1
package/build/brilliantsole.module.d.ts +76 -60
package/build/brilliantsole.module.js +282 -140
package/build/brilliantsole.module.js.map +1 -1
package/build/brilliantsole.module.min.d.ts +76 -60
package/build/brilliantsole.module.min.js +1 -1
package/build/brilliantsole.module.min.js.map +1 -1
package/build/brilliantsole.node.module.d.ts +75 -60
package/build/brilliantsole.node.module.js +254 -119
package/build/brilliantsole.node.module.js.map +1 -1
package/build/dts/BS.d.ts +2 -2
package/build/dts/Device.d.ts +11 -7
package/build/dts/DeviceManager.d.ts +1 -0
package/build/dts/InformationManager.d.ts +6 -5
package/build/dts/connection/BaseConnectionManager.d.ts +2 -0
package/build/dts/connection/ClientConnectionManager.d.ts +4 -0
package/build/dts/connection/bluetooth/BluetoothConnectionManager.d.ts +1 -0
package/build/dts/connection/bluetooth/NobleConnectionManager.d.ts +1 -0
package/build/dts/connection/bluetooth/WebBluetoothConnectionManager.d.ts +1 -0
package/build/dts/devicePair/DevicePair.d.ts +14 -10
package/build/dts/devicePair/DevicePairPressureSensorDataManager.d.ts +8 -4
package/build/dts/devicePair/DevicePairSensorDataManager.d.ts +2 -2
package/build/dts/server/BaseClient.d.ts +1 -0
package/build/dts/utils/CenterOfPressureHelper.d.ts +2 -2
package/build/dts/utils/MathUtils.d.ts +2 -0
package/build/index.d.ts +76 -60
package/build/index.node.d.ts +75 -60
package/examples/3d/script.js +90 -17
package/examples/balance/script.js +2 -1
package/examples/basic/index.html +21 -2
package/examples/basic/script.js +17 -3
package/examples/bottango/index.html +11 -1
package/examples/bottango/script.js +2 -2
package/examples/center-of-pressure/index.html +114 -114
package/examples/center-of-pressure/script.js +1 -1
package/examples/device-pair/index.html +58 -58
package/examples/device-pair/script.js +12 -8
package/examples/gloves/index.html +116 -0
package/examples/gloves/scene.html +124 -0
package/examples/gloves/script.js +615 -0
package/examples/graph/index.html +11 -1
package/examples/graph/script.js +2 -2
package/examples/pressure/index.html +180 -12
package/examples/pressure/script.js +144 -7
package/examples/recording/index.html +191 -183
package/examples/server/index.html +11 -1
package/examples/server/script.js +6 -3
package/examples/ukaton-firmware-update/index.html +20 -0
package/examples/ukaton-firmware-update/manifest.json +11 -0
package/examples/ukaton-firmware-update/merged-firmware.bin +0 -0
package/examples/webxr/script.js +3 -3
package/package.json +1 -1
package/src/BS.ts +3 -8
package/src/Device.ts +41 -8
package/src/DeviceInformationManager.ts +4 -2
package/src/DeviceManager.ts +10 -1
package/src/FileTransferManager.ts +1 -1
package/src/FirmwareManager.ts +1 -1
package/src/InformationManager.ts +24 -7
package/src/TfliteManager.ts +1 -1
package/src/connection/BaseConnectionManager.ts +23 -6
package/src/connection/ClientConnectionManager.ts +13 -1
package/src/connection/bluetooth/BluetoothConnectionManager.ts +6 -1
package/src/connection/bluetooth/NobleConnectionManager.ts +8 -1
package/src/connection/bluetooth/WebBluetoothConnectionManager.ts +5 -1
package/src/devicePair/DevicePair.ts +53 -27
package/src/devicePair/DevicePairPressureSensorDataManager.ts +51 -23
package/src/devicePair/DevicePairSensorDataManager.ts +5 -5
package/src/scanner/NobleScanner.ts +5 -3
package/src/sensor/BarometerSensorDataManager.ts +1 -1
package/src/sensor/MotionSensorDataManager.ts +1 -1
package/src/sensor/PressureSensorDataManager.ts +13 -8
package/src/sensor/SensorConfigurationManager.ts +3 -3
package/src/sensor/SensorDataManager.ts +1 -1
package/src/server/BaseClient.ts +43 -2
package/src/server/BaseServer.ts +149 -39
package/src/server/udp/UDPServer.ts +1 -1
package/src/server/websocket/WebSocketClient.ts +3 -2
package/src/server/websocket/WebSocketServer.ts +1 -1
package/src/utils/CenterOfPressureHelper.ts +5 -5
package/src/utils/MathUtils.ts +31 -1
package/src/utils/ParseUtils.ts +1 -1
package/src/utils/checksum.ts +1 -1
package/src/utils/mcumgr.js +1 -1

package/examples/basic/script.js CHANGED Viewed

@@ -117,6 +117,12 @@ device.addEventListener("deviceInformation", () => {
   deviceInformationPre.textContent = JSON.stringify(device.deviceInformation, null, 2);
 });
+// MTU
+const deviceMtuSpan = document.getElementById("mtu");
+device.addEventListener("getMtu", () => {
+  deviceMtuSpan.innerText = device.mtu;
+});
 // BATTERY LEVEL
 /** @type {HTMLSpanElement} */
@@ -263,16 +269,24 @@ BS.SensorTypes.forEach((sensorType) => {
 });
 device.addEventListener("getSensorConfiguration", () => {
   for (const sensorType in device.sensorConfiguration) {
-    document.querySelector(`.sensorTypeConfiguration[data-sensor-type="${sensorType}"] input`).value =
+    document.querySelector(`.sensorTypeConfiguration[data-sensor-type="${sensorType}"] .input`).value =
       device.sensorConfiguration[sensorType];
   }
 });
 device.addEventListener("isConnected", () => {
   for (const sensorType in device.sensorConfiguration) {
-    document.querySelector(`[data-sensor-type="${sensorType}"] input`).disabled = !device.isConnected;
+    document.querySelector(`[data-sensor-type="${sensorType}"] .input`).disabled = !device.isConnected;
   }
 });
+// PRESSURE RANGE
+/** @type {HTMLButtonElement} */
+const resetPressureRangeButton = document.getElementById("resetPressureRange");
+resetPressureRangeButton.addEventListener("click", () => {
+  device.resetPressureRange();
+});
 // SENSOR DATA
 /** @type {HTMLTemplateElement} */
@@ -1000,7 +1014,7 @@ device.addEventListener("firmwareImages", () => {
 });
 device.addEventListener("isConnected", () => {
-  if (device.isConnected) {
+  if (device.isConnected && device.canUpdateFirmware) {
     device.getFirmwareImages();
   }
 });

package/examples/bottango/index.html CHANGED Viewed

@@ -60,7 +60,17 @@
       <template id="sensorTypeConfigurationTemplate">
         <label class="sensorTypeConfiguration">
           <b class="sensorType"></b>
-          <input class="sensorRate" type="number" min="0" value="" disabled />ms
+          <!-- <input class="sensorRate" type="number" min="0" value="" disabled />ms -->
+          <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/bottango/script.js CHANGED Viewed

@@ -152,13 +152,13 @@ BS.SensorTypes.forEach((sensorType) => {
 });
 device.addEventListener("getSensorConfiguration", () => {
   for (const sensorType in device.sensorConfiguration) {
-    document.querySelector(`.sensorTypeConfiguration[data-sensor-type="${sensorType}"] input`).value =
+    document.querySelector(`.sensorTypeConfiguration[data-sensor-type="${sensorType}"] .input`).value =
       device.sensorConfiguration[sensorType];
   }
 });
 device.addEventListener("isConnected", () => {
   for (const sensorType in device.sensorConfiguration) {
-    document.querySelector(`[data-sensor-type="${sensorType}"] input`).disabled = !device.isConnected;
+    document.querySelector(`[data-sensor-type="${sensorType}"] .input`).disabled = !device.isConnected;
   }
 });

package/examples/center-of-pressure/index.html CHANGED Viewed

@@ -1,132 +1,132 @@
 <html>
-    <head>
-        <title>Center of Pressure | 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>
-    </head>
+  <head>
+    <title>Center of Pressure | 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>
+  </head>
-    <style>
-        #centerOfPressureContainer {
-            width: calc(100% - 1rem);
-            height: 80%;
-            border: solid black;
-            margin: 1rem auto;
-            border-radius: 20px;
-            overflow: hidden;
-            display: flex;
-        }
+  <style>
+    #centerOfPressureContainer {
+      height: 300px;
+      aspect-ratio: 1;
+      border: solid black;
+      border-radius: 20px;
+      overflow: hidden;
+      display: flex;
+      margin-top: 2rem;
+    }
-        #centerOfPressureRange {
-            width: calc(100% - 2rem);
-            height: calc(100% - 2rem);
-            margin: auto;
-            position: relative;
-        }
+    #centerOfPressureRange {
+      width: calc(100% - 2rem);
+      height: calc(100% - 2rem);
+      margin: auto;
+      position: relative;
+    }
-        #centerOfPressure {
-            position: absolute;
-        }
+    #centerOfPressure {
+      position: absolute;
+    }
-        #centerOfPressure .visual {
-            border-radius: 50%;
-            background-color: red;
-            width: 2rem;
-            height: 2rem;
-            left: -1rem;
-            top: -1rem;
-            position: relative;
-            z-index: 1;
-        }
+    #centerOfPressure .visual {
+      border-radius: 50%;
+      background-color: red;
+      width: 2rem;
+      height: 2rem;
+      left: -1rem;
+      top: -1rem;
+      position: relative;
+      z-index: 1;
+    }
-        #target {
-            position: absolute;
-            display: none;
-        }
-        #target .visual {
-            border-radius: 15px;
-            background-color: yellow;
-            width: 100%;
-            height: 100%;
-            display: flex;
-        }
-        #target .ring {
-            box-sizing: border-box;
-            border: solid blue thick;
-            border-radius: 15px;
-            width: 100%;
-            height: 100%;
-            margin: auto;
-        }
+    #target {
+      position: absolute;
+      display: none;
+    }
+    #target .visual {
+      border-radius: 15px;
+      background-color: yellow;
+      width: 100%;
+      height: 100%;
+      display: flex;
+    }
+    #target .ring {
+      box-sizing: border-box;
+      border: solid blue thick;
+      border-radius: 15px;
+      width: 100%;
+      height: 100%;
+      margin: auto;
+    }
-        #target.hover .visual {
-            background-color: limegreen;
-        }
+    #target.hover .visual {
+      background-color: limegreen;
+    }
-        #target:not(.hover) .ring {
-            display: none;
-        }
+    #target:not(.hover) .ring {
+      display: none;
+    }
-        @keyframes shrink {
-            from {
-                width: 100%;
-                height: 100%;
-            }
-            to {
-                width: 0%;
-                height: 0%;
-            }
-        }
+    @keyframes shrink {
+      from {
+        width: 100%;
+        height: 100%;
+      }
+      to {
+        width: 0%;
+        height: 0%;
+      }
+    }
-        #target.hover .ring {
-            animation-name: shrink;
-            animation-duration: 3s;
-            animation-timing-function: linear;
-        }
-    </style>
+    #target.hover .ring {
+      animation-name: shrink;
+      animation-duration: 3s;
+      animation-timing-function: linear;
+    }
+  </style>
-    <body>
-        <nav>
-            <a href="../../">home</a>
-        </nav>
+  <body>
+    <nav>
+      <a href="../../">home</a>
+    </nav>
-        <h1>Center of Pressure | BrilliantSole JavaScript SDK</h1>
+    <h1>Center of Pressure | BrilliantSole JavaScript SDK</h1>
-        <div>
-            <h2>available devices</h2>
-            <div id="availableDevices">
-                <template id="availableDeviceTemplate">
-                    <div class="availableDevice">
-                        <ul>
-                            <li><b>name: </b> <span class="name"></span></li>
-                            <li><b>type: </b> <span class="type"></span></li>
-                            <li><button class="toggleConnection">connect</button></li>
-                        </ul>
-                    </div>
-                </template>
-            </div>
-        </div>
+    <div>
+      <h2>available devices</h2>
+      <div id="availableDevices">
+        <template id="availableDeviceTemplate">
+          <div class="availableDevice">
+            <ul>
+              <li><b>name: </b> <span class="name"></span></li>
+              <li><b>type: </b> <span class="type"></span></li>
+              <li><button class="toggleConnection">connect</button></li>
+            </ul>
+          </div>
+        </template>
+      </div>
+    </div>
-        <br />
+    <br />
-        <div>
-            <button id="addDevice">add device</button>
-            <button id="togglePressureData" disabled>enable pressure data</button>
-            <button id="resetPressureRange" disabled>recalibrate</button>
-            <button id="toggleGame">start game</button>
-        </div>
+    <div>
+      <button id="addDevice">add device</button>
+      <button id="togglePressureData" disabled>enable pressure data</button>
+      <button id="resetPressureRange" disabled>recalibrate</button>
+      <button id="toggleGame">start game</button>
+    </div>
-        <div id="centerOfPressureContainer">
-            <div id="centerOfPressureRange">
-                <div id="centerOfPressure">
-                    <div class="visual"></div>
-                </div>
-                <div id="target">
-                    <div class="visual">
-                        <div class="ring"></div>
-                    </div>
-                </div>
-            </div>
+    <div id="centerOfPressureContainer">
+      <div id="centerOfPressureRange">
+        <div id="centerOfPressure">
+          <div class="visual"></div>
+        </div>
+        <div id="target">
+          <div class="visual">
+            <div class="ring"></div>
+          </div>
         </div>
-    </body>
+      </div>
+    </div>
+  </body>
 </html>

package/examples/center-of-pressure/script.js CHANGED Viewed

@@ -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");

package/examples/device-pair/index.html CHANGED Viewed

@@ -1,72 +1,72 @@
 <html>
-    <head>
-        <title>Device Pair | 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>
-    </head>
+  <head>
+    <title>Device Pair | 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>
+  </head>
-    <style>
-        #devices {
-            display: flex;
-            flex-direction: row;
-            gap: 1rem;
-        }
+  <style>
+    #devices {
+      display: flex;
+      flex-direction: row;
+      gap: 1rem;
+    }
-        .pressure {
-            height: 6rem;
-        }
-    </style>
+    .pressure {
+      height: 10rem;
+    }
+  </style>
-    <body>
-        <nav>
-            <a href="../../">home</a>
-        </nav>
+  <body>
+    <nav>
+      <a href="../../">home</a>
+    </nav>
-        <h1>Device Pair | BrilliantSole JavaScript SDK</h1>
+    <h1>Device Pair | BrilliantSole JavaScript SDK</h1>
-        <div>
-            <h2>available devices</h2>
-            <div id="availableDevices">
-                <template id="availableDeviceTemplate">
-                    <div class="availableDevice">
-                        <ul>
-                            <li><b>name: </b> <span class="name"></span></li>
-                            <li><b>type: </b> <span class="type"></span></li>
-                            <li><button class="toggleConnection">connect</button></li>
-                        </ul>
-                    </div>
-                </template>
-            </div>
-        </div>
+    <div>
+      <h2>available devices</h2>
+      <div id="availableDevices">
+        <template id="availableDeviceTemplate">
+          <div class="availableDevice">
+            <ul>
+              <li><b>name: </b> <span class="name"></span></li>
+              <li><b>type: </b> <span class="type"></span></li>
+              <li><button class="toggleConnection">connect</button></li>
+            </ul>
+          </div>
+        </template>
+      </div>
+    </div>
-        <br />
+    <br />
-        <div>
-            <button id="addDevice">add device</button>
-            <button id="togglePressureData" disabled>enable pressure data</button>
-            <button id="resetPressureRange" disabled>recalibrate</button>
-        </div>
+    <div>
+      <button id="addDevice">add device</button>
+      <button id="togglePressureData" disabled>enable pressure data</button>
+      <button id="resetPressureRange" disabled>recalibrate</button>
+    </div>
-        <div id="devicePair">
-            <h2>Device Pair</h2>
+    <div id="devicePair">
+      <h2>Device Pair</h2>
-            <h3>pressure</h3>
-            <pre class="pressure"></pre>
-        </div>
+      <h3>pressure</h3>
+      <pre class="pressure"></pre>
+    </div>
-        <div id="devices"></div>
+    <div id="devices"></div>
-        <template id="deviceTemplate">
-            <div class="device">
-                <h2><span class="side"></span> side</h2>
-                <p>
-                    <button class="toggleConnection" disabled>disconnect</button>
-                </p>
+    <template id="deviceTemplate">
+      <div class="device">
+        <h2><span class="side"></span> side</h2>
+        <p>
+          <button class="toggleConnection" disabled>disconnect</button>
+        </p>
-                <h3>pressure</h3>
-                <pre class="pressure"></pre>
-            </div>
-        </template>
-    </body>
+        <h3>pressure</h3>
+        <pre class="pressure"></pre>
+      </div>
+    </template>
+  </body>
 </html>

package/examples/device-pair/script.js CHANGED Viewed

@@ -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");
@@ -116,7 +116,7 @@ devicePair.sides.forEach((side) => {
   devicePair.addEventListener("deviceIsConnected", (event) => {
     const { device } = event.message;
-    if (device.insoleSide != side) {
+    if (device.side != side) {
       return;
     }
@@ -128,7 +128,7 @@ devicePair.sides.forEach((side) => {
   devicePair.addEventListener("deviceConnectionStatus", (event) => {
     const { device } = event.message;
-    if (device.insoleSide != side) {
+    if (device.side != side) {
       return;
     }
@@ -150,7 +150,7 @@ devicePair.sides.forEach((side) => {
   const pressurePre = deviceContainer.querySelector(".pressure");
   devicePair.addEventListener("devicePressure", (event) => {
     const { device } = event.message;
-    if (device.insoleSide != side) {
+    if (device.side != side) {
       return;
     }
@@ -158,8 +158,10 @@ devicePair.sides.forEach((side) => {
     pressurePre.textContent = JSON.stringify(
       {
-        center: pressure.normalizedCenter,
-        sum: pressure.normalizedSum,
+        center: pressure.center,
+        scaledSum: pressure.scaledSum,
+        normalizedCenter: pressure.normalizedCenter,
+        normalizedSum: pressure.normalizedSum,
       },
       (key, value) => value?.toFixed?.(3) || value,
       2
@@ -178,8 +180,10 @@ devicePair.addEventListener("pressure", (event) => {
   devicePairPressurePre.textContent = JSON.stringify(
     {
-      center: pressure.normalizedCenter,
-      sum: pressure.normalizedSum,
+      center: pressure.center,
+      scaledSum: pressure.scaledSum,
+      normalizedCenter: pressure.normalizedCenter,
+      normalizedSum: pressure.normalizedSum,
     },
     (key, value) => value?.toFixed?.(3) || value,
     2

package/examples/gloves/index.html ADDED Viewed

@@ -0,0 +1,116 @@
+<html>
+  <head>
+    <title>Gloves | 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>
+    #gloves {
+      display: flex;
+      flex-direction: row;
+      height: 100%;
+      gap: 0.5rem;
+    }
+    .glove {
+      position: relative;
+      height: 100%;
+      min-width: 700px;
+      flex: 1;
+    }
+    .scene {
+      width: 100%;
+      height: 100%;
+      margin: auto;
+      border-radius: 2rem;
+      overflow: hidden;
+      border: solid black;
+      box-sizing: border-box;
+    }
+    .scene iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+  </style>
+  <body>
+    <nav>
+      <a href="../../">home</a>
+    </nav>
+    <h1>Gloves | BrilliantSole JavaScript SDK</h1>
+    <button id="toggleServerConnection">connect to server</button>
+    <div>
+      <h2>available devices</h2>
+      <div id="availableDevices">
+        <template id="availableDeviceTemplate">
+          <div class="availableDevice">
+            <ul>
+              <li><b>name: </b> <span class="name"></span></li>
+              <li><b>type: </b> <span class="type"></span></li>
+              <li><button class="toggleConnection">connect</button></li>
+            </ul>
+          </div>
+        </template>
+      </div>
+    </div>
+    <p>
+      <button id="addDevice">add device</button>
+    </p>
+    <div id="gloves"></div>
+    <template id="gloveTemplate">
+      <div class="glove">
+        <p>
+          <button class="toggleConnection" disabled>disconnect</button>
+          <br />
+          <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>
+          <br />
+          <button disabled class="togglePressure">enable pressure</button>
+          <button disabled class="resetPressure">reset pressure</button>
+          <br />
+          <button disabled class="toggleCursor">enable cursor</button>
+          <br />
+        </p>
+        <div class="scene">
+          <iframe src="./scene.html"></iframe>
+        </div>
+      </div>
+    </template>
+  </body>
+</html>