How to implement " lv_example_scroll_6.c "


Hi I am a new LVGL user, I want to use lv_example_scroll_6.c but the example is not properly running on my device, Please find the attached picture and code to reproduce.

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

Display - GC9a01 (driver - esp32 component)

What LVGL version are you using?

Lvgl - V8

What do you want to achieve?

I want to run lv_example_scroll.c properly. I have run example on my display but instead of the full menu only 1 button is getting displayed. Kindly refer to the images for better clarity.

How it should work -
Screenshot 2023-10-19 183129

My Result

(I have changed the button width)

Code to reproduce

Code can be found here -
It is also in the LVGL scroll examples.
Kindly suggest what changes should I perform to get the results.

V8 is realy wide and not real
code here isnt your code
Start with learn FLEX areas

Apologies for not adding the correct code, please find my code below.
#include “…/include/ui.h”
static void scroll_event_cb(lv_event_t * e)
lv_obj_t * cont = lv_event_get_target(e);

lv_area_t cont_a;
lv_obj_get_coords(cont, &cont_a);
lv_coord_t cont_y_center = cont_a.y1 + lv_area_get_height(&cont_a) / 2;

lv_coord_t r = lv_obj_get_height(cont) * 7 / 10;
uint32_t i;
uint32_t child_cnt = lv_obj_get_child_cnt(cont);
for(i = 0; i < child_cnt; i++) {
    lv_obj_t * child = lv_obj_get_child(cont, i);
    lv_area_t child_a;
    lv_obj_get_coords(child, &child_a);

    lv_coord_t child_y_center = child_a.y1 + lv_area_get_height(&child_a) / 2;

    lv_coord_t diff_y = child_y_center - cont_y_center;
    diff_y = LV_ABS(diff_y);

    /*Get the x of diff_y on a circle.*/
    lv_coord_t x;
    /*If diff_y is out of the circle use the last point of the circle (the radius)*/
    if(diff_y >= r) {
        x = r;
    else {
        /*Use Pythagoras theorem to get x from radius and y*/
        uint32_t x_sqr = r * r - diff_y * diff_y;
        lv_sqrt_res_t res;
        lv_sqrt(x_sqr, &res, 0x8000);   /*Use lvgl's built in sqrt root function*/
        x = r - res.i;

    /*Translate the item by the calculated X coordinate*/
    lv_obj_set_style_translate_x(child, x, 0);

    /*Use some opacity with larger translations*/
    lv_opa_t opa = lv_map(x, 0, r, LV_OPA_TRANSP, LV_OPA_COVER);
    lv_obj_set_style_opa(child, LV_OPA_COVER - opa, 0);


void ui_Screen6_screen_init(void)
ui_Screen6 = lv_obj_create(NULL);
lv_obj_clear_flag( ui_Screen6, LV_OBJ_FLAG_SCROLLABLE ); /// Flags

lv_obj_t * cont = lv_obj_create(ui_Screen6);
lv_obj_set_size(cont, 200, 200);
lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN);
lv_obj_add_event_cb(cont, scroll_event_cb, LV_EVENT_SCROLL, NULL);
lv_obj_set_style_radius(cont, 0x00ff, 0);
lv_obj_set_style_clip_corner(cont, true, 0);
lv_obj_set_scroll_dir(cont, LV_DIR_VER);
lv_obj_set_scroll_snap_y(cont, LV_SCROLL_SNAP_CENTER);
lv_obj_set_scrollbar_mode(cont, LV_SCROLLBAR_MODE_OFF);

uint32_t i;
for(i = 0; i < 4; i++) {
lv_obj_t * btn = lv_btn_create(cont);
lv_obj_set_width(btn, lv_pct(50));

   lv_obj_t * label = lv_label_create(btn);
   lv_label_set_text_fmt(label, "Button %"LV_PRIu32, i);


/Update the buttons position manually for first/
// lv_obj_align(lv_obj_get_child(cont, 0), LV_ALIGN_CENTER, 0, 40);
lv_event_send(cont, LV_EVENT_SCROLL, NULL);

/Be sure the fist button is in the middle/
lv_obj_scroll_to_view(lv_obj_get_child(cont, 0), LV_ANIM_ON);


Thankyou for suggesting for flex area, I will start learning that. :slight_smile:

My issue is solved, thanks for the suggestion.