Summary

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

Details

Page properties

Author

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

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,10 +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
164		-[[image:squareline-studio-launcher-screen.png]]
	163	+[[image:squareline-studio-launcher-screen.png||height="752" width="1415"]]
165	165
166	166
167		-
168	168	Next, you need to configure some additional settings for this project. To do so, select** File  -> Project Settings** as shown in the image below.
169	169
170	170	[[image:1727229582471-566.png]]
...	...	@@ -299,56 +299,60 @@
299	299
300	300	To integrate, first export the UI code, then make some modifications, and finally relocate the UI code to a specific position within the project.
301	301
	300	+On the  menubar, click **Export -> Export UI** Files as shown in the image below.
	301	+
302	302	[[image:1727229798126-306.png]]
303	303
304		- image 15 export UI file
305	305
	305	+The exported UI files can be found in your SquareLine project folder as shown in the image below.
	306	+
	307	+
306	306	[[image:1727229821582-258.png||height="333" width="662"]]
307	307
308		- image 16 exported UI file
309	309
310		-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.
311	311
312	312	[[image:image-20240928144830-11.png]]
313	313
314		- image 17 open CMakeLists.txt
315	315
	316	+Open the **CMakeLists.txt** file and edit it as ahown below.
	317	+
316	316	[[image:1727229892636-154.png||height="521" width="407"]]
317	317
318		- image 18 modify CMakeLists.txt
319	319
	321	+Open the main.c file and  add two lines of code as shown in the below images.
320	320
321		-The last step of integrating is adding two lines of code in main.c file.
	323	+Add **#include "ui.h"**
322	322
323	323	[[image:1727229926561-300.png]]
324	324
325		- image 19 add "ui.h"
326	326
	328	+Add **ui_init();**
	329	+
327	327	[[image:1727229955611-607.png]]
328	328
329		- image 20 add "ui_init()"
330	330
	333	+== 2.5 Brief introduction to the Hello World project ==
331	331
332		-== 2.5 Brief introduction of hello world project ==
333	333
	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.
334	334
335		-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.
336	336
337		-
338	338	== 2.6 Test Result ==
339	339
340	340
341		-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.
342	342
	344	+Screen 1:
	345	+
343	343	[[image:1727488067077-684.png||height="402" width="574"]]
344	344
345		- image 21 screen1
346	346
	349	+Screen 2:
	350	+
347	347	[[image:1727488157579-949.png||height="397" width="572"]]
348	348
349		- image 22 screen2
350	350
351		-
352	352	= 3. Example Project 1: LoRa Central Display =
353	353
354	354	[[image:image-20240916101737-1.png||height="468" width="683"]]
...	...	@@ -356,30 +356,30 @@
356	356
357	357	= 4. Example Project 2: LoRaWAN RS485 Alarm =
358	358
359		-= 5. The way to add a new panel to project =
	361	+= 5. Adding new panel to the project =
360	360
361	361
362		-**~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.
363	363
364	364	[[image:image-20241121113445-1.png||height="584" width="934"]]
365	365
366		- image 5.1 a panel about water_leak
	368	+ Image 5.1: a panel about water_leak
367	367
368	368
369		-**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.
370	370
371	371	[[image:image-20241121141120-4.png||height="383" width="795"]]
372	372
373		- image 5.2 ui files exported
	375	+ Image 5.2: Exported UI files
374	374
375	375
376		-**3. Delete or rename some file.** Here are the steps:
	378	+**3. Delete and rename some file.** Here are the steps:
377	377
378		- Step1 Delete the 'components' directory.
379		- Step2 Delete 'filelist.txt'.
380		- Step3 Delete 'ui_helpers.c' and 'ui_helpers.h'.
381		- Step4 Rename 'ui_ScreenMain.c' in the 'screens' directory to 'ui_water_leak_style.c'.
382		- 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'.
383	383
384	384	[[image:image-20241121151934-10.png||height="303" width="792"]]
385	385
...	...	@@ -389,9 +389,9 @@
389	389
390	390	image 5.4 rest file (2)
391	391
392		-**4. Open this project in vscode.**
	394	+4. Open the project in **VS Code**.
393	393
394		-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**."
395	395
396	396	[[image:image-20241121181957-17.png||height="438" width="516"]]
397	397
...	...	@@ -401,8 +401,10 @@
401	401
402	402	image 5.6 extra_lib/CMakeLists.txt after add
403	403
404		-**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**.
405	405
	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	+
406	406	[[image:image-20241121171629-11.png]]
407	407
408	408	image 5.7 before-modified font file
...	...	@@ -411,7 +411,7 @@
411	411
412	412	image 5.8 modified font file
413	413
414		-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.
415	415
416	416	[[image:image-20241121172714-13.png]]
417	417
...	...	@@ -421,7 +421,7 @@
421	421
422	422	image 5.10 modified image file
423	423
424		-**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).
425	425
426	426	[[image:image-20241121180030-15.png]]
427	427
...	...	@@ -431,8 +431,9 @@
431	431
432	432	image 5.12 ui_water_leak/CMakeLists.txt after modification
433	433
434		-**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.
435	435
	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	+
436	436	[[image:image-20241122094200-23.png]]
437	437
438	438	image 5.13 ui_water_leak.h (1) before modification