Summary

• Page properties (1 modified, 0 added, 0 removed)
• Attachments (0 modified, 1 added, 0 removed)
  • image-20240928144830-11.png

Details

Page properties

Content

...	...	@@ -101,7 +101,6 @@
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		-
105	105	[[image:image-20240928110211-5.png||height="508" width="866"]]
106	106
107	107	image 1 ESP-IDF extension install
...	...	@@ -129,7 +129,6 @@
129	129
130	130	image 3 project settings
131	131
132		-
133	133	[[image:image-20240928105309-4.png||height="526" width="556"]]
134	134
135	135	image 4 modify project settings
...	...	@@ -142,7 +142,6 @@
142	142
143	143	[[image:image-20240928111412-6.png||height="526" width="864"]]
144	144
145		-
146	146	image 5 add widgets
147	147
148	148	**2.modify widget**
...	...	@@ -161,17 +161,15 @@
161	161
162	162	Third part: It is an area of style setting.
163	163
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.
	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.
165	165
166	166	[[image:1727485480434-713.png||height="395" width="290"]]
167	167
168		-
169		-
170	170	image 8 add event for button
171	171
172	172	**3.change label widget content**
173	173
174		-Modify the content in text, the text content of label widget will be changed accordingly.
	169	+Modify the content in text as shown in image 9, the text content of label widget will be changed accordingly.
175	175
176	176	[[image:image-20240928090825-1.png||height="327" width="391"]]
177	177
...	...	@@ -226,7 +226,7 @@
226	226
227	227	Create a empty directory entitled "ui" in path "basic_prj/app_components/ui/", and then copy all UI code exported to this directory.
228	228
229		-[[image:1727229845835-509.png||height="165" width="582"]]
	224	+[[image:image-20240928144830-11.png]]
230	230
231	231	image 17 open CMakeLists.txt
232	232
...	...	@@ -248,7 +248,6 @@
248	248
249	249	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.
250	250
251		-(% class="wikigeneratedid" %)
252	252	== 2.6 Test Result ==
253	253
254	254	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.

image-20240928144830-11.png

Author

...	...	@@ -1,0 +1,1 @@
	1	+XWiki.xieby

Size

...	...	@@ -1,0 +1,1 @@
	1	+25.5 KB

Content