lv_demo_widgets example in windows, get stuck and break!

[xinsuinizhuan]

LVGL version

v9.1.1

What happened?

when i run the lv_demo_widgets and move the left or right in tab, when mve the half of thme, the i get stuck, then when i close the frame, it break!
i move right, and stop half of analyticks tab, the i can't operate any of them, it get stuck.

then when i close the frame, it break:

How to reproduce?

No response

[liamHowatt]

More likely than not, the display closing issue on Windows is #6059 which is still an open issue where we have discussed a solution to in that issue.

For the tabs getting stuck, I tried it out and I think it's because the Windows environment doesn't track the mouse after it leaves the window bounds while you're dragging. This is the relevant logic. I could not fix it by commenting out this part.

Can you use full screen for your use case?

cc @MouriNaruto

[xinsuinizhuan]

More likely than not, the display closing issue on Windows is #6059 which is still an open issue where we have discussed a solution to in that issue.

For the tabs getting stuck, I tried it out and I think it's because the Windows environment doesn't track the mouse after it leaves the window bounds while you're dragging. This is the relevant logic. I could not fix it by commenting out this part.

Can you use full screen for your use case?

cc @MouriNaruto

when i use full screen, have this problem:

[xinsuinizhuan]

For the tabs getting stuck, i think is the tab problem, i could not move the whole tab onece, so it stop in half, then could not operate any, it is so bad, whe i move he 3/4 tab, could let tab move the end by self?

[C47D]

Hi,

I'm able to replicate the needle issue, I'll take a look at it.

[C47D]

Hi @kisvegabor ,

I'm checking the needle issue and it's being created as a separated object to the scale3 scale widget in the widgets demo (the Mbps and value labels are also created as scale3 childs):

    LV_IMAGE_DECLARE(img_demo_widgets_needle);
    lv_obj_t * needle = lv_image_create(scale3);
    lv_image_set_src(needle, &img_demo_widgets_needle);
    lv_image_set_pivot(needle, 3, 4);
    lv_obj_align(needle, LV_ALIGN_CENTER, 47, -2);

    lv_obj_t * mbps_label = lv_label_create(scale3);
    lv_label_set_text(mbps_label, "-");
    lv_obj_add_style(mbps_label, &style_title, 0);

    lv_obj_t * mbps_unit_label = lv_label_create(scale3);
    lv_label_set_text(mbps_unit_label, "Mbps");

    lv_anim_init(&a);
    lv_anim_set_values(&a, 10, 60);
    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
    lv_anim_set_exec_cb(&a, scale3_anim_cb);
    lv_anim_set_var(&a, scale3);
    lv_anim_set_duration(&a, 4100);
    lv_anim_set_playback_duration(&a, 800);
    lv_anim_start(&a);

    lv_obj_align(mbps_label, LV_ALIGN_TOP_MID, 10, lv_pct(55));
    lv_obj_align_to(mbps_unit_label, mbps_label, LV_ALIGN_OUT_RIGHT_BOTTOM, 10, 0);

Is there a way to inform those childs the parent position has been updated, so their position is also updated accordingly? I hope this is the root cause for this needle issue, any thoughts @liamHowatt ?

[kisvegabor]

The issue is happening because the scale has 100% width, but it's always a circle, but the needle doesn't know about it. It's always aligned to the center.

LV_EVENT_SIZE_CHANGED should be fired when the scale's size changes.

[C47D]

It seems to me that the "Mbps" label is always correct and the needle and value label is tracking the container size change, isn't?

[C47D]

@kisvegabor When setting an image position we're positioning the top-left corner or the image pivot?

I tried adding the following event callback to the scale3 resizing and the needle is not really on the scale center. I was expecting that because I'm getting the scale coordinates and dividing it by 2 on each axis.

Do we need to mark an object as dirty to it gets drawn after it gets moved?

static void scale3_size_changed_event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);

    if(code == LV_EVENT_SIZE_CHANGED) {
    	lv_area_t scale_coords;
    	lv_point_t scale_center;
    	lv_obj_get_coords(scale3, &scale_coords);
    	scale_center.x = (scale_coords.x2 - scale_coords.x1) / 2U;
    	scale_center.y = (scale_coords.y2 - scale_coords.y1) / 2U;
    	/* Update needle position */
    	lv_obj_align(needle, LV_ALIGN_CENTER, scale_center.x, scale_center.y);

    	/* Update labels position */
    	if (mbps_label) {
    		lv_obj_align(mbps_label, LV_ALIGN_TOP_MID, 10, lv_pct(55));
    	}
    	if (mbps_label && mbps_unit_label) {
    		lv_obj_align_to(mbps_unit_label, mbps_label, LV_ALIGN_OUT_RIGHT_BOTTOM, 10, 0);
    	}
    }
}

Notice the needle at the bottom right side of the scale container.

[liamHowatt]

@C47D I think I was able to get it. It might not be perfect but I hope it helps get you unstuck. The main issues were:

• The scale is visually "square" despite the scale obj having rectangular dimensions so the center is min(x, y)/2.
• Align to the top-left instead of center because you're computing an offset relative to the scale's top-left corner.

static void scale3_size_changed_event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);

    if(code == LV_EVENT_SIZE_CHANGED) {
        int32_t scale_width = lv_obj_get_width(scale3);
        int32_t scale_height = lv_obj_get_height(scale3);
        int32_t minor_dimension = LV_MIN(scale_width, scale_height);
        int32_t minor_dimension_half = minor_dimension / 2;
        /* Update needle position */
        lv_obj_align(needle, LV_ALIGN_TOP_LEFT, minor_dimension_half, minor_dimension_half);

        /* Update labels position */
        if (mbps_label) {
            lv_obj_align(mbps_label, LV_ALIGN_TOP_LEFT, minor_dimension_half, minor_dimension * 55 / 100);
        }
        if (mbps_label && mbps_unit_label) {
            lv_obj_align_to(mbps_unit_label, mbps_label, LV_ALIGN_OUT_RIGHT_BOTTOM, 10, 0);
        }
    }
}

[C47D]

Hi,

You're right, thanks for the explanation. I totally missed the scale being an rectangle when the window gets bigger, I can see it now on @kisvegabor video/gif.

It seems to be working:

@liamHowatt Do you want to send the pull request to fix that issue or do you want me to send it?

[liamHowatt]

I can send it since I basically just need to commit and push. 👍

[xinsuinizhuan]

newest code not fixed?

the meter is not middle, and the point is dissociate

[C47D]

The fix haven't been merged yet