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.

25 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 ?

2 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.

4 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

5 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