From 498340ecfa9ed20015a036f653f385c0e7928cb6 Mon Sep 17 00:00:00 2001
From: Johan Nyman <johan@nytamin.se>
Date: Fri, 16 Aug 2024 08:12:57 +0200
Subject: [PATCH] chore: update WebHID demo to use XKeysWatcher

---
 packages/webhid-demo/src/app.ts | 107 +++++++++++++++-----------------
 1 file changed, 51 insertions(+), 56 deletions(-)

diff --git a/packages/webhid-demo/src/app.ts b/packages/webhid-demo/src/app.ts
index 1b740a7..3ace41c 100644
--- a/packages/webhid-demo/src/app.ts
+++ b/packages/webhid-demo/src/app.ts
@@ -1,4 +1,4 @@
-import { getOpenedXKeysPanels, requestXkeysPanels, setupXkeysPanel, XKeys } from 'xkeys-webhid'
+import { requestXkeysPanels, XKeys, XKeysWatcher } from 'xkeys-webhid'
 
 const connectedXkeys = new Set<XKeys>()
 
@@ -9,51 +9,57 @@ function appendLog(str: string) {
 	}
 }
 
-async function openDevice(device: HIDDevice): Promise<void> {
-	const xkeys = await setupXkeysPanel(device)
-
-	connectedXkeys.add(xkeys)
-
-	const id = xkeys.info.name
-
-	appendLog(`${id}: Connected`)
-
-	xkeys.on('disconnected', () => {
-		appendLog(`${id}: Disconnected`)
-		// Clean up stuff:
-		xkeys.removeAllListeners()
-
-		connectedXkeys.delete(xkeys)
-		updateDeviceList()
-	})
-	xkeys.on('error', (...errs) => {
-		appendLog(`${id}: X-keys error: ${errs.join(',')}`)
-	})
-	xkeys.on('down', (keyIndex: number) => {
-		appendLog(`${id}: Button ${keyIndex} down`)
-		xkeys.setBacklight(keyIndex, 'blue')
-	})
-	xkeys.on('up', (keyIndex: number) => {
-		appendLog(`${id}: Button ${keyIndex} up`)
-		xkeys.setBacklight(keyIndex, null)
-	})
-	xkeys.on('jog', (index, value) => {
-		appendLog(`${id}: Jog #${index}: ${value}`)
-	})
-	xkeys.on('joystick', (index, value) => {
-		appendLog(`${id}: Joystick #${index}: ${JSON.stringify(value)}`)
-	})
-	xkeys.on('shuttle', (index, value) => {
-		appendLog(`${id}: Shuttle #${index}: ${value}`)
+function initialize() {
+	// Set up the watcher for xkeys:
+	const watcher = new XKeysWatcher({
+		// automaticUnitIdMode: false
+		// usePolling: true,
+		// pollingInterval= 1000
 	})
-	xkeys.on('tbar', (index, value) => {
-		appendLog(`${id}: T-bar #${index}: ${value}`)
+	watcher.on('error', (e) => {
+		appendLog(`Error in XkeysWatcher: ${e}`)
 	})
+	watcher.on('connected', (xkeys) => {
+		connectedXkeys.add(xkeys)
+
+		const id = xkeys.info.name
+
+		appendLog(`${id}: Connected`)
+
+		xkeys.on('disconnected', () => {
+			appendLog(`${id}: Disconnected`)
+			// Clean up stuff:
+			xkeys.removeAllListeners()
+
+			connectedXkeys.delete(xkeys)
+			updateDeviceList()
+		})
+		xkeys.on('error', (...errs) => {
+			appendLog(`${id}: X-keys error: ${errs.join(',')}`)
+		})
+		xkeys.on('down', (keyIndex: number) => {
+			appendLog(`${id}: Button ${keyIndex} down`)
+			xkeys.setBacklight(keyIndex, 'blue')
+		})
+		xkeys.on('up', (keyIndex: number) => {
+			appendLog(`${id}: Button ${keyIndex} up`)
+			xkeys.setBacklight(keyIndex, null)
+		})
+		xkeys.on('jog', (index, value) => {
+			appendLog(`${id}: Jog #${index}: ${value}`)
+		})
+		xkeys.on('joystick', (index, value) => {
+			appendLog(`${id}: Joystick #${index}: ${JSON.stringify(value)}`)
+		})
+		xkeys.on('shuttle', (index, value) => {
+			appendLog(`${id}: Shuttle #${index}: ${value}`)
+		})
+		xkeys.on('tbar', (index, value) => {
+			appendLog(`${id}: T-bar #${index}: ${value}`)
+		})
 
-	updateDeviceList()
-}
-
-function initialize() {
+		updateDeviceList()
+	})
 	window.addEventListener('load', () => {
 		appendLog('Page loaded')
 
@@ -61,17 +67,6 @@ function initialize() {
 			appendLog('>>>>>  WebHID not supported in this browser  <<<<<')
 			return
 		}
-
-		// Attempt to open a previously selected device:
-		getOpenedXKeysPanels()
-			.then((devices) => {
-				for (const device of devices) {
-					appendLog(`"${device.productName}" already granted in a previous session`)
-					console.log(device)
-					openDevice(device).catch(appendLog)
-				}
-			})
-			.catch(console.error)
 	})
 
 	const consentButton = document.getElementById('consent-button')
@@ -86,8 +81,8 @@ function initialize() {
 				} else {
 					for (const device of devices) {
 						appendLog(`Access granted to "${device.productName}"`)
-						openDevice(device).catch(console.error)
 					}
+					// Note The XKeysWatcher will now pick up the device automatically
 				}
 			})
 			.catch((error) => {
@@ -116,8 +111,8 @@ function updateDeviceList() {
 				button.addEventListener('click', () => {
 					appendLog(xkeys.info.name + ' Closing device')
 					xkeys.close().catch(console.error)
-					// currentXkeys = null
 				})
+				div.appendChild(button)
 
 				container.appendChild(div)
 			})