MQTT Configurable Electronic Shelf Label System with Elecrow 3.7" E-Paper Display and Web Server

Welcome to this tutorial where we bring together IoT, MQTT, Docker, ESP-IDF and e-paper display technology to create a sleek and modern Electronic Shelf Label system using Elecrow 3.7" E-Paper Display!

In this project, you'll learn how we:

✅ Rendered dynamic product info like price and description using a custom web editor
✅ Converted HTML text to binary images ready for e-paper rendering
✅ Sent remote updates over MQTT from the browser to E-Paper display
✅ Built it all with ESP32-S3, ESP-IDF and Docker

It's a lightweight, wireless, and totally customizable solution for smart signage, shelf tags, or even retro-style dashboards.

Let's dive in and build something awesome. 🧠💡

🧩 How the Smart ESL Project Works

🧑‍💻 1. Customize Shelf Tag in the Browser

The user opens a simple web app that includes an editor to define:

• Price (with formatting for currency)

• Product description (with support for bold styling using **text**)

• Tag ID (the MAC address of the ESL device)

The preview updates in real time, giving the user a visual feel of what will be displayed.

🖼️ 2. Convert HTML to Monochrome Binary Image

When ready to publish:

• The browser captures a screenshot of the price and description areas using html2canvas

• It crops and converts each canvas into column-major binary format (1-bit per pixel, black & white), optimized for e-paper displays

• The binary images are ready to be sent to the tag

📡 3. Send Binary Images Over MQTT

The browser connects to a public or local MQTT broker via WebSocket and publishes the binary images to these topics:

• esl/<tag_id>/price

• esl/<tag_id>/description

Each topic represents a specific region of the tag to update.

📶 4. ESP32-S3 Receives Images via MQTT

On the ESP32 side:

• The ESP32 connects to Wi-Fi and subscribes to its designated MQTT topics (based on its MAC address)

• It receives chunked binary data, reconstructs the image, and knows which region to update

• Once both price and description are fully received, it proceeds to update the screen

🖤 5. Partial Update on E-Paper Screen

To avoid flickering and unnecessary redraws:

• The ESP32 uses partial refresh mode of the UC8253 e-paper driver

• It only updates the framebuffer regions (price or description) that changed

• Then it triggers a partial display update, showing the new content clearly without ghosting

🛠️ Ready to Try It Yourself?

You can replicate this entire project on your own by following the step-by-step instructions in the README of our GitHub repository.

There you’ll learn how to:

✅ Clone the project
✅ Build and run the web editor locally using a Docker container
✅ Customize your own price/description tags
✅ Send them to your MQTT-connected ESP32 e-paper device

Happy hacking! 🧠💡