To create and test content on embedded displays such as the Cheap Yellow Display can be troublesome. Or you design stuff in a visual editor such as Figma and export it as image, or you design your interface in code. This project aims to simplify the design process on embedded displays by directly streaming the pixels from a web browser to the esp32. This enables tools like Figma Mirror to be directly streamed to the device, but also allows (vibe) coding the interface first in HTML, before moving to LVGL or similair libraries.
I also made a tool to quickly upload the firmware to the esp32 Cheap Yellow Display and LILYGO Amoled screens. In this way you can start designing content for these embedded displays without having to write a single line of code. No installation needed, since it uses only browser api's. (webserial, websockets, Screen Capture, Compression Streams)
- Open the browser flasher in Chrome or Edge.
- Plug the board in over USB and follow the on-screen steps. (based on the USB port it assumes if you connected a CYD or ESP32-S3).
- Pick the firmware for your board (for the CYD webRAW seems to work best).
- Enter your WiFi SSID and password - these get written into the firmware at flash time, no code editing needed. You can also adjust the inversion and rotation when the screen does not look right.
- Once it connects to WiFi, the display shows its IP address and mDNS hostname. Visit that address in a browser to start streaming - pick a tab, window, or your whole screen, and it shows up live on the display.
- You can use the dev tools to enable device mode in Chrome or Edge, this resizes the active area of the browser to what you define (for CYD it is 320, 240)
That's it, you can now share any browser tab.
This project streamlines the approach in a previous project. It still sometimes crashes and has a hard time on content that is hard to compress using zip.
Comments