Last modified by Dilisi S on 2025/02/26 19:24
<
From version < 113.2 >
edited by BoYang Xie
on 2024/11/22 18:05
To version < 113.1 >
edited by BoYang Xie
on 2024/11/22 17:37
>
Change comment: Uploaded new attachment "image-20241122173718-56.png", version {1}

Summary

Details

Page properties
Content
... ... @@ -291,53 +291,54 @@
291 291  
292 292  = 4. Example Project 2: LoRaWAN RS485 Alarm =
293 293  
294 +(% class="wikigeneratedid" %)
294 294  = 5.  The way to add a new panel to project =
295 295  
296 -**~1. Design a panel in SquareLine Studio, using image 5.1 below as a reference.**
297 +~1. Design a panel in SquareLine Studio, using image 5.1 below as a reference.
297 297  
298 298  [[image:image-20241121113445-1.png||height="584" width="934"]]
299 299  
300 300   image 5.1 a panel about water_leak
301 301  
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.
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.
303 303  
304 304  [[image:image-20241121141120-4.png||height="383" width="795"]]
305 305  
306 306   image 5.2 ui files exported
307 307  
308 -**3. Delete or rename some file.** Here are the steps:
309 +3. Delete or rename some file. Here are the steps:
309 309  
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'.
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'.
315 315  
316 316  [[image:image-20241121151934-10.png||height="303" width="792"]]
317 317  
318 - image 5.3 rest file (1)
319 + image 5.3 rest file 1
319 319  
320 320  [[image:image-20241121142925-7.png||height="141" width="793"]]
321 321  
322 - image 5.4 rest file (2)
323 + image 5.4 rest file 2
323 323  
324 -**4. Open this project in vscode.**
325 +4. Open this project in vscode.
325 325  
326 326  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.
327 327  
328 328  [[image:image-20241121181957-17.png||height="438" width="516"]]
329 329  
330 - image 5.5 extra_lib/CMakeLists.txt before add
331 + image 5.5 before add
331 331  
332 332  [[image:image-20241121182239-18.png||height="520" width="518"]]
333 333  
334 - image 5.6 extra_lib/CMakeLists.txt after add
335 + image 5.6 after add
335 335  
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.
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.
337 337  
338 338  [[image:image-20241121171629-11.png]]
339 339  
340 - image 5.7 before-modified font file
341 + image 5.7 before-modified font file
341 341  
342 342  [[image:image-20241121171901-12.png]]
343 343  
... ... @@ -353,186 +353,28 @@
353 353  
354 354   image 5.10 modified image file
355 355  
356 -**7. Modify the ui_water_leak/CMakeLists.txt.** Open this file, and modify it from image 5.11 to image 5.12.
357 +7. Modify the ui_water_leak/CMakeLists.txt. Open this file, and modify it from image 5.11 to image 5.12.
357 357  
358 358  [[image:image-20241121180030-15.png]]
359 359  
360 - image 5.11 ui_water_leak/CMakeLists.txt before modification
361 + image 5.11 before modification
361 361  
362 362  [[image:image-20241121180517-16.png]]
363 363  
364 - image 5.12 ui_water_leak/CMakeLists.txt after modification
365 + image 5.12 after modification
365 365  
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.
367 +8.
367 367  
368 -[[image:image-20241122094200-23.png]]
369 369  
370 - image 5.13 ui_water_leak.h (1) before modification
371 371  
372 -[[image:image-20241122094320-24.png||height="852" width="554"]]
373 373  
374 - image 5.14 ui_water_leak.h (2) before modification
375 375  
376 -[[image:image-20241122094600-25.png||height="1078" width="554"]]
377 377  
378 - image 5.15 ui_water_leak.h (1) after modification
379 379  
380 -[[image:image-20241122094719-26.png||height="941" width="583"]]
381 381  
382 - image 5.16 ui_water_leak.h (2) before modification
383 383  
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.
385 385  
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.
387 387  
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 -
536 536  = 6. FAQ =
537 537  
538 538  == 6.1 ==

Applications

Navigation

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