How do i make the roller higher, layers, centering roller

How-to
#1

Description

I ran into a problem that I can’t make the roller higher, I want only one element to be visible in the roller, maybe I need to increase the font, but it didn’t work out for me (

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

PC Simulator

What do you want to achieve?

What have you tried so far?

lv_roller_set_visible_row_count(roller1, 1);
this function is not quite what I need

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

/*You code here*/

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

#2

Create style with

style.text.font =  &your_bigger_font;

And set it to LV_ROLLER_STYLE_BG
by the roller’a api lv_roller_set_style(…)

and after this step, add your options to your roller.

#3

black screen(

void roller(lv_obj_t *sb, int* x_pos, int* y_pos)
{
	static lv_style_t style_btn_bg;
	static lv_style_t style_btn_pr_bg;

    lv_obj_t *roller1 = lv_roller_create(sb, NULL);
    lv_roller_set_options(roller1,
                        "1\n"
                        "2\n"
                        "3\n"
                        "4\n"
                        "5\n"
                        "6\n"
                        "7\n"
                        "8\n"
                        "9\n"
    					"10\n"
    		            "12\n"
    		            "13\n"
    		           	"14\n"
    		            "15\n"
    		            "16\n"
    		            "17\n"
    		            "18\n"
    		            "19\n"
    					"20\n"
    					"21\n"
    		            "22\n"
    		            "23\n"
    		            "24",
                        LV_ROLLER_MODE_INIFINITE);
//    style_btn_bg.body.main_color = LV_COLOR_DARK_YELLOW;
//    style_btn_bg.body.grad_color = LV_COLOR_GRAY;
//    style_btn_bg.text.color = LV_COLOR_WHITE;
    style_btn_bg.text.font = LV_FONT_ROBOTO_22;

    lv_style_copy(&style_btn_pr_bg, &style_btn_bg);
//    style_btn_pr_bg.body.main_color = LV_COLOR_BUTTON_PR_GRAY;
//    style_btn_pr_bg.body.grad_color = LV_COLOR_BUTTON_PR_GRAY;
    lv_roller_set_style(roller1,LV_ROLLER_STYLE_BG, &style_btn_bg);
//    lv_roller_set_style(roller1,LV_BTN_STYLE_PR, &style_btn_pr_bg);
    lv_roller_set_visible_row_count(roller1, 1);
    lv_roller_set_fix_width(roller1, 60);

    lv_obj_align(roller1, NULL, LV_ALIGN_CENTER, x_pos, y_pos);
    lv_obj_set_event_cb(roller1, event_roller);
}
#4

lv_roller_set_options(..) must be called
after lv_roller_set_style(..).

#5

did not help(

#6

ok i fixed but font size doesn’t change
does not work with function

LV_ROLLER_STYLE_BG

work with function LV_ROLLER_STYLE_SEL
you have idea?

#7

I use the following code on dev7.0

void lv_ex_roller_1(void)
{
  lv_obj_t *roller1 = lv_roller_create(lv_scr_act(), NULL);

  static lv_style_t style_bg, style_select;
  lv_style_copy(&style_bg,    (lv_style_t*) lv_roller_get_style(roller1, LV_ROLLER_STYLE_BG));
  lv_style_copy(&style_select,(lv_style_t*) lv_roller_get_style(roller1, LV_ROLLER_STYLE_SEL));
  lv_roller_set_style(roller1, LV_ROLLER_STYLE_BG,  &style_bg);
  lv_roller_set_style(roller1, LV_ROLLER_STYLE_SEL, &style_select);
  
    style_bg.text.font = &YOUR_FONT;  // change font
    style_select.body.main_color = LV_COLOR_RED;
    style_select.body.grad_color = LV_COLOR_RED;
    
  lv_roller_set_options(roller1,
                        "January\n"
                        "February\n"
                        "March\n"
                        "April\n"
                        "May\n"
                        "June\n"
                        "July\n"
                        "August\n"
                        "September\n"
                        "October\n"
                        "November\n"
                        "December",
                        LV_ROLLER_MODE_INIFINITE);

  lv_roller_set_visible_row_count(roller1, 1);
  lv_obj_align(roller1, NULL, LV_ALIGN_CENTER, 0, 0);
}

When change 2 different fonts , the results are…

First : smaller_font
capture_00002

Second : bigger_font
capture_00001

1 Like
#8

it`s working, Thanks so much)))

#9

Well, another question, how to fix it, roller is hiding behind the button and other items%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%20%D0%BE%D1%82%202020-03-17%2015-06-40

#10

I don’t get the point of your last issue.
Can you give more information ?

#11

I apologize for my English, I showed a screenshot with a problem where a cover roller is hiding behind a button or behind any other object
my roller has two states, closed as a roller on the left and open as a roller on the right
when you click on a closed clip, it opens, but after opening it hides behind other objects, which do not look very visual

#12

I’m not sure about your point of the issue.

Learn more about align.
and order of the object for alignment.

1 Like
#13

look at the screenshot and tell me what’s wrong with it)
%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%20%D0%BE%D1%82%202020-03-17%2015-31-40

#14

I think I understand what the problem is
again, thancks so much)

#15

Objects derive their z-index from the order in which they were attached to their parent. Take a look at the documentation.

1 Like
#16

it helped me thanks)

#17

Another question is how to make the roller display not down (as a list), but in the middledemo.zip (165.2 KB)

#18

Are you trying to align it with the colon?

#19

no, i want, so that, roller when you press not down drop, and in the middel

#20

Can you get a video of the current behavior? I’m having trouble understanding what you mean.