ESPHome LVGL Designer-Simulator Web App

After creating a simulator for ESPHome Display - https://community.home-assistant.io/t/esphome-display-designer-simulator-web-app/876078, some people asked to create a similar simulator for LVGL. I have never used LVGL, and the library seems to be vast compared to ESPHome Display.

However tried to create a first level visual designer. At this moment this is very basic and probably the value offered is to build half-baked code and further manually update. The hardest part of X-Y coordinates for widgets can be visually arranged. Will add new features as and when I start learning LVGL. Consider this a Pre-Alpha version.

https://jnan.co/tools/esphomelvglsim/


15 Likes

Lovely!
These should be linked in the ESP-Home documentation!

1 Like

Great work.

1 Like

Thanks, This is seriously next-level cool! Great work!

1 Like

Awesome! Hopefully LVGL on esphome will finally that a flight with this :slightly_smiling_face::slightly_smiling_face::slightly_smiling_face:

1 Like

wonderful tool, was looking for stgh like this long time.
you want to keep the lvgl->pages->widget hierarchy? I tried to import mine which do not use pages.

“Invalid YAML structure. Expected lvgl → pages → widgets.”

Please share the code. Will try to incorporate.

please see here

some more feedback on minor things that would be nice:

  • copy/duplicate element - button or shortcut
  • label text to be set in the UI
  • generate yaml → download as file option
1 Like

This is really neat.

One thing I’ve noticed straight away though is that when adding an ‘arc’ there is no option to adjust the arc settings such as start and end limits etc. That has been something I was struggling with when trying to create nice arcs manually.

Can you rotate it?
Honest question, I don’t know.

Nope. Only position it along each axis. No settings for colour etc either.