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.

This blog describes the use of Squareline to design and program an interface through Arduino，we also made a video above. The 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.

  • LVGL design with Squareline Studio

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

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