Can't Get Converted Image to Display

[Sector95]

Description

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

Adafruit Qualia S3 RGB-666 (ESP32-S3), Arduino Framework

What LVGL version are you using?

9.2.2

What do you want to achieve?

Display a background image.

What have you tried so far?

Used the image converter to create a C file from a PNG, added it to my project, and tried to render an image with it. No matter what, any converted PNG image I try doesn’t seem to want to display. No errors produced in the logs.

Code to reproduce

const lv_image_dsc_t button_background = {
    {
        LV_COLOR_FORMAT_RGB565,
        LV_IMAGE_HEADER_MAGIC,
        480,
        480,
    },
    230400 * 2,
    button_background_map,
};

LV_IMAGE_DECLARE(button_background);
lv_obj_t * bg_img = lv_image_create(lv_screen_active());
lv_image_set_src(bg_img, &button_background);
lv_obj_center(bg_img);

lv_obj_t * pause_track_btn = lv_button_create(bg_img);
lv_obj_add_event_cb(pause_track_btn, btn1_click, LV_EVENT_CLICKED, NULL);
lv_obj_align(pause_track_btn, LV_ALIGN_TOP_LEFT, 10, 10);
lv_obj_remove_flag(pause_track_btn, LV_OBJ_FLAG_PRESS_LOCK);
lv_obj_set_style_size(pause_track_btn, 150, 50, 0);

lv_obj_t * pause_track_lbl = lv_label_create(pause_track_btn);
lv_label_set_text(pause_track_lbl, "Pause TrackIR");
lv_obj_center(pause_track_lbl);

Screenshot and/or video

[Marian_M]

Images (lv_image) — LVGL documentation
read docu before ask is fair step.

[Sector95]

I’ve read that document up and down, is there something I’ve missed?

[Marian_M]

Seems your browser show other or …

[Sector95]

I wish you’d be more specific, but if you’re referring to the missing .header formats of the struct, it’s because I’m running the Arduino framework, which evidently forces the file to compile as C++.

Using images in LVGL, getting "error: expected primary-expression before '.' token"

I’m trying to use images in LVGL. I’ve converted it via the online converter just as the docu says. I’ve tried this once before but moved on, but it’s time to make it work. It gives error for the dots at the bottom. I have added include of Arduino.h as well. This is the error I get: In file included from src\main.cpp:7:0: src\images/SoS_Skull.c:735:3: error: expected primary-expression before '.' token .header.always_zero = 0, ^ src\images/SoS_Skull.c:736:3: error: expected primary-expr…

[Marian_M]

Ohh boy this ticket is from 2021 no v9 exist. You on start write v 9.2.2 , then use this for example format 565 not exist in v9 , too struct require right order fill.

[Sector95]

The thread might be old, but it was the only thing I could find on the error. I saw the bit saying that if it was in the right order, it shouldn’t care, but that wasn’t the case for me-- the compiler refused to proceed until the format was changed. It appeared to be in the same order as the struct, from what I could tell.

I’m a little confused, is the online converter not accurate? It’s the reason I selected RGB565 for v9, since I’m configured for 16 bit color:

Image Converter — LVGL

Should I give the Python converter listed there a shot?

[Marian_M]

Converter in c file end create struct right for you use, you remove it and create own ?
In lv conf you can turn on log and see what is problem with your image.

[Sector95]

As I mentioned before, I altered it, per the thread linked earlier, because it wouldn’t compile out of the box due to the Arduino framework treating it like a C++ file. Unaltered, the compiler spits out:

Compiling .pio\build\touch\src\main.cpp.o
In file included from src/main.cpp:5:
src/button_background.c:519:3: error: expected primary-expression before '.' token
  519 |   .header.cf = LV_COLOR_FORMAT_RGB565,
      |   ^
src/button_background.c:520:3: error: expected primary-expression before '.' token
  520 |   .header.magic = LV_IMAGE_HEADER_MAGIC,
      |   ^
src/button_background.c:521:3: error: expected primary-expression before '.' token
  521 |   .header.w = 480,
      |   ^
src/button_background.c:522:3: error: expected primary-expression before '.' token
  522 |   .header.h = 480,
      |   ^
*** [.pio\build\touch\src\main.cpp.o] Error 1

If you’re aware of a better route around this issue, I’m all ears!

In regards to logs, as I mentioned in my original post, no errors are reported in the logs from LVGL:

[Info]  (2.000, +1)      lv_obj_create: begin lv_obj.c:215

[Info]  (2.000, +0)      lv_obj_create: begin lv_obj.c:215

[Info]  (2.001, +1)      lv_obj_create: begin lv_obj.c:215

[Info]  (2.003, +2)      lv_image_create: begin lv_image.c:138

[Info]  (2.004, +1)      image_decoder_get_info: Image decoder didn't set stride. Calculate it from width. lv_image_decoder.c:349

[Info]  (2.005, +1)      lv_button_create: begin lv_button.c:51

[Info]  (2.006, +1)      lv_label_create: begin lv_label.c:125

I can go up to the TRACE log level as well, if that’d be useful.

[Sector95]

I GOT IT!

Turns out the converter doesn’t return a .header.flags value, and when looking at the struct definition the first time, I missed it. Adding a 0 for the flags position got all the header positions lined up correctly. Oh, and the converter returned the magic and color format headers in the wrong order as well.

const lv_image_dsc_t button_background = {
    {
        LV_IMAGE_HEADER_MAGIC,
        LV_COLOR_FORMAT_RGB565,
        0,
        480,
        480,
    },
    230400 * 2,
    button_background_map,
};

[Marian_M]

Based on .pio you use platformio ? I build daily arduino big project and never have issue with c images .

const lv_img_dsc_t ui_img_logo_o_png = {
    .header.always_zero = 0,
    .header.w = 98,
    .header.h = 98,
    .data_size = sizeof(ui_img_logo_o_png_data),
    .header.cf = LV_IMG_CF_TRUE_COLOR_ALPHA,
    .data = ui_img_logo_o_png_data
};

im on 8.3 , but my images is from squareline and on start include h file where is used

#ifdef __cplusplus
extern "C" {
#endif
...

FYI

[Sector95]

Yeah I’m using PlatformIO, I wonder if this is a build environment thing… I’m developing this project on Windows, I may try to throw together a dev container and see if that solves the issue.