Weird dots on small rectangle in lvgl8.3, or how to render a simplest rectangle?

How-to
1

IMG-4683
IMG-46831920×1440 353 KB

The following boilerplate code is me attempting to draw 2d array of rectangles, for my starter project, but I’m not able to eliminate the 2 dots on every rectangle.
(The green rectangle is drawn afterwards, which is just a length 1 snake, and the green square also has weird dots, but the image is not that clear)

    playground = (Playground **)malloc(sizeof(Playground *) * row_size);
    for (uint8_t i = 0; i < row_size; i++)
    {
        playground[i] = (Playground *)malloc(sizeof(Playground) * col_size);
        for (uint8_t j = 0; j < col_size; j++)
        {
            playground[i][j].state = EMPTY;
            playground[i][j].rect = lv_obj_create(lv_scr_act());
            lv_obj_set_size(playground[i][j].rect, grid_width, grid_height);
            lv_obj_set_pos(playground[i][j].rect, j * grid_width, y_offset + i * grid_height);
            lv_obj_set_style_border_width(playground[i][j].rect, 0, LV_PART_MAIN);
            lv_obj_set_style_outline_width(playground[i][j].rect, 0, LV_PART_MAIN);
            lv_obj_clear_flag(playground[i][j].rect, LV_SCROLLBAR_MODE_OFF);
            lv_obj_set_style_radius(playground[i][j].rect, 0, LV_PART_MAIN);
            lv_obj_set_style_bg_color(playground[i][j].rect, GROUND_COLOR, LV_PART_MAIN);
        }
    }

The 2 weird gray dots on every rectangle makes me think of maybe its scroll bar, but apparently I attempt to disable with lv_obj_clear_flag(playground[i][j].rect, LV_SCROLLBAR_MODE_OFF); , and no avail.

If the rectangle size is bigger, the problem does not persist, it seems to happened when the rectangle is really small.

I was thinking to remove all style, and add it back manually, I search through the whole documentation, even read the source code, but I cannot find how do I even do this.

I attempt to draw a rectangle with canvas, and the ram overflowed. it might not be a good way to do it I guess.

The whole developer experience is just so painful with not much of information, or simply I suck at programming and getting the information I need.

Any way to draw a simplest small rectangle with plain color?

2

Try LV_OBJ_FLAG_SCROLLABLE instead.
Additionally there is void lv_obj_remove_style_all(struct _lv_obj_t * obj);

3

Thanks for the reply, I genuinely appreciate this, the LV_SCROLLBAR_MODE_OFF now works.
One more follow up, If I were to use the void lv_obj_remove_style_all(struct _lv_obj_t * obj); , how to add the background properties?

Here’s the code I’ve tried:

lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style, GROUND_COLOR);

playground[i][j].rect = lv_obj_create(lv_scr_act());
lv_obj_remove_style_all(playground[i][j].rect);
lv_obj_add_style(playground[i][j].rect, &style, LV_PART_MAIN);
lv_obj_set_size(playground[i][j].rect, grid_width, grid_height);
lv_obj_set_pos(playground[i][j].rect, j * grid_width, y_offset + i * grid_height);

This does not work, anything I missed?

4

Yes - the keyword static. The style must persist beyond the scope of the function where it is used, i.e. static lv_style_t style;

5

adding static didn’t work, now there’s no rectangle showed on screen.

6

Since you have removed all other styling, you also need to set the background opacity in order to see the colour. I highly recommend reading the documentation. It’s rather good.