npm - brilliantsole - Versions diffs - 0.0.26 → 0.0.28 - Mend

brilliantsole 0.0.26 → 0.0.28

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

package/README.md +16 -10
package/assets/3d/anchor.glb +0 -0
package/assets/3d/coin.glb +0 -0
package/assets/3d/glasses.glb +0 -0
package/assets/3d/rightHand.glb +0 -0
package/assets/audio/bounceMedium.wav +0 -0
package/assets/audio/bounceStrong.wav +0 -0
package/assets/audio/bounceWeak.wav +0 -0
package/assets/audio/coin.wav +0 -0
package/assets/audio/getUp.wav +0 -0
package/assets/audio/grab.wav +0 -0
package/assets/audio/kick.wav +0 -0
package/assets/audio/platterFadeIn old.wav +0 -0
package/assets/audio/platterFadeIn.wav +0 -0
package/assets/audio/platterFadeOut.wav +0 -0
package/assets/audio/punch.wav +0 -0
package/assets/audio/punchSqueak.wav +0 -0
package/assets/audio/purr.wav +0 -0
package/assets/audio/purrFadeOut.wav +0 -0
package/assets/audio/release.wav +0 -0
package/assets/audio/splat.wav +0 -0
package/assets/audio/stomp.wav +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 +2870 -882
package/build/brilliantsole.cjs.map +1 -1
package/build/brilliantsole.js +2477 -782
package/build/brilliantsole.js.map +1 -1
package/build/brilliantsole.ls.js +2260 -592
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 +302 -116
package/build/brilliantsole.module.js +2468 -782
package/build/brilliantsole.module.js.map +1 -1
package/build/brilliantsole.module.min.d.ts +302 -116
package/build/brilliantsole.module.min.js +1 -1
package/build/brilliantsole.module.min.js.map +1 -1
package/build/brilliantsole.node.module.d.ts +295 -113
package/build/brilliantsole.node.module.js +2860 -882
package/build/brilliantsole.node.module.js.map +1 -1
package/build/dts/BS-output.d.ts +10 -0
package/build/dts/BS.d.ts +21 -9
package/build/dts/CameraManager.d.ts +72 -0
package/build/dts/Device.d.ts +53 -16
package/build/dts/DeviceInformationManager.d.ts +4 -4
package/build/dts/DeviceManager.d.ts +3 -0
package/build/dts/FileTransferManager.d.ts +18 -8
package/build/dts/InformationManager.d.ts +8 -5
package/build/dts/TfliteManager.d.ts +22 -2
package/build/dts/WifiManager.d.ts +61 -0
package/build/dts/connection/BaseConnectionManager.d.ts +37 -3
package/build/dts/connection/ClientConnectionManager.d.ts +11 -2
package/build/dts/connection/bluetooth/BluetoothConnectionManager.d.ts +1 -0
package/build/dts/connection/bluetooth/NobleConnectionManager.d.ts +3 -1
package/build/dts/connection/bluetooth/WebBluetoothConnectionManager.d.ts +2 -0
package/build/dts/connection/bluetooth/bluetoothUUIDs.d.ts +2 -2
package/build/dts/connection/udp/UDPConnectionManager.d.ts +28 -0
package/build/dts/connection/webSocket/WebSocketConnectionManager.d.ts +25 -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/scanner/BaseScanner.d.ts +4 -1
package/build/dts/scanner/NobleScanner.d.ts +2 -1
package/build/dts/sensor/MotionSensorDataManager.d.ts +5 -2
package/build/dts/sensor/SensorDataManager.d.ts +5 -4
package/build/dts/server/BaseClient.d.ts +6 -3
package/build/dts/server/ServerUtils.d.ts +1 -1
package/build/dts/server/websocket/WebSocketUtils.d.ts +1 -1
package/build/dts/utils/CenterOfPressureHelper.d.ts +2 -2
package/build/dts/utils/Console.d.ts +2 -0
package/build/dts/utils/MathUtils.d.ts +2 -0
package/build/dts/utils/ThrottleUtils.d.ts +2 -0
package/build/dts/vibration/VibrationManager.d.ts +19 -2
package/build/index.d.ts +299 -113
package/build/index.node.d.ts +292 -110
package/examples/3d/scene.html +19 -5
package/examples/3d/script.js +90 -17
package/examples/3d-generic/index.html +144 -0
package/examples/3d-generic/script.js +266 -0
package/examples/balance/script.js +2 -1
package/examples/basic/index.html +232 -18
package/examples/basic/script.js +746 -106
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/edge-impulse/script.js +135 -44
package/examples/edge-impulse-test/README.md +11 -0
package/examples/edge-impulse-test/edge-impulse-standalone.js +7228 -0
package/examples/edge-impulse-test/edge-impulse-standalone.wasm +0 -0
package/examples/edge-impulse-test/index.html +75 -0
package/examples/edge-impulse-test/run-impulse.js +135 -0
package/examples/edge-impulse-test/script.js +200 -0
package/examples/gloves/edge-impulse-standalone.js +7228 -0
package/examples/gloves/edge-impulse-standalone.wasm +0 -0
package/examples/gloves/index.html +119 -0
package/examples/gloves/run-impulse.js +135 -0
package/examples/gloves/scene.html +124 -0
package/examples/gloves/script.js +931 -0
package/examples/graph/index.html +11 -1
package/examples/graph/script.js +94 -37
package/examples/pressure/index.html +180 -12
package/examples/pressure/script.js +144 -7
package/examples/punch/index.html +135 -0
package/examples/punch/punch.tflite +0 -0
package/examples/punch/script.js +169 -0
package/examples/recording/index.html +191 -183
package/examples/server/index.html +109 -23
package/examples/server/script.js +322 -111
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/utils/aframe/aframe-master.min.js +2 -0
package/examples/utils/aframe/bs-vibration.js +150 -0
package/examples/utils/aframe/force-pushable.js +80 -0
package/examples/utils/aframe/grabbable-anchor.js +46 -0
package/examples/utils/aframe/grabbable-listener.js +31 -0
package/examples/utils/aframe/grabbable-physics-body.js +190 -0
package/examples/utils/aframe/grow-shrink.js +25 -0
package/examples/utils/aframe/hand-punch.js +119 -0
package/examples/utils/aframe/my-obb-collider.js +293 -0
package/examples/utils/aframe/occlude-hand-tracking-controls.js +47 -0
package/examples/utils/aframe/occlude-mesh.js +42 -0
package/examples/utils/aframe/palm-up-detector.js +47 -0
package/examples/utils/aframe/shadow-material.js +20 -0
package/examples/utils/aframe/soft-shadow-light.js +9 -0
package/examples/webxr/script.js +3 -3
package/examples/webxr-2/assets/3d/soccerBall.glb +0 -0
package/examples/webxr-2/assets/audio/shellBounce.wav +0 -0
package/examples/webxr-2/assets/audio/shellHit.wav +0 -0
package/examples/webxr-2/assets/audio/shellKick.wav +0 -0
package/examples/webxr-2/assets/audio/soccerBounce.wav +0 -0
package/examples/webxr-2/assets/audio/soccerKick.mp3 +0 -0
package/examples/webxr-2/assets/images/shellTexture.png +0 -0
package/examples/webxr-2/components/bs-ankle.js +337 -0
package/examples/webxr-2/components/coin.js +84 -0
package/examples/webxr-2/components/custom-wrap.js +17 -0
package/examples/webxr-2/components/goomba.js +3250 -0
package/examples/webxr-2/components/init-shell-material.js +215 -0
package/examples/webxr-2/components/platter.js +172 -0
package/examples/webxr-2/components/shell.js +374 -0
package/examples/webxr-2/components/soccer-ball.js +250 -0
package/examples/webxr-2/components/squashed-goomba.js +249 -0
package/examples/webxr-2/edge-impulse-standalone.js +7228 -0
package/examples/webxr-2/edge-impulse-standalone.wasm +0 -0
package/examples/webxr-2/index.html +996 -0
package/examples/webxr-2/kick.tflite +0 -0
package/examples/webxr-2/kick2.tflite +0 -0
package/examples/webxr-2/run-impulse.js +135 -0
package/examples/webxr-2/script.js +384 -0
package/package.json +2 -1
package/src/.prettierrc +4 -0
package/src/BS.ts +66 -9
package/src/CameraManager.ts +499 -0
package/src/Device.ts +620 -92
package/src/DeviceInformationManager.ts +22 -11
package/src/DeviceManager.ts +94 -25
package/src/FileTransferManager.ts +146 -21
package/src/FirmwareManager.ts +1 -1
package/src/InformationManager.ts +62 -20
package/src/TfliteManager.ts +172 -26
package/src/WifiManager.ts +323 -0
package/src/connection/BaseConnectionManager.ts +145 -30
package/src/connection/ClientConnectionManager.ts +47 -11
package/src/connection/bluetooth/BluetoothConnectionManager.ts +14 -3
package/src/connection/bluetooth/NobleConnectionManager.ts +155 -42
package/src/connection/bluetooth/WebBluetoothConnectionManager.ts +104 -35
package/src/connection/bluetooth/bluetoothUUIDs.ts +40 -13
package/src/connection/udp/UDPConnectionManager.ts +356 -0
package/src/connection/websocket/WebSocketConnectionManager.ts +282 -0
package/src/devicePair/DevicePair.ts +145 -49
package/src/devicePair/DevicePairPressureSensorDataManager.ts +72 -24
package/src/devicePair/DevicePairSensorDataManager.ts +5 -5
package/src/scanner/BaseScanner.ts +49 -11
package/src/scanner/NobleScanner.ts +81 -17
package/src/sensor/BarometerSensorDataManager.ts +1 -1
package/src/sensor/MotionSensorDataManager.ts +22 -7
package/src/sensor/PressureSensorDataManager.ts +47 -13
package/src/sensor/SensorConfigurationManager.ts +75 -24
package/src/sensor/SensorDataManager.ts +107 -26
package/src/server/BaseClient.ts +192 -37
package/src/server/BaseServer.ts +201 -43
package/src/server/ServerUtils.ts +39 -9
package/src/server/udp/UDPServer.ts +74 -23
package/src/server/udp/UDPUtils.ts +9 -2
package/src/server/websocket/WebSocketClient.ts +30 -9
package/src/server/websocket/WebSocketServer.ts +1 -1
package/src/server/websocket/WebSocketUtils.ts +4 -2
package/src/utils/CenterOfPressureHelper.ts +5 -5
package/src/utils/Console.ts +62 -9
package/src/utils/MathUtils.ts +31 -1
package/src/utils/ParseUtils.ts +25 -6
package/src/utils/ThrottleUtils.ts +62 -0
package/src/utils/Timer.ts +1 -1
package/src/utils/checksum.ts +1 -1
package/src/utils/mcumgr.js +1 -1
package/src/vibration/VibrationManager.ts +166 -40

package/examples/recording/index.html CHANGED Viewed

@@ -1,187 +1,195 @@
 <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>
+  <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 -->
+            <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>
+      <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 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>
+              <button class="saveAsCSV" hidden>save as csv</button>
+              <button class="saveAsJSON">save as json</button>
+              <button class="delete">delete</button>
             </div>
-        </div>
-    </body>
+            <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>

package/examples/server/index.html CHANGED Viewed

@@ -17,6 +17,9 @@
     ol {
       margin-top: 0;
     }
+    .hidden {
+      display: none;
+    }
   </style>
   <body>
@@ -27,12 +30,18 @@
     <h1>Server | BrilliantSole JavaScript SDK</h1>
     <div>
-      <label>webSocket url <input id="webSocketUrl" type="url" placeholder="localhost" /></label>
+      <label
+        >webSocket url
+        <input id="webSocketUrl" type="url" placeholder="localhost"
+      /></label>
       <button id="toggleConnection">connect</button>
     </div>
     <div>
-      <label> is scanning available? <input id="isScanningAvailable" type="checkbox" readonly disabled /> </label>
+      <label>
+        is scanning available?
+        <input id="isScanningAvailable" type="checkbox" readonly disabled />
+      </label>
       <button id="toggleScan" disabled>scan</button>
     </div>
@@ -42,9 +51,21 @@
         <template id="discoveredDeviceTemplate">
           <div class="discoveredDevice">
             <label class="block"><b>name:</b> <span class="name"></span></label>
-            <label class="block"><b>device type:</b> <span class="deviceType"></span></label>
+            <label class="block"
+              ><b>device type:</b> <span class="deviceType"></span
+            ></label>
             <label class="block"><b>rssi:</b> <span class="rssi"></span></label>
+            <label class="block hidden"
+              ><b>ip address:</b> <span class="ipAddress"></span
+            ></label>
+            <label class="block hidden"
+              ><b>is wifi secure:</b> <span class="isWifiSecure"></span
+            ></label>
             <button class="toggleConnection">connect</button>
+            <button class="connectViaWebSockets hidden">
+              connect via webSockets
+            </button>
+            <button class="connectViaUDP hidden">connect via udp</button>
           </div>
         </template>
       </div>
@@ -64,16 +85,25 @@
               <pre class="deviceInformation"></pre>
             </label>
-            <label class="block"><b>battery level:</b> <span class="batteryLevel"></span>%</label>
+            <label class="block"
+              ><b>battery level:</b> <span class="batteryLevel"></span>%</label
+            >
             <label class="block"><b>name:</b> <span class="name"></span></label>
             <label>
               <b>new name: </b>
-              <input class="setNameInput" type="text" placeholder="type in a name" disabled />
+              <input
+                class="setNameInput"
+                type="text"
+                placeholder="type in a name"
+                disabled
+              />
             </label>
             <button class="setNameButton" disabled>set name</button>
-            <label class="block"><b>device type:</b> <span class="deviceType"></span></label>
+            <label class="block"
+              ><b>device type:</b> <span class="deviceType"></span
+            ></label>
             <label class="block">
               <b>new type: </b>
               <select class="setTypeSelect" disabled>
@@ -90,7 +120,17 @@
             <template class="sensorTypeConfigurationTemplate">
               <label class="sensorTypeConfiguration block">
                 <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>
@@ -100,7 +140,9 @@
             </label>
             <div>
-              <button class="triggerVibration" disabled>triggerVibration</button>
+              <button class="triggerVibration" disabled>
+                triggerVibration
+              </button>
             </div>
             <div>
@@ -138,7 +180,12 @@
                 <br />
                 <label>
                   <b>new name: </b>
-                  <input class="setTfliteNameInput" type="text" placeholder="type in a name" disabled />
+                  <input
+                    class="setTfliteNameInput"
+                    type="text"
+                    placeholder="type in a name"
+                    disabled
+                  />
                 </label>
                 <button class="setTfliteNameButton" disabled>set name</button>
               </div>
@@ -156,7 +203,9 @@
               </div>
               <div>
-                <label><b>sample rate:</b> <span class="tfliteSampleRate"></span></label>
+                <label
+                  ><b>sample rate:</b> <span class="tfliteSampleRate"></span
+                ></label>
                 <br />
                 <label>
                   <b>new sample rate: </b>
@@ -170,7 +219,9 @@
                     disabled
                   />
                 </label>
-                <button class="setTfliteSampleRateButton" disabled>set sample rate</button>
+                <button class="setTfliteSampleRateButton" disabled>
+                  set sample rate
+                </button>
               </div>
               <div>
@@ -183,25 +234,44 @@
                   </template>
                 </div>
-                <button disabled class="setTfliteSensorTypes">set sensor types</button>
+                <button disabled class="setTfliteSensorTypes">
+                  set sensor types
+                </button>
               </div>
               <div>
-                <label><b>is ready?</b> <input type="checkbox" class="tfliteIsReady" disabled /></label>
+                <label
+                  ><b>is ready?</b>
+                  <input type="checkbox" class="tfliteIsReady" disabled
+                /></label>
               </div>
               <div>
-                <label><b>threshold:</b> <span class="tfliteThreshold"></span></label>
+                <label
+                  ><b>threshold:</b> <span class="tfliteThreshold"></span
+                ></label>
                 <br />
                 <label>
                   <b>new threshold: </b>
-                  <input class="setTfliteThresholdInput" type="number" min="0" value="0" max="1" step="0.1" disabled />
+                  <input
+                    class="setTfliteThresholdInput"
+                    type="number"
+                    min="0"
+                    value="0"
+                    max="1"
+                    step="0.1"
+                    disabled
+                  />
                 </label>
-                <button class="setTfliteThresholdButton" disabled>set threshold</button>
+                <button class="setTfliteThresholdButton" disabled>
+                  set threshold
+                </button>
               </div>
               <div>
-                <label><b>capture delay:</b> <span class="tfliteCaptureDelay"></span></label>
+                <label
+                  ><b>capture delay:</b> <span class="tfliteCaptureDelay"></span
+                ></label>
                 <br />
                 <label>
                   <b>new capture delay: </b>
@@ -215,15 +285,23 @@
                     disabled
                   />
                 </label>
-                <button class="setTfliteCaptureDelayButton" disabled>set capture delay</button>
+                <button class="setTfliteCaptureDelayButton" disabled>
+                  set capture delay
+                </button>
               </div>
               <div>
                 <label>
                   <b>inferencing enabled? </b>
-                  <input class="tfliteInferencingEnabled" type="checkbox" disabled />
+                  <input
+                    class="tfliteInferencingEnabled"
+                    type="checkbox"
+                    disabled
+                  />
                 </label>
-                <button class="toggleTfliteInferencingEnabled" disabled>enable inferencing</button>
+                <button class="toggleTfliteInferencingEnabled" disabled>
+                  enable inferencing
+                </button>
               </div>
               <div>
@@ -239,11 +317,19 @@
               <label><b>status:</b> <span class="firmwareStatus"></span></label>
               <br />
-              <label>firmware <input class="firmwareInput" type="file" accept=".bin" /></label>
+              <label
+                >firmware
+                <input class="firmwareInput" type="file" accept=".bin"
+              /></label>
               <br />
-              <button class="toggleFirmwareUpload" disabled>upload firmware</button>
+              <button class="toggleFirmwareUpload" disabled>
+                upload firmware
+              </button>
               <progress value="0" class="firmwareUploadProgress"></progress>
-              <span class="firmwareUploadProgressPercentage" style="display: none"></span>
+              <span
+                class="firmwareUploadProgressPercentage"
+                style="display: none"
+              ></span>
               <br />