How do I create a new tab in a screen with a single image in the middle of that screen

How-to
1

#Description
I am using an existing demo from NXP to try and create a new tab with a single image in the new tab that is in the center of the screen. However, the image is always near the top of the screen just below the tabs.

##MCU/Processor/Board and compiler
I am using the NXP i.MXRT 1050 EVK. Compiler is IAR’s Embedded Workbench for ARM version 8.40.1.

##What to achieve
A single image in the middle of a screen on just a single tab.

##Tried so far
I have tried several things already. They are:

  • Using the lv_obj_align(animImg, NULL, LV_ALIGN_CENTER, 0, 0); command.
  • Using the lv_obj_align(animImg, NULL, LV_ALIGN_CENTER, 0, 100);
  • Creating a transparent canvas and making the canvas the parent of the image
  • Making the active screen the parent of the image
  • Using the lv_obj_set_x and lv_obj_set_y functions
  • Using the lv_obj_set_pos function
  • Changing the height and width of the image

None of these have put the image on just the active tab and in the center of the screen (and only one image)

#Code to reproduce
To reproduce this issue you need to first download the NXP software package for the i.MXRT1050 from mcuxpresso.nxp.com. Be sure to select the EVKB-IMXRT1050 and be sure to select littlevgl from the Developer Environment Settings.

Once you have downloaded and extracted the software package (be sure to extract to your hard drive root C:/ as long paths can lead to build errors), open the littlevgl demo located at C:\SDK_2.7.0_EVKB-IMXRT1050\boards\evkbimxrt1050\littlevgl_examples\littlevgl_demo (assuming the SDK was installed to C:).

Then in demo.c, add this function

static void animation_create(lv_obj_t * parent)
{
static lv_point_t line_points[] = { {(CANVAS_WIDTH/2) -1, (CANVAS_HEIGHT/2)}, {(CANVAS_WIDTH/2) +1, (CANVAS_HEIGHT/2)} };

/*Create new style (thick dark blue)*/
static lv_style_t style_line;
lv_style_copy(&style_line, &lv_style_plain);
style_line.line.color = LV_COLOR_MAKE(0x00, 0x3b, 0x75);
style_line.line.width = 1;
style_line.line.rounded = 1;
style_line.line.opa = LV_OPA_TRANSP;

lv_obj_t * animImg = lv_img_create(parent, NULL);
lv_img_set_src(animImg, &nxp_logo_small);
lv_obj_align(animImg, NULL,  LV_ALIGN_CENTER, 0, 0);

}

Replace function demo_create with this:

void demo_create(void)
{

#if LV_DEMO_WALLPAPER
lv_obj_t * wp = lv_img_create(lv_scr_act(), NULL);
lv_img_set_src(wp, &img_bubble_pattern);
lv_obj_set_width(wp, LV_HOR_RES * 4);
lv_obj_set_protect(wp, LV_PROTECT_POS);
#endif

static lv_style_t style_tv_btn_bg;
lv_style_copy(&style_tv_btn_bg, &lv_style_plain);
style_tv_btn_bg.body.main_color = LV_COLOR_HEX(0x487fb7);
style_tv_btn_bg.body.grad_color = LV_COLOR_HEX(0x487fb7);
style_tv_btn_bg.body.padding.ver = 0;

static lv_style_t style_tv_btn_rel;
lv_style_copy(&style_tv_btn_rel, &lv_style_btn_rel);
style_tv_btn_rel.body.empty = 1;
style_tv_btn_rel.body.border.width = 0;

static lv_style_t style_tv_btn_pr;
lv_style_copy(&style_tv_btn_pr, &lv_style_btn_pr);
style_tv_btn_pr.body.radius = 0;
style_tv_btn_pr.body.opa = LV_OPA_50;
style_tv_btn_pr.body.main_color = LV_COLOR_WHITE;
style_tv_btn_pr.body.grad_color = LV_COLOR_WHITE;
style_tv_btn_pr.body.border.width = 0;
style_tv_btn_pr.text.color = LV_COLOR_GRAY;

lv_obj_t * tv = lv_tabview_create(lv_scr_act(), NULL);

#if LV_DEMO_WALLPAPER
lv_obj_set_parent(wp, ((lv_tabview_ext_t *) tv->ext_attr)->content);
lv_obj_set_pos(wp, 0, -5);
#endif

lv_obj_t * tab1 = lv_tabview_add_tab(tv, "Write");
lv_obj_t * tab2 = lv_tabview_add_tab(tv, "List");
lv_obj_t * tab3 = lv_tabview_add_tab(tv, "Chart");
lv_obj_t * tab4 = lv_tabview_add_tab(tv, "Anim");

#if LV_DEMO_WALLPAPER == 0
/Blue bg instead of wallpaper/
lv_tabview_set_style(tv, LV_TABVIEW_STYLE_BG, &style_tv_btn_bg);
#endif
lv_tabview_set_style(tv, LV_TABVIEW_STYLE_BTN_BG, &style_tv_btn_bg);
lv_tabview_set_style(tv, LV_TABVIEW_STYLE_INDIC, &lv_style_plain);
lv_tabview_set_style(tv, LV_TABVIEW_STYLE_BTN_REL, &style_tv_btn_rel);
lv_tabview_set_style(tv, LV_TABVIEW_STYLE_BTN_PR, &style_tv_btn_pr);
lv_tabview_set_style(tv, LV_TABVIEW_STYLE_BTN_TGL_REL, &style_tv_btn_rel);
lv_tabview_set_style(tv, LV_TABVIEW_STYLE_BTN_TGL_PR, &style_tv_btn_pr);

write_create(tab1);
list_create(tab2);
chart_create(tab3);
animation_create(tab4);

#if LV_DEMO_SLIDE_SHOW
lv_task_create(tab_switcher, 3000, LV_TASK_PRIO_MID, tv);
#endif
}

Add the prototype:
static void animation_create(lv_obj_t * parent);

And add the defines
#define CANVAS_WIDTH 206
#define CANVAS_HEIGHT 100

I may have missed something but that should be everything.

Thanks,
Chris

2

Hi,

I’ve tried it in the simulator and it worked well for me:

static void animation_create(lv_obj_t * parent)
{
  LV_IMG_DECLARE(icon);
  lv_obj_t * animImg = lv_img_create(parent, NULL);
  lv_img_set_src(animImg, &icon);
  lv_obj_align(animImg, NULL,  LV_ALIGN_CENTER, 0, 0);
}

I suspect you are using an older version of lvgl. Please check the version number in lv_version.h. It should be at least v6.0.0.

3

Hi Gabor,

Yes, the LVGL version is 5.3.0. Can you try in this version? If you have an i.MXRT 1050 board you could try that as well.

Thanks,
Chris

4

5.3 is getting pretty old at this point. Is it possible for you to upgrade to 6.0?

5

No. I don’t control the software deliverable. We have a software team that is responsible for that. :frowning:

6

In the older version you need to disable auto_fit for the scrollable part with lv_cont_set_fit(lv_page_get_scrl(tab1), false, false)
And set the scrollable part’s size manually to match the parent’s size.

I’m already sure about the API, but it should be something like this.