Summary

• Page properties (2 modified, 0 added, 0 removed)
• Attachments (0 modified, 2 added, 0 removed)
  • image-20241226135550-1.png
  • image-20250122170230-1.png

Details

Page properties

Author

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

Content

...	...	@@ -1,12 +1,11 @@
	1	+
	2	+
1	1	(% style="text-align:center" %)
2		-[[image:image-20240915231842-1.png]]
	4	+[[image:image-20241226135550-1.png]]
3	3
4	4
5	5
6	6
7		-
8		-
9		-
10	10	(% _mstvisible="1" %)
11	11	(% _msthash="315238" _msttexthash="18964465" _mstvisible="3" %)**Table of Contents:**
12	12
...	...	@@ -142,7 +142,7 @@
142	142
143	143	Download and install the latest version of [[SquareLine Studio>>https://squareline.io/downloads#lastRelease]] on your computer. It supports Windows, Linux, and Mac OS. The software version we are using here is 1.5.0. See the image below.
144	144
145		-[[image:squareline.io_downloads.png]]
	144	+[[image:squareline.io_downloads.png||height="888" width="1294"]]
146	146
147	147
148	148	After installation, you can use SquareLine Studio with a **PERSONAL license plan**. Click **LOG IN** and create a free account using your email address. Then activate your PERSONAL license plan for free. You don’t need to provide any credit card information. However, the PERSONAL license plan has the following limitations:
...	...	@@ -161,11 +161,9 @@
161	161	* In the **PROJECT SETTINGS**, select **LVGL version **as **8.3.11** and **Resolution** as **800** x **480**.
162	162	* Select the **CREATE **button to create the new project with the selected settings.
163	163
	163	+[[image:squareline-studio-launcher-screen.png||height="752" width="1415"]]
164	164
165		-[[image:squareline-studio-launcher-screen.png]]
166	166
167		-
168		-
169	169	Next, you need to configure some additional settings for this project. To do so, select** File  -> Project Settings** as shown in the image below.
170	170
171	171	[[image:1727229582471-566.png]]
...	...	@@ -269,7 +269,7 @@
269	269	Widgets commonly have two types of relationships: **parallel** and **parent-child**.
270	270
271	271	* In a **parallel relationship**, widgets' positions are determined relative to a shared reference object.
272		-* In a **parent-child relationship**, any part of the child object outside the parent's boundaries is hidden by default. To make the child object fully visible, you must adjust its position to fit within the parent's range, as shown in Image 13.
	269	+* In a **parent-child relationship**, any part of the child object outside the parent's boundaries is hidden by default. To make the child object fully visible, you must adjust its position to fit within the parent's range.
273	273
274	274	[[image:1727486567182-334.png||height="318" width="278"]]
275	275
...	...	@@ -287,13 +287,11 @@
287	287	==== **Preview the screen** ====
288	288
289	289
290		-You can test the result by clicking on the **PLAY** button. The screen will change into play mode. See Image 14.
	287	+You can test the result by clicking on the **PLAY** button as shown in the image below. The screen will change into play mode.
291	291
292	292	[[image:1727487368023-281.png]]
293	293
294		- Image 14: Simulating the project
295	295
296		-
297	297	For more information, please visit the official link: [[SquareLine Studio 1.4.2 Documentation ~| SquareLine Studio>>url:https://docs.squareline.io/docs/squareline/]].
298	298
299	299
...	...	@@ -300,57 +300,62 @@
300	300	== 2.4 Integrate UI Code to ESP-IDF Project ==
301	301
302	302
303		-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.
	298	+To integrate, first export the UI code, then make some modifications, and finally relocate the UI code to a specific position within the project.
304	304
	300	+On the  menubar, click **Export -> Export UI** Files as shown in the image below.
	301	+
305	305	[[image:1727229798126-306.png]]
306	306
307		- image 15 export UI file
308	308
	305	+The exported UI files can be found in your SquareLine project folder as shown in the image below.
	306	+
	307	+
309	309	[[image:1727229821582-258.png||height="333" width="662"]]
310	310
311		- image 16 exported UI file
312	312
313		-Create a empty directory entitled "ui" in path "basic_prj/app_components/ui/", and then copy all UI code exported to this directory.
	311	+Create a new folder named "**ui**" at path "**basic_prj/app_components/ui/**", and copy all the exported UI code into it as shown in the image below.
314	314
315	315	[[image:image-20240928144830-11.png]]
316	316
317		- image 17 open CMakeLists.txt
318	318
	316	+Open the **CMakeLists.txt** file and edit it as ahown below.
	317	+
319	319	[[image:1727229892636-154.png||height="521" width="407"]]
320	320
321		- image 18 modify CMakeLists.txt
322	322
323		-The last step of integrating is adding two lines of code in main.c file.
	321	+Open the main.c file and  add two lines of code as shown in the below images.
324	324
	323	+Add **#include "ui.h"**
	324	+
325	325	[[image:1727229926561-300.png]]
326	326
327		- image 19 add "ui.h"
328	328
	328	+Add **ui_init();**
	329	+
329	329	[[image:1727229955611-607.png]]
330	330
331		- image 20 add "ui_init()"
332	332
	333	+== 2.5 Brief introduction to the Hello World project ==
333	333
334		-== 2.5 Brief introduction of hello world project ==
335	335
	336	+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 provides information about the HMI screen product through an image and includes a button to return to the previous screen.
336	336
337		-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.
338	338
339		-
340	340	== 2.6 Test Result ==
341	341
342	342
343		-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.
	342	+By pressing the button located at the bottom right, the screen switches to the next one as expected. This confirms that the UI file has been successfully integrated into the project and is functioning correctly.
344	344
	344	+Screen 1:
	345	+
345	345	[[image:1727488067077-684.png||height="402" width="574"]]
346	346
347		- image 21 screen1
348	348
	349	+Screen 2:
	350	+
349	349	[[image:1727488157579-949.png||height="397" width="572"]]
350	350
351		- image 22 screen2
352	352
353		-
354	354	= 3. Example Project 1: LoRa Central Display =
355	355
356	356	[[image:image-20240916101737-1.png||height="468" width="683"]]
...	...	@@ -358,30 +358,30 @@
358	358
359	359	= 4. Example Project 2: LoRaWAN RS485 Alarm =
360	360
361		-= 5. The way to add a new panel to project =
	361	+= 5. Adding new panel to the project =
362	362
363	363
364		-**~1. Design a panel in SquareLine Studio, using image 5.1 below as a reference.**
	364	+**~1. **Design a panel in SquareLine Studio, as shown in Image 5.1 below for reference.
365	365
366	366	[[image:image-20241121113445-1.png||height="584" width="934"]]
367	367
368		- image 5.1 a panel about water_leak
	368	+ Image 5.1: a panel about water_leak
369	369
370	370
371		-**2. Export the ui file.** You need  to adjust the export path first, then click "Export->Export UI Files". This step had been introduced before. Then you can get the ui files as shown in image 5.2.
	371	+**2. Export the UI file: **You need to adjust the export path first, then click '**Export -> Export UI Files**' on the menu bar. This step was introduced earlier. After that, you can get the UI files as shown in Image 5.2.
372	372
373	373	[[image:image-20241121141120-4.png||height="383" width="795"]]
374	374
375		- image 5.2 ui files exported
	375	+ Image 5.2: Exported UI files
376	376
377	377
378		-**3. Delete or rename some file.** Here are the steps:
	378	+**3. Delete and rename some file.** Here are the steps:
379	379
380		- Step1 Delete the 'components' directory.
381		- Step2 Delete 'filelist.txt'.
382		- Step3 Delete 'ui_helpers.c' and 'ui_helpers.h'.
383		- Step4 Rename 'ui_ScreenMain.c' in the 'screens' directory to 'ui_water_leak_style.c'.
384		- Step5 Rename the 'screens' directory to 'styles'.
	380	+ Step 1: Delete the 'components' directory.
	381	+ Step 2: Delete 'filelist.txt'.
	382	+ Step 3: Delete 'ui_helpers.c' and 'ui_helpers.h'.
	383	+ Step 4: Rename 'ui_ScreenMain.c' in the 'screens' directory to 'ui_water_leak_style.c'.
	384	+ Step 5: Rename the 'screens' directory to 'styles'.
385	385
386	386	[[image:image-20241121151934-10.png||height="303" width="792"]]
387	387
...	...	@@ -391,9 +391,9 @@
391	391
392	392	image 5.4 rest file (2)
393	393
394		-**4. Open this project in vscode.**
	394	+4. Open the project in **VS Code**.
395	395
396		-5. Add file include path about water_leak in extra_lib/CMakeLists.txt as shown in image 5.5, 5.6, and its format is similar to the tem_hum or door.
	396	+5. Add the file include path for **water_leak** in **extra_lib/CMakeLists.txt**, as shown in Images 5.5 and 5.6. Its format is similar to that of **tem_hum** or **door**."
397	397
398	398	[[image:image-20241121181957-17.png||height="438" width="516"]]
399	399
...	...	@@ -403,8 +403,10 @@
403	403
404	404	image 5.6 extra_lib/CMakeLists.txt after add
405	405
406		-**6. Modify header file include in fonts and images directory.** Open the fonts/ui_font_Font12.c file, as shown in image 5.7, then modify the '#include "../ui.h"' to '#include "../ui_water_leak.h"', the image 5.8 is the modified image. Other font file need to be modified in same way.
	406	+**6. ** **Modify the header files included in the fonts and images directories**.
407	407
	408	+Open the **fonts/ui_font_Font12.c** file, as shown in Image 5.7, and change **#include "../ui.h"** to **#include "../ui_water_leak.h"**. The modified file is shown in Image 5.8. Other font files need to be modified in the same way.
	409	+
408	408	[[image:image-20241121171629-11.png]]
409	409
410	410	image 5.7 before-modified font file
...	...	@@ -413,7 +413,7 @@
413	413
414	414	image 5.8 modified font file
415	415
416		-Open the images/ui_img_battery_empty_png.c file, as shown in image 5.9, then modify the '#include "../ui.h"' to '#include "../ui_water_leak.h"', the image 5.10 is the modified image. Other image file need to be modified in same way.
	418	+Open the **images/ui_img_battery_empty_png.c** file, as shown in Image 5.9, and change **#include "../ui.h"** to **#include "../ui_water_leak.h"**. The modified file is shown in Image 5.10. Other image files need to be modified in the same way.
417	417
418	418	[[image:image-20241121172714-13.png]]
419	419
...	...	@@ -423,7 +423,7 @@
423	423
424	424	image 5.10 modified image file
425	425
426		-**7. Modify the ui_water_leak/CMakeLists.txt.** Open this file, and modify it from image 5.11 to image 5.12.
	428	+7. Modify the **ui_water_leak/CMakeLists.txt**. Open this file, and modify it as shown in image 5.11 (before) and image 5.12 (after).
427	427
428	428	[[image:image-20241121180030-15.png]]
429	429
...	...	@@ -433,8 +433,9 @@
433	433
434	434	image 5.12 ui_water_leak/CMakeLists.txt after modification
435	435
436		-**8. Modify ui_water_leak.h file.** The image 5.13, 5.14 show the code before modification, and the image 5.15, 5.16 show the code after modification.
437	437
	439	+**8. **Modify the **ui_water_leak.h** file. Images 5.13 and 5.14 show the code before modification, while Images 5.15 and 5.16 show the code after modification.
	440	+
438	438	[[image:image-20241122094200-23.png]]
439	439
440	440	image 5.13 ui_water_leak.h (1) before modification

image-20241226135550-1.png

Author

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

Size

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

Content

image-20250122170230-1.png

Author

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

Size

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

Content