Summary

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

Details

Page properties

Content

...	...	@@ -101,6 +101,7 @@
101	101
102	102	Next, you need to install the ESP-IDF extension within VSCode. The detailed operation steps are illustrated in image 1.
103	103
	104	+
104	104	[[image:image-20240928110211-5.png||height="508" width="866"]]
105	105
106	106	image 1 ESP-IDF extension install
...	...	@@ -128,6 +128,7 @@
128	128
129	129	image 3 project settings
130	130
	132	+
131	131	[[image:image-20240928105309-4.png||height="526" width="556"]]
132	132
133	133	image 4 modify project settings
...	...	@@ -140,6 +140,7 @@
140	140
141	141	[[image:image-20240928111412-6.png||height="526" width="864"]]
142	142
	145	+
143	143	image 5 add widgets
144	144
145	145	**2.modify widget**
...	...	@@ -158,15 +158,17 @@
158	158
159	159	Third part: It is an area of style setting.
160	160
161		-Fourth part: It is an area for adding events. In image 8, it is adding a click event to a button. If the button is clicked after the click event is added as shown in image 8, the current screen will fade into another specified screen, and the switching process will last 500ms.
	164	+Fourth part: It is an area for adding events. In image 8, it is adding a click event to a button. If the button is clicked after the click event is added, the current screen will fade into another specified screen, and the switching process will last 500ms.
162	162
163	163	[[image:1727485480434-713.png||height="395" width="290"]]
164	164
	168	+
	169	+
165	165	image 8 add event for button
166	166
167	167	**3.change label widget content**
168	168
169		-Modify the content in text as shown in image 9, the text content of label widget will be changed accordingly.
	174	+Modify the content in text, the text content of label widget will be changed accordingly.
170	170
171	171	[[image:image-20240928090825-1.png||height="327" width="391"]]
172	172
...	...	@@ -221,7 +221,7 @@
221	221
222	222	Create a empty directory entitled "ui" in path "basic_prj/app_components/ui/", and then copy all UI code exported to this directory.
223	223
224		-[[image:image-20240928144830-11.png]]
	229	+[[image:1727229845835-509.png||height="165" width="582"]]
225	225
226	226	image 17 open CMakeLists.txt
227	227
...	...	@@ -243,6 +243,7 @@
243	243
244	244	The project consists of two screens. The first screen displays the company's logo, the project name, and a button to navigate to the next screen. The second screen presents some information about this HMI screen product through an image and includes a button to return to the previous screen.
245	245
	251	+(% class="wikigeneratedid" %)
246	246	== 2.6 Test Result ==
247	247
248	248	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.