How I Built the Star Trek LCARS control panel of my dreams | The Verge

Posts from this topic will be added to your daily email digest and your homepage feed.
Posts from this topic will be added to your daily email digest and your homepage feed.
See All Entertainment
Posts from this topic will be added to your daily email digest and your homepage feed.
I used ESPHome and LVGL to make my living room a little bit more like the USS Enterprise
Posts from this author will be added to your daily email digest and your homepage feed.
See All by Ursa Wright
Posts from this topic will be added to your daily email digest and your homepage feed.
Posts from this topic will be added to your daily email digest and your homepage feed.
See All Entertainment
Posts from this topic will be added to your daily email digest and your homepage feed.
I used ESPHome and LVGL to make my living room a little bit more like the USS Enterprise
Posts from this author will be added to your daily email digest and your homepage feed.
See All by Ursa Wright
Posts from this author will be added to your daily email digest and your homepage feed.
See All by Ursa Wright
One of my pandemic hobbies that stuck was home automation. I discovered Home Assistant — the popular open source, extremely customizable home automation platform — and all the intricate things you can do with it to make your home work better.
I have ADHD and have found Home Assistant to be a valuable tool for managing executive dysfunction. I use it for audible calendar reminders, laundry reminders, timers, and monitoring my doorbell camera and my nanny cam for my dog. Its also a great source of pure nerdy joy for me. And I recently took the most joyously nerdy step yet in my home automation fixation.
Home Assistant lets you create custom dashboards to interact with your smart home devices. Community members spend untold hours perfecting their dashboards and some of them are really impressive. I even discovered a community theme for Home Assistant that goes a long way to looking like the LCARS computer control system in the Next Generation era of Star Trek I grew up on. LCARS is not a practical or useful computer interface. Its stated purpose is to “suggest something well-organized when a viewer sees [it] in the background of a scene.” What it is, though, is gorgeous. The aesthetic got hold of me at eight years old and has never let go.
Most of my home automation happens through actual automation without my input, and I do make extensive use of voice control ( yes, “Computer” is my wake word. The false alarms when I’m watching Star Trek are worth it). But there are some things I’ll always want a dashboard for. Sometimes you want to control things manually. It’s nice for weather displays or triggering custom lighting scenes. Since the beginning of my infatuation with Home Assistant, I’ve been dying to use an LCARS-style interface. The theme linked above is very good — I use it for my phone’s main dashboard. But it’s not perfect.
The sizing and the proportions of the elbow dividers is a little off, and the buttons are all broken up into two pieces. It’s small stuff. But I’m the kind of fan who wants to take the accuracy thing as far as it can go. So I made my own.
I recently discovered LVGL (Light and Versatile Graphics Library), which lets you make graphic interfaces that are far more customizable and sophisticated than the stock Home Assistant dashboard setup. I figured there had to be some way to make LVGL talk to Home Assistant. The final piece of the puzzle was ESPHome. ESPHome is an open-source firmware framework that lets coding novices like me use relatively simple markup language to program Wi-Fi-enabled microcontrollers like the ESP32, ESP8266, and RP2040, and it integrates deeply with Home Assistant. The possibilities are immense. I use ESPHome components as motion detectors, presence sensors, an air quality sensor, and controllers for LED strips. And ESPHome supports LVGL on specific display hardware.
So I bought this Waveshare 7” touch display with an ESP32-S3 microcontroller built in and I got to work.I spent hours scouring the internet to find screenshots and fan re-creations of some of the many LCARS panels featured in ’90s-era Star Trek. And I narrowed it down to this:
It’s a graphic you see in Tuvok’s quarters in Star Trek: Voyager. I’m not sure what it’s supposed to do in the show, but it has plenty of colorful buttons and rounded corners. And crucially there are two gauges at the top for who knows what. But to me, those looked like lighting brightness controls. So I had my design.
Next was to build it. To build an interface in ESPHome using LVGL, you use YAML to specify the characteristics (size, positioning, color, etc.) of the graphic element you want. LVGL calls them “widgets.” So I first created my design in Adobe Illustrator as a reference.
I then began the rather tedious task of re-creating that design in the ESPHome editor in Home Assistant. Thankfully you don’t need to know C (the language LVGL is written for) to use it in ESPHome. Instead you use YAML, which is much more forgiving for an enthusiastic amateur like me. Component by component, I specified the dimensions of each button, its location, its color, what label it would have, and its shape. It’s best practice in LVGL to use the inbuilt widgets instead of just inserting pictures. LVGL does have that capability, but ESP32 microcontrollers don’t have tons of spare resources, and images will eat them fast. The only actual images used in this design are the two gauges at the top right. All the other shapes are LVGL button widgets.
I did have to cheat a little for the irregular shapes. Some of the buttons in the LCARS interface only have two rounded corners. LVGL buttons are all or nothing when it comes to rounded corners. Thankfully though, LVGL doesn’t mind if you stack shapes on top of each other. For the buttons that are half rounded, I simply stacked a circle on the end of a square button. They’re the same color, so it looks like a single shape. The