Last modified by Dilisi S on 2025/02/26 19:24
<
From version < 134.1 >
edited by Xiaoling
on 2024/12/26 14:00
To version < 142.1 >
edited by BoYang Xie
on 2025/02/07 09:53
>
Change comment: Uploaded new attachment "1738893226894-758.png", version {1}

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.Xiaoling
1 +XWiki.xieby
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,31 @@
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. The method for adding a new type of panel to the project =
358 358  
363 +If you don't have this need, then this part of the content can be ignored.
359 359  
360 -**~1. Design a panel in SquareLine Studio, using image 5.1 below as a reference.**
365 +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
369 + 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.
372 +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
376 + Image 5.2: Exported UI files
372 372  
373 373  
374 -**3. Delete or rename some file.** Here are the steps:
379 +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'.
381 + Step 1: Delete the 'components' directory.
382 + Step 2: Delete 'filelist.txt'.
383 + Step 3: Delete 'ui_helpers.c' and 'ui_helpers.h'.
384 + Step 4: Rename 'ui_ScreenMain.c' in the 'screens' directory to 'ui_water_leak_style.c'.
385 + 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.**
395 +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.
397 +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.
407 +6.  **Modify the header files included in the fonts and images directories**.
403 403  
409 +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.
410 +
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.
419 +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.
429 +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  
440 +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.
441 +
434 434  [[image:image-20241122094200-23.png]]
435 435  
436 436   image 5.13 ui_water_leak.h (1) before modification
... ... @@ -447,7 +447,7 @@
447 447  
448 448   image 5.16 ui_water_leak.h (2) before modification
449 449  
450 -**9. Modify ui_water_leak.c file.** The image 5.17, 5.18, 5.19 show the code before modification, and the image 5.20, 5.21, 5.22 show the code after modification.
458 +9. **Modify ui_water_leak.c file.** The image 5.17, 5.18, 5.19 show the code before modification, and the image 5.20, 5.21, 5.22 show the code after modification.
451 451  
452 452  _ui_flag_modify( ((lv_obj_t *)(e->user_data)), LV_OBJ_FLAG_HIDDEN, _UI_MODIFY_FLAG_TOGGLE);  This code replaces 4 lines of code in ui_water_leak.c, so it is pasted here for convenience.
453 453  
... ... @@ -475,7 +475,7 @@
475 475  
476 476   image 5.22 ui_water_leak.c (3) after modification
477 477  
478 -**10. Modify ui_water_leak_events.h file.** The image 5.23 show the code before modification, and the image 5.24 show the code after modification.
486 +10. **Modify ui_water_leak_events.h file.** The image 5.23 show the code before modification, and the image 5.24 show the code after modification.
479 479  
480 480  [[image:image-20241122134113-35.png||height="380" width="421"]]
481 481  
... ... @@ -485,7 +485,7 @@
485 485  
486 486  image 5.24 ui_water_leak_events_.h after modification
487 487  
488 -**11. Modify ui_water_leak_events.c file.** The image 5.25 show the code before modification, and the image 5.26 show the code after modification.
496 +11.** Modify ui_water_leak_events.c file.** The image 5.25 show the code before modification, and the image 5.26 show the code after modification.
489 489  
490 490  Step1. '#include "ui.h"'~-~->'#include "ui_water_leak.h"'
491 491  
... ... @@ -506,7 +506,7 @@
506 506   image 5.26 ui_water_leak_events_.c after modification
507 507  
508 508  
509 -**12. Modify ui_water_leak_style.c file.**
517 +12. **Modify ui_water_leak_style.c file.**
510 510  
511 511  Step1. '#include "../ui.h"'~-~->#include '"../ui_water_leak.h"'
512 512  
... ... @@ -549,6 +549,7 @@
549 549  
550 550   image 5.32 ui_water_leak_style.c (4)
551 551  
560 +
552 552  [[image:image-20241122154755-49.png||height="864" width="513"]]
553 553  
554 554   image 5.33 ui_water_leak_style.c (4)
... ... @@ -589,22 +589,31 @@
589 589  
590 590  return union_sensor;
591 591  
592 -[[image:image-20241122171211-54.png||height="635" width="792"]]
601 +[[image:image-20250122173546-6.png||height="777" width="922"]]
593 593  
594 594   image 5.38
595 595  
596 596  
597 -**13. Modify sort.c file.**
606 +13. Rest midification in sort.h file.
598 598  
599 -Add a line of code ~-~-'#include "ui_water_leak.h"' as shown in image 5.39 line 16.
608 +In image 5.39 as below, we can see "WATER_LEAK_TYPE" at line 24 and water leak switch status definition at line 32,33, and these are what we need to add in sort.
600 600  
601 -[[image:image-20241122173718-56.png||height="378" width="579"]]
610 +[[image:image-20250122170230-1.png||height="580" width="513"]]
602 602  
603 - image 5.39 sort.c (1)
612 + image 5.39 sort.h
604 604  
614 +13. **Modify sort.c file.**
615 +
616 +Add a line of code ~-~-'#include "ui_water_leak.h"' as shown in image 5.39 line 26.
617 +
618 +[[image:image-20250122171910-5.png||height="524" width="510"]]
619 +
620 + image 5.40 sort.c (1)
621 +
605 605  There are still some changes need to be done in sort.c, and omit here for the moment.
606 606  
607 607  
625 +
608 608  = 6. FAQ =
609 609  
610 610  == 6.1 ==
... ... @@ -637,7 +637,7 @@
637 637  
638 638  
639 639  * Datasheet
640 -* Source Code
658 +* Source Code: [[dragino/LoRa-HMI-Touch-Screen: Open Source LoRa / LoRaWAN HMI Touch Screen Project>>url:https://github.com/dragino/LoRa-HMI-Touch-Screen/tree/main]]
641 641  * Mechinical
642 642  
643 643  = 10. FCC Warning =
1738893226894-758.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.xieby
Size
... ... @@ -1,0 +1,1 @@
1 +25.6 KB
Content
image-20250122170230-1.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.xieby
Size
... ... @@ -1,0 +1,1 @@
1 +77.3 KB
Content
image-20250122171809-2.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.xieby
Size
... ... @@ -1,0 +1,1 @@
1 +51.1 KB
Content
image-20250122171825-3.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.xieby
Size
... ... @@ -1,0 +1,1 @@
1 +51.1 KB
Content
image-20250122171832-4.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.xieby
Size
... ... @@ -1,0 +1,1 @@
1 +51.1 KB
Content
image-20250122171910-5.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.xieby
Size
... ... @@ -1,0 +1,1 @@
1 +51.1 KB
Content
image-20250122173546-6.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.xieby
Size
... ... @@ -1,0 +1,1 @@
1 +200.4 KB
Content

Applications

Navigation

Copyright ©2010-2024 Dragino Technology Co., LTD. All rights reserved
Dragino Wiki v2.0