Summary

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

Details

Page properties

Author

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

Content

...	...	@@ -1,11 +3,12 @@
1		-
2		-
3	3	(% style="text-align:center" %)
4		-[[image:image-20241226135550-1.png]]
	2	+[[image:image-20240915231842-1.png]]
5	5
6	6
7	7
8	8
	7	+
	8	+
	9	+
9	9	(% _mstvisible="1" %)
10	10	(% _msthash="315238" _msttexthash="18964465" _mstvisible="3" %)**Table of Contents:**
11	11
...	...	@@ -141,7 +141,7 @@
141	141
142	142	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.
143	143
144		-[[image:squareline.io_downloads.png||height="888" width="1294"]]
	145	+[[image:squareline.io_downloads.png]]
145	145
146	146
147	147	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:
...	...	@@ -160,9 +160,10 @@
160	160	* In the **PROJECT SETTINGS**, select **LVGL version **as **8.3.11** and **Resolution** as **800** x **480**.
161	161	* Select the **CREATE **button to create the new project with the selected settings.
162	162
163		-[[image:squareline-studio-launcher-screen.png||height="752" width="1415"]]
	164	+[[image:squareline-studio-launcher-screen.png]]
164	164
165	165
	167	+
166	166	Next, you need to configure some additional settings for this project. To do so, select** File  -> Project Settings** as shown in the image below.
167	167
168	168	[[image:1727229582471-566.png]]
...	...	@@ -297,60 +297,56 @@
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		-
302	302	[[image:1727229798126-306.png]]
303	303
	304	+ image 15 export UI file
304	304
305		-The exported UI files can be found in your SquareLine project folder as shown in the image below.
306		-
307		-
308	308	[[image:1727229821582-258.png||height="333" width="662"]]
309	309
	308	+ image 16 exported UI file
310	310
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.
	310	+Create a empty directory entitled "ui" in path "basic_prj/app_components/ui/", and then copy all UI code exported to this directory.
312	312
313	313	[[image:image-20240928144830-11.png]]
314	314
	314	+ image 17 open CMakeLists.txt
315	315
316		-Open the **CMakeLists.txt** file and edit it as ahown below.
317		-
318	318	[[image:1727229892636-154.png||height="521" width="407"]]
319	319
	318	+ image 18 modify CMakeLists.txt
320	320
321		-Open the main.c file and  add two lines of code as shown in the below images.
322	322
323		-Add **#include "ui.h"**
	321	+The last step of integrating is adding two lines of code in main.c file.
324	324
325	325	[[image:1727229926561-300.png]]
326	326
	325	+ image 19 add "ui.h"
327	327
328		-Add **ui_init();**
329		-
330	330	[[image:1727229955611-607.png]]
331	331
	329	+ image 20 add "ui_init()"
332	332
333		-== 2.5 Brief introduction to the Hello World project ==
334	334
	332	+== 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.
337	337
	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.
338	338
	337	+
339	339	== 2.6 Test Result ==
340	340
341	341
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.
	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.
343	343
344		-Screen 1:
345		-
346	346	[[image:1727488067077-684.png||height="402" width="574"]]
347	347
	345	+ image 21 screen1
348	348
349		-Screen 2:
350		-
351	351	[[image:1727488157579-949.png||height="397" width="572"]]
352	352
	349	+ image 22 screen2
353	353
	351	+
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. Adding new panel to the project =
	359	+= 5. The way to add a new panel to project =
362	362
363	363
364		-**~1. **Design a panel in SquareLine Studio, as shown in Image 5.1 below for reference.
	362	+**~1. Design a panel in SquareLine Studio, using image 5.1 below as a 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
	366	+ 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**' on the menu bar. This step was introduced earlier. After that, you can get the UI files as shown in Image 5.2.
	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.
372	372
373	373	[[image:image-20241121141120-4.png||height="383" width="795"]]
374	374
375		- Image 5.2: Exported UI files
	373	+ image 5.2 ui files exported
376	376
377	377
378		-**3. Delete and rename some file.** Here are the steps:
	376	+**3. Delete or rename some file.** Here are the steps:
379	379
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'.
	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'.
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 the project in **VS Code**.
	392	+**4. Open this project in vscode.**
395	395
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**."
	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.
397	397
398	398	[[image:image-20241121181957-17.png||height="438" width="516"]]
399	399
...	...	@@ -403,10 +403,8 @@
403	403
404	404	image 5.6 extra_lib/CMakeLists.txt after add
405	405
406		-**6. ** **Modify the header files included in the fonts and images directories**.
	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.
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		-
410	410	[[image:image-20241121171629-11.png]]
411	411
412	412	image 5.7 before-modified font file
...	...	@@ -415,7 +415,7 @@
415	415
416	416	image 5.8 modified font file
417	417
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.
	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.
419	419
420	420	[[image:image-20241121172714-13.png]]
421	421
...	...	@@ -425,7 +425,7 @@
425	425
426	426	image 5.10 modified image file
427	427
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).
	424	+**7. Modify the ui_water_leak/CMakeLists.txt.** Open this file, and modify it from image 5.11 to image 5.12.
429	429
430	430	[[image:image-20241121180030-15.png]]
431	431
...	...	@@ -435,9 +435,8 @@
435	435
436	436	image 5.12 ui_water_leak/CMakeLists.txt after modification
437	437
	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.
438	438
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		-
441	441	[[image:image-20241122094200-23.png]]
442	442
443	443	image 5.13 ui_water_leak.h (1) before modification

image-20241226135550-1.png

Author

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

Size

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

Content

image-20250122170230-1.png

Author

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

Size

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

Content