How to get a spinner without the square box around it

VedantParanjape · March 3, 2021, 1:12pm

I am using a esp32 board with ssd1306 display. I want to use a spinner widget, but there’s a box around it, even the spinning arc isn’t thick enough like shown in the example on docs site, here’s the code I used. Also there should be two bounding arcs around the moving arc, only outer arc is being rendered. like this
index

label_sync_time_spinner_group_3 = lv_spinner_create(scr3[1], NULL);
lv_obj_set_size(label_sync_time_spinner_group_3, 70, 70);
lv_spinner_set_type(label_sync_time_spinner_group_3, LV_SPINNER_TYPE_CONSTANT_ARC);
lv_obj_align(label_sync_time_spinner_group_3, NULL, LV_ALIGN_CENTER, 0, 0);

Here’s a video of it’s working: https://imgur.com/a/KyPvNf2

How can I make the spinning arc thicker radially and also remove the square(ish) bounding box ?

Rhaoma · March 3, 2021, 2:05pm

Maybe I’m just a bit thickheaded, but can you please clarify for me what you mean by two bounding arcs around the moving one? Like a circle, as in this picture?

if you want to modify the arc width/thickness, then use this maybe:
lv_obj_set_style_local_line_width(label_sync_time_spinner_group_3, LV_SPINNER_PART_INDIC, LV_STATE_DEFAULT, 30);

![image|242x352](upload://ky39vPGvFo94KaqB71vVhhGGtqt.
This only modfies the width of the rotating arc and if you also want to modify the “background” use LV_SPINNER_PART_BG instead of LV_SPINNER_PART_INDIC and you still keep the other line. Looks like this:

For future use the arc uses the line properties set with styles i think. Docs here:
Spinner:https://docs.lvgl.io/latest/en/html/widgets/spinner.html
Arc:https://docs.lvgl.io/latest/en/html/widgets/arc.html
Styles:https://docs.lvgl.io/latest/en/html/overview/style.html#line-properties
These are all quite useful. Especially the style documentation in general.
Hope it helps!

VedantParanjape · March 3, 2021, 2:57pm

Bounding arcs as in the bounding circles, sorry I miswrote it. See the two boundary circles in the attached images between which the arc moves.

I could make the arc thicker, but the square border box didn’t go away yet. It’s still a bit wierd, the inner bounding circle isn’t visible.

embeddedt · March 3, 2021, 3:00pm

This should work:

lv_obj_set_style_local_bg_opa(arc, LV_ARC_PART_BG, LV_STATE_DEFAULT, 0);
lv_obj_set_style_local_border_opa(arc, LV_ARC_PART_BG, LV_STATE_DEFAULT, 0);

VedantParanjape · March 3, 2021, 3:04pm

Thanks, this hid it, but again the inner circle isn’t visible, only the outer circle and the moving arc is rendering.

embeddedt · March 3, 2021, 3:05pm

If you need an inner circle you’ll have to create a second object under the arc. The arc only has the background ring and the moving portion.

VedantParanjape · March 3, 2021, 3:06pm

But in the photo attached, we can see a inner circle, also in the photo attached in the docs.

embeddedt · March 3, 2021, 3:07pm

Oh, that is the border of the arc. In that case you should remove the border_opa line and adjust the border_radius.

VedantParanjape · March 3, 2021, 3:09pm

I couldn’t find a set border radius function. Used the width method and esp32 crashes

embeddedt · March 3, 2021, 3:12pm

Haven’t tested this but it should give you a circular border:

lv_obj_set_style_local_radius(arc, LV_ARC_PART_BG, LV_STATE_DEFAULT, lv_obj_get_width(arc) / 2);

VedantParanjape · March 3, 2021, 3:15pm

It crashes with this error

Guru Meditation Error: Core  1 panic'ed (LoadProhibited). Exception was unhandled.

Core  1 register dump:
PC      : 0x400dae1c  PS      : 0x00060930  A0      : 0x800de45f  A1      : 0x3ffca800  
0x400dae1c: _lv_memcpy_small at /home/vedant/Programming/projects/open-authenticator/open-authenticator-app/build/../components/lv_port_esp32/components/lvgl/src/lv_core/../lv_font/../lv_misc/lv_mem.h:219
 (inlined by) lv_area_copy at /home/vedant/Programming/projects/open-authenticator/open-authenticator-app/build/../components/lv_port_esp32/components/lvgl/src/lv_core/../lv_font/../lv_misc/lv_area.h:99
 (inlined by) lv_obj_get_coords at /home/vedant/Programming/projects/open-authenticator/open-authenticator-app/build/../components/lv_port_esp32/components/lvgl/src/lv_core/lv_obj.c:2241

A2      : 0x000000a6  A3      : 0x3ffca838  A4      : 0x00000009  A5      : 0x00000000  
A6      : 0x00000008  A7      : 0x3ffb7c18  A8      : 0x00000008  A9      : 0x3ffca7e0  
A10     : 0x00000001  A11     : 0x0000005d  A12     : 0x00000004  A13     : 0x00000c00  
A14     : 0x00000042  A15     : 0x3ffca7d8  SAR     : 0x0000001f  EXCCAUSE: 0x0000001c  
EXCVADDR: 0x000000a6  LBEG    : 0x4000c2e0  LEND    : 0x4000c2f6  LCOUNT  : 0xffffffff  

Backtrace:0x400dae19:0x3ffca800 0x400de45c:0x3ffca820 0x400de49b:0x3ffca870 0x400de4d9:0x3ffca8c0 0x400de7e8:0x3ffca8e0 0x400de96d:0x3ffca960 0x400dea56:0x3ffca990 0x400deab8:0x3ffca9b0 0x400e9345:0x3ffca9e0 0x400e9430:0x3ffcaa00 0x400d5a60:0x3ffcaa20 0x40088bc5:0x3ffcaa50
0x400dae19: lv_obj_get_coords at /home/vedant/Programming/projects/open-authenticator/open-authenticator-app/build/../components/lv_port_esp32/components/lvgl/src/lv_core/lv_obj.c:2241 (discriminator 2)

0x400de45c: lv_refr_obj at /home/vedant/Programming/projects/open-authenticator/open-authenticator-app/build/../components/lv_port_esp32/components/lvgl/src/lv_core/lv_refr.c:721

0x400de49b: lv_refr_obj at /home/vedant/Programming/projects/open-authenticator/open-authenticator-app/build/../components/lv_port_esp32/components/lvgl/src/lv_core/lv_refr.c:734

0x400de4d9: lv_refr_obj_and_children at /home/vedant/Programming/projects/open-authenticator/open-authenticator-app/build/../components/lv_port_esp32/components/lvgl/src/lv_core/lv_refr.c:636

0x400de7e8: lv_refr_area_part at /home/vedant/Programming/projects/open-authenticator/open-authenticator-app/build/../components/lv_port_esp32/components/lvgl/src/lv_core/lv_refr.c:567

0x400de96d: lv_refr_area at /home/vedant/Programming/projects/open-authenticator/open-authenticator-app/build/../components/lv_port_esp32/components/lvgl/src/lv_core/lv_refr.c:478 (discriminator 2)

0x400dea56: lv_refr_areas at /home/vedant/Programming/projects/open-authenticator/open-authenticator-app/build/../components/lv_port_esp32/components/lvgl/src/lv_core/lv_refr.c:400

0x400deab8: _lv_disp_refr_task at /home/vedant/Programming/projects/open-authenticator/open-authenticator-app/build/../components/lv_port_esp32/components/lvgl/src/lv_core/lv_refr.c:199

0x400e9345: lv_task_exec at /home/vedant/Programming/projects/open-authenticator/open-authenticator-app/build/../components/lv_port_esp32/components/lvgl/src/lv_misc/lv_task.c:386 (discriminator 1)

0x400e9430: lv_task_handler at /home/vedant/Programming/projects/open-authenticator/open-authenticator-app/build/../components/lv_port_esp32/components/lvgl/src/lv_misc/lv_task.c:134

0x400d5a60: lvgl_gui_task at /home/vedant/Programming/projects/open-authenticator/open-authenticator-app/build/../main/lvgl_gui.c:343 (discriminator 1)

0x40088bc5: vPortTaskWrapper at /home/vedant/esp/esp-idf/components/freertos/xtensa/port.c:143

This is my function

static void lvgl_gui_init_obj()
{
    scr1 = lv_obj_create(NULL, NULL);
    scr2 = lv_obj_create(NULL, NULL);
    scr3[0] = lv_obj_create(NULL, NULL);
    scr3[1] = lv_obj_create(NULL, NULL);
    scr4[0] = lv_obj_create(NULL, NULL);
    scr4[1] = lv_obj_create(NULL, NULL);
    scr4[2] = lv_obj_create(NULL, NULL);

    dummy_obj_event_handler = lv_obj_create(NULL, NULL);
    label_battery_group_root = lv_label_create(scr1, NULL);
    label_alias_group_1 = lv_label_create(scr1, NULL);
    bar_time_progress_group1 = lv_bar_create(scr1, NULL);
    label_code_group_1 = lv_label_create(scr1, NULL);
    label_time_group_2 = lv_label_create(scr2, NULL);
    label_sync_time_group_3 = lv_label_create(scr3[0], NULL);
    label_sync_time_spinner_group_3 = lv_spinner_create(scr3[1], NULL);
    label_setting_group_4 = lv_label_create(scr4[0], NULL);
    label_ap_name_group_4_1 = lv_label_create(scr4[1], NULL);
    label_ap_pass_group_4_1 = lv_label_create(scr4[1], NULL);
    label_ip_addr_group_4_2 = lv_label_create(scr4[2], NULL);
    image_qr_code_group_4_2 = lv_img_create(scr4[2], NULL);

    lv_label_set_text(label_battery_group_root, " ");
    lv_label_set_text(label_alias_group_1, " ");
    lv_label_set_text(label_code_group_1, " ");
    lv_label_set_text(label_time_group_2, "\t\t\t\t" SYMBOL_CLOCK "\nTIME");
    lv_label_set_text(label_sync_time_group_3, "\t\t\t\t" LV_SYMBOL_LOOP "\nSYNC TIME");
    lv_label_set_text(label_setting_group_4, "\t\t\t\t" LV_SYMBOL_SETTINGS "\nSETTINGS");
    lv_label_set_text(label_ap_name_group_4_1, "connect to open-authenticator " LV_SYMBOL_WIFI);
    lv_label_set_text(label_ap_pass_group_4_1, " ");
    lv_label_set_text(label_ip_addr_group_4_2, " ");

    lv_obj_align(label_time_group_2, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_obj_align(label_sync_time_group_3, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_obj_align(label_setting_group_4, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_obj_align(label_ap_name_group_4_1, NULL, LV_ALIGN_IN_TOP_MID, 0, 0);
    lv_obj_align(label_ap_pass_group_4_1, NULL, LV_ALIGN_IN_BOTTOM_MID, 0, 0);
    // add group_4_2 elements too

    lv_obj_set_size(bar_time_progress_group1, 128, 10);
    lv_bar_set_type(bar_time_progress_group1, LV_BAR_TYPE_SYMMETRICAL);
    lv_obj_align(bar_time_progress_group1, NULL, LV_ALIGN_CENTER, 0, 0);

    lv_obj_set_size(label_sync_time_spinner_group_3, 60, 60);
    lv_spinner_set_type(label_sync_time_spinner_group_3, LV_SPINNER_TYPE_CONSTANT_ARC);
    lv_spinner_set_arc_length(label_sync_time_group_3, 150);
    lv_obj_set_style_local_line_width(label_sync_time_spinner_group_3, LV_SPINNER_PART_INDIC, LV_STATE_DEFAULT, 5);
    lv_obj_set_style_local_bg_opa(label_sync_time_spinner_group_3, LV_ARC_PART_BG, LV_STATE_DEFAULT, 0);
    lv_obj_set_style_local_radius(label_sync_time_spinner_group_3, LV_ARC_PART_BG, LV_STATE_DEFAULT, lv_obj_get_width(label_sync_time_spinner_group_3) / 2);
    lv_obj_align(label_sync_time_spinner_group_3, NULL, LV_ALIGN_CENTER, 0, 0);

    lv_label_set_long_mode(label_ap_name_group_4_1, LV_LABEL_LONG_SROLL_CIRC);
    lv_obj_set_width(label_ap_name_group_4_1, 128);

    group_root = lv_group_create();

    lv_group_add_obj(group_root, dummy_obj_event_handler);
    lv_group_add_obj(group_root, label_alias_group_1);
    lv_group_add_obj(group_root, bar_time_progress_group1);
    lv_group_add_obj(group_root, label_code_group_1);
    lv_group_add_obj(group_root, label_time_group_2);
    lv_group_add_obj(group_root, label_sync_time_group_3);
    lv_group_add_obj(group_root, label_sync_time_spinner_group_3);
    lv_group_add_obj(group_root, label_setting_group_4);
    lv_group_add_obj(group_root, label_ap_name_group_4_1);
    lv_group_add_obj(group_root, label_ap_pass_group_4_1);
    lv_group_add_obj(group_root, label_ip_addr_group_4_2);
    lv_group_add_obj(group_root, image_qr_code_group_4_2);

    lv_obj_set_event_cb(dummy_obj_event_handler, switch_event_handler_cb);

    lv_indev_set_group(my_indev, group_root);
    lv_scr_load_anim(scr1, LV_SCR_LOAD_ANIM_FADE_ON, 100, 100, false);
}

VedantParanjape · March 3, 2021, 4:35pm

@embeddedt It worked it was silly mistake, I was setting on some other object. How do I hide the outer circle ? I tried this

lv_obj_set_style_local_border_opa(label_sync_time_spinner_group_3, LV_SPINNER_PART_BG, LV_STATE_DEFAULT, 0);

It didn’t work. I mean the bounding arc in the below image. Also how do I increase radius of the spinning arc

Rhaoma · March 9, 2021, 10:56am

If you mean the circle-shaped background of the spinner then you can “remove” it like so lv_obj_set_style_local_line_opa(label_sync_time_spinner_group_3, LV_SPINNER_PART_BG, LV_STATE_DEFAULT, 0);
I don’t exactly know what you mean by increasing the radius of the spinning arc.
You could make the circle bigger by simply increasing the size of the object. If that wasn’t what you meant then please clarify