In V9, is there is a way to make a meter with multiple arcs as V8?

How-to
1

Description

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

X86

What LVGL version are you using?

V9.1

What do you want to achieve?

Just as below. (Made of V8)
The layer order from top to bottom is layer scale indicator, layer arc, layer scale background.

webwxgetmsgimg
webwxgetmsgimg1881×1280 192 KB

What have you tried so far?

I have tried to add a section and set style for the main line, it seems the order of the layer main line is on top of the scale indicator.
The scale indicator is covered by the main line of new section.

image

Code to reproduce

    ui_create_panel(NULL, &ui_tomato, 0, 0, 800, 480, LV_ALIGN_CENTER);

    // creat meter obj & init style
    ui_tomato_clock = lv_scale_create(ui_tomato);
    ui_obj_set_style_basic(ui_tomato_clock, 0, 0, 400, 400, LV_ALIGN_CENTER);
    ui_obj_set_style_radius(ui_tomato_clock, LV_PART_MAIN, 200);
    ui_obj_set_style_bg(ui_tomato_clock, LV_PART_MAIN, lv_color_hex(0x303545), LV_OPA_COVER, NULL, LV_OPA_COVER);
    lv_obj_set_style_pad_all(ui_tomato_clock, 40, LV_PART_MAIN);

    lv_scale_set_label_show(ui_tomato_clock, true);
    lv_scale_set_mode(ui_tomato_clock, LV_SCALE_MODE_ROUND_INNER);
    lv_scale_set_range(ui_tomato_clock, 0, 60);
    lv_scale_set_angle_range(ui_tomato_clock, 360);
    lv_scale_set_rotation(ui_tomato_clock, 270);

    lv_scale_set_total_tick_count(ui_tomato_clock, 61);
    lv_scale_set_major_tick_every(ui_tomato_clock, 5);
    static const char * hour_ticks[] = {"0", "5", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55", NULL};
    lv_scale_set_text_src(ui_tomato_clock, hour_ticks);

    /* main line style */
    static lv_style_t main_line_style;
    lv_style_init(&main_line_style);
    lv_style_set_arc_width(&main_line_style, 0);
    lv_obj_add_style(ui_tomato_clock, &main_line_style, LV_PART_MAIN);
    /* scale indicator properties */
    static lv_style_t indicator_style;
    lv_style_init(&indicator_style);
    lv_style_set_text_font(&indicator_style, &lv_font_montserrat_10);
    lv_style_set_text_color(&indicator_style, lv_palette_main(LV_PALETTE_YELLOW));
    /* Major tick properties */
    lv_style_set_line_color(&indicator_style, lv_palette_main(LV_PALETTE_YELLOW));
    lv_style_set_length(&indicator_style, 10);
    lv_style_set_line_width(&indicator_style, 2);
    lv_obj_add_style(ui_tomato_clock, &indicator_style, LV_PART_INDICATOR);
    /* Minor tick properties */
    static lv_style_t minor_ticks_style;
    lv_style_init(&minor_ticks_style);
    lv_style_set_line_color(&minor_ticks_style, lv_palette_main(LV_PALETTE_YELLOW));
    lv_style_set_length(&minor_ticks_style, 6);
    lv_style_set_line_width(&minor_ticks_style, 2);
    lv_obj_add_style(ui_tomato_clock, &minor_ticks_style, LV_PART_ITEMS);
    /* add needle from image */
    ui_tomato_needle = lv_image_create(ui_tomato_clock);
    lv_image_set_src(ui_tomato_needle, IMG(tomato));
    lv_obj_align(ui_tomato_needle, LV_ALIGN_CENTER, 0, 0);
    // lv_image_set_pivot(ui_tomato_needle, 0, 0);
#if DEBUG
    ui_animation(ui_tomato_clock, 0, 59, 1000, -1, 0, 0, LV_ANIM_REPEAT_INFINITE, _lv_scale_set_image_needle_value);
#endif

    /* Add a section */
    static lv_style_t section_main_line_style;
    lv_style_init(&section_main_line_style);
    /* Main line properties */
    lv_style_set_size(&section_main_line_style, 100, 100);
    lv_style_set_arc_color(&section_main_line_style, lv_color_hex(0xff6347));
    lv_style_set_arc_width(&section_main_line_style, 100);

    /* Configure section styles */
    lv_scale_section_t * section = lv_scale_add_section(ui_tomato_clock);
    lv_scale_section_set_style(section, LV_PART_MAIN, &section_main_line_style);
    lv_scale_section_set_range(section, 0, 30);