Skip to content

sim-dashboard Overview

sim-dashboard is a two-part application that provides a realistic e-ink display simulator with live preview capabilities. It serves as the visual frontend for devices simulated by sim-hw.

Repository: Inklet-2026/sim-dashboard

Architecture

sim-dashboard consists of two components running on separate ports:

Fastify Server (port 3001)

A lightweight Node.js server that:

  • Receives framebuffers --- Accepts 800x480 PNG images from sim-hw devices via HTTP POST
  • Stores framebuffers --- Maintains the latest framebuffer for each device in memory
  • WebSocket broadcast --- Pushes framebuffer updates to all connected browser clients in real time
  • Device registry --- Tracks which devices have pushed frames

React Frontend (port 5173)

A Vite-powered React application that:

  • Authenticates users --- Login via the Inklet backend to see your bound devices
  • Lists devices --- Shows all devices bound to the authenticated user
  • Renders e-ink display --- Displays the device framebuffer with realistic e-ink visual effects
  • Live updates --- Receives framebuffer updates via WebSocket for real-time display preview
  • Public device view --- /device/{hwid} shows a single device's display without requiring login

E-ink Display Effects

The React frontend applies several visual effects to faithfully simulate the look and behavior of a real e-ink display:

Effect Description
Full refresh animation Simulates the black-white-black flash that occurs during a full e-ink panel refresh
Partial refresh animation Smoother transition for incremental display updates
Ghosting Faint remnants of the previous image bleed through, mimicking real e-ink persistence
Paper texture Subtle off-white background with fiber-like texture, matching real e-ink paper
Noise Light pixel noise simulating the analog imperfections of physical displays
Dark/light theme The simulator UI supports both dark and light themes, though the simulated display itself always uses e-ink appropriate colors

Tip

The e-ink effects make the simulator useful for verifying how content will actually look on a physical device --- including readability, contrast, and layout at the native 800x480 resolution.

System Diagram

sim-hw (Python)                    sim-dashboard
──────────────                     ──────────────

MQTT command received              Fastify Server (:3001)
    │                                   │
    ▼                                   │
Render 800×480 PNG ──── HTTP POST ────▶ │
                                        │
                                   Store framebuffer
                                        │
                                   WebSocket broadcast
                                        │
                                        ▼
                                   React Frontend (:5173)
                                        │
                                   Apply e-ink effects
                                        │
                                   Display in browser

Features at a Glance

  • Real-time preview --- See exactly what the e-ink display shows as commands are sent
  • Multi-device support --- View multiple simulated devices simultaneously in the dashboard
  • Realistic rendering --- E-ink effects help catch visual issues before deploying to hardware
  • No hardware required --- Full development and testing workflow without physical devices
  • Authentication integrated --- Uses the same Inklet account system as the production portal
  • Public device URLs --- Share a direct link to a device's display for demos or monitoring

Next Steps