azalea/inkclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rename constants

Browse Source
This commit is contained in:
daylily
2025-04-03 21:58:34 -04:00
parent 22a894cb8f
commit 791fc78572
12 changed files with 47 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/constants.ts
+6 -6
View File
@@ -1,10 +1,10 @@
export const INKCLIP_VID = 0x1209
export const INKCLIP_PID = 0xc9c9
export const DEVICE_VID = 0x1209
export const DEVICE_PID = 0xc9c9
export const INKCLIP_WIDTH = 200 // px
export const INKCLIP_HEIGHT = 200 // px
export const DEVICE_WIDTH = 200 // px
export const DEVICE_HEIGHT = 200 // px
export const INKCLIP_ASPECT_RATIO = INKCLIP_WIDTH / INKCLIP_HEIGHT
export const BYTES_IN_A_ROW = INKCLIP_WIDTH / 8
export const DEVICE_ASPECT_RATIO = DEVICE_WIDTH / DEVICE_HEIGHT
export const BYTES_IN_A_ROW = DEVICE_WIDTH / 8
export const WRITE_TIME = 2000 // ms
src/lib/contexts/device.svelte.ts
+2 -2
View File
@@ -1,9 +1,9 @@
import { INKCLIP_PID, INKCLIP_VID } from '$lib/constants'
import { DEVICE_PID, DEVICE_VID } from '$lib/constants'
import { getContext, setContext } from 'svelte'
import { toast } from 'svelte-sonner'
function isInkclip(dev: HIDDevice) {
return dev.vendorId == INKCLIP_VID && dev.productId == INKCLIP_PID
return dev.vendorId == DEVICE_VID && dev.productId == DEVICE_PID
}
export interface DeviceContext {
src/lib/contexts/image.svelte.ts
+2 -2
View File
@@ -1,7 +1,7 @@
import { getContext, setContext } from 'svelte'
import type { FilesContext } from './files.svelte'
import { toast } from 'svelte-sonner'
import { INKCLIP_HEIGHT, INKCLIP_WIDTH } from '$lib/constants'
import { DEVICE_HEIGHT, DEVICE_WIDTH } from '$lib/constants'
export interface ImageContext {
image: ImageBitmap | null
@@ -43,5 +43,5 @@ export function createImageContext(filesCtx: FilesContext): Readonly<ImageContex
export function imageIsCorrectRatio(imageCtx: ImageContext): boolean {
if (imageCtx.image === null) return true
return imageCtx.image.height * INKCLIP_WIDTH === imageCtx.image.width * INKCLIP_HEIGHT
return imageCtx.image.height * DEVICE_WIDTH === imageCtx.image.width * DEVICE_HEIGHT
}
src/lib/contexts/rendered.svelte.ts
+4 -4
View File
@@ -4,7 +4,7 @@ import { withTransform } from '$lib/image/transform'
import type { ConversionConfig } from './config.svelte'
import { Scaler } from '$lib/image/scaler'
import { Quantizer } from '$lib/image/quantizer'
import { INKCLIP_HEIGHT, INKCLIP_WIDTH } from '$lib/constants'
import { DEVICE_HEIGHT, DEVICE_WIDTH } from '$lib/constants'
export interface RenderedContext {
rendered: number[] | null
@@ -16,7 +16,7 @@ export function getRenderedContext(): Readonly<RenderedContext> {
return getContext(RenderedContextToken)
}
const scaler = new Scaler(INKCLIP_WIDTH, INKCLIP_HEIGHT)
const scaler = new Scaler(DEVICE_WIDTH, DEVICE_HEIGHT)
export function createRenderedContext(
imageCtx: Readonly<ImageContext>,
@@ -34,7 +34,7 @@ export function createRenderedContext(
})
)
const canvas = new OffscreenCanvas(INKCLIP_WIDTH, INKCLIP_HEIGHT)
const canvas = new OffscreenCanvas(DEVICE_WIDTH, DEVICE_HEIGHT)
const canvasCtx = canvas.getContext('2d', {
willReadFrequently: true,
})!
@@ -50,7 +50,7 @@ export function createRenderedContext(
withTransform(canvasCtx, config.transform, () => {
const bg = config.backgroundColor
canvasCtx.fillStyle = `rgb(${bg} ${bg} ${bg})`
canvasCtx.fillRect(0, 0, INKCLIP_WIDTH, INKCLIP_HEIGHT)
canvasCtx.fillRect(0, 0, DEVICE_WIDTH, DEVICE_HEIGHT)
const { dx, dy, dWidth, dHeight } = scaler.scale(config.scaleMode, bitmap)
canvasCtx.drawImage(bitmap, dx, dy, dWidth, dHeight)
})
src/lib/image/transform.ts
+3 -3
View File
@@ -1,4 +1,4 @@
import { INKCLIP_HEIGHT, INKCLIP_WIDTH } from '$lib/constants'
import { DEVICE_HEIGHT, DEVICE_WIDTH } from '$lib/constants'
export type Rotation = 0 | 90 | 180 | 270
export type Side = 'obverse' | 'reverse'
@@ -54,8 +54,8 @@ function withCtx<T>(ctx: Context2D, pre: () => void, action: () => T): T {
}
export function withTransform<T>(ctx: Context2D, transform: Transform, action: () => T): T {
const centerX = INKCLIP_WIDTH / 2
const centerY = INKCLIP_HEIGHT / 2
const centerX = DEVICE_WIDTH / 2
const centerY = DEVICE_HEIGHT / 2
return withCtx(
ctx,
src/lib/layouts/Main.svelte
+2 -2
View File
@@ -17,8 +17,8 @@
createRenderedContext(imageCtx, config)
</script>
<main class="grow w-full stack gap-4" aria-labelledby="main-label">
<h1 class="sr-only" id="main-label">Write to Inkclip</h1>
<main class="grow w-full stack gap-4">
<h1 class="sr-only">Write to Inkclip</h1>
<ConnectSection />
src/lib/layouts/connect/ConnectButton.svelte
+3 -3
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button'
import { INKCLIP_PID, INKCLIP_VID } from '$lib/constants'
import { DEVICE_PID, DEVICE_VID } from '$lib/constants'
import { getDeviceContext } from '$lib/contexts/device.svelte'
const deviceCtx = getDeviceContext()
@@ -10,8 +10,8 @@
const devs = await navigator.hid.requestDevice({
filters: [
{
vendorId: INKCLIP_VID,
productId: INKCLIP_PID,
vendorId: DEVICE_VID,
productId: DEVICE_PID,
},
],
})
src/lib/layouts/edit/controls/dimensions/AspectRatioAlert.svelte
+2 -2
View File
@@ -2,11 +2,11 @@
import * as Alert from '$lib/components/ui/alert'
import IconAspectRatio from '~icons/material-symbols/aspect-ratio-outline'
import { INKCLIP_ASPECT_RATIO } from '$lib/constants'
import { DEVICE_ASPECT_RATIO } from '$lib/constants'
</script>
<Alert.Root>
<IconAspectRatio aria-hidden />
<Alert.Title>Image is not {String(Math.round(INKCLIP_ASPECT_RATIO * 100) / 100)}:1 ratio</Alert.Title>
<Alert.Title>Image is not {String(Math.round(DEVICE_ASPECT_RATIO * 100) / 100)}:1 ratio</Alert.Title>
<Alert.Description>You need to choose how to scale your image.</Alert.Description>
</Alert.Root>
src/lib/layouts/edit/preview/PreviewCanvas1x.svelte
+6 -6
View File
@@ -5,7 +5,7 @@
import { cn } from '$lib/utils'
import { drawQuantizedData, freshContext, makeAltText } from './common.svelte'
import { getRenderedContext } from '$lib/contexts/rendered.svelte'
import { INKCLIP_HEIGHT, INKCLIP_WIDTH } from '$lib/constants'
import { DEVICE_HEIGHT, DEVICE_WIDTH } from '$lib/constants'
import { getFilesContext } from '$lib/contexts/files.svelte'
import { getConversionConfig } from '$lib/contexts/config.svelte'
import { getImageContext } from '$lib/contexts/image.svelte'
@@ -33,14 +33,14 @@
<canvas
class={cn(hasRendered || 'hidden')}
style:image-rendering="pixelated"
style:width="{INKCLIP_WIDTH}px"
style:height="{INKCLIP_HEIGHT}px"
style:width="{DEVICE_WIDTH}px"
style:height="{DEVICE_HEIGHT}px"
bind:this={canvasEl}
height={INKCLIP_HEIGHT}
width={INKCLIP_WIDTH}
height={DEVICE_HEIGHT}
width={DEVICE_WIDTH}
></canvas>
{:else}
<div class="col justify-center text-[#333]" style:width="{INKCLIP_WIDTH}px" style:height="{INKCLIP_HEIGHT}px">
<div class="col justify-center text-[#333]" style:width="{DEVICE_WIDTH}px" style:height="{DEVICE_HEIGHT}px">
<IconHideImage class="text-3xl" aria-label="No image" />
</div>
{/if}
src/lib/layouts/edit/preview/PreviewCanvas2x.svelte
+7 -7
View File
@@ -5,7 +5,7 @@
import { cn } from '$lib/utils'
import { drawQuantizedData, freshContext, makeAltText } from './common.svelte'
import { getRenderedContext } from '$lib/contexts/rendered.svelte'
import { INKCLIP_HEIGHT, INKCLIP_WIDTH } from '$lib/constants'
import { DEVICE_HEIGHT, DEVICE_WIDTH } from '$lib/constants'
import { getFilesContext } from '$lib/contexts/files.svelte'
import { getConversionConfig } from '$lib/contexts/config.svelte'
import { getImageContext } from '$lib/contexts/image.svelte'
@@ -33,17 +33,17 @@
<canvas
class={cn(hasRendered || 'hidden')}
style:image-rendering="pixelated"
style:width="{INKCLIP_WIDTH * 2}px"
style:height="{INKCLIP_HEIGHT * 2}px"
style:width="{DEVICE_WIDTH * 2}px"
style:height="{DEVICE_HEIGHT * 2}px"
bind:this={canvasEl}
height={INKCLIP_HEIGHT}
width={INKCLIP_WIDTH}
height={DEVICE_HEIGHT}
width={DEVICE_WIDTH}
></canvas>
{:else}
<div
class="col justify-center text-[#333]"
style:width="{INKCLIP_WIDTH * 2}px"
style:height="{INKCLIP_HEIGHT * 2}px"
style:width="{DEVICE_WIDTH * 2}px"
style:height="{DEVICE_HEIGHT * 2}px"
>
<IconHideImage class="text-6xl" aria-label="No image" />
</div>
src/lib/layouts/edit/preview/common.svelte.ts
+6 -6
View File
@@ -1,4 +1,4 @@
import { INKCLIP_HEIGHT, INKCLIP_WIDTH } from '$lib/constants'
import { DEVICE_HEIGHT, DEVICE_WIDTH } from '$lib/constants'
import type { ConversionConfig } from '$lib/contexts/config.svelte'
import type { FilesContext } from '$lib/contexts/files.svelte'
import { imageIsCorrectRatio, type ImageContext } from '$lib/contexts/image.svelte'
@@ -14,7 +14,7 @@ export function makeAltText(filesCtx: FilesContext, imageCtx: ImageContext, conf
const file = filesCtx.files[0]
const output = [`${INKCLIP_WIDTH}-by-${INKCLIP_HEIGHT}-pixels e-paper preview of "${file.name}"`]
const output = [`${DEVICE_WIDTH}-by-${DEVICE_HEIGHT}-pixels e-paper preview of "${file.name}"`]
if (!imageIsCorrectRatio(imageCtx)) {
if (config.scaleMode === 'fit') output.push('letterboxed')
@@ -51,11 +51,11 @@ export function makeAltText(filesCtx: FilesContext, imageCtx: ImageContext, conf
}
export function drawQuantizedData(ctx: CanvasRenderingContext2D, data: number[]) {
const imageData = ctx.createImageData(INKCLIP_WIDTH, INKCLIP_HEIGHT)
const imageData = ctx.createImageData(DEVICE_WIDTH, DEVICE_HEIGHT)
for (let y = 0; y < INKCLIP_HEIGHT; y++) {
for (let x = 0; x < INKCLIP_WIDTH; x++) {
const dataIx = y * INKCLIP_WIDTH + x
for (let y = 0; y < DEVICE_HEIGHT; y++) {
for (let x = 0; x < DEVICE_WIDTH; x++) {
const dataIx = y * DEVICE_WIDTH + x
const bitmapIx = dataIx * 4
const colorIx = data.at(dataIx)
const color = colorIx === 0 ? 0xcc : 0x11
src/lib/layouts/write/WriteButton.svelte
+4 -4
View File
@@ -4,7 +4,7 @@
import { toast } from 'svelte-sonner'
import { getDeviceContext } from '$lib/contexts/device.svelte'
import { getRenderedContext } from '$lib/contexts/rendered.svelte'
import { BYTES_IN_A_ROW, INKCLIP_HEIGHT, INKCLIP_WIDTH, WRITE_TIME } from '$lib/constants'
import { BYTES_IN_A_ROW, DEVICE_HEIGHT, DEVICE_WIDTH, WRITE_TIME } from '$lib/constants'
interface Props {
onprogress: (inPropgress: boolean) => void
@@ -32,12 +32,12 @@
}
}
const buffer = new Uint8Array(INKCLIP_HEIGHT * BYTES_IN_A_ROW)
for (let y = 0; y < INKCLIP_HEIGHT; y++) {
const buffer = new Uint8Array(DEVICE_HEIGHT * BYTES_IN_A_ROW)
for (let y = 0; y < DEVICE_HEIGHT; y++) {
for (let xStride = 0; xStride < BYTES_IN_A_ROW; xStride++) {
let cell = 0x0
for (let xStroll = 0; xStroll < 8; xStroll++) {
const index = y * INKCLIP_WIDTH + xStride * 8 + xStroll
const index = y * DEVICE_WIDTH + xStride * 8 + xStroll
cell |= renderedCtx.rendered[index] << xStroll
}
buffer[y * BYTES_IN_A_ROW + xStride] = cell