vliaudatandClaude Opus 5
185610ee61
A bottom strip gave each day a 114px column, and that width was what capped the type size. A side band gives 142px of usable width and a 68px row, so the hours go from 19pt to 22pt, the day labels from 20 to 23, and each day fits on one line — "Mar 11:00–18:00" reads at a glance where a column had to be read downwards. Right rather than left, for two reasons the renders make plain: on the left the logo is pushed into the middle and loses its place as a signature, and the eye meets the week before the day's status. OUVERT is what has to be read first from the pavement. The times stay whole. Only the spaces around the dash go, which is enough to hold 22pt without abbreviating anything: a shop's opening hour is not a detail to shorten. The idea came from the shop owner, and testing it surfaced a defect that had been in production all along. Rendering the worst case the data model allows — three periods in a day, none on a round hour — showed the day's hours wrapping, pushing the layout down, and the English line of the banner falling off the bottom edge. A panel does not scroll and does not reflow: what does not fit is lost. Type size is now fitted to the space available, with a floor below which it will not go, and nothing may leave its box. The width estimate is deliberately crude: measuring glyphs would mean loading the font in that module and would still be an estimate, since the renderer applies its own kerning. Erring small costs a point of type, erring large costs a broken screen. Three periods a day will reportedly never happen. The protection stays anyway — it costs nothing and removes the need to remember. `npm run screen:fonts` renders every arrangement and both alternative typefaces, including the worst case, because choosing type for a 1-bit panel is done by looking at it thresholded. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012cSY9pVhZmJUKNN7wf1Myd
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
/**
|
|
* Screen geometry and typography, in one place.
|
|
*
|
|
* The panel is 800x480 and strictly 1-bit: there is no grey to lean on, so
|
|
* hierarchy has to come from size, weight and solid inversion. Nothing here
|
|
* may introduce a shadow, a gradient or a hairline — they dither into mud on
|
|
* e-ink and cost a redraw for nothing.
|
|
*/
|
|
|
|
export const SCREEN_WIDTH = 800;
|
|
export const SCREEN_HEIGHT = 480;
|
|
|
|
export const BLACK = '#000000';
|
|
export const WHITE = '#ffffff';
|
|
|
|
export const PADDING = 24;
|
|
|
|
/**
|
|
* Where the week sits.
|
|
*
|
|
* A bottom band gives each day a 114px column, and that width is what caps
|
|
* the type size. A side band gives roughly 230px and a 68px row instead —
|
|
* twice the room in both directions, at the cost of narrowing the main block.
|
|
*/
|
|
export type WeekPlacement = 'bottom' | 'right' | 'left';
|
|
|
|
export const SIDE_BAND_WIDTH = 232;
|
|
export const HEADER_HEIGHT = 76;
|
|
export const WEEK_HEIGHT = 112;
|
|
export const BANNER_HEIGHT = 84;
|
|
/** Solid rules only; anything thinner than 2px breaks up on e-ink. */
|
|
export const RULE = 3;
|
|
|
|
export const SANS = 'Inter';
|
|
export const SERIF = 'Source Serif 4';
|