Bar with background image display error

Bugs
1

What do you want to achieve?

A bar with customized background image for the indicator.
Its all fine when ran in play mode, but after exported to code and ran in my MCU (Renesas R7FA8D1AHECBD) the bar image have mapping error.

What have you tried so far?

I have copied the bar and place it below parallelly.
Only adding event trigger to the arrow icon and they are having different result.

Screenshot or video

Others

  • SquareLine Studio version: 1.5.0
  • Operating system: Windows 11
  • Target hardware: Renesas R7FA8D1AHECBD
2

Hi, it’s not clear to me from the video. Could you describe the error precisely, or perhaps make a video from SquareLine showing how it should work?

3

As u can see the bars in the middle showing different proportion when increase/decrease.
And they suppose to be same proportion as one is duplicated from the other but using custom bg image.
Just like the bg image one displaying 0%, 50-100% instead of 0-100%.
I just reproduced in my other project so I think its a bug.
Thanks for the reply!

4

I have tried to use slider as well, with the same issue as below.

With the slider node this time could see the problem more clearly, the node move as expected but the bg image of the indicator also move unexpectedly.
Any idea of the problem?
Thanks!

ui_BarSetPoint = lv_bar_create(ui_ScnSetPointAndMode);
    lv_bar_set_value(ui_BarSetPoint, 50, LV_ANIM_OFF);
    lv_bar_set_start_value(ui_BarSetPoint, 0, LV_ANIM_OFF);
    lv_obj_set_width(ui_BarSetPoint, 300);
    lv_obj_set_height(ui_BarSetPoint, 4);
    lv_obj_set_x(ui_BarSetPoint, 0);
    lv_obj_set_y(ui_BarSetPoint, 123);
    lv_obj_set_align(ui_BarSetPoint, LV_ALIGN_TOP_MID);
    lv_obj_add_flag(ui_BarSetPoint, LV_OBJ_FLAG_CLICKABLE);     /// Flags
    lv_obj_set_style_radius(ui_BarSetPoint, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(ui_BarSetPoint, lv_color_hex(0x737373), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(ui_BarSetPoint, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_image_opa(ui_BarSetPoint, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_set_style_radius(ui_BarSetPoint, 0, LV_PART_INDICATOR | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(ui_BarSetPoint, lv_color_hex(0x7A3DE9), LV_PART_INDICATOR | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(ui_BarSetPoint, 255, LV_PART_INDICATOR | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_image_src(ui_BarSetPoint, &ui_img_prg_bar_png, LV_PART_INDICATOR | LV_STATE_DEFAULT);

    //Compensating for LVGL9.1 draw crash with bar/slider max value when top-padding is nonzero and right-padding is 0
    if(lv_obj_get_style_pad_top(ui_BarSetPoint, LV_PART_MAIN) > 0) lv_obj_set_style_pad_right(ui_BarSetPoint,
                                                                                                  lv_obj_get_style_pad_right(ui_BarSetPoint, LV_PART_MAIN) + 1, LV_PART_MAIN);
    ui_Slider1 = lv_slider_create(ui_ScnSetPointAndMode);
    lv_slider_set_value(ui_Slider1, 50, LV_ANIM_OFF);
    if(lv_slider_get_mode(ui_Slider1) == LV_SLIDER_MODE_RANGE) lv_slider_set_left_value(ui_Slider1, 0, LV_ANIM_OFF);
    lv_obj_set_width(ui_Slider1, 300);
    lv_obj_set_height(ui_Slider1, 4);
    lv_obj_set_x(ui_Slider1, 0);
    lv_obj_set_y(ui_Slider1, 116);
    lv_obj_set_align(ui_Slider1, LV_ALIGN_TOP_MID);
    lv_obj_set_style_radius(ui_Slider1, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(ui_Slider1, lv_color_hex(0x737373), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(ui_Slider1, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_set_style_radius(ui_Slider1, 0, LV_PART_INDICATOR | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_image_src(ui_Slider1, &ui_img_prg_bar_png, LV_PART_INDICATOR | LV_STATE_DEFAULT);

    //Compensating for LVGL9.1 draw crash with bar/slider max value when top-padding is nonzero and right-padding is 0
    if(lv_obj_get_style_pad_top(ui_Slider1, LV_PART_MAIN) > 0) lv_obj_set_style_pad_right(ui_Slider1,
                                                                                              lv_obj_get_style_pad_right(ui_Slider1, LV_PART_MAIN) + 1, LV_PART_MAIN);