FastJsonRenderer: A Web-Based Visual Design Tool for E-Ink Screens

FastJsonRenderer is a web-based visual design tool for FastJsonDL, built with React and Symfony. It simplifies e-ink screen development by supporting drag-and-drop interface design, real-time JSON preview, and ESP32 device export, providing an efficient graphical solution for e-ink projects.

E-ink screens are widely used in IoT devices, electronic tags, and smart meters due to their low power consumption and sun-readable characteristics. However, traditional e-ink interface design requires manual coding or complex image conversion, creating a high barrier for non-professional developers. FastJsonRenderer addresses this pain point by enabling intuitive visual operations.

The project uses a modern full-stack architecture:

• Backend: Symfony 7 framework (PHP 8.3), Doctrine ORM for database operations, MariaDB for storage.
• Frontend: React 18 for UI, Webpack Encore for resource packaging.
• Dev environment: DDEV containerization, allowing quick setup with Docker/DDEV (no manual dependency configuration), ensuring consistent development/production environments.

Core design features:

• 1:1 canvas for ED052TC4 (1280×780, 4-bit grayscale) with drag-and-drop element adjustment.
• Supported elements: text (with fonts like Ubuntu40, Monospace12), filled rectangle, bordered rectangle, line, filled circle, bordered circle.
• 16-level grayscale (0=black,15=white) matching e-ink display characteristics.

Key functional highlights:

• Real-time JSON preview: Updates as you design, with a draggable dark-themed panel and one-click copy to clipboard.
• Export options: Save as a .json file or get ESP32-ready configuration via the /api/screens/{id}/export endpoint (includes a clear flag for direct POST to devices).

Target users: IoT developers, e-ink application designers, embedded engineers, and students. Use cases: Electronic shelf labels (batch updates via JSON), smart meeting signs, industrial dashboards, and education (lowering the entry barrier for embedded/IoT learning).

Current limitations (planned features):

• SVG import (reuse vector graphics).
• Undo/redo history (better design fault tolerance).
• Copy-paste elements, grid alignment (improved efficiency).
• Custom display resolution (support more e-ink models).
• User accounts (collaboration), MQTT real-time preview (see physical device updates instantly).