Tweak serial number communication

package.json

@@ -20,13 +20,13 @@
     "bits-ui": "^1.3.16",
     "clsx": "^2.1.1",
     "mode-watcher": "^0.5.1",
-    "svelte": "^5.25.6",
+    "svelte": "^5.25.7",
     "svelte-sonner": "^0.3.28",
     "tailwind-merge": "^3.1.0",
     "tailwind-variants": "^1.0.0",
     "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.8.2",
+    "typescript": "^5.8.3",
     "unplugin-icons": "^22.1.0",
     "vite": "^6.2.5"
   }

src/lib/constants.ts

@@ -8,3 +8,6 @@ export const DEVICE_ASPECT_RATIO = DEVICE_WIDTH / DEVICE_HEIGHT
 export const BYTES_IN_A_ROW = DEVICE_WIDTH / 8
 
 export const WRITE_TIME = 2000 // ms
+
+export const WRITE_PATTERN_REPORT_ID = 0x01
+export const SERIAL_NUMBER_REPORT_ID = 0x02

src/lib/layouts/connect/ConnectSection.svelte

@@ -5,6 +5,7 @@
 
   import { getDeviceContext, tryOpenDevice } from '$lib/contexts/device.svelte'
   import MoreInfo from '$lib/components/MoreInfo.svelte'
+  import { SERIAL_NUMBER_REPORT_ID } from '$lib/constants'
 
   const deviceCtx = getDeviceContext()
 
@@ -15,23 +16,21 @@
       serial = '[Retrieving...]'
       return
     }
+
     if (!(await tryOpenDevice(deviceCtx.device))) {
       serial = '[Error]'
       return
     }
 
+    let updated = false
     function setSerial(e: HIDInputReportEvent) {
-      if (e.reportId !== 0x02) return
+      if (updated || e.reportId !== SERIAL_NUMBER_REPORT_ID) return
       serial = String.fromCharCode(...Array.from(new Uint8Array(e.data.buffer)))
+      updated = true
     }
 
-    let updated = false
-    deviceCtx.device.addEventListener('inputreport', e => {
-      if (!updated) setSerial(e)
-      updated = true
-    })
-
-    deviceCtx.device.sendReport(0x02, new Uint8Array(1))
+    deviceCtx.device.addEventListener('inputreport', setSerial)
+    await deviceCtx.device.sendReport(SERIAL_NUMBER_REPORT_ID, new Uint8Array(1))
   }
 
   $effect(() => {

src/lib/layouts/write/WriteButton.svelte

@@ -4,7 +4,14 @@
   import { toast } from 'svelte-sonner'
   import { getDeviceContext, tryOpenDevice } from '$lib/contexts/device.svelte'
   import { getRenderedContext } from '$lib/contexts/rendered.svelte'
-  import { BYTES_IN_A_ROW, DEVICE_HEIGHT, DEVICE_WIDTH, WRITE_TIME } from '$lib/constants'
+  import {
+    BYTES_IN_A_ROW,
+    DEVICE_HEIGHT,
+    DEVICE_WIDTH,
+    SERIAL_NUMBER_REPORT_ID,
+    WRITE_PATTERN_REPORT_ID,
+    WRITE_TIME,
+  } from '$lib/constants'
 
   interface Props {
     onprogress: (inPropgress: boolean) => void
@@ -39,7 +46,7 @@
     inProgress = true
 
     try {
-      await deviceCtx.device.sendReport(0x01, buffer)
+      await deviceCtx.device.sendReport(WRITE_PATTERN_REPORT_ID, buffer)
     } catch (e) {
       toast.error(`Error writing to device: ${e}`)
       return