allow to download / tare / stop individual devices

examples/chart/src/devices.ts

@@ -51,13 +51,19 @@ export function setupDevice(massesElement: HTMLDivElement, outputElement: HTMLDi
     })
   }
 
-  function addNewDeviceControl(deviceId: string | undefined) {
+  function addNewDeviceControl(
+    device: Climbro | Entralpi | ForceBoard | Motherboard | mySmartBoard | Progressor | WHC06 | undefined,
+  ) {
     // select last input element
     const deviceControlDiv = document.querySelector(".card .input:last-of-type")
-    if (deviceControlDiv) {
-      deviceControlDiv.classList.add(`input-${deviceId}`)
+    if (deviceControlDiv && device) {
+      deviceControlDiv.classList.add(`input-${device.id}`)
       deviceControlDiv.innerHTML = ""
 
+      const deviceName = document.createElement("strong")
+      deviceName.innerHTML = `${device.constructor.name}`
+      deviceControlDiv.appendChild(deviceName)
+
       // Create the "Stop" button
       const streamButton = document.createElement("button")
       streamButton.innerHTML = `
@@ -71,20 +77,17 @@ export function setupDevice(massesElement: HTMLDivElement, outputElement: HTMLDi
           streamButton.innerHTML = "<div><i class='fa-solid fa-play'></i></div><div>Start</div>"
           isStreaming = false
           convertFontAwesome()
-          connectedDevices.forEach(async (device) => {
-            if (device instanceof Motherboard || device instanceof Progressor || device instanceof ForceBoard) {
-              await device.stop()
-            }
-          })
+
+          if (device instanceof Motherboard || device instanceof Progressor || device instanceof ForceBoard) {
+            await device.stop()
+          }
         } else {
           streamButton.innerHTML = "<div><i class='fa-solid fa-stop'></i></div><div>Stop</div>"
           isStreaming = true
           convertFontAwesome()
-          connectedDevices.forEach(async (device) => {
-            if (device instanceof Motherboard || device instanceof Progressor || device instanceof ForceBoard) {
-              await device.stream()
-            }
-          })
+          if (device instanceof Motherboard || device instanceof Progressor || device instanceof ForceBoard) {
+            await device.stream()
+          }
         }
       })
 
@@ -100,9 +103,7 @@ export function setupDevice(massesElement: HTMLDivElement, outputElement: HTMLDi
     <div>Tare</div>
   `
       tareButton.addEventListener("click", async () => {
-        connectedDevices.forEach(async (device) => {
-          device.tare()
-        })
+        device.tare()
       })
 
       deviceControlDiv.appendChild(tareButton)
@@ -117,16 +118,14 @@ export function setupDevice(massesElement: HTMLDivElement, outputElement: HTMLDi
     <div>Download</div>
   `
       downloadButton.addEventListener("click", async () => {
-        connectedDevices.forEach(async (device) => {
-          device.download()
-        })
+        device.download()
       })
 
       deviceControlDiv.appendChild(downloadButton)
 
       // Append the new select div to the card container in the DOM
-
       document.querySelector(".card")?.appendChild(deviceControlDiv)
+      convertFontAwesome()
     }
   }
 
@@ -203,7 +202,7 @@ export function setupDevice(massesElement: HTMLDivElement, outputElement: HTMLDi
 
     device?.connect(
       async () => {
-        addNewDeviceControl(device.id)
+        addNewDeviceControl(device)
 
         connectedDevices.push(device)
 

examples/chart/src/style.css

@@ -71,14 +71,17 @@ h2 {
 }
 
 #masses {
+  min-height: 80px;
+}
+
+#masses > div {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   padding-top: 0.5rem;
-  min-height: 80px;
 }
 
-#masses div {
+#masses > div > div {
   display: flex;
   justify-content: center;
   flex: 0 0 calc(33.33% - 1rem);
@@ -113,10 +116,27 @@ h2 {
 }
 
 .input {
-  display: flex;
-  gap: 5px;
-  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  align-items: center;
   justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+}
+.input > button {
+  grid-column: span 1;
+}
+
+.input:last-of-type {
+  border: none;
+  grid-template-columns: 1fr;
+  display: inline-grid;
+  width: auto;
+}
+
+.input > strong {
+  grid-column: span 3;
+  padding: 0.5rem;
 }
 
 button {
@@ -162,7 +182,6 @@ select {
   border-radius: 8px;
   border: 1px solid transparent;
   padding: 0.6em;
-  margin-bottom: 0.3rem;
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
@@ -234,11 +253,15 @@ footer a:hover {
     height: 480px !important;
   }
 
+  .input strong {
+    flex: 0 0 auto;
+  }
+
   #masses {
     min-height: 40px;
   }
 
-  #masses div {
+  #masses > div > div {
     flex: 0 0 auto;
   }
 }

package.json

@@ -41,7 +41,7 @@
   "devDependencies": {
     "@eslint/js": "^9.9.0",
     "@types/eslint__js": "^8.42.3",
-    "@types/node": "^20.16.11",
+    "@types/node": "^20.16.12",
     "@types/web-bluetooth": "^0.0.20",
     "eslint": "^9.12.0",
     "husky": "^9.1.6",

packages/docs/src/.vitepress/config.mts

@@ -39,7 +39,7 @@ export default defineConfig({
           { text: "Climbro", link: "/devices/climbro" },
           { text: "Entralpi", link: "/devices/entralpi" },
           { text: "Force Board", link: "/devices/forceboard" },
-          { text: "KilterBoard", link: "/devices/kilterboard" },
+          { text: "Kilter Board", link: "/devices/kilterboard" },
           { text: "MotherBoard", link: "/devices/motherboard" },
           { text: "mySmartBoard", link: "/devices/mysmartboard" },
           { text: "Progressor", link: "/devices/progressor" },

packages/docs/src/devices/index.md

@@ -147,7 +147,7 @@ All devices have the following functions:
 - [Climbro](/devices/climbro)
 - [Entralpi](/devices/entralpi)
 - [ForceBoard](/devices/forceboard)
-- [KilterBoard](/devices/kilterboard)
+- [Kilter Board](/devices/kilterboard)
 - [MotherBoard](/devices/motherboard)
 - [mySmartBoard](/devices/mysmartboard)
 - [Progressor](/devices/progressor)