Description
I’ve got a tabview with 4 tabs on the right side of the screen. Screen is 320x240. On one of the tabs, I want to display a reference image that is the full 320px side (the other tab contents don’t really matter, they all fit within 320-<tab_width>).
What MCU/Processor/Board and compiler are you using?
Linux Framebuffer + libinput
What LVGL version are you using?
v8.3.0
What do you want to achieve? / What have you tried so far?
The goal is, when you move to the tab in question, if there is no touchscreen activity for a few seconds after settling on that tab, then make the tabs disappear to show the full reference image.
The image is aligned to lv_scr_act() but is still a child of its tab so it remains aligned in place even when scrolling.
Right now I’ve got this mostly working, see code below. However it is currently just instantly hiding the buttonmatrix which is a bit jarring. I’d love to be able to animate it becoming more transparent over time, however, making the buttonmatrix transparent doesn’t actually show the image behind it and instead leaves a vertical black bar the width of the tab area.
I’d love to know if there is any good way to animate the buttonmatrix/tabview going out of view to show the full object behind it. It doesn’t need to be a transparency fade in/out, it can also be a slide, rollup, etc., I just want to show the user that the bar didn’t crash and its disappearance is intentional.
Code to reproduce
Right now, I don’t have the aforementioned “buttonmatrix hides after a delay” and right now it simply hides as soon as the tab in question is selected, and unhides as soon as the screen is scrolled to the next tab.
static void tab_change_event_cb(lv_event_t *e)
{
lv_obj_t *tv = lv_event_get_current_target(e);
if (lv_tabview_get_tab_act(tv) == 0) {
lv_btnmatrix_set_btn_ctrl_all(lv_tabview_get_tab_btns(tv),
LV_BTNMATRIX_CTRL_HIDDEN);
lv_obj_add_flag(lv_tabview_get_tab_btns(tv), LV_OBJ_FLAG_HIDDEN);
/* XXX I want to animate increasing transparency over time */
//lv_obj_set_style_opa(lv_tabview_get_tab_btns(tv), LV_OPA_TRANSP, LV_PART_MAIN);
} else {
lv_btnmatrix_clear_btn_ctrl_all(lv_tabview_get_tab_btns(tv),
LV_BTNMATRIX_CTRL_HIDDEN);
lv_obj_clear_flag(lv_tabview_get_tab_btns(tv), LV_OBJ_FLAG_HIDDEN);
/* XXX I want to animate increasing transparency over time */
//lv_obj_set_style_opa(lv_tabview_get_tab_btns(tv), LV_OPA_COVER, LV_PART_MAIN);
}
}
static void dummy_setup_func()
{
...
tv = lv_tabview_create(lv_scr_act(), LV_DIR_RIGHT, TAB_W);
lv_obj_add_event_cb(tv, tab_change_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
/* Set tabview background color of the main views */
lv_obj_set_style_bg_color(tv, lv_color_black(), LV_PART_MAIN);
tab1 = lv_tabview_add_tab(tv, "Pinout");
lv_obj_clear_flag(tab1, LV_OBJ_FLAG_SCROLLABLE);
image = lv_img_create(tab1);
lv_obj_align_to(image, lv_scr_act(), LV_ALIGN_TOP_LEFT, 0, 19);
lv_img_set_src(image, &...);
...
}