How can i stack 2 arcs with the same center point

How-to
1

What do you want to achieve?

Hey guys,
I’m trying to design some kind of smart watch, I want to have an arc over another arc with different range, but the centers should be aligned.
It’s somewhat similar to lvgl’s example for " Smartwatch GUI for NXP" with the media player screen.
As soon as I add the second arc I cant control the first one, even though their knobs never overlap, how can i fix it

Thanks, Dan

What have you tried so far?

chat gpt suggested i try the “adv hittest” flag but it didnt change much.

I have uploaded a screenshot of the design attempt alongside the flags

Code to reproduce

/*You code here*/

Screenshot and/or video

Screenshot_1
Screenshot_11678×701 120 KB

Environment

  • MCU/MPU/Board: CrowPanel Advance 4.3“ HMI|ESP32-S3 AI-Powered IPS Touch Screen (800x480)
  • LVGL version: 8.3
2

lv_obj_t* cont1 = lv_obj_create(lv_scr_act());
lv_obj_remove_style_all(cont1);
lv_obj_set_size(cont1, 480, 240);
lv_obj_align(cont1, LV_ALIGN_TOP_MID, 0, 0);
lv_obj_t* arc1 = lv_arc_create(cont1);
lv_obj_set_size(arc1, 480, 480);
lv_arc_set_angles(arc1, 0, 180);
lv_obj_align(arc1, LV_ALIGN_TOP_MID, 0, 0);
lv_obj_t* cont2 = lv_obj_create(lv_scr_act());
lv_obj_remove_style_all(cont2);

lv_obj_set_size(cont2, 480, 240);
lv_obj_align_to(cont2, cont1, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);
lv_obj_t* arc2 = lv_arc_create(cont2);
lv_obj_set_size(arc2, 480, 480);
lv_arc_set_angles(arc2, 0, 180);
lv_arc_set_rotation(arc2, 180);

lv_obj_align(arc2, LV_ALIGN_BOTTOM_MID, 0, 0);
3

Hi, The easiest way to solve this problem is to place the arcs inside a container where only the active part of the arc widget is visible. This way, the arc won’t detect the area outside the container. I’ve also attached a video to make it clear what I mean. For future reference, if you have questions about SquareLine Studio, I recommend posting them in the SquareLine forum, as they’ll definitely be able to help you there.

arc

4

Thanks for your replies! ive tried putting each arc in a container and it works much better, still have few spots where the arc is getting stuck (both arcs have different point of getting stuck)

here is the code generated by the studio, what am i missing?

//panel 5 is the gray circle
ui_Panel5 = lv_obj_create(ui_Panel6);
lv_obj_set_width(ui_Panel5, 400);
lv_obj_set_height(ui_Panel5, 400);
lv_obj_set_align(ui_Panel5, LV_ALIGN_CENTER);
lv_obj_clear_flag(ui_Panel5, LV_OBJ_FLAG_CLICKABLE | LV_OBJ_FLAG_SCROLLABLE); /// Flags
lv_obj_set_style_radius(ui_Panel5, 200, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(ui_Panel5, lv_color_hex(0x4C4D4D), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_bg_opa(ui_Panel5, 200, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_border_width(ui_Panel5, 0, LV_PART_MAIN | LV_STATE_DEFAULT);

ui_Container4 = lv_obj_create(ui_Panel5);
lv_obj_remove_style_all(ui_Container4);
lv_obj_set_width(ui_Container4, 450);
lv_obj_set_height(ui_Container4, 200);
lv_obj_set_align(ui_Container4, LV_ALIGN_TOP_MID);
lv_obj_clear_flag(ui_Container4, LV_OBJ_FLAG_CLICKABLE | LV_OBJ_FLAG_SCROLLABLE); /// Flags

ui_Arc1 = lv_arc_create(ui_Container4);
lv_obj_set_width(ui_Arc1, 380);
lv_obj_set_height(ui_Arc1, 380);
lv_obj_set_align(ui_Arc1, LV_ALIGN_TOP_MID);
lv_obj_add_flag(ui_Arc1, LV_OBJ_FLAG_ADV_HITTEST); /// Flags
lv_arc_set_value(ui_Arc1, 50);
lv_arc_set_bg_angles(ui_Arc1, 10, 170);
lv_arc_set_rotation(ui_Arc1, 180);

ui_Container8 = lv_obj_create(ui_Panel5);
lv_obj_remove_style_all(ui_Container8);
lv_obj_set_width(ui_Container8, 450);
lv_obj_set_height(ui_Container8, 100);
lv_obj_set_align(ui_Container8, LV_ALIGN_BOTTOM_MID);
lv_obj_clear_flag(ui_Container8, LV_OBJ_FLAG_CLICKABLE | LV_OBJ_FLAG_SCROLLABLE); /// Flags

ui_Arc2 = lv_arc_create(ui_Container8);
lv_obj_set_width(ui_Arc2, 380);
lv_obj_set_height(ui_Arc2, 380);
lv_obj_set_align(ui_Arc2, LV_ALIGN_BOTTOM_MID);
lv_obj_add_flag(ui_Arc2, LV_OBJ_FLAG_ADV_HITTEST); /// Flags
lv_arc_set_value(ui_Arc2, 50);
lv_arc_set_bg_angles(ui_Arc2, 40, 140);