Matouch ESP32S3 AMOLED 1.8" & LVGL Made a Beautiful Ui

by Lan_Makerfabs in Circuits > Arduino

70 Views, 2 Favorites, 0 Comments

Matouch ESP32S3 AMOLED 1.8" & LVGL Made a Beautiful Ui

1.8封面.jpg

Our Matouch 1.8 has been on the market for some time and has been well received by the market. Its resolution performance is particularly good, with a detailed and clear picture. Furthermore, this screen has excellent compatibility with Squareline Studio and LVGL, and operates smoothly.

So we amde this project , the article describes the use of Squareline to design and program an interface through Arduino, he visual interface facilitates development and automatically exports the UI code. It then goes through Arduino for secondary development. The following sections describe how to use and design them.

Supplies

微信图片_20241026142035.png

LVGL Design With Squareline Studio

1、create project.png
2、add image ok.png
2、add image.png
3、set brackground.png
4. Add a panel.png
4-2、set penpel background.png
5.add penel.png
5.penel2 background.png
6.penal.png
7.add label1 size.png
7.add label1.png
8.add label2 size.png
8.add label2.png
9.add all label.png
10.add chart.png
10.chart set1.png
10.chart set2.png
10.chart set3.png
10.chart set4.png
11.add spinner.png
11.spinner set1.png
11.spinner set2.png
12.add panel.png
13.add label.png
14.add arc.png
14.arc set.png
14.arc set2.png
14.arc set3.png
15.add label.png
15.label set.png
16.add image1.png
16.add image2.png
16.add image3.png
17.export.png
17.export save.png

1. Before you can use it, you need to follow this wiki to add the relevant simplified packages in Squareline Studio.

2.Click on "Create-->Makerfabs", select the “Matouch ESPO32-S3 AMOLED with Touch 1.8” FT3168”.

3.Add the image we need to use, click “ADD FILE INTO ASSETS” and select image you download.

4.Set the background you like.

5.Add a penel to hold all our components, and set its size, position.

Set it background as the same as screen background to hide.

6.Keep adding panels to spruce up your ui, pull it into the panel1 directory, likewise set its size, position and background.

7.Continue to add panels to penal2 in the same way, setting their size, position and background.

8.Add label in the panel2, set its size, position, text, text color and text font.

9. Continue to add labels under the corresponding panel, specifying their size, position, text, text colour and text font.

10.Add Chart and change the data you want to record.

11.Add spinner and change it background.

12.Add panel to spinner to beautify it.

13.Add label to panel to record the value of brightness.

14.Add arc.

15.Add label in the arc.

16.Add image

17.Export the project and select the adress where you want to save it.


Code Design With Arduino IDE

1.copy lv.png
1.poste lv.png
2.copy library.png
2.poate library.png
3.open ui.png
4.add wifi init.png
4.add wifi init2.png
4.add wifi init3.png
4.add wifi library.png
5.add bringhtness.png
5.add bringhtness1.png
6.setup.png
6.setup2.png
烧录完成.jpg

1.Click on the code project document you just export.

Copy the “lv_conf.h” into the “src” in the lvgl in libraries.

Copy these files into the Arduino library.

2.Open the ui.ino.

3.Add Wifi library and set you ssid and password to get network time.Add Wifi initialisation and display time function..

4.Add change brightness function.

5.Change setup() and loop() function.

6.Select and set the parameter in the Tools menu.

7.Verify it and upload.

Result

介绍.jpg

Follow the steps above and then you'll have a nice UI on your Matouch 1.8',try it yourself if you are interested : )

Source code can find on our Github page.

Video

Matouch ESP32S3 AMOLED 1.8" & LVGL

We've also put together a fantastic video to show you the project in more detail, so be sure to check it out if you're interested!