Can we create progress bar in lvgl 8.0.1

Hi @martin023 @kisvegabor,
Can we create progressive arc in lvgl v8.0.1. I’m attaching the image of expected progress bar in form of arc.

1 Like

Unfortunately, I think you cannot do this with arc in LVGL 8.0.1, Maybe it will be available in version 9.0.
But you can do similar with meter.
Try this code:

       lv_obj_t * meter = lv_meter_create(lv_scr_act());
       lv_obj_set_size(meter, 400, 400);

       lv_meter_scale_t * scale = lv_meter_add_scale(meter);
       //Change lv_color_white() your background color
       lv_meter_set_scale_ticks(meter, scale, 38, 4, 12, lv_color_white());

       indic = lv_meter_add_arc(meter, scale, 10, lv_palette_main(LV_PALETTE_BLUE), 0);
       lv_meter_set_indicator_start_value(meter, indic, 0);

       lv_meter_set_scale_range(meter, scale, 0, 100, 90, 45);

And you can change indicator value with this:

lv_meter_set_indicator_end_value(meter, indic, i);

Actually you can do it by using images. See here.

@kisvegabor can you please share some code snippet of how to do that with images? It will be better for me to understand how to use.


lv_obj_set_style_arc_img_src(arc, &img_bg, LV_PART_MAIN);

lv_obj_set_style_arc_img_src(arc, &img_indic, LV_PART_INDIC);

The images should contain the black marks, and the arc widget will mask out the actual arc from the images.

Here is some code you can paste into the online LVGL simulator to check out. It is written in Python but it wouldn’t be that hard to convert to C code.

here is the link to the simulator

and here is the code

##### startup script #####

# !/opt/bin/lv_micropython -i

import lvgl as lv
import display_driver
import math

def point_on_circle(degree, center_x, center_y, radius):
    radians = math.radians(degree)
    x = center_x + (radius * math.cos(radians))
    y = center_y + (radius * math.sin(radians))
    return lv.point_t(dict(x=int(x), y=int(y)))

lines = []

screen = lv.scr_act()

screen.set_style_bg_color(lv.color_hex(0x000000), 0)

for i in range(45, 136, 5):
    line = lv.line(screen)

    point_inner = point_on_circle(i, 210, 160, 110)
    point_outer = point_on_circle(i, 210, 160, 120)

    line_points = [point_inner, point_outer]

    line.set_style_line_width(4, 0)
    line.set_style_line_opa(255, 0)
    line.set_style_line_color(lv.color_hex(0x404040), 0)

    line.set_points(line_points, 2)


def set_value(value):
    index = int(len(lines) * (value / 100.0))

    for i, line in enumerate(lines):
        if i <= index:
            line.set_style_line_color(lv.color_hex(0x00FF00), 0)
            line.set_style_line_color(lv.color_hex(0x404040), 0)

val = 0
inc = 1

def timer_cb(_):
    global val
    global inc

    val += inc

    if val in (0, 100):
        inc = -inc


timer = lv.timer_create(timer_cb, 30, None)

@kisvegabor the save is not working again on the simulator.

Thanks, I’ve just fixed it.

no worries m8