it need 3 times push the next navigation button to next to seconds object in Flex Layout (BSP-733)

[kayip-adam]

Board

ESP32 WROVER

Hardware Description

ESP32 WROVER , OLED DS1307 128x64 pixel display

IDE Name

VScode

Operating System

linux mint

Description

I am trying to control OLED DS1307 with ESP32 Wrover. Firtsly I used old version and i need push next button 4 times to next second object in flex layout. I tried so many thing but not worked. I update esp_lvgl_port 2.6.2 . it was solved. However my new problem that :
imagine please : you create the 5 buttons object and create Scroll. You want to go to next / previous button object by push navigation buttons for next or previous navigation input buttons. You need push the next navigation button for 3 times to next the button object in flex layout and scroll (in addition, it move without create scroll ) but I can pass by push next or previous button just one time after push next button 3 times on first times. However It is the event repeats when I jump to first button from fifth . I didn't understand what is problem why i need push navigation button 3 times instead of 1 time.

I am using VS code .

Sketch

void scroll_TK_ui(lv_disp_t *disp) {

    /*DEFINATIONS OF STYLES*/

    /*Style Buttons*/
    static lv_style_t style_btn;
    lv_style_init(&style_btn);
    lv_style_set_text_font(&style_btn,&lv_font_montserrat_14);
    lv_style_set_width(&style_btn,128);
    lv_style_set_height(&style_btn,LV_PCT(100));
    lv_style_set_outline_color (&style_btn,lv_color_hex(0x000000)) ;
    lv_style_set_outline_width (&style_btn,2);
    lv_style_set_outline_opa (&style_btn,LV_OPA_100);
    lv_style_set_radius (&style_btn,5);
    lv_style_set_align(&style_btn,LV_ALIGN_LEFT_MID);  
    

    /* DEFINATION OF SCREEN & GROUP */
    lv_obj_t *scr0 = lv_disp_get_scr_act(disp);
    lv_obj_t *scroll_p= lv_obj_create(scr0);
    lv_group_t *g = lv_group_create();
    lv_group_set_default(g);
    lv_indev_set_group(buttons_handle,g);
    lv_group_add_obj(g,scroll_p);

    /*SCROLL & FLEX LAYOUT*/
    lv_obj_set_size(scroll_p,128,24);
    lv_obj_set_flex_flow(scroll_p,LV_FLEX_FLOW_COLUMN );
    lv_obj_add_flag(scroll_p,LV_OBJ_FLAG_SCROLL_CHAIN);
    lv_obj_set_scroll_snap_y(scroll_p, LV_SCROLL_SNAP_CENTER);
    lv_obj_add_flag(scroll_p,LV_OBJ_FLAG_SCROLL_ONE);
    lv_obj_align(scroll_p,LV_ALIGN_BOTTOM_MID,0,0 );

    
    // lv_obj_add_flag(scroll_p, LV_OBJ_FLAG_SCROLL_CHAIN_VER);
    
    
     /*HEADER AREA SCREEN */
    lv_obj_t *header_s= lv_obj_create(scr0);
    lv_group_add_obj(g,header_s);
    lv_obj_set_size(header_s,128,16);
    lv_obj_align(header_s,LV_ALIGN_TOP_MID,0,22);
    lv_obj_t *header_l =lv_label_create(header_s);
    lv_obj_set_style_text_font(header_l ,&lv_font_montserrat_14,0);
    lv_obj_set_size(header_l ,lv_pct(100),lv_pct(100));
    lv_label_set_text(header_l, "ANASAYFA--------------------");
    lv_label_set_long_mode(header_l, LV_LABEL_LONG_SCROLL);
    lv_obj_center(header_l);
    // const char *title = "Temp";   // Text from variable
    // int temp = 25;                       // Integer value
    // const char *unit = "°C";             // Unit text
    // // Combine them into one label text
    // lv_label_set_text_fmt(header_l, "%s: %d%s", title, temp, unit);

    /*INDICATOR AREA SCREEN */
    lv_obj_t *battery_l =lv_label_create(scr0);
    lv_obj_set_style_text_font(battery_l,&lv_font_montserrat_14,0);
    lv_obj_set_size(battery_l,lv_pct(100),lv_pct(100));
    lv_obj_align(battery_l,LV_ALIGN_TOP_LEFT,110,0);
    lv_label_set_text(battery_l, LV_SYMBOL_BATTERY_1);
    lv_obj_t *wifi =lv_label_create(scr0);
    lv_obj_set_style_text_font(wifi,&lv_font_montserrat_14,0);
    lv_obj_set_size(wifi,lv_pct(100),lv_pct(100));
    lv_obj_align(wifi,LV_ALIGN_OUT_LEFT_TOP,0,0);
    lv_label_set_text(wifi, LV_SYMBOL_WIFI);
    lv_obj_t *alarm =lv_label_create(scr0);
    lv_obj_set_style_text_font(alarm,&lv_font_montserrat_14,0);
    lv_obj_set_size(alarm,lv_pct(100),lv_pct(100));
    lv_obj_align(alarm,LV_ALIGN_OUT_LEFT_TOP,80,0); 
    lv_label_set_text(alarm, LV_SYMBOL_WARNING);
 
    for (uint32_t i = 0; i < 6; i++)
    {
        /* code */
        lv_obj_t *btn_point;
        lv_obj_t *label_point;
        btn_point =lv_btn_create(scroll_p);
        lv_obj_add_style(btn_point,&style_btn,0);
        
        label_point = lv_label_create(btn_point);
        lv_obj_set_style_pad_left(label_point,4,0);
        lv_label_set_text_fmt(label_point, "%s",menu_AS[i]);
        lv_obj_set_align(label_point,LV_ALIGN_LEFT_MID);  
    }
   
    lv_obj_add_event_cb(scroll_p, store_scroll_value_event_cb, LV_EVENT_SCROLL, NULL);
    

}
void store_scroll_value_event_cb (lv_event_t* e) 
    {
        static int scroll_value_x = 0;
        static int scroll_value_y = 0;
        lv_obj_t* screen = lv_event_get_target(e);
        scroll_value_x = lv_obj_get_scroll_left(screen);
        scroll_value_y = lv_obj_get_scroll_top(screen);
        printf("%d pixels are scrolled out on the left\n ,%d pixels are scrolled out on the top\n  ", scroll_value_x,scroll_value_y);
    }

Other Steps to Reproduce

No response

I have checked existing issues, README.md and ESP32 Forum

• I confirm I have checked existing issues, online documentation and Troubleshooting guide.

[github-actions]

Hi @kayip-adam! Please be aware that (1) the following suggestions are generated by a bot and haven't been fact-checked by Espressif Systems, (2) burning eFuses and enabling security features are irreversible operations and can damage your ESP32 device. We hope that this message will help you until an Espressif Engineer looks at your issue.

---

Thank you for your detailed report. Based on the information in your issue and the available Espressif documentation, here’s what I can confirm and suggest:

Issue Summary

You are experiencing a problem where, after updating to esp_lvgl_port v2.6.2, you need to press the "next" navigation button three times to move to the next object in your LVGL flex layout (scrollable list of buttons) on your ESP32 WROVER with an SSD1306 OLED. After this initial multi-press, subsequent navigation works with a single press, but the issue repeats when cycling from the last to the first button.

Analysis

• The navigation button integration with LVGL is handled via the lvgl_port_add_navigation_buttons() API, which expects you to create button handles and assign them as navigation inputs (prev/next/enter) for the display. This is documented in the LVGL ESP Portation usage guide and the esp-bsp repo.
• When using navigation buttons to control LVGL objects, all objects you want to navigate must be added to an LVGL group. Navigation is performed within this group, and the group must be set as the active group for the input device. This is a requirement from LVGL itself, as noted in the documentation and the code example you are following.
• The documentation does not mention a need for multiple button presses to move between objects. Normally, a single press should move the focus to the next object in the group.

Potential Causes

1. Group Assignment: If only the scroll container (scroll_p) is added to the group, but not the individual button objects, navigation may not work as expected. You should add each button (btn_point) to the group:

   lv_group_add_obj(g, btn_point);

   Do this inside your loop where you create the buttons.

2. LVGL Group Focus: Ensure that the group is set as the default and that the input device (your navigation buttons) is assigned to this group:

   lv_group_set_default(g);
   lv_indev_set_group(buttons_handle, g);

3. LVGL Version/Port Issues: The changelog for esp_lvgl_port v2.5.0 notes a functional change: you must now create button handles in your app and pass them to the port, rather than the port creating them for you. If your code or configuration is still using the old method, navigation may not work correctly [esp_lvgl_port changelog].

Recommendations

• Add Each Button to the Group: In your loop, after creating each btn_point, add it to the group:

  lv_group_add_obj(g, btn_point);

• Check Navigation Button Setup: Make sure you are creating the button handles and passing them to lvgl_port_add_navigation_buttons() as shown in the documentation:

  // Example from documentation
  const lvgl_port_nav_btns_cfg_t btns = {
      .disp = disp_handle,
      .button_prev = prev_btn_handle,
      .button_next = next_btn_handle,
      .button_enter = enter_btn_handle
  };
  lv_indev_t* buttons_handle = lvgl_port_add_navigation_buttons(&btns);

• LVGL Grouping: Only objects in the group are focusable via navigation. If you only add the scroll container, navigation will not move between the child buttons as expected [LVGL Port Usage].

Documentation References

• LVGL ESP Portation Usage: Add buttons input
• esp_lvgl_port Changelog
• LVGL Grouping and Navigation (see note in Espressif docs)

---

In summary:
You likely need to add each button object to the LVGL group to ensure navigation works as expected. If you only add the scroll container, navigation will not move between the buttons with a single press. Please update your code to add each button to the group and verify your navigation button setup matches the latest documentation. If the issue persists after these changes, please provide a minimal code example showing your navigation button and group setup.

Let me know if you need further clarification!

[espzav]

Hi @kayip-adam, this question is more for LVGL repository
I think, that you should add only buttons into the group (lv_group_add_obj()) as said BOT in previous reply.

[kayip-adam]

Thanks espzav,
I solved problem by change code raw . it is solved when i take some code front of for function to create buttons.