[demo] Live editor with realtime previews of esphome display component

Live demo: https://esphome-render.vercel.app/
Project page: GitHub - gadicc/esphome-render: Live editor with realtime previews of esphome display component
Discord link: Discord

Hi All

Firstly, please go easy on me… total newbie here :sweat_smile: First HA install a month ago, and first esphome install two weeks ago (and a big shout out to @robgough1970 who got me excited about this with his ESP32-S3-Box3-Custom-ESPHome project). So, advance apologies if I’m doing anything totally wrong or unconventionally.

My background is in web dev, where I’ve grown very accustomed to the near instantaneous, iterative development feedback loop. The tooling around updating esphome is absolutely phenomenal, but, waiting to compile/flash/boot every time you make a small change only to realise it’s not quite right can be quite frustrating. Hence this idea was born, focusing specifically on the display component (for now?).

NB: This is a proof of concept only. Most APIs are not implemented yet ; code other what’s in the samples in the demo are unlikely to work. Completing the API a huge task and will depend on public interest.

So, trying to gauge interest for this kind of project. Is this useful? Is its utility worth the effort to make everything work? I have a few cool ideas of where this could go if there’s interest, but first I need to understand if anyone would actually use something like this :sweat_smile:

4 Likes

Reserved for future post.

This look really great and would be very useful for building display configs for ESPHome display devices.
As you have pointed out, having to compile and upload everytime to check how things look on the display is very time consuming.
There is currently a new implementation for LVGL display component in ESPHome which SDL is available but it has limitations. Maybe this would also be something to take a look at. LVGL: Tips and Tricks
your project would be worth showing in the ESPHome Discord server in the #show-off channel. ESPHome
Keep up the great work! :+1:

1 Like

Interestingly, that preview page hasn’t made it into the esphome docs yet. I have filed an issue. It would be useful to have more generally available.

yes it’s still waiting to be merged. not sure why.

As someone who has felt the pain of reflashing a zillion times to tweak a simple display, I see a lot of value in what you’ve built. Nice one.

1 Like

Thanks, @robgough1970, some very helpful feedback from my senpai :bowing_man:

Is LVGL the way to go? Do you think you might migrate ESP32-S3-Box3-Custom-ESPHome to it? That’s also really helpful for me to know, for where to put my efforts :sweat_smile:

Good idea about #show-off on Discord, will post there too. So thanks for all that and for your kind words :pray:

Thanks, @Mahko_Mahko, exactly the kind feedback I’m looking for. What have you been working on, and on what device? If it’s something you’re actively working on now, I could try speed up completion on the parts you need. Otherwise just understanding what kind of projects people have done in the past, would be helpful.

@gadicc there are some examples here GUITION 4" 480x480 ESP32-S3-4848S040 Smart Display with LVGL

And although it’s not esphome, there are great examples of lvgl projects here. Overview - openHASP and Example layouts: Look what I built ! · HASwitchPlate/openHASP · Discussion #37 · GitHub

Thanks so much, @nickrout! Definitely seems like a lot of excitement around LVGL, so going to do some more research about that, and these links are super helpful :pray:

Excellent idea! This would be a welcome addition to my tool box.

1 Like

Typically I’m just building something on tiny screens like this.

I think the hardest part is getting started when you aren’t sure and can’t easily visualise how the various anchoring options work and how to layout a screen.

A tool like yours would help reduce the learning curve and better understand the options.

This is very cool. I use the SDL library so my Code → Compile → run time is about 10-20 seconds. But instant is better!

It would need to work with the lvgl stuff. That would be amazing for testing.

1 Like