Table of Contents
Laboratorul 05. Grafica
Despre LVGL
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.
Exercitii
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
- Rulati aplicatia “hactorwatch” si verificati ca pe display aveti textul “Hello!”
2. Apelati functia “lv_example_checkbox_1()” din setul de functii oferite ca exemplu de biblioteca LVGL. Stergeti partea de cod care face label-ul “Hello!” folosita la ex. 1.
3. Activati driver-ul de touchscreen CST816S si suportul de touchscreen din LVGL
- Activati
CONFIG_INPUT_CST816Spentru a activa driver-ul de touchscreen. Ceasul HacktorWatch foloseste chip-ul Hynitron CST816S pentru touchscreen. - Activati
LV_USE_NUTTX_TOUCHSCREENpentru ca LVGL sa fie compilat cu suport de touchscreen - Specificati input-ul folosit de LVGL. Driver-ul CST816S va crea intrarea ”/dev/input0” iar LVGL-ul o va folosi
#ifdef CONFIG_INPUT_TOUCHSCREEN info.input_path = "/dev/input0"; #endif
- 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.
--- ./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 @@ -146,7 +146,11 @@ /* Save last sample and let lvgl continue reading */ touchscreen->last_sample = sample; touchscreen->has_last_sample = true; - data->continue_reading = true; + + if (sample.point[0].flags & TOUCH_DOWN) + data->continue_reading = true; + else + data->continue_reading = false; } else { /* No more sample available, clear last sample flag */
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.
Adaugati in hacktorwatch_main.c urmatoarea functie si apelati functia din main().
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);
}
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:
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);
}
}
In main(), instantiati timer-ul:
lv_timer_create(hacktorwatch_inc_step, 1000, NULL);