How to draw custom progress bar

Hi All,
i want to make a custom progress bar /triangular shaped/ for Ex: Image
To draw a triangle i use a lv_obj_set_design_func and lv_draw triangle , but i can not figure out how to redraw triangle after progress change.

p.s lvgl version 5.3

It would be simplest to use a regular progress bar and then use an image on top to cover up part of it, giving the impression that it is a triangle. (Credits to @seyyah for coming up with this approach)

The old forum discussion is

Thanks, i will try it.


Hi i just tried to do it using your suggestion, but i cant figure how to “bind” bar to image. The Bar stays over the image . My goal is to draw bar like yours in the old forum.

I used this mask/png image


Example code part is

lv_obj_t * bar = lv_bar_create(bg, NULL);
lv_obj_set_size(bar, 92, 41);
lv_obj_set_pos(bar, 126, 175);
lv_bar_set_value(bar, percent, true);

// Image mask
lv_obj_t * img = lv_img_create(bg, NULL);
lv_img_set_src(img, &ui_speed_ledbar_mask);
lv_obj_set_pos(img, 126, 175);

@hehopmajieh Two things:

  1. The image needs to be converted with alpha, for obvious reasons.
  2. The image has to be created after the bar, or moved to the top with lv_obj_move_foreground.

Thanks Guys , it works.
My problem was in conversion, i forgot about alpha channel.