npm - brilliantsole - Versions diffs - 0.0.1 - Mend

brilliantsole 0.0.1

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 (158) hide show

package/LICENSE +21 -0
package/README.md +21 -0
package/build/brilliantsole.cjs +5957 -0
package/build/brilliantsole.cjs.map +1 -0
package/build/brilliantsole.js +5448 -0
package/build/brilliantsole.js.map +1 -0
package/build/brilliantsole.ls.js +4872 -0
package/build/brilliantsole.ls.js.map +1 -0
package/build/brilliantsole.min.js +6 -0
package/build/brilliantsole.min.js.map +1 -0
package/build/brilliantsole.module.d.ts +908 -0
package/build/brilliantsole.module.js +5412 -0
package/build/brilliantsole.module.js.map +1 -0
package/build/brilliantsole.module.min.d.ts +908 -0
package/build/brilliantsole.module.min.js +6 -0
package/build/brilliantsole.module.min.js.map +1 -0
package/build/brilliantsole.node.module.d.ts +908 -0
package/build/brilliantsole.node.module.js +5906 -0
package/build/brilliantsole.node.module.js.map +1 -0
package/build/dts/BS.d.ts +25 -0
package/build/dts/Device.d.ts +136 -0
package/build/dts/DeviceInformationManager.d.ts +56 -0
package/build/dts/DeviceManager.d.ts +67 -0
package/build/dts/FileTransferManager.d.ts +84 -0
package/build/dts/FirmwareManager.d.ts +71 -0
package/build/dts/InformationManager.d.ts +66 -0
package/build/dts/TfliteManager.d.ts +92 -0
package/build/dts/connection/BaseConnectionManager.d.ts +59 -0
package/build/dts/connection/ClientConnectionManager.d.ts +23 -0
package/build/dts/connection/WebSocketClientConnectionManager.d.ts +23 -0
package/build/dts/connection/bluetooth/BluetoothConnectionManager.d.ts +10 -0
package/build/dts/connection/bluetooth/NobleConnectionManager.d.ts +42 -0
package/build/dts/connection/bluetooth/WebBluetoothConnectionManager.d.ts +20 -0
package/build/dts/connection/bluetooth/bluetoothUUIDs.d.ts +14 -0
package/build/dts/connection/webSocket/ClientConnectionManager.d.ts +23 -0
package/build/dts/connection/webSocket/WebSocketClientConnectionManager.d.ts +23 -0
package/build/dts/devicePair/DevicePair.d.ts +60 -0
package/build/dts/devicePair/DevicePairPressureSensorDataManager.d.ts +25 -0
package/build/dts/devicePair/DevicePairSensorDataManager.d.ts +33 -0
package/build/dts/scanner/BaseScanner.d.ts +66 -0
package/build/dts/scanner/NobleScanner.d.ts +17 -0
package/build/dts/scanner/Scanner.d.ts +3 -0
package/build/dts/sensor/BarometerSensorDataManager.d.ts +16 -0
package/build/dts/sensor/MotionSensorDataManager.d.ts +69 -0
package/build/dts/sensor/PressureSensorDataManager.d.ts +36 -0
package/build/dts/sensor/SensorConfigurationManager.d.ts +44 -0
package/build/dts/sensor/SensorDataManager.d.ts +40 -0
package/build/dts/server/BaseClient.d.ts +85 -0
package/build/dts/server/BaseServer.d.ts +48 -0
package/build/dts/server/ServerUtils.d.ts +23 -0
package/build/dts/server/udp/UDPServer.d.ts +11 -0
package/build/dts/server/udp/UDPUtils.d.ts +9 -0
package/build/dts/server/websocket/WebSocketClient.d.ts +17 -0
package/build/dts/server/websocket/WebSocketServer.d.ts +13 -0
package/build/dts/server/websocket/WebSocketUtils.d.ts +9 -0
package/build/dts/utils/ArrayBufferUtils.d.ts +7 -0
package/build/dts/utils/ArrayUtils.d.ts +2 -0
package/build/dts/utils/CenterOfPressureHelper.d.ts +15 -0
package/build/dts/utils/Console.d.ts +34 -0
package/build/dts/utils/EventDispatcher.d.ts +50 -0
package/build/dts/utils/EventUtils.d.ts +6 -0
package/build/dts/utils/MathUtils.d.ts +21 -0
package/build/dts/utils/ParseUtils.d.ts +5 -0
package/build/dts/utils/RangeHelper.d.ts +8 -0
package/build/dts/utils/Text.d.ts +6 -0
package/build/dts/utils/Timer.d.ts +14 -0
package/build/dts/utils/TypeScriptUtils.d.ts +19 -0
package/build/dts/utils/cbor.d.ts +6 -0
package/build/dts/utils/checksum.d.ts +3 -0
package/build/dts/utils/environment.d.ts +13 -0
package/build/dts/utils/mcumgr.d.ts +88 -0
package/build/dts/utils/stringUtils.d.ts +2 -0
package/build/dts/vibration/VibrationManager.d.ts +45 -0
package/build/dts/vibration/VibrationWaveformEffects.d.ts +2 -0
package/build/index.d.ts +908 -0
package/build/index.node.d.ts +908 -0
package/examples/3d/index.html +109 -0
package/examples/3d/scene.html +57 -0
package/examples/3d/script.js +419 -0
package/examples/balance/index.html +138 -0
package/examples/balance/script.js +243 -0
package/examples/basic/index.html +327 -0
package/examples/basic/script.js +1093 -0
package/examples/center-of-pressure/index.html +132 -0
package/examples/center-of-pressure/script.js +207 -0
package/examples/device-pair/index.html +72 -0
package/examples/device-pair/script.js +187 -0
package/examples/edge-impulse/index.html +94 -0
package/examples/edge-impulse/script.js +1033 -0
package/examples/graph/index.html +83 -0
package/examples/graph/script.js +469 -0
package/examples/machine-learning/index.html +366 -0
package/examples/machine-learning/script.js +1774 -0
package/examples/pressure/index.html +145 -0
package/examples/pressure/script.js +201 -0
package/examples/recording/index.html +187 -0
package/examples/recording/script.js +736 -0
package/examples/server/index.html +266 -0
package/examples/server/script.js +925 -0
package/examples/utils/aframe/fingertip-button-component.js +201 -0
package/examples/utils/aframe/fingertip-collider-target-component.js +102 -0
package/examples/utils/aframe/fingertip-colliders-component.js +147 -0
package/examples/utils/three/three.module.min.js +24846 -0
package/examples/webxr/index.html +221 -0
package/examples/webxr/script.js +1127 -0
package/package.json +83 -0
package/src/BS.ts +68 -0
package/src/Device.ts +734 -0
package/src/DeviceInformationManager.ts +146 -0
package/src/DeviceManager.ts +354 -0
package/src/FileTransferManager.ts +452 -0
package/src/FirmwareManager.ts +357 -0
package/src/InformationManager.ts +283 -0
package/src/TfliteManager.ts +450 -0
package/src/connection/BaseConnectionManager.ts +255 -0
package/src/connection/ClientConnectionManager.ts +120 -0
package/src/connection/bluetooth/BluetoothConnectionManager.ts +34 -0
package/src/connection/bluetooth/NobleConnectionManager.ts +302 -0
package/src/connection/bluetooth/WebBluetoothConnectionManager.ts +269 -0
package/src/connection/bluetooth/bluetoothUUIDs.ts +218 -0
package/src/devicePair/DevicePair.ts +253 -0
package/src/devicePair/DevicePairPressureSensorDataManager.ts +82 -0
package/src/devicePair/DevicePairSensorDataManager.ts +90 -0
package/src/scanner/BaseScanner.ts +189 -0
package/src/scanner/NobleScanner.ts +195 -0
package/src/scanner/Scanner.ts +16 -0
package/src/sensor/BarometerSensorDataManager.ts +41 -0
package/src/sensor/MotionSensorDataManager.ts +151 -0
package/src/sensor/PressureSensorDataManager.ts +112 -0
package/src/sensor/SensorConfigurationManager.ts +177 -0
package/src/sensor/SensorDataManager.ts +166 -0
package/src/server/BaseClient.ts +368 -0
package/src/server/BaseServer.ts +344 -0
package/src/server/ServerUtils.ts +93 -0
package/src/server/udp/UDPServer.ts +229 -0
package/src/server/udp/UDPUtils.ts +20 -0
package/src/server/websocket/WebSocketClient.ts +179 -0
package/src/server/websocket/WebSocketServer.ts +184 -0
package/src/server/websocket/WebSocketUtils.ts +20 -0
package/src/utils/ArrayBufferUtils.ts +88 -0
package/src/utils/ArrayUtils.ts +15 -0
package/src/utils/CenterOfPressureHelper.ts +39 -0
package/src/utils/Console.ts +156 -0
package/src/utils/EventDispatcher.ts +153 -0
package/src/utils/EventUtils.ts +41 -0
package/src/utils/MathUtils.ts +53 -0
package/src/utils/ParseUtils.ts +46 -0
package/src/utils/RangeHelper.ts +38 -0
package/src/utils/Text.ts +30 -0
package/src/utils/Timer.ts +72 -0
package/src/utils/TypeScriptUtils.ts +22 -0
package/src/utils/cbor.js +429 -0
package/src/utils/checksum.ts +41 -0
package/src/utils/environment.ts +46 -0
package/src/utils/mcumgr.js +444 -0
package/src/utils/stringUtils.ts +11 -0
package/src/vibration/VibrationManager.ts +308 -0
package/src/vibration/VibrationWaveformEffects.ts +128 -0

package/examples/pressure/index.html ADDED Viewed

@@ -0,0 +1,145 @@
+<html>
+  <head>
+    <title>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>
+    #insoles {
+      display: flex;
+      flex-direction: row;
+    }
+    .insole {
+      position: relative;
+      height: 500px;
+    }
+    img:not(.overlay) {
+      position: relative;
+    }
+    img.overlay {
+      position: absolute;
+    }
+    .insole.left .viz {
+      -webkit-transform: scaleX(-1);
+      transform: scaleX(-1);
+    }
+    .insole img {
+      height: 100%;
+    }
+    [data-pressure],
+    [data-haptics] {
+      -webkit-mask-repeat: no-repeat;
+      mask-repeat: no-repeat;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      mask-size: 100%;
+      z-index: 1;
+    }
+    [data-pressure] {
+      background-color: red;
+      opacity: 0;
+    }
+    [data-haptics] {
+      /* background-color: blue;*/
+    }
+    [data-pressure="0"] {
+      -webkit-mask-image: url(../../assets/images/pressure-0.svg);
+      mask-image: url(../../assets/images/pressure-0.svg);
+    }
+    [data-pressure="1"] {
+      -webkit-mask-image: url(../../assets/images/pressure-1.svg);
+      mask-image: url(../../assets/images/pressure-1.svg);
+    }
+    [data-pressure="2"] {
+      -webkit-mask-image: url(../../assets/images/pressure-2.svg);
+      mask-image: url(../../assets/images/pressure-2.svg);
+    }
+    [data-pressure="3"] {
+      -webkit-mask-image: url(../../assets/images/pressure-3.svg);
+      mask-image: url(../../assets/images/pressure-3.svg);
+    }
+    [data-pressure="4"] {
+      -webkit-mask-image: url(../../assets/images/pressure-4.svg);
+      mask-image: url(../../assets/images/pressure-4.svg);
+    }
+    [data-pressure="5"] {
+      -webkit-mask-image: url(../../assets/images/pressure-5.svg);
+      mask-image: url(../../assets/images/pressure-5.svg);
+    }
+    [data-pressure="6"] {
+      -webkit-mask-image: url(../../assets/images/pressure-6.svg);
+      mask-image: url(../../assets/images/pressure-6.svg);
+    }
+    [data-pressure="7"] {
+      -webkit-mask-image: url(../../assets/images/pressure-7.svg);
+      mask-image: url(../../assets/images/pressure-7.svg);
+    }
+    [data-haptics="front"] {
+      -webkit-mask-image: url(../../assets/images/haptics-front.svg);
+      mask-image: url(../../assets/images/haptics-front.svg);
+    }
+    [data-haptics="rear"] {
+      -webkit-mask-image: url(../../assets/images/haptics-rear.svg);
+      mask-image: url(../../assets/images/haptics-rear.svg);
+    }
+  </style>
+  <body>
+    <nav>
+      <a href="../../">home</a>
+    </nav>
+    <h1>Pressure | 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="insoles"></div>
+    <template id="insoleTemplate">
+      <div class="insole">
+        <p>
+          <button class="toggleConnection" disabled>disconnect</button>
+          <br />
+          <button class="togglePressureData" disabled>enable pressure data</button>
+        </p>
+        <div class="viz">
+          <div data-pressure="0"></div>
+          <div data-pressure="1"></div>
+          <div data-pressure="2"></div>
+          <div data-pressure="3"></div>
+          <div data-pressure="4"></div>
+          <div data-pressure="5"></div>
+          <div data-pressure="6"></div>
+          <div data-pressure="7"></div>
+          <div data-haptics="front"></div>
+          <div data-haptics="rear"></div>
+          <img src="../../assets/images/right-insole.svg" />
+        </div>
+      </div>
+    </template>
+  </body>
+</html>

package/examples/pressure/script.js ADDED Viewed

@@ -0,0 +1,201 @@
+import * as BS from "../../build/brilliantsole.module.js";
+window.BS = BS;
+console.log({ BS });
+//BS.setAllConsoleLevelFlags({ log: true });
+// GET DEVICES
+/** @type {HTMLTemplateElement} */
+const availableDeviceTemplate = document.getElementById("availableDeviceTemplate");
+const availableDevicesContainer = document.getElementById("availableDevices");
+/** @param {BS.Device[]} availableDevices */
+function onAvailableDevices(availableDevices) {
+  availableDevicesContainer.innerHTML = "";
+  if (availableDevices.length == 0) {
+    availableDevicesContainer.innerText = "no devices available";
+  } else {
+    availableDevices.forEach((availableDevice) => {
+      let availableDeviceContainer = availableDeviceTemplate.content.cloneNode(true).querySelector(".availableDevice");
+      availableDeviceContainer.querySelector(".name").innerText = availableDevice.name;
+      availableDeviceContainer.querySelector(".type").innerText = availableDevice.type;
+      /** @type {HTMLButtonElement} */
+      const toggleConnectionButton = availableDeviceContainer.querySelector(".toggleConnection");
+      toggleConnectionButton.addEventListener("click", () => {
+        availableDevice.toggleConnection();
+      });
+      const onConnectionStatusUpdate = () => {
+        switch (availableDevice.connectionStatus) {
+          case "connected":
+          case "notConnected":
+            toggleConnectionButton.disabled = false;
+            toggleConnectionButton.innerText = availableDevice.isConnected ? "disconnect" : "connect";
+            break;
+          case "connecting":
+          case "disconnecting":
+            toggleConnectionButton.disabled = true;
+            toggleConnectionButton.innerText = availableDevice.connectionStatus;
+            break;
+        }
+      };
+      availableDevice.addEventListener("connectionStatus", () => onConnectionStatusUpdate());
+      onConnectionStatusUpdate();
+      availableDevicesContainer.appendChild(availableDeviceContainer);
+    });
+  }
+}
+async function getDevices() {
+  const availableDevices = await BS.DeviceManager.GetDevices();
+  if (!availableDevices) {
+    return;
+  }
+  onAvailableDevices(availableDevices);
+}
+BS.DeviceManager.AddEventListener("availableDevices", (event) => {
+  const { availableDevices } = event.message;
+  onAvailableDevices(availableDevices);
+});
+getDevices();
+// ADD DEVICE
+/** @type {HTMLButtonElement} */
+const addDeviceButton = document.getElementById("addDevice");
+addDeviceButton.addEventListener("click", () => {
+  BS.Device.Connect();
+});
+const devicePair = BS.DevicePair.shared;
+devicePair.addEventListener("isConnected", () => {
+  addDeviceButton.disabled = devicePair.isConnected;
+});
+// PRESSURE VIZUALIZATION
+const insolesContainer = document.getElementById("insoles");
+/** @type {HTMLTemplateElement} */
+const insoleTemplate = document.getElementById("insoleTemplate");
+/** @type {Object.<string, HTMLElement>} */
+const insoleContainers = {};
+/** @type {Object.<string, HTMLButtonElement>} */
+const toggleConnectionButtons = {};
+/** @type {Object.<string, HTMLButtonElement>} */
+const togglePressureDataButtons = {};
+/** @type {Object.<string, HTMLElement[]>} */
+const pressureSensorElementsContainers = {};
+devicePair.sides.forEach((side) => {
+  /** @type {HTMLElement} */
+  const insoleContainer = insoleTemplate.content.cloneNode(true).querySelector(".insole");
+  insoleContainer.classList.add(side);
+  insolesContainer.appendChild(insoleContainer);
+  insoleContainers[side] = insoleContainer;
+  /** @type {HTMLButtonElement} */
+  const toggleConnectionButton = insoleContainer.querySelector(".toggleConnection");
+  toggleConnectionButton.addEventListener("click", () => {
+    devicePair[side].toggleConnection();
+  });
+  toggleConnectionButtons[side] = toggleConnectionButton;
+  /** @type {HTMLButtonElement} */
+  const togglePressureDataButton = insoleContainer.querySelector(".togglePressureData");
+  togglePressureDataButton.addEventListener("click", () => {
+    const isPressureDataEnabled = devicePair[side].sensorConfiguration.pressure > 0;
+    if (isPressureDataEnabled) {
+      devicePair[side].setSensorConfiguration({ pressure: 0 });
+      togglePressureDataButton.innerText = "disabling pressure data...";
+    } else {
+      devicePair[side].setSensorConfiguration({ pressure: 20 });
+      togglePressureDataButton.innerText = "enabling pressure data...";
+    }
+    togglePressureDataButton.disabled = true;
+  });
+  togglePressureDataButtons[side] = togglePressureDataButton;
+  /** @type {HTMLElement[]} */
+  const pressureSensorElements = Array.from(insoleContainer.querySelectorAll("[data-pressure]"));
+  pressureSensorElementsContainers[side] = pressureSensorElements;
+});
+devicePair.addEventListener("deviceIsConnected", (event) => {
+  const { device } = event.message;
+  const toggleConnectionButton = toggleConnectionButtons[device.insoleSide];
+  if (device.isConnected) {
+    toggleConnectionButton.disabled = false;
+  }
+  toggleConnectionButton.innerText = device.isConnected ? "disconnect" : "reconnect";
+  togglePressureDataButtons[device.insoleSide].disabled = !device.isConnected;
+});
+devicePair.addEventListener("deviceConnectionStatus", (event) => {
+  const { device } = event.message;
+  const toggleConnectionButton = toggleConnectionButtons[device.insoleSide];
+  switch (device.connectionStatus) {
+    case "connected":
+    case "notConnected":
+      toggleConnectionButton.disabled = false;
+      toggleConnectionButton.innerText = device.isConnected ? "disconnect" : "reconnect";
+      break;
+    case "connecting":
+    case "disconnecting":
+      toggleConnectionButton.disabled = true;
+      toggleConnectionButton.innerText = device.connectionStatus;
+      break;
+  }
+});
+devicePair.addEventListener("deviceGetSensorConfiguration", (event) => {
+  const { device } = event.message;
+  const togglePressureDataButton = togglePressureDataButtons[device.insoleSide];
+  const isPressureDataEnabled = device.sensorConfiguration.pressure > 0;
+  if (isPressureDataEnabled) {
+    togglePressureDataButton.innerText = "disable pressure data";
+  } else {
+    togglePressureDataButton.innerText = "enable pressure data";
+  }
+  togglePressureDataButton.disabled = false;
+});
+devicePair.addEventListener("devicePressure", (event) => {
+  const { pressure, side } = event.message;
+  pressure.sensors.forEach((sensor, index) => {
+    pressureSensorElementsContainers[side][index].style.opacity = sensor.normalizedValue;
+  });
+});
+// SERVER
+const websocketClient = new BS.WebSocketClient();
+/** @type {HTMLButtonElement} */
+const toggleServerConnectionButton = document.getElementById("toggleServerConnection");
+toggleServerConnectionButton.addEventListener("click", () => {
+  websocketClient.toggleConnection();
+});
+websocketClient.addEventListener("isConnected", () => {
+  toggleServerConnectionButton.innerText = websocketClient.isConnected ? "disconnect from server" : "connect to server";
+});
+websocketClient.addEventListener("connectionStatus", () => {
+  let disabled;
+  switch (websocketClient.connectionStatus) {
+    case "notConnected":
+    case "connected":
+      disabled = false;
+      break;
+    case "connecting":
+    case "disconnecting":
+      disabled = true;
+      break;
+  }
+  toggleServerConnectionButton.disabled = disabled;
+});

package/examples/recording/index.html ADDED Viewed

@@ -0,0 +1,187 @@
+<html>
+    <head>
+        <title>Recording | 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://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
+        <script type="module" src="./script.js"></script>
+    </head>
+    <style>
+        label {
+            display: block;
+        }
+        div {
+            margin-top: 1rem;
+        }
+        .noListStyle {
+            margin-top: 0;
+            list-style: none;
+            padding-left: 0;
+        }
+        .gap:not(:last-of-type) {
+            padding-bottom: 1rem;
+        }
+        .recording {
+        }
+        .hidden {
+            display: none;
+        }
+        .visualization {
+            overflow-x: auto;
+            width: 100%;
+        }
+        .visualization2 {
+            width: 3000px;
+            height: 300px;
+        }
+        .visualization canvas {
+        }
+    </style>
+    <body>
+        <nav>
+            <a href="../../">home</a>
+        </nav>
+        <h1>Recording | BrilliantSole JavaScript SDK</h1>
+        <div>
+            <h2>available devices</h2>
+            <button id="getDevices" disabled hidden>get available devices</button>
+            <div id="availableDevices">
+                <template id="availableDeviceTemplate">
+                    <div class="availableDevice">
+                        <ul class="noListStyle">
+                            <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>connection</h2>
+            <button id="addDevice">add device</button>
+        </div>
+        <div>
+            <h2>connected devices</h2>
+            <div id="connectedDevices">
+                <template id="connectedDeviceTemplate">
+                    <div class="connectedDevice">
+                        <ul class="noListStyle">
+                            <li><b>name: </b> <span class="name"></span></li>
+                            <li><b>type: </b> <span class="type"></span></li>
+                            <li>
+                                <b>sensor configuration:</b>
+                                <pre class="sensorConfiguration"></pre>
+                            </li>
+                            <li><button class="disconnect">disconnect</button></li>
+                        </ul>
+                    </div>
+                </template>
+            </div>
+        </div>
+        <div>
+            <h2>sensor configuration</h2>
+            <div id="sensorConfiguration">
+                <template id="sensorTypeConfigurationTemplate">
+                    <label class="sensorTypeConfiguration">
+                        <b class="sensorType"></b>
+                        <input class="sensorRate" type="number" min="0" value="" />ms
+                    </label>
+                </template>
+            </div>
+            <div>
+                <label>enable sensors <input id="toggleSensorData" type="checkbox" disabled /></label>
+            </div>
+        </div>
+        <div>
+            <h2>recording configuration</h2>
+            <label>
+                countdown (seconds)
+                <input type="number" min="0" value="0" max="10" step="1" id="recordingCountdownInput" />
+            </label>
+            <label>fixed duration? <input id="isRecordingFixedDuration" type="checkbox" /></label>
+            <label>
+                duration (seconds)
+                <input type="number" min="1" value="1" max="30" step="1" id="recordingDuration" disabled />
+            </label>
+        </div>
+        <div>
+            <h2>recording</h2>
+            <button id="toggleRecording" disabled>record</button>
+            <h2><span id="recordingCountdownSpan"></span></h2>
+        </div>
+        <div>
+            <h2>recordings</h2>
+            <div>
+                <label>
+                    load recording (json) <input id="loadAsJSON" type="file" multiple accept="application/json" />
+                </label>
+            </div>
+            <div>
+                <button id="saveAllAsJSON" disabled>save all as json</button>
+                <button id="saveAllAsCSV" disabled hidden>save all as CSV</button>
+                <button id="deleteAllRecordings" disabled>delete all</button>
+            </div>
+            <div id="recordings">
+                <template id="recordingTemplate">
+                    <div class="recording">
+                        <h3><span class="timestamp"></span> (<span class="duration"></span> seconds)</h3>
+                        <div>
+                            <button class="saveAsCSV" hidden>save as csv</button>
+                            <button class="saveAsJSON">save as json</button>
+                            <button class="delete">delete</button>
+                        </div>
+                        <br />
+                        <ol class="devices noListStyle"></ol>
+                        <hr />
+                    </div>
+                </template>
+                <template id="deviceRecordingTemplate">
+                    <li class="deviceRecording gap">
+                        <ul class="noListStyle">
+                            <li><b>id:</b> <span class="id"></span></li>
+                            <li><b>name:</b> <span class="name"></span></li>
+                            <li><b>type:</b> <span class="type"></span></li>
+                            <li><b>sensor types:</b> <span class="sensorTypes"></span></li>
+                        </ul>
+                    </li>
+                </template>
+                <template id="sensorTypeRecordingTemplate">
+                    <li class="sensorTypeRecording gap">
+                        <ul>
+                            <li><b>sensor type:</b> <span class="sensorType"></span></li>
+                            <li><b>data rate:</b> <span class="dataRate"></span>ms</li>
+                            <li><b>initial timestamp:</b> <span class="initialTimestamp"></span></li>
+                            <button class="toggleVisualization">visualize</button>
+                            <div class="hidden visualization">
+                                <div class="visualization2">
+                                    <canvas></canvas>
+                                </div>
+                            </div>
+                        </ul>
+                    </li>
+                </template>
+            </div>
+        </div>
+    </body>
+</html>