Last modified by Dilisi S on 2025/02/26 19:24
<
From version < 112.1 >
edited by BoYang Xie
on 2024/11/22 17:37
To version < 113.2 >
edited by BoYang Xie
on 2024/11/22 18:05
>
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -291,54 +291,53 @@
291 291  
292 292  = 4. Example Project 2: LoRaWAN RS485 Alarm =
293 293  
294 -(% class="wikigeneratedid" %)
295 295  = 5.  The way to add a new panel to project =
296 296  
297 -~1. Design a panel in SquareLine Studio, using image 5.1 below as a reference.
296 +**~1. Design a panel in SquareLine Studio, using image 5.1 below as a reference.**
298 298  
299 299  [[image:image-20241121113445-1.png||height="584" width="934"]]
300 300  
301 301   image 5.1 a panel about water_leak
302 302  
303 -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.
302 +**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.
304 304  
305 305  [[image:image-20241121141120-4.png||height="383" width="795"]]
306 306  
307 307   image 5.2 ui files exported
308 308  
309 -3. Delete or rename some file. Here are the steps:
308 +**3. Delete or rename some file.** Here are the steps:
310 310  
311 - 3.1 Delete the 'components' directory.
312 - 3.2 Delete 'filelist.txt'.
313 - 3.3 Delete 'ui_helpers.c' and 'ui_helpers.h'.
314 - 3.4 Rename 'ui_ScreenMain.c' in the 'screens' directory to 'ui_water_leak_style.c'.
315 - 3.5 Rename the 'screens' directory to 'styles'.
310 + Step1 Delete the 'components' directory.
311 + Step2 Delete 'filelist.txt'.
312 + Step3 Delete 'ui_helpers.c' and 'ui_helpers.h'.
313 + Step4 Rename 'ui_ScreenMain.c' in the 'screens' directory to 'ui_water_leak_style.c'.
314 + Step5 Rename the 'screens' directory to 'styles'.
316 316  
317 317  [[image:image-20241121151934-10.png||height="303" width="792"]]
318 318  
319 - image 5.3 rest file 1
318 + image 5.3 rest file (1)
320 320  
321 321  [[image:image-20241121142925-7.png||height="141" width="793"]]
322 322  
323 - image 5.4 rest file 2
322 + image 5.4 rest file (2)
324 324  
325 -4. Open this project in vscode.
324 +**4. Open this project in vscode.**
326 326  
327 327  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.
328 328  
329 329  [[image:image-20241121181957-17.png||height="438" width="516"]]
330 330  
331 - image 5.5 before add
330 + image 5.5 extra_lib/CMakeLists.txt before add
332 332  
333 333  [[image:image-20241121182239-18.png||height="520" width="518"]]
334 334  
335 - image 5.6 after add
334 + image 5.6 extra_lib/CMakeLists.txt after add
336 336  
337 -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.
336 +**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.
338 338  
339 339  [[image:image-20241121171629-11.png]]
340 340  
341 - image 5.7 before-modified font file
340 + image 5.7 before-modified font file
342 342  
343 343  [[image:image-20241121171901-12.png]]
344 344  
... ... @@ -354,28 +354,186 @@
354 354  
355 355   image 5.10 modified image file
356 356  
357 -7. Modify the ui_water_leak/CMakeLists.txt. Open this file, and modify it from image 5.11 to image 5.12.
356 +**7. Modify the ui_water_leak/CMakeLists.txt.** Open this file, and modify it from image 5.11 to image 5.12.
358 358  
359 359  [[image:image-20241121180030-15.png]]
360 360  
361 - image 5.11 before modification
360 + image 5.11 ui_water_leak/CMakeLists.txt before modification
362 362  
363 363  [[image:image-20241121180517-16.png]]
364 364  
365 - image 5.12 after modification
364 + image 5.12 ui_water_leak/CMakeLists.txt after modification
366 366  
367 -8.
366 +**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.
368 368  
368 +[[image:image-20241122094200-23.png]]
369 369  
370 + image 5.13 ui_water_leak.h (1) before modification
370 370  
372 +[[image:image-20241122094320-24.png||height="852" width="554"]]
371 371  
374 + image 5.14 ui_water_leak.h (2) before modification
372 372  
376 +[[image:image-20241122094600-25.png||height="1078" width="554"]]
373 373  
378 + image 5.15 ui_water_leak.h (1) after modification
374 374  
380 +[[image:image-20241122094719-26.png||height="941" width="583"]]
375 375  
382 + image 5.16 ui_water_leak.h (2) before modification
376 376  
384 +**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.
377 377  
386 +_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.
378 378  
388 +[[image:image-20241122102929-27.png||height="619" width="426"]]
389 +
390 + image 5.17 ui_water_leak.c (1) before modification
391 +
392 +[[image:image-20241122112838-30.png||height="551" width="628"]]
393 +
394 + image 5.18 ui_water_leak.c (2) before modification
395 +
396 +[[image:image-20241122110815-29.png||height="725" width="712"]]
397 +
398 + image 5.19 ui_water_leak.c (3) before modification
399 +
400 +[[image:image-20241122113158-31.png||height="872" width="677"]]
401 +
402 + image 5.20 ui_water_leak.c (1) after modification
403 +
404 +[[image:image-20241122113259-33.png||height="874" width="724"]]
405 +
406 + image 5.21 ui_water_leak.c (2) after modification
407 +
408 +[[image:image-20241122113359-34.png||height="804" width="746"]]
409 +
410 + image 5.22 ui_water_leak.c (3) after modification
411 +
412 +**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.
413 +
414 +[[image:image-20241122134113-35.png||height="380" width="421"]]
415 +
416 + image 5.23 ui_water_leak_events_.h before modification
417 +
418 +[[image:image-20241122134420-37.png||height="201" width="283"]]
419 +
420 +image 5.24 ui_water_leak_events_.h after modification
421 +
422 +**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.
423 +
424 +Step1. '#include "ui.h"'~-~->'#include "ui_water_leak.h"'
425 +
426 +Step2. add code  below in delete_object() function definition.
427 +
428 + panel_all * panel = find_upper_by_SensorPanel(&arr,((lv_obj_t *)(e->user_data~)~)~);
429 +
430 + size_t index = panel->panel_obj_index;
431 +
432 + deleteElement(&arr, index);
433 +
434 +[[image:image-20241122135023-38.png||height="358" width="372"]]
435 +
436 + image 5.25 ui_water_leak_events_.c before modification
437 +
438 +[[image:image-20241122135258-39.png||height="403" width="559"]]
439 +
440 + image 5.26 ui_water_leak_events_.c after modification
441 +
442 +**12. Modify ui_water_leak_style.c file.**
443 +
444 +Step1. '#include "../ui.h"'~-~->#include '"../ui_water_leak.h"'
445 +
446 + add '#include "../../sort.h"'
447 +
448 + add '#include "ui.h"'
449 +
450 +[[image:image-20241122141536-41.png||height="361" width="612"]]
451 +
452 + image 5.27 ui_water_leak_style.c (1) before modification
453 +
454 +[[image:image-20241122142129-42.png||height="386" width="613"]]
455 +
456 + image 5.28 ui_water_leak_style.c (1) after modification
457 +
458 +Step2. modify 'void ui_ScreenMain_screen_init(void)'~-~->'panel_with_type create_water_leak(uint8_t index)'
459 +
460 + delete code as shown in image 5.29
461 +
462 +[[image:image-20241122145620-44.png||height="757" width="671"]]
463 +
464 + image 5.29 ui_water_leak_style.c (2)
465 +
466 +Step3. The image 5.30, 5.31 show the change.
467 +
468 +[[image:image-20241122152026-45.png||height="277" width="828"]]
469 +
470 + image 5.30 ui_water_leak_style.c (3) before modification
471 +
472 +[[image:image-20241122152542-46.png||height="293" width="830"]]
473 +
474 + image 5.31 ui_water_leak_style.c (3) after modification
475 +
476 +Step4. Copy partly the code in ui_water_leak.c, paste at extra_lib/sort.h(The process is shown in image 5.32, 5.33).
477 +
478 +[[image:image-20241122153958-47.png]]
479 +
480 + image 5.32 ui_water_leak_style.c (4)
481 +
482 +[[image:image-20241122154755-49.png||height="864" width="513"]]
483 +
484 + image 5.33 ui_water_leak_style.c (4)
485 +
486 +Step5. Delete event function in code which was just pasted in extra_lib/sort.h(The process is shown in image 5.34).
487 +
488 +[[image:image-20241122155650-50.png||height="922" width="513"]]
489 +
490 + image 5.34 ui_water_leak_style.c (5)
491 +
492 +Step6. Add some lines of code in extra_lib/sort.h as shown in image 5.35.
493 +
494 +[[image:image-20241122161934-51.png]]
495 +
496 + image 5.35
497 +
498 +Step7. Add a line of code in extra_lib/sort.h as shown in image 5.36.
499 +
500 +[[image:image-20241122162852-53.png||height="330" width="529"]]
501 +
502 + image 5.37
503 +
504 +Step8. Add some code in ui_water_leak_style.c as shown in image 5.38 from line534 to line 576 in detail.
505 +
506 +panel_with_type union_sensor;
507 +
508 +union_sensor.panel_type = WATER_LEAK_TYPE;
509 +
510 +......
511 +
512 +lv_obj_set_x(union_sensor.panel_union.door.ui_PanelSensorDoor, x_by_index(index));
513 +
514 +lv_obj_set_y(union_sensor.panel_union.door.ui_PanelSensorDoor, y_by_index(index));
515 +
516 +return union_sensor;
517 +
518 +[[image:image-20241122171211-54.png||height="635" width="792"]]
519 +
520 + image 5.38
521 +
522 +**13. Modify sort.c file.**
523 +
524 +Add a line of code ~-~-'#include "ui_water_leak.h"' as shown in image 5.39 line 16.
525 +
526 +[[image:image-20241122173718-56.png||height="378" width="579"]]
527 +
528 + image 5.39 sort.c (1)
529 +
530 +There are still some changes need to be done in sort.c, and omit here for the moment.
531 +
532 +
533 +
534 +
535 +
379 379  = 6. FAQ =
380 380  
381 381  == 6.1 ==
image-20241122173718-56.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.xieby
Size
... ... @@ -1,0 +1,1 @@
1 +37.6 KB
Content

Applications

Navigation

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