ESPHome Display Designer - Simulator Web App

ESPHome
1

Purchased a lot of TFT LCDs of various sizes from Aliexpress and had a really tough time building UI using Esphome. After a lot of effort,I was able to create a somewhat working simulator.

https://jnan.co/tools/displaysim/

The interface is fairly simple. You insert commonly used elements like Icons and Text. The tool generates YAML Code. The most difficult part was finding coordinates for the design. This Tool takes care of that and also shows what your screen might look like.

image
image2370×1450 249 KB

image
image1186×914 75.8 KB

Please provide your feedback.

30 Likes
2

i need more resolution
i used Lilygo T5 4.7 S3 540 × 960

3

Added the option. You should be able to use it now. Also added the option to fit the Preview window to the screen.

4

Thank you for building a really useful tool.
Is there any chance you could add support for 800x480 displays please?

Thanks again

5

And 480x480 please. Great app very helpful.

6

Can I have a 800x400 please for the XIAO 7.5" ePaper Panel ?

4 Likes
7

@jamesn @cameron @jebeke65 Added a custom screen size option. Like the earlier function, it is saved in cache until you clear it manually. Let me know if you face any issues.

Updated just now so it might take few hours for the changes to fully propagate.

5 Likes
8

Awesome, thanks again.

1 Like
9

Thank you for doing this.
:+1:

1 Like
10

Looks great. Would you consider support for LVGL?

1 Like
11

Awesome idea! Thanks

12

I am trying to create for LVGL. But it’s much more complex. Will take some time.

1 Like
13

First version for LVGL Simulator is live - LVGL ESPHome Visual Designer

image
image2936×1642 295 KB

9 Likes
14

THANK YOU !!! been looking all kinds of solutions for easy gui for my touchscreens, withoud needing to flash every time (squareline stu, different attemps in WSL, …) in esphome

1 Like
15

Oh my god, if I had only known… for the last month, I have been building a similar tool! GitHub - koosoli/ESPHomeDesigner: Visual HMI dashboard editor and ESPHome YAML generator for ePaper displays, with offline Home Assistant panel, icon/font support, and layout syncing via a custom integration.

16

it would be good if some of the forces would work together to make one or two advanced tools.
there are so many developers starting from scratch and get stuck in very basic functions only.
here are a few others listed: