Summary

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

Details

Page properties

Author

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

Content

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