LVGL (Light and Versatile Embedded Graphics Library) este biblioteca grafica cel mai des folosita in sistemele embedded.

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_CST816S pentru a activa driver-ul de touchscreen. Ceasul HacktorWatch foloseste chip-ul Hynitron CST816S pentru touchscreen.
• Activati LV_USE_NUTTX_TOUCHSCREEN pentru 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);

• https://lvgl.io