diff --git a/src/lib/components/MoreInfo.svelte b/src/lib/components/MoreInfo.svelte
index 280ebd7..f2a7eec 100644
--- a/src/lib/components/MoreInfo.svelte
+++ b/src/lib/components/MoreInfo.svelte
@@ -1,17 +1,24 @@
-
+ {#if !icon}
+
+ {:else}
+ {@render icon()}
+ {/if}
diff --git a/src/lib/contexts/device.svelte.ts b/src/lib/contexts/device.svelte.ts
index 1560100..063aec9 100644
--- a/src/lib/contexts/device.svelte.ts
+++ b/src/lib/contexts/device.svelte.ts
@@ -27,16 +27,16 @@ export function createDeviceContext(): DeviceContext {
function connectIfIdle(e: HIDConnectionEvent) {
if (!isInkclip(e.device) || ctx.device !== null) return
- toast.info('Device connected')
- ctx.device = e.device
- }
+ toast.info('Device connected')
+ ctx.device = e.device
+ }
function disconnectIfSame(e: HIDConnectionEvent) {
if (ctx.device !== e.device) return
- toast.info('Device disconnected')
- ctx.device = null
- }
+ toast.info('Device disconnected')
+ ctx.device = null
+ }
navigator.hid.addEventListener('connect', connectIfIdle)
navigator.hid.addEventListener('disconnect', disconnectIfSame)
@@ -48,3 +48,15 @@ export function createDeviceContext(): DeviceContext {
return setContext(DeviceContextToken, ctx)
}
+
+export async function tryOpenDevice(device: HIDDevice): Promise {
+ if (device.opened) return true
+
+ try {
+ await device.open()
+ return true
+ } catch (e) {
+ toast.error(`Unable to open device: ${e}`)
+ return false
+ }
+}
diff --git a/src/lib/layouts/connect/ConnectSection.svelte b/src/lib/layouts/connect/ConnectSection.svelte
index 6477fe7..1b1120d 100644
--- a/src/lib/layouts/connect/ConnectSection.svelte
+++ b/src/lib/layouts/connect/ConnectSection.svelte
@@ -3,9 +3,40 @@
import IconCheckCircle from '~icons/material-symbols/check-circle'
import ConnectButton from './ConnectButton.svelte'
- import { getDeviceContext } from '$lib/contexts/device.svelte'
+ import { getDeviceContext, tryOpenDevice } from '$lib/contexts/device.svelte'
+ import MoreInfo from '$lib/components/MoreInfo.svelte'
const deviceCtx = getDeviceContext()
+
+ let serial = $state('[Retrieving...]')
+
+ async function updateSerial() {
+ if (deviceCtx.device === null) {
+ serial = '[Retrieving...]'
+ return
+ }
+ if (!(await tryOpenDevice(deviceCtx.device))) {
+ serial = '[Error]'
+ return
+ }
+
+ function setSerial(e: HIDInputReportEvent) {
+ if (e.reportId !== 0x02) return
+ serial = String.fromCharCode(...Array.from(new Uint8Array(e.data.buffer)))
+ }
+
+ let updated = false
+ deviceCtx.device.addEventListener('inputreport', e => {
+ if (!updated) setSerial(e)
+ updated = true
+ })
+
+ deviceCtx.device.sendReport(0x02, new Uint8Array(1))
+ }
+
+ $effect(() => {
+ updateSerial()
+ })
@@ -17,8 +48,13 @@
Not connected to any device yet. Plug in your device, and click on the button to select
it.
{:else}
- Successfully conected to device. If you want to, you can connect to another device
- instead.
+
+ {#snippet icon()}
+
+ {/snippet}
+ The serial ID of this device is {serial}.
+
+ Successfully conected to device. If you want to, you can connect to another device instead.
{/if}
diff --git a/src/lib/layouts/write/WriteButton.svelte b/src/lib/layouts/write/WriteButton.svelte
index 79b12ef..8d56bee 100644
--- a/src/lib/layouts/write/WriteButton.svelte
+++ b/src/lib/layouts/write/WriteButton.svelte
@@ -2,7 +2,7 @@
import { Button } from '$lib/components/ui/button'
import { toast } from 'svelte-sonner'
- import { getDeviceContext } from '$lib/contexts/device.svelte'
+ 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'
@@ -22,15 +22,7 @@
async function connectAndWrite() {
if (deviceCtx.device === null || renderedCtx.rendered === null) return
-
- if (!deviceCtx.device.opened) {
- try {
- await deviceCtx.device.open()
- } catch (e) {
- toast.error(`Unable to open device: ${e}`)
- return
- }
- }
+ if (!(await tryOpenDevice(deviceCtx.device))) return
const buffer = new Uint8Array(DEVICE_HEIGHT * BYTES_IN_A_ROW)
for (let y = 0; y < DEVICE_HEIGHT; y++) {
@@ -47,7 +39,7 @@
inProgress = true
try {
- await deviceCtx.device.sendReport(0, buffer)
+ await deviceCtx.device.sendReport(0x01, buffer)
} catch (e) {
toast.error(`Error writing to device: ${e}`)
return