How to draw custom progress bar

How-to
1

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
Best,

2

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)

3

The old forum discussion is http://forumold.littlevgl.com/viewtopic.php?f=12&t=154&sid=110b0ffc1bdf1d43a0bc470514ca2059

4

Thanks, i will try it.

Best

5

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.

6

I used this mask/png image

ui_speed_ledbar_mask

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);
7

@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.
8

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

~Best