Can we create progress bar in lvgl 8.0.1

General discussion
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.

progressive_arc
progressive_arc1152×404 17.3 KB

1 Like
2

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_center(meter);
       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);
3

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

4

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

5

Sure:

LV_IMG_DECLARE(img_bg);
lv_obj_set_style_arc_img_src(arc, &img_bg, LV_PART_MAIN);

LV_IMG_DECLARE(img_indic);
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.

6

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

https://sim.lvgl.io/v9.0/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/6d2d8a7583c23e2e289de6c0f0407a599c245cbd/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/6d2d8a7583c23e2e289de6c0f0407a599c245cbd/examples/get_started/lv_example_get_started_1.py

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)

    lines.append(line)


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)
        else:
            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

    set_value(val)


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

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

7

Thanks, I’ve just fixed it.

8

no worries m8