Show HN: A React E-ink Paper Display

4 hours ago 1

Your React e-ink Display

Warka is a framework for building e-ink displays using React as a frontend and Python as a backend.

An ESP32, running a ~100 C++ lines lightweight software, is used to fetch a screenshot file from the backend server and display it in the e-ink display.

Warka has 3 components:

Frontend that is displayed in the e-ink paper, coded in React
Backend server, coded in Python (Flask) that:
- Serves the endpoints used by the frontend
- Screenshots the frontend and stores it in a bmp file to be retrieved by the ESP32
- Serves a config file to the ESP32 (to dynamically control screen refresh rate, etc.)
An ESP32 that fetches the bmp screenshot file from the backend server and displays it in the e-paper, coded in C++.

With this architecture, you can now iterate super fast on your display and draw anything really quickly.

No need to hardcode your icons in C++ anymore. No need to worry about the size of your text.

The design burden is now on the frontend (React) side. You can implement a dashbaord, a calendar, a news feed, a dynamic weather display, a screensaver... Up to your imagination!

📈 Stock Market Data: Real-time stock prices with daily changes and ranges
🌤️ Weather Forecast: multi-day weather outlook for Paris with sunrise/sunset times
💼 Portfolio Holdings: Personal investment portfolio overview with real-time valuations
📰 Hacker News: Top trending posts from Hacker News
📸 Screenshot Capture: Automated e-ink screenshot functionality with BMP optimization
🔌 ESP32 Integration: Chunked data transfer for microcontroller memory constraints
⚡ Real-time Data: Live updates via Yahoo Finance and OpenWeatherMap APIs

Download ChromeDriver:
- Visit Chrome for Testing
- Download ChromeDriver for your system
- Extract to backend/chromedriver/chromedriver
- Verify: ./backend/chromedriver/chromedriver --version
Backend Configuration:
- Edit backend/config.py:
OPENWEATHER_API_KEY = "your_openweather_api_key_here"
Install dependencies:

cd backend python -m venv venv source venv/bin/activate # On Windows: venv\Scripts\activate pip install -r requirements.txt python server.py

Backend runs on http://localhost:8000

Set up the frontend:
cd frontend npm install npm run dev
Frontend runs on http://localhost:5173

Edit esp32/src/config.h

// WiFi Configuration #define WIFI_SSID "<YOUR_WIFI_SSID>" #define WIFI_PASSWORD "<YOUR_WIFI_PASSWORD>" // Server Configuration #define BASE_URL "http://192.168.1.79:8000/" // change this with your backend server address

Flash the code into your ESP32

The hardware is very simple. You need:

ESP32: I used this one
E-INK display: I used the GooDisplay 7.5 inch
E-INK adapter: I used the GooDisplay adapter
power supply: I used my laptop as a power supply but you can also use a power bank or a 5V power supply
a few jumper wires to connect the ESP32 to the E-INK display

Here is how to wire the ESP32 to the E-INK display:

ESP32 Pin E-INK Pin

GND	GND
3.3V	3.3V (VCC)
GPIO D4	Busy
GPIO D16	RES
GPIO D17	D/C
GPIO D5	CS
GPIO D18	SCK
GPIO D23	SDI

This is the main dashboard of Warka. It displays the date, the weather forecast, the stock market, the current top hacker news posts and an overview of your portfolio.