[V9] request widget mask like lv_objmask or mask example

In lvgl 7.x has the widget lv_objmask and some examples.

In lvgl 8.x has the command lv_draw_mask_add(...) and some examples related to masks,
such as the lv_roller widget.

However, lvgl 9 does not include the lv_draw_mask_add command,
causing the lv_roller example to not run correctly.

Are there any examples for masking with alpha images using lvgl 9?

Thank you.

In v9 we focused on better GPU support so we have dropped the “home-made” masking solutions.

The current solution is to support masking with a bitmap. LVGL’s rendering features are being extended to allow drawing in L8, A8, and AL88 formats. See here.

This way you will be able to generate masks at run time using an lv_canvas.

Hi, I wish to create a rect that masked by an image A8 like the following picture.

In the first attempt, I utilized an image (A8) widget with a rectangle widget.
However, the outcome didn’t meet my expectations.

In the second attempt, I utilized an canvas A8 widget with a rectangle widget.
However, the outcome still didn’t meet my expectations.

How to solve the solution?
Thank you.

You can have a single white vase shaped image source. Create an lv_bar and set the image as bg_image for both the MAIN and the INDICATOR part. After that by adjusting the bar, it will clip the image of the indicator. You can also recolor the indicator to blue.

I tried the code above with A8 and 565A8,
but the clip area is inverted.

You should use lv_obj_set_style_bg_image_recolor(bar, blue, LV_PART_INDICATOR) and lv_obj_set_style_bg_image_recolor(bar, 255, LV_PART_INDICATOR) instead of setting the background color.

1 Like

image

It already is cliped .
However the white area I don’t want to display.
How to remove the white area?

Thank you.

Just not set the bg_image for the main part and set bg_opa = 0 for it.

1 Like

It’s already working now,
thank you very much.

And I’m wondering about another issue:
how to mask 30 rectangles as shown in the image?

It’s the same, just use and image like this
image
as bg_image.

image
These are mini scrollbars :sunglasses:
You can disable them by lv_obj_set_scrollbar_mode(obj, LV_SCROLLBAR_MODE_OFF);.

Thanks for the reply.

Since I want to control the color of the 30-rectangle objects myself later by set_value(...),
then I don’t want to create them using an image object as before.

Is it possible to create another object that generates a mask
with the LV_EVENT_DRAW_MAIN_BEGIN , LV_EVENT_DRAW_MAIN_END event etc…,
using an image (format A8) for masking the 30-rectangle objects?

Thank you.

I would like to apply masking on v9.x
similar to the following code on v8.4.0
by image A8 masking
as shown in following…

Thank you.

In v9 we already have masking support via the style_bitmap_mask_src property.

Normally style_bitmap_mask_src works on the whole widget and not on the parts. (It would be nice to make it work on the parts too though)

However, to make masking work lv_draw_image_dsc_t has a bitmap_mask_src field. If you draw the colored bars to a canvas, and set it as the bg_image of the indicator, you can just set bitmap_mask_src=&my_mask in lv_draw_image_t in a draw event.

image

It’s worked now!!
Thank you very much. !

2 Likes