Align Text within Icon

How-to
1

Description

First of all, brilliant work and keep it going!

Trying to adapt the printer demo icons on main screen but having trouble with alignment of modified version. Text is too close to icon and icon is not centred.

What MCU/Processor/Board and compiler are you using?

ESP32, arduino GUI with IL9488 Touch display.

What LVGL version are you using?

7.8.0

What do you want to achieve?

A configurable (1 to 4) number tiles which appear in the main container resized based on config. Each one contains a nice icon perfectly centred and text below it which is also centred and vertically distributed from the icon.

Each tile is clickable and triggers a callback like in the lv_printer_demo() example.

What have you tried so far?

I have wondered if this is the right object to use for my purpose and experimented with imagebutton, but due to me being a noob I have had no success. Spent 12 hours getting lv_examples to work on simulator and esp32, so brain a bit fried :).

Could really do with getting started on the main screen with the tiles so that I can have a hope of achieving what I set out to a few days ago!

Code to reproduce

    icon = add_icon(box, &lv_demo_printer_img_btn_bg_2, &jandra_open_door_image_tc, "BACK");
    lv_obj_align_origo(icon, NULL, LV_ALIGN_IN_LEFT_MID, 3 * (box_w - 20) / 6 + 10, 0);
    lv_obj_fade_in(icon, LV_DEMO_PRINTER_ANIM_TIME * 2, delay + LV_DEMO_PRINTER_ANIM_TIME + 50);
    lv_obj_set_event_cb(icon, scan_open_icon_event_cb);

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

image
image1168×668 295 KB

2

Hi,

If you have just got started with LVGL the printer demo could be too complex for first. It realized something special.

You can achieve what you need simply with these lines of code

  lv_obj_t * box = lv_obj_create(lv_scr_act(), NULL);
  lv_obj_set_size(box, 120, 160);

  LV_IMG_DECLARE(my_img);
  lv_obj_t * img = lv_img_create(box, NULL);
  lv_img_set_src(img, &my_img);
  lv_obj_align(img, NULL, LV_ALIGN_IN_TOP_MID, 0, 10);

  lv_obj_t * label = lv_label_create(box, NULL);
  lv_label_set_text(label, "Box 1");
  lv_obj_align(label, NULL, LV_ALIGN_IN_BOTTOM_MID, 0, -10);

image

1 Like
3

Thank you that really helped.