Skip to content

E-ink UI sim: build plan

Status: PLAN v0.1 (2026-07-05). The sim is the real panel UI developed browser-first (design doc, stack section). Build target: static Svelte app on CF Pages, stress-tested on Yose's phone. This doc is the build brief.

Screens (panel states)

  1. Papan (default idle): daily artwork (dithered grayscale, credit line), pengumuman list (2-4 items), agenda hari ini, tanggal with slow-handwriting animation, stempel suasana corner, statline bottom, self-explanation footer rotating id/daerah.
  2. Antrean (service hours): queue numbers large, now-serving, estimated wait, statline.
  3. Bekerja (transaction in progress): document type + progress stages (the five Civic Transaction stages as a quiet horizontal tracker), consent-pending highlight pooling toward stempel side when waiting for approval.
  4. Rapat (meeting mode): agenda, notulen-recording indicator (honest: "mencatat, atas persetujuan peserta"), timer.
  5. SLA bulanan (rotates into idle daily): documents issued, avg processing time, refusal count with top reason, uptime. Self-published accountability.
  6. Darurat/mesh (device/04): emergency notices, mesh status, calm styling.
  7. Tidur (outage ladder tail): panel-only mode, static notice + last known queue.

Components

  • Statline (A2-region simulation: updates without flash, 1-2 Hz when working)
  • Handwriting (single-stroke font animation, stroke-per-second; Hershey-class font data)
  • StempelSuasana (corner stamp glyph, state textures; kaomoji variant behind mode flag)
  • ArtFrame (dithering shader/canvas filter + credit line)
  • QueueBoard, NoticeList, AgendaStrip, StageTracker (five stages), SlaCard
  • EinkSim wrapper: grayscale-16 quantization filter, ghosting accumulation overlay, GC16 flash on full content change (the page-turn ritual), DU/A2 regional updates flash-free; toggle panel for dev (sim on/off, ghosting intensity, refresh mode)

Design tokens

Paper #F7F4EF background token from v4.1 visual spec maps to e-ink white; ink #1A1A1A; grays quantized to the 16-level ramp only; no color in panel UI (color belongs to the halo, simulated as a soft top glow div behind the device frame in demo mode). Typography: one text face + the tulisan Aksara stroke font; sizes on a strict scale readable at 2-3 m.

Demo chrome (browser-only layer)

Device frame mockup around the panel (papan + punggung visible, halo glow animating behind top edge), state switcher, scenario player ("warga kirim WA" triggers Bekerja flow end-to-end), PROTOKOL DEMONSTRASI label. This chrome is what makes it a Nabire demo asset; the panel region inside it is what ships on hardware.

Build order

  1. Scaffold (Svelte + Vite static, no backend), tokens, EinkSim wrapper
  2. Papan idle screen with ArtFrame + Statline + StempelSuasana
  3. Handwriting component (Hershey font data pipeline: script converts font strokes to JSON frames)
  4. Bekerja + StageTracker + consent highlight; Antrean
  5. Demo chrome + scenario player; deploy CF Pages
  6. Phone stress pass (real 227 dpi scaling check, sunlight readability check on max brightness as e-ink proxy)

Acceptance

Reads at 3 m on a 10.3-inch-equivalent area; no flash except content change; every number on screen traceable to a scenario event (no decorative fake data unlabeled); Yose can drive the whole demo from the state switcher one-handed on a phone.