How to change direction of progress when progress bar is vertical?

How-to
1

What MCU/Processor/Board and compiler are you using?

STM32H750

What LVGL version are you using?

V8.3.7

What do you want to achieve?

When the progress bar is vertical, the progress can be from top to bottom and bottom to top

What have you tried so far?

I modified the example lv_example_bar_5, but it doesn’t work.

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

    lv_obj_t * bar_ltr = lv_bar_create(lv_scr_act());
    lv_obj_set_size(bar_ltr, 20, 200);
    lv_bar_set_value(bar_ltr, 70, LV_ANIM_OFF);
    lv_obj_align(bar_ltr, LV_ALIGN_CENTER, -50, 0);

    lv_obj_t * bar_rtl = lv_bar_create(lv_scr_act());
    lv_obj_set_style_base_dir(bar_rtl, LV_BASE_DIR_LTR, 0);
    lv_obj_set_size(bar_rtl, 20, 200);
    lv_bar_set_value(bar_rtl, 70, LV_ANIM_OFF);
    lv_obj_align(bar_rtl, LV_ALIGN_CENTER, 50, 0);
2

lv_obj_set_style_transform_angle(obj, 900, LV_PART_MAIN) should do the trick. The 900 is 90 degrees. 1800 = 180 and 2700 is 270

There are actually 2 ways to do it.

    lv_obj_t * bar_ltr = lv_bar_create(lv_scr_act());
    lv_obj_set_size(bar_ltr, 20, 200);
    lv_bar_set_value(bar_ltr, 70, LV_ANIM_OFF);
    lv_obj_align(bar_ltr, LV_ALIGN_CENTER, -50, 0);

    lv_obj_t * bar_rtl = lv_bar_create(lv_scr_act());
    lv_obj_set_style_base_dir(bar_rtl, LV_BASE_DIR_LTR, 0);
    lv_obj_set_size(bar_rtl, 20, 200);
    lv_bar_set_value(bar_rtl, 70, LV_ANIM_OFF);
    lv_obj_align(bar_rtl, LV_ALIGN_CENTER, 50, 0);


    lv_obj_t * bar_bot_top1 = lv_bar_create(lv_scr_act());
    lv_obj_set_size(bar_bot_top1 , 20, 200);
    lv_bar_set_value(bar_bot_top1 , 70, LV_ANIM_OFF);
    lv_obj_align(bar_bot_top1 , LV_ALIGN_CENTER, -50, 0);
    lv_obj_set_style_transform_angle(bar_bot_top1 , 900, LV_PART_MAIN)


    lv_obj_t * bar_top_bot1 = lv_bar_create(lv_scr_act());
    lv_obj_set_size(bar_top_bot1 , 20, 200);
    lv_bar_set_value(bar_top_bot1 , 70, LV_ANIM_OFF);
    lv_obj_align(bar_top_bot1 , LV_ALIGN_CENTER, -50, 0);
    lv_obj_set_style_transform_angle(bar_bot_top1 , 2700, LV_PART_MAIN)

   // and the other way is making the widget taller than it is wide. 

    lv_obj_t * bar_bot_top2 = lv_bar_create(lv_scr_act());
    lv_obj_set_size(bar_bot_top2 , 200, 20);
    lv_bar_set_value(bar_bot_top2 , 70, LV_ANIM_OFF);
    lv_obj_align(bar_bot_top2 , LV_ALIGN_CENTER, -50, 0);


    lv_obj_t * bar_top_bot2 = lv_bar_create(lv_scr_act());
    lv_obj_set_style_base_dir(bar_top_bot2, LV_BASE_DIR_LTR, 0);
    lv_obj_set_size(bar_top_bot2 , 200, 20);
    lv_bar_set_value(bar_top_bot2 , 70, LV_ANIM_OFF);
    lv_obj_align(bar_top_bot2 , LV_ALIGN_CENTER, -50, 0);