The $20 “Cheap Yellow Display” is the best addition to my smart home in months

I’ve been playing around a lot with ESP32 devices and ESPHome, which has already enabled me to build a silly device that allows me to turn on my PC by simply slapping my table. I have a whole assortment of sensors that I’ve been playing around with to get to grips with ESPHome, and I’ve built an ESP32-powered LCD panel controlled by a button, a temperature sensor, and an RGB LED. I set up some other devices too to get comfortable with YAML and ESP32 deployment, and I loved the capabilities it had unlocked for my smart home. In my research, I came across the ESP32 “Cheap Yellow Display”, otherwise known as the ESP32 CYD.

As the name suggests, this is a pretty cheap ESP32-powered display. Mine is specifically the ESP32-2432S028R, and it came in at around $20 for a 240×320 TFT LCD screen, an SD card slot, and some additional pins broken out for your own hardware additions connected to GPIO pins. Mine also came with an acrylic and wooden housing, though you could build this display into any physical housing if you wanted. It’s incredibly versatile and can be reprogrammed on a whim, so a smart home dashboard can become something else entirely in just a handful of minutes.

My long-term goal is to replace the OnePlus 6 I still keep on my desk as a Home Assistant dashboard, and I’ve also ordered a couple of slightly bigger displays that I’ll be using for further testing and building new software for. For now, though, the ESP32 CYD has been one of the best additions to my home office, and as I’ve learned to develop for it, it’s opened my mind to a wide array of possibilities that can be enabled by these cheap little devices.

There’s so much you can do with a smart, programmable display

Right now, it controls my smart home

At first, I simply wanted to learn the ropes of the ESP32 CYD, so I looked around on GitHub for specific examples referencing ESPHome. I found an amazing repository created by Irish developer and YouTuber Brian Lough, and it contains code examples, explanations, and other things that proved invaluable to learning how this device ticks and what its limitations are. I started with some rather basic tools, and I found a web-based ESPHome display designer to help with generating the code for a dashboard.

However, this proved painstakingly slow, not to mention the end result was ugly. I had noticed the LVGL examples in Lough’s GitHub repository, though these were aimed at the Arduino IDE, and I went down the rabbit hole of figuring out how it works in ESPHome. LVGL stands for Light and Versatile Graphics Library, and it’s a way to draw beautiful graphics on embedded devices with little by way of resources. I was able to make some rather basic controls this way, and they already looked a lot better, but I felt that I was going in blind. LVGL is a somewhat new addition to ESPHome, based on version 8 (rather than version 9, though an update is said to be coming) and only added in the latter half of last year. Until its official addition, the only way to use LVGL in ESPHome was via an imported component.

That newness of LVGL to ESPHome is part of why I found it so difficult to get it working. The documentation feels somewhat lacking, and while there are plenty of great examples in the documentation of controlling Home Assistant from LVGL widgets, I felt like I was diving into the deep end of the deep end. However, I took to GitHub yet again, and found another fantastic repository by Ryan Ewen, with an amazing LVGL implementation using ESPHome… and it supported the CYD I’m using here!

The layout you see in my photos is directly lifted from his approach to building using LVGL. I’m using the same button style and the same display style, and I’m using pages just like he has in his implementation, too. I’ve added a time sensor to the top center of the display, and I’ve added my living room temperature to the top right. Right now, I can control my bedroom lights and office lights, and I can also control music playing over my Home Assistant Voice Preview Edition. I can tap play to start Music Assistant, which will then enable the volume controls and track skipping. This required creating my own template widget that I included and exposed the right controls, but it all just… worked. I was able to learn from what Ewen had done in developing using LVGL, and twist it to meet my own needs.

Right now, it’s not perfect. There’s still a lot I need to learn, and I am learning, but I’m satisfied that I’m in a place where I can now grow this into something even more useful. It’s certainly been a challenge, and at times it’s been overwhelming, but it’s felt incredibly rewarding to click “Install” in ESPHome and suddenly have a dashboard that looks pretty appear on the screen and work. I’ve since come across many other fantastic code examples using LVGL in ESPHome, and I’m sure the finished product will essentially be an amalgamation of everything that I’ve learned from all of them.

If you’re not a developer, then right now, jumping in with an ESP32 CYD will be particularly difficult. I’ve worked a lot as a developer, so while a challenge, I’ve been able to overcome a lot of the problems I’ve faced through typical development and debugging techniques, all while parsing the documentation. It’s a lot of work, and not everyone is geared for it, but those who are will find it greatly rewarding. Once I’m finished with everything that I’m doing here, I’ll be making it all open-source on GitHub. I learned from others to get started, and when it’s early days in projects like these, everyone can stand to benefit from as many resources as possible to learn to get to grips with it too.