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/graph/index.html ADDED Viewed

@@ -0,0 +1,83 @@
+<html>
+  <head>
+    <title>Graph | 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>
+    #charts {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      width: 100%;
+    }
+    .chart {
+      position: relative;
+      border: solid black thin;
+      box-sizing: border-box;
+    }
+    @media screen and (max-width: 1000px) {
+      #charts {
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+    @media screen and (max-width: 800px) {
+      #charts {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+  <body>
+    <nav>
+      <a href="../../">home</a>
+    </nav>
+    <h1>Graph | 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>
+    <br />
+    <div>
+      <button id="toggleConnection">connect</button>
+    </div>
+    <div>
+      <template id="sensorTypeConfigurationTemplate">
+        <label class="sensorTypeConfiguration">
+          <b class="sensorType"></b>
+          <input class="sensorRate" type="number" min="0" value="" disabled />
+        </label>
+      </template>
+    </div>
+    <div id="charts">
+      <template id="chartTemplate">
+        <div class="chart">
+          <canvas></canvas>
+        </div>
+      </template>
+    </div>
+  </body>
+</html>

package/examples/graph/script.js ADDED Viewed

@@ -0,0 +1,469 @@
+import * as BS from "../../build/brilliantsole.module.js";
+import * as THREE from "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.162.0/three.module.min.js";
+window.BS = BS;
+console.log({ BS });
+//BS.setAllConsoleLevelFlags({ log: true });
+let device = new BS.Device();
+console.log({ device });
+window.device = device;
+// 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) => {
+      const 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", () => {
+        device.connectionManager = availableDevice.connectionManager;
+        device.reconnect();
+      });
+      device.addEventListener("connectionStatus", () => {
+        toggleConnectionButton.disabled = device.connectionStatus != "notConnected";
+      });
+      toggleConnectionButton.disabled = device.connectionStatus != "notConnected";
+      availableDevicesContainer.appendChild(availableDeviceContainer);
+    });
+  }
+}
+async function getDevices() {
+  const availableDevices = await BS.DeviceManager.GetDevices();
+  if (!availableDevices) {
+    return;
+  }
+  onAvailableDevices(availableDevices);
+}
+BS.DeviceManager.AddEventListener("availableDevices", (event) => {
+  const devices = event.message.availableDevices;
+  onAvailableDevices(devices);
+});
+getDevices();
+// CONNECTION
+/** @type {HTMLButtonElement} */
+const toggleConnectionButton = document.getElementById("toggleConnection");
+toggleConnectionButton.addEventListener("click", () => {
+  switch (device.connectionStatus) {
+    case "notConnected":
+      device.connect();
+      break;
+    case "connected":
+      device.disconnect();
+      break;
+  }
+});
+device.addEventListener("connectionStatus", () => {
+  switch (device.connectionStatus) {
+    case "connected":
+    case "notConnected":
+      toggleConnectionButton.disabled = false;
+      toggleConnectionButton.innerText = device.isConnected ? "disconnect" : "connect";
+      break;
+    case "connecting":
+    case "disconnecting":
+      toggleConnectionButton.disabled = true;
+      toggleConnectionButton.innerText = device.connectionStatus;
+      break;
+  }
+});
+/** @param {BS.Device} connectedDevice */
+function onConnectedDevice(connectedDevice) {
+  device = connectedDevice;
+  device.addEventListener("getSensorConfiguration", () => {
+    onSensorConfiguration(device);
+  });
+  updateSensorRateInputs(device);
+  onSensorConfiguration(device);
+  addSensorDataEventListeners(device);
+}
+// SENSOR CONFIGURATION
+/** @type {HTMLTemplateElement} */
+const sensorTypeConfigurationTemplate = document.getElementById("sensorTypeConfigurationTemplate");
+BS.ContinuousSensorTypes.forEach((sensorType) => {
+  const sensorTypeConfigurationContainer = sensorTypeConfigurationTemplate.content
+    .cloneNode(true)
+    .querySelector(".sensorTypeConfiguration");
+  sensorTypeConfigurationContainer.querySelector(".sensorType").innerText = sensorType;
+  /** @type {HTMLInputElement} */
+  const sensorRateInput = sensorTypeConfigurationContainer.querySelector(".sensorRate");
+  sensorRateInput.value = 0;
+  sensorRateInput.max = BS.MaxSensorRate;
+  sensorRateInput.step = BS.SensorRateStep;
+  sensorRateInput.addEventListener("input", () => {
+    const sensorRate = Number(sensorRateInput.value);
+    console.log({ sensorType, sensorRate });
+    device.setSensorConfiguration({ [sensorType]: sensorRate });
+  });
+  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];
+    /** @type {HTMLInputElement?} */
+    const input = document.querySelector(`.sensorTypeConfiguration[data-sensor-type="${sensorType}"] input`);
+    if (input) {
+      input.value = sensorRate;
+    }
+    const chartContainer = chartContainers[sensorType];
+    if (chartContainer) {
+      const _chartContainers = [chartContainer];
+      switch (sensorType) {
+        case "gameRotation":
+        case "rotation":
+          _chartContainers.push(chartContainers[`${sensorType}.euler`]);
+          break;
+        case "pressure":
+          _chartContainers.push(chartContainers["pressureMetadata"]);
+          break;
+      }
+      _chartContainers.forEach((chartContainer) => {
+        const display = sensorRate == 0 ? "none" : "";
+        chartContainer.style.display = display;
+      });
+    }
+  }
+}
+/** @param {BS.Device} device */
+function updateSensorRateInputs(device) {
+  for (const sensorType in device.sensorConfiguration) {
+    /** @type {HTMLInputElement?} */
+    const input = document.querySelector(`[data-sensor-type="${sensorType}"] input`);
+    if (input) {
+      input.disabled = !device.isConnected;
+    }
+  }
+}
+// GRAPHING
+let borderWidth = 5;
+const charts = {};
+window.charts = charts;
+/**
+ * @typedef range
+ * @type {object}
+ * @property {number} min
+ * @property {number} max
+ */
+window.maxTicks = 100;
+/**
+ * @param {HTMLCanvasElement} canvas
+ * @param {string} title
+ * @param {string[]?} axesLabels
+ * @param {range} yRange
+ */
+function createChart(canvas, title, axesLabels, yRange) {
+  const data = {
+    labels: new Array(window.maxTicks).fill(0),
+    datasets: [],
+  };
+  axesLabels?.forEach((label) => {
+    data.datasets.push({
+      label,
+      data: new Array(window.maxTicks).fill(0),
+      radius: 0,
+      borderWidth,
+    });
+  });
+  const scales = {
+    y: {
+      display: false,
+    },
+    x: {
+      display: false,
+    },
+  };
+  if (yRange) {
+    Object.assign(scales.y, yRange);
+  }
+  const config = {
+    type: "line",
+    data,
+    options: {
+      responsive: true,
+      plugins: {
+        legend: {
+          position: "top",
+          labels: {
+            font: {
+              //size: 20,
+            },
+          },
+        },
+        title: {
+          display: true,
+          text: title,
+          font: {
+            //size: 20,
+          },
+        },
+      },
+      scales,
+    },
+  };
+  const chart = new Chart(canvas, config);
+  charts[title] = chart;
+  const appendData = (timestamp, data) => {
+    console.log({ timestamp, data });
+    chart.data.labels.push(timestamp);
+    if (chart.data.datasets.length == 0) {
+      data.forEach((_, index) => {
+        chart.data.datasets.push({
+          label: index,
+          data: new Array(window.maxTicks).fill(0),
+          radius: 0,
+          borderWidth,
+        });
+      });
+    }
+    chart.data.datasets.forEach((dataset) => {
+      dataset.data.push(data[dataset.label]);
+    });
+    while (chart.data.labels.length > window.maxTicks) {
+      chart.data.labels.shift();
+      chart.data.datasets.forEach((dataset) => {
+        dataset.data.shift();
+      });
+    }
+    chart.update("none");
+  };
+  chart._appendData = appendData;
+  return appendData;
+}
+const chartsContainer = document.getElementById("charts");
+/** @type {Object<string, HTMLElement>} */
+const chartContainers = {};
+window.chartContainers = chartContainers;
+/** @type {HTMLTemplateElement} */
+const chartTemplate = document.getElementById("chartTemplate");
+BS.ContinuousSensorTypes.forEach((sensorType) => {
+  const chartContainer = chartTemplate.content.cloneNode(true).querySelector(".chart");
+  chartsContainer.appendChild(chartContainer);
+  chartContainers[sensorType] = chartContainer;
+  /** @type {string[]?} */
+  let axesLabels;
+  switch (sensorType) {
+    case "pressure":
+      break;
+    case "acceleration":
+    case "gravity":
+    case "linearAcceleration":
+    case "magnetometer":
+      axesLabels = ["x", "y", "z"];
+      break;
+    case "gyroscope":
+      axesLabels = ["x", "y", "z"];
+      //axesLabels = ["pitch", "yaw", "roll"];
+      break;
+    case "gameRotation":
+    case "rotation":
+      axesLabels = ["x", "y", "z", "w"];
+      break;
+    default:
+      console.warn(`uncaught sensorType "${sensorType}"`);
+      return;
+  }
+  /** @type {range?} */
+  let yRange;
+  switch (sensorType) {
+    case "pressure":
+      yRange = { min: 0, max: 1 };
+      break;
+    case "acceleration":
+      yRange = { min: -2, max: 2 };
+      break;
+    case "gravity":
+      yRange = { min: -1, max: 1 };
+      break;
+    case "linearAcceleration":
+      yRange = { min: -1, max: 1 };
+      break;
+    case "gyroscope":
+      yRange = { min: -360, max: 360 };
+      break;
+    case "magnetometer":
+      // FILL
+      break;
+    case "gameRotation":
+    case "rotation":
+      yRange = { min: -1, max: 1 };
+      break;
+  }
+  switch (sensorType) {
+    case "gameRotation":
+    case "rotation":
+      {
+        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,
+        });
+      }
+      break;
+    case "pressure":
+      {
+        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,
+        });
+      }
+      break;
+  }
+  const quaternion = new THREE.Quaternion();
+  const euler = new THREE.Euler();
+  euler.reorder("YXZ");
+  createChart(chartContainer.querySelector("canvas"), sensorType, axesLabels, yRange);
+});
+/** @param {BS.Device} device */
+function addSensorDataEventListeners(device) {
+  BS.ContinuousSensorTypes.forEach((sensorType) => {
+    const chart = charts[sensorType];
+    if (!chart) {
+      return;
+    }
+    const appendData = chart._appendData;
+    device.addEventListener(sensorType, (event) => {
+      let { timestamp, [sensorType]: data } = event.message;
+      if (sensorType == "pressure") {
+        /** @type {BS.PressureData} */
+        let pressure = data;
+        data = pressure.sensors.map((sensor) => sensor.normalizedValue);
+      }
+      appendData(timestamp, data);
+      switch (sensorType) {
+        case "gameRotation":
+        case "rotation":
+          quaternion.copy(data);
+          euler.setFromQuaternion(quaternion);
+          charts[sensorType + "Euler"]._appendData(timestamp, {
+            pitch: euler.x,
+            yaw: euler.y,
+            roll: euler.z,
+          });
+          break;
+        case "pressure":
+          {
+            /** @type {BS.PressureData} */
+            let pressure = event.message.pressure;
+            charts.pressureMetadata._appendData(timestamp, {
+              sum: pressure.normalizedSum,
+              x: pressure.normalizedCenter?.x || 0,
+              y: pressure.normalizedCenter?.y || 0,
+            });
+          }
+          break;
+      }
+    });
+  });
+}
+// TESTING
+/**
+ * @param {number} min
+ * @param {number} max
+ */
+function randomValueBetween(min, max) {
+  const range = max - min;
+  return min + Math.random() * range;
+}
+let interval = 10;
+let timestamp = 0;
+if (false)
+  window.setInterval(() => {
+    charts.acceleration._appendData(timestamp, {
+      x: randomValueBetween(-1, 1),
+      y: randomValueBetween(-1, 1),
+      z: randomValueBetween(-1, 1),
+    });
+    timestamp += interval;
+  }, interval);
+// 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;
+});
+BS.DeviceManager.AddEventListener("connectedDevices", (event) => {
+  const { connectedDevices } = event.message;
+  const connectedDevice = connectedDevices[0];
+  if (!connectedDevice) {
+    return;
+  }
+  onConnectedDevice(connectedDevice);
+});