Identify Button in a column layout

How-to
1

Hi all,
I’m quite familiar with LVGL, I’m using it for about 2 years now.

Description

I’m trying to create a menu with the " A simple row and a column layout with flexbox" from Examples — LVGL 9.3 documentation
I’m doing it only in the column shape to display 8 buttons, and each button is used to call the same new screen called “data screen” where I want to display different values from a structure based on an ID linked to the clicked button.
Each button will have a different name with no number inside.
For example by clicking the first button called “green plant” I want to load the “data screen” loading the data from the structure associated to ID=0.

The problem is that I don’t know a nice way to assign an ID to each button using the provided example.
My only idea is to create an hidden label where I’m going to set a number from 0 to 7 when I create the button and read it on the click event used to change the screen…but it seems to be a noob solution.
I would like to ask you if you have any suggestion regarding this kind of application.

What MCU/Processor/Board and compiler are you using?

ESP32 yellow cheap display

What LVGL version are you using?

9.1

Code to reproduce

void ui_List_screen_init(void)
{
    ui_List = lv_obj_create(NULL);
    lv_obj_remove_flag(ui_List, LV_OBJ_FLAG_SCROLLABLE);      /// Flags
    lv_obj_set_flex_flow(ui_List, LV_FLEX_FLOW_ROW);
    lv_obj_set_flex_align(ui_List, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_END);
    /*Create a container with COLUMN flex direction*/
    lv_obj_t * cont_col = lv_obj_create(ui_List);
    lv_obj_set_size(cont_col, 320, 190);
    
    lv_obj_set_flex_flow(cont_col, LV_FLEX_FLOW_COLUMN);

    uint32_t i;
   char str[5]={0};
    for(i = 0; i < 8; i++) {
        lv_obj_t * obj;
        lv_obj_t * label;
        lv_obj_t * mois_lab;

    obj = lv_button_create(cont_col);
    lv_obj_set_style_radius(obj, 3, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(obj, lv_color_hex(0xE8810C), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(obj, 200, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_size(obj, LV_PCT(100),45 );
     
    
    label = lv_label_create(obj);
    lv_obj_set_width(label, LV_SIZE_CONTENT);   /// 1
    lv_obj_set_height(label, LV_SIZE_CONTENT);    /// 1
    lv_obj_set_x(label, -81);
    lv_obj_set_y(label, 0);
    lv_obj_set_align(label, LV_ALIGN_CENTER);
    lv_label_set_text(label, "plant_Name");

/* this is the hidden label with the ID*/
sprintf(str, "%d", i);
hidden_id= lv_label_create(obj);
lv_label_set_text(hidden_id, str);

    mois_lab = lv_label_create(obj);
    lv_obj_set_width(mois_lab, LV_SIZE_CONTENT);   /// 1
    lv_obj_set_height(mois_lab, LV_SIZE_CONTENT);    /// 1
    lv_obj_set_x(mois_lab, 50);
    lv_obj_set_y(mois_lab, 0);
    lv_obj_set_align(mois_lab, LV_ALIGN_CENTER);
    lv_label_set_text(mois_lab, "Moisture %");

        /*Add items to the column*/
        lv_obj_add_event_cb(obj, ui_event_Button4, LV_EVENT_ALL, NULL);

        
    }
}

Do you have any suggestion?
Is there a way to assign an ID to a button in the example code using the for loop?

Thanks.

2

You can remove the hidden_id label and pass the ID as user_data to the event.

lv_obj_add_event_cb(obj, ui_event_Button4, LV_EVENT_CLICKED, (void *)i);

and in your callback

void ui_event_Button4(lv_event_t *e) {
  lv_event_code_t code = lv_event_get_code(e);
  if (code == LV_EVENT_CLICKED) {
    int64_t id = (int64_t)lv_event_get_user_data(e);
    
  }
}