Summary

• Page properties (1 modified, 0 added, 0 removed)

Details

Page properties

Content

...	...	@@ -89,25 +89,124 @@
89	89
90	90	== 2.1  About this demo ==
91	91
92		-In this Getting Start Example, we will show how to desing a simple Display UI and upload it to LTS5. This UI has  a button , when user click the button. The Web UI will jump to a new page.
	92	+In this Getting Start Example, we will show how to design a simple Display UI and upload it to LTS5. This UI has  a button , when user click the button. The Web UI will jump to a new page.
93	93
94		-
95	95	== 2.2  Install Software Running Environment ==
96	96
97		-=== 2.2.1 Install ESP-IDF tool ===
	96	+The ESP MCU can be developed using ESP-IDF, Arduino, or MicroPython. For this project, we utilize ESP-IDF for compilation and Visual Studio Code (VSCode) for editing.
98	98
	98	+=== 2.2.1 Install VSCode and ESP-IDF extension ===
	99	+
	100	+Firstly, download and install VSCode for your computer's operating system from the official website: [[Download Visual Studio Code - Mac, Linux, Windows>>url:https://code.visualstudio.com/download]].
	101	+
	102	+Next, you need to install the ESP-IDF extension within VSCode. The detailed operation steps are illustrated in image 1.
	103	+
	104	+[[image:1727229396732-319.png]]
	105	+
	106	+ image 1 ESP-IDF extension install
	107	+
	108	+Links for reference: [[Install ESP32 ESP-IDF on Windows and Integrate with VS code (esp32tutorials.com)>>url:https://esp32tutorials.com/install-esp32-esp-idf-windows-integrate-vs-code/#:~~:text=In%20this%20tutorial,%20we%20will%20show%20you%20how%20to%20install]]
	109	+
99	99	=== 2.2.2 Install SquareLine Studio ===
100	100
	112	+The version we are utilizing for this software is 1.4.2. You can download it from the official link: [[SquareLine Studio - Download the current version of SquareLine Studio>>url:https://squareline.io/downloads#lastRelease]].
101	101
102		-== 2.3 Program in SquareLine and get UI code ==
	114	+Please note that this software necessitates the registration of a license prior to usage, and various licenses come with distinct limitations. For instance, the free version imposes restrictions such as a limit of 1 component, 150 widgets, and 10 screens. However, for first-time downloads, you are granted unrestricted access for a period of 30 days without the need for immediate registration.
103	103
	116	+== 2.3 Simple usage of SquareLine Studio and export UI code ==
104	104
105		-== 2.4 Intergrate UI Code to ESP32 ==
	118	+After launching and logging in to this software, create a project as shown in the following image 2. The version of LVGL is 8.3.11.
106	106
	120	+[[image:1727229550717-684.png]]
107	107
	122	+ image 2 create a SquareLine project
	123	+
	124	+Next, we need to make some settings for this project. By clicking in the specified order on image 3, we can see the page as shown in image 4.
	125	+
	126	+[[image:1727229582471-566.png]]
	127	+
	128	+ image 3 project settings
	129	+
	130	+[[image:1727229618724-758.png]]
	131	+
	132	+ image 4 modify project settings
	133	+
	134	+Now we can start to use this software. The steps for creating this UI are shown in image 5-10.
	135	+
	136	+[[image:1727229653254-680.png]]
	137	+
	138	+ image 5 create a UI(1)
	139	+
	140	+[[image:1727231038705-173.png]]
	141	+
	142	+ image 6 create a UI(2)
	143	+
	144	+[[image:1727229682537-381.png]]
	145	+
	146	+ image 7 create a UI(3)
	147	+
	148	+We repeat the steps of screen1 in screen2. Then we get screen2 as shown in image 8.
	149	+
	150	+[[image:1727229715361-392.png]]
	151	+
	152	+ image 8 create a UI(4)
	153	+
	154	+Finally, we add click event for screen change to button1 in screen1(shown in image 9) and button2 in screen2.
	155	+
	156	+[[image:1727229740592-843.png]]
	157	+
	158	+ image 9 create a UI(5)
	159	+
	160	+The event settings of button1 are as image 10 shown. The event adding operation of button2 is similar to button1.
	161	+
	162	+[[image:1727229760857-521.png]]
	163	+
	164	+ image 10 create a UI(6)
	165	+
	166	+== 2.4 Integrate UI Code to ESP-IDF Project ==
	167	+
	168	+To achieve the integrating, we first need to export the UI code, then make some modifications, and finally relocate the UI code to a specific position within the project.
	169	+
	170	+[[image:1727229798126-306.png]]
	171	+
	172	+ image 11 export UI file
	173	+
	174	+[[image:1727229821582-258.png]]
	175	+
	176	+ image 12 exported UI file
	177	+
	178	+Create a empty directory entitled ‘ui’ in path “basic_prj/app_components/ui/”, and then copy all UI code exported to this directory.
	179	+
	180	+[[image:1727229845835-509.png]]
	181	+
	182	+ image 13 open CMakeLists.txt
	183	+
	184	+[[image:1727229892636-154.png]]
	185	+
	186	+ image 14 modify CMakeLists.txt
	187	+
	188	+The last step of integrating is adding two lines of code in main.c file.
	189	+
	190	+[[image:1727229926561-300.png]]
	191	+
	192	+ image 15 add “ui.h”
	193	+
	194	+[[image:1727229955611-607.png]]
	195	+
	196	+ image 16 add “ui_init()”
	197	+
108	108	== 2.5 Test Result ==
109	109
	200	+By pressing the button lying bottom right, the screen can switch to another as expected. This indicates that the UI file has been successfully integrated into the project and is now effective.
110	110
	202	+[[image:1727229990795-405.png]]
	203	+
	204	+ image 17 screen1
	205	+
	206	+[[image:1727230012478-930.png]]
	207	+
	208	+ image 18 screen2
	209	+
111	111	= 3. Example Project 1: LoRa Central Display =
112	112
113	113	[[image:image-20240916101737-1.png||height="468" width="683"]]