From 79b438623b61bfbd00dc02e0c5999d6f5590de29 Mon Sep 17 00:00:00 2001 From: daylily Date: Sat, 10 Jan 2026 23:16:30 +0800 Subject: [PATCH] Implement more systematic logging in webapp --- webapp/src/lib/contexts/device.svelte.ts | 18 +++++++++++++----- webapp/src/lib/image/device.ts | 19 ++++++++++++++++--- .../lib/layouts/connect/ConnectSection.svelte | 1 - .../lib/layouts/edit/preview/common.svelte.ts | 4 ---- .../src/lib/layouts/write/WriteButton.svelte | 8 ++++++-- 5 files changed, 35 insertions(+), 15 deletions(-) diff --git a/webapp/src/lib/contexts/device.svelte.ts b/webapp/src/lib/contexts/device.svelte.ts index dceb306..2eaa690 100644 --- a/webapp/src/lib/contexts/device.svelte.ts +++ b/webapp/src/lib/contexts/device.svelte.ts @@ -23,6 +23,7 @@ export class DeviceContext { } else { if (this.input != null && this.output != null) return this.device = null + toast.info('Device disconnected') } }) } @@ -30,13 +31,20 @@ export class DeviceContext { async initialize() { try { const midi = await navigator.requestMIDIAccess({ sysex: true }) - console.log(Array.from(midi.inputs.values()), Array.from(midi.outputs.values())) + const inputs = Array.from(midi.inputs.values()) + const outputs = Array.from(midi.outputs.values()) + console.log( + 'MIDI inputs:', + Array.from(midi.inputs.values()), + 'outputs:', + Array.from(midi.outputs.values()), + ) - this.input = midi.inputs.values().find(isInkclip) ?? null - this.output = midi.outputs.values().find(isInkclip) ?? null + this.input = inputs.find(isInkclip) ?? null + this.output = outputs.find(isInkclip) ?? null midi.addEventListener('statechange', e => { - console.log(e.port) + console.log(`MIDI port statechange:`, e.port) if (!e.port || !isInkclip(e.port)) return if (e.port?.state === 'connected') { if (e.port.type === 'input' && !this.input) this.input = e.port as MIDIInput @@ -47,7 +55,7 @@ export class DeviceContext { } }) } catch (e) { - toast.error('Failed to acquire MIDI access. Please grant access manually in your browser.') + toast.error(`Failed to acquire MIDI access: ${e}`) } } } diff --git a/webapp/src/lib/image/device.ts b/webapp/src/lib/image/device.ts index 2292860..152c83e 100644 --- a/webapp/src/lib/image/device.ts +++ b/webapp/src/lib/image/device.ts @@ -46,6 +46,7 @@ export class Device { ) {} private send(req: Request) { + console.log('Sending request:', req) const encResult = encode7in8(p.serialize(requestSchema, req)) const len = 1 + MAGIC_NUMBER.length + encResult.byteLength + 1 @@ -66,8 +67,14 @@ export class Device { private recv({ timeout, filter }: RecvOptions): Promise { return new Promise((resolve, reject) => { const callback = (e: MIDIMessageEvent) => { - if (!e.data) return - if (e.data.length < 2 || e.data[0] !== 0xf0 || e.data[e.data.length - 1] !== 0xf7) return + if (!e.data) { + console.warn('Received MIDIMessageEvent with no data:', e) + return + } + if (e.data.length < 2 || e.data[0] !== 0xf0 || e.data[e.data.length - 1] !== 0xf7) { + console.warn('Received non-SysEx message:', e.data) + return + } const sysexPayload = e.data.slice(1, -1) if (sysexPayload.length < MAGIC_NUMBER.length) return @@ -77,8 +84,14 @@ export class Device { const payload = decode7in8InPlace(sysexPayload.slice(MAGIC_NUMBER.length)) try { const decResult = p.deserialize(responseSchema, payload) - if (!filter || filter(decResult.value)) resolve(decResult.value) + if (!filter || filter(decResult.value)) { + console.log('Received response:', decResult.value) + resolve(decResult.value) + } else { + console.log('Filtered response:', decResult.value) + } } catch (e) { + console.warn('Cannot decode received payload:', payload, e) reject(e) } diff --git a/webapp/src/lib/layouts/connect/ConnectSection.svelte b/webapp/src/lib/layouts/connect/ConnectSection.svelte index 1232f7f..05bdb99 100644 --- a/webapp/src/lib/layouts/connect/ConnectSection.svelte +++ b/webapp/src/lib/layouts/connect/ConnectSection.svelte @@ -22,7 +22,6 @@ async function updateSerial() { try { const response = await deviceCtx.device.request({ type: 'GetIdentification' }) assert(response.type === 'GetIdentification') - console.log(response) serial = response.value.serial } catch (e) { console.error(e) diff --git a/webapp/src/lib/layouts/edit/preview/common.svelte.ts b/webapp/src/lib/layouts/edit/preview/common.svelte.ts index 9776b5c..019a36e 100644 --- a/webapp/src/lib/layouts/edit/preview/common.svelte.ts +++ b/webapp/src/lib/layouts/edit/preview/common.svelte.ts @@ -55,9 +55,7 @@ export function makeAltText( } export function drawQuantizedData(ctx: CanvasRenderingContext2D, data: Uint8Array) { - console.log('attempting drawQuantizedData') const imageData = ctx.createImageData(DEVICE_WIDTH, DEVICE_HEIGHT) - console.log('finished creating') for (let y = 0; y < DEVICE_HEIGHT; y++) { for (let x = 0; x < DEVICE_WIDTH; x++) { @@ -72,8 +70,6 @@ export function drawQuantizedData(ctx: CanvasRenderingContext2D, data: Uint8Arra imageData.data[bitmapIx + 3] = 0xff } } - console.log('finished writing') ctx.putImageData(imageData, 0, 0) - console.log('finished putting') } diff --git a/webapp/src/lib/layouts/write/WriteButton.svelte b/webapp/src/lib/layouts/write/WriteButton.svelte index dc00d3b..f0d2e86 100644 --- a/webapp/src/lib/layouts/write/WriteButton.svelte +++ b/webapp/src/lib/layouts/write/WriteButton.svelte @@ -39,17 +39,21 @@ async function connectAndWrite() { inProgress = true try { - for (let i = 0; i < buffer.byteLength; i += 500) { + const start = Date.now() + for (let i = 0; i < buffer.byteLength; i += 834) { await deviceCtx.device.request({ type: 'SetPattern', value: { from: i, chroma: { type: 'Black' }, - pattern: buffer.slice(i, i + 500), + pattern: buffer.slice(i, i + 834), }, }) } + const written = Date.now() await deviceCtx.device.request({ type: 'UpdateDisplay' }) + const finish = Date.now() + console.log('Time (ms): write', written - start, 'update', finish - written, 'total', finish - start) } catch (e) { toast.error(`Error writing to device: ${e}`) return