Differences
This shows you the differences between two versions of the page.
|
si:iot2025:lab05 [2025/08/12 16:17] cosmin.chenaru created |
si:iot2025:lab05 [2025/08/13 14:04] (current) cosmin.chenaru |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ===== Laboratorul 04. Grafica ===== | + | ===== Laboratorul 05. Grafica ===== |
| ==== Despre LVGL ==== | ==== Despre LVGL ==== | ||
| - | LVGL (Light and Versatile Embedded Graphics Library) este biblioteca grafica cel mai des folosita in sistemele embedded. | + | LVGL (Light and Versatile Graphics Library) este o biblioteca open-source pentru interfete grafice (GUI) pe dispozitive embedded. |
| + | |||
| + | * Unordered List ItemEste usoara - consum redus de memorie si procesor. | ||
| + | |||
| + | * Este portabila - funcționeaza pe multe platforme (MCU-uri, Linux embedded, RTOS-uri). | ||
| + | |||
| + | * Este bogata în functii - butoane, slider-e, meniuri, animatii, teme, suport touch, etc. | ||
| + | |||
| + | {{:si:iot2025:lvgl_ebike_demo-1058142653.jpg?600|}} | ||
| ==== Exercitii ==== | ==== Exercitii ==== | ||
| - | **1.** Porning de la config-ul ''hacktorwatch:iot''. In acest config aplicatia HacktorWatch (''CONFIG_HACKTORWATCH_REV2'') este activata in mod implicit. | + | **1.** Porning de la config-ul ''hacktorwatch:lvgl''. In acest config aplicatia HacktorWatch (''CONFIG_HACKTORWATCH_REV2'') este activata in mod implicit. |
| * Compilati si incarcati pe ceas noua imagine | * Compilati si incarcati pe ceas noua imagine | ||
| Line 23: | Line 31: | ||
| #endif | #endif | ||
| </code> | </code> | ||
| - | * Din cauza unui bug, codul de touchscreen din LVGL citeste in continuu date de la driver-ul de touchscreen. Aplicati urmatoarea modificare in fisierul nuttx-apps/graphics/lvgl/lvgl/src/drivers/nuttx/lv_nuttx_touchscreen.c. Prin aceasta modificare, vom lasa codul de LVGL sa opreasca procesarea in momentul cand degetul este luat de pe touchscreen <code> | + | * Din cauza unui bug, codul de touchscreen din LVGL citeste in continuu date de la driver-ul de touchscreen. Aplicati urmatoarea modificare in fisierul nuttx-apps/graphics/lvgl/lvgl/src/drivers/nuttx/lv_nuttx_touchscreen.c. Prin aceasta modificare, vom lasa codul de LVGL sa opreasca procesarea in momentul cand degetul este luat de pe touchscreen. <code> |
| --- ./graphics/lvgl/lvgl/src/drivers/nuttx/lv_nuttx_touchscreen.c 2024-10-24 21:45:11.000000000 +0300 | --- ./graphics/lvgl/lvgl/src/drivers/nuttx/lv_nuttx_touchscreen.c 2024-10-24 21:45:11.000000000 +0300 | ||
| +++ ./graphics/lvgl/lvgl/src/drivers/nuttx/lv_nuttx_touchscreen.c 2025-08-10 20:04:58.486933763 +0300 | +++ ./graphics/lvgl/lvgl/src/drivers/nuttx/lv_nuttx_touchscreen.c 2025-08-10 20:04:58.486933763 +0300 | ||
| Line 41: | Line 49: | ||
| </code> | </code> | ||
| - | **4.** | + | **4.** Rulati urmatorul cod care va crea un obiect "circle" folosit ca parinte pentru mai multe elemente - o coloana cu un label si un checkbox - aflate in interiorul cercului. Mai jos este o diagrama cu relatia dintre ele. |
| + | |||
| + | {{:si:iot2025:screenshot_20250813_134650.png|}} {{:si:iot2025:20250813_134911_1.jpg?200|}} | ||
| + | |||
| + | Adaugati in hacktorwatch_main.c urmatoarea functie si apelati functia din main(). <code> | ||
| + | static void hacktorwatch_count_steps(void) | ||
| + | { | ||
| + | circle = lv_obj_create(lv_screen_active()); | ||
| + | |||
| + | lv_obj_set_style_radius(circle, LV_RADIUS_CIRCLE, 0); | ||
| + | lv_obj_set_size(circle, 230, 230); | ||
| + | lv_obj_align(circle, LV_ALIGN_CENTER, 0, 0); | ||
| + | |||
| + | lv_obj_t * column1 = lv_obj_create(circle); | ||
| + | lv_obj_set_flex_flow(column1, LV_FLEX_FLOW_COLUMN); | ||
| + | lv_obj_set_size(column1, lv_pct(80), lv_pct(60)); | ||
| + | lv_obj_align(column1, LV_ALIGN_CENTER, 0, 0); | ||
| + | |||
| + | cb_count = lv_checkbox_create(column1); | ||
| + | lv_checkbox_set_text(cb_count, "Count"); | ||
| + | lv_obj_add_state(cb_count, LV_STATE_CHECKED); | ||
| + | lv_obj_add_event_cb(cb_count, event_handler, LV_EVENT_ALL, NULL); | ||
| + | |||
| + | label_steps = lv_label_create(column1); | ||
| + | lv_obj_set_width(label_steps, lv_pct(100)); | ||
| + | lv_label_set_text_fmt(label_steps, "Steps: %i", total_steps); | ||
| + | |||
| + | lv_obj_update_layout(circle); | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | Pentru a simula pasii numarati de accelerometru, vom instantia un timer care se va executa o data pe secunda. La fiecare executie a timer-ului, vom incrementa variabila "total_steps" si vom face refresh la label pentru a afisa noul count pe display. Definiti urmatoare functie in fisierul hacktorwatch_main.c: <code> | ||
| + | static void hacktorwatch_inc_step(lv_timer_t * timer) | ||
| + | { | ||
| + | int should_inc; | ||
| + | |||
| + | should_inc = lv_obj_get_state(cb_count) & LV_STATE_CHECKED; | ||
| + | if (should_inc) { | ||
| + | total_steps++; | ||
| + | lv_label_set_text_fmt(label_steps, "Steps: %u", total_steps); | ||
| + | } | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | In main(), instantiati timer-ul:<code> | ||
| + | lv_timer_create(hacktorwatch_inc_step, 1000, NULL); | ||
| + | </code> | ||
| ==== Resurse ==== | ==== Resurse ==== | ||
| - | * [[https://nuttx.apache.org/docs/latest/|Documentatia oficiala NuttX]] | + | * [[https://lvgl.io]] |
| - | * [[https://robots.net/tech/what-is-mqtt-in-iot/| What is MQTT in IoT?]] | + | * [[https://docs.lvgl.io/master/examples.html]] |
| - | * [[https://nuttx.apache.org/docs/latest/platforms/xtensa/esp32/boards/esp32-devkitc/index.html#mqttc| ESP32 DevKitC - mqttc]] | + | |
