Image background

How-to
1

Description

I’m testing the library, I add one image .png to a tft display, this image hasn’t background but when I display the image in the tft, it has a black background. I use the online images converter from LVGL, later I add the .c file into the lvgl-master/src

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

ESP32 with ILI9341 display

What LVGL version are you using?

v.7

What do you want to achieve?

Display the images with background transparent

What have you tried so far?

Convert the image in .png format without background in a .c file image with the LVGL online images converter

Code to reproduce

#include <lvgl.h>
#include <TFT_eSPI.h>



TFT_eSPI tft = TFT_eSPI(); /* TFT instance */
static lv_disp_buf_t disp_buf;
static lv_color_t buf[LV_HOR_RES_MAX * 10];

#if USE_LV_LOG != 0
/* Serial debugging */
void my_print(lv_log_level_t level, const char * file, uint32_t line, const char * dsc)
{

    Serial.printf("%s@%d->%s\r\n", file, line, dsc);
    Serial.flush();
}
#endif

/* Display flushing */
void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p)
{
    uint32_t w = (area->x2 - area->x1 + 1);
    uint32_t h = (area->y2 - area->y1 + 1);

    tft.startWrite();
    tft.setAddrWindow(area->x1, area->y1, w, h);
    tft.pushColors(&color_p->full, w * h, true);
    tft.endWrite();

    lv_disp_flush_ready(disp);
}

/* Reading input device (simulated encoder here) */
bool read_encoder(lv_indev_drv_t * indev, lv_indev_data_t * data)
{
    static int32_t last_diff = 0;
    int32_t diff = 0; /* Dummy - no movement */
    int btn_state = LV_INDEV_STATE_REL; /* Dummy - no press */

    data->enc_diff = diff - last_diff;;
    data->state = btn_state;

    last_diff = diff;

    return false;
}

void setup()
{
    pinMode(15, OUTPUT);
    digitalWrite(15, LOW);
    delay(1);
    Serial.begin(115200); /* prepare for possible serial debug */

    lv_init();

#if USE_LV_LOG != 0
    lv_log_register_print_cb(my_print); /* register print function for debugging */
#endif

    tft.begin(); /* TFT init */
    tft.setRotation(1); /* Landscape orientation */

    lv_disp_buf_init(&disp_buf, buf, NULL, LV_HOR_RES_MAX * 10);

    /*Initialize the display*/
    lv_disp_drv_t disp_drv;
    lv_disp_drv_init(&disp_drv);
    disp_drv.hor_res = 320;
    disp_drv.ver_res = 240;
    disp_drv.flush_cb = my_disp_flush;
    disp_drv.buffer = &disp_buf;
    lv_disp_drv_register(&disp_drv);

    /*Initialize the (dummy) input device driver*/
    lv_indev_drv_t indev_drv;
    lv_indev_drv_init(&indev_drv);
    indev_drv.type = LV_INDEV_TYPE_ENCODER;
    indev_drv.read_cb = read_encoder;
    lv_indev_drv_register(&indev_drv);

   LV_IMG_DECLARE(logo);

  lv_obj_t * img_src = lv_img_create(lv_scr_act(), NULL); /*Crate an image object*/
  lv_img_set_src(img_src, &logo);  /*Set the created file as image (a red fl  ower)*/
  lv_obj_set_pos(img_src, 0, 0);      /*Set the positions*/
  lv_obj_set_drag(img_src, true);
      
}


void loop()
{

    lv_task_handler(); /* let the GUI do its work */
    delay(5);
}
2

Did you convert the image using “True color with alpha”? If alpha is not included, the image will have a background added to it.

3

Hi Alvaro,
You can try adding style to the object.

static lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_opa(&style, LV_STATE_DEFAULT, LV_OPA_TRANSP);
lv_style_set_bg_color(&style, LV_STATE_DEFAULT, LV_COLOR_SILVER);
  
 LV_IMG_DECLARE(logo);
 lv_obj_t * img_src = lv_img_create(lv_scr_act(), NULL); /*Crate an image object*/
 lv_img_set_src(img_src, &logo);  /*Set the created file as image (a red flower)*/
 lv_obj_set_pos(img_src, 0, 0);      /*Set the positions*/
 lv_obj_set_drag(img_src, true);
 lv_obj_add_style(img_src, LV_OBJ_PART_MAIN, &style);

You can even consider adding lv_style_set_border_opa(), lv_style_set_border_color() if needed. Description about how to use if provided in their documentation under Styles section
thank you

4

I didn’t select true color with alpha, now it works, thanks!

5

cool glad it worked

1 Like