Image and Image Button not displayed

How to
1

What do you want to achieve?

Display an Image or an Image Button (Arduino IDE using ESP32 CYD 3.5").

What have you tried so far?

Created an Image and also an Image Button in Squareline Studio 1.5 (and 1.5.1 also) but neither one is displayed.
In the case of the Image Button, I must say that when I click on the place where the image button should be displayed, the action of the button is performed correctly, so it is a problem of displaying it.

I have tried changing the LVGL versions in Squareline Studio and in Arduino IDE to:
- LVGL 8.3.11
- LVGL 9.1.0

Tried also changing some Project Setting in Squareline Studio as follows:

 **Config 1:**
 - Board Group:  Arduino
 - Board:  Arduino with TFT_eSPI
 - Version:  v1.1.3

 **Config 2:**
 - Board Group:  Espressif
 - Board:  ESP-BOX
 - Version:  2.0.0

 **Config 3:**
 - Board Group:  Espressif
 - Board:  ESP WROVER KIT
 - Version:  2.0.0

But none has worked.

Others

  • SquareLine Studio version: 1.5.0 and 1.5.1
  • Operating system: Windows 11
  • IDE: Arduino IDE Version: 2.3.2
  • Target hardware: ESP32 CYD 3.5" 480x320 pixels (ESP32-3248S035)

The image files generated by Squareline Studio have the following struicture at the end:

const lv_img_dsc_t ui_img_1336552729 = {
    .header.always_zero = 0,
    .header.w = 60,
    .header.h = 60,
    .data_size = sizeof(ui_img_1336552729_data),
    .header.cf = LV_IMG_CF_TRUE_COLOR_ALPHA,
    .data = ui_img_1336552729_data
};

and that is giving me 2 errors:

error: ‘lv_image_header_t’ has no member named ‘always_zero’
and
error: ‘LV_IMG_CF_TRUE_COLOR_ALPHA’ undeclared here (not in a function)

I avoided getting the errors by deleting the line with:
.header.always_zero = 0,

and changing header.cf value to:
.header.cf = LV_COLOR_FORMAT_ARGB8888,

With these changes I don’t get compilation errors, but the image button is still not displayed.

2

Hi,

Do you mean that the image is not displayed within SquareLine Studio, or not displayed on the actual hardware? We have tested the image, that displayed correctly. However when placing an image button in SquareLine Studio, the sizing is set to “content” by default, so you need to change it to pixels. You can also place a simple button and set image through styles.

3

Thanks hjani for your reply.

To clarify, the image and image buttons are displayed in Squareline Studio, and simulated correctly, but they are not displayed in the actual hardware (ESP32 CYD). Anyway, tried changing sizing from “content” to “pixels”, but got the same results (not visible in hardware).

It seems the problem is still that somehow Squareline Studio is generating LVGL code which, although seems to be same version in Arduino IDE and Squareline Studio, in reality does not match, as it doesn’t work even with what I mentioned above in my initial post:

  • Removing line: .header.always_zero = 0,
  • Changing header.cf value to: .header.cf = LV_COLOR_FORMAT_ARGB8888,

I think this is a color issue, so that if we are able to fix the color part it would work, as they are not displayed, but the button functionality works and it is recognized when I click on the place where the button should be displayed.

Please let me know of other alternatives/fixes.
Thanks.

4

Anyone else having this issue, or other options/ideas to fix it?

5

In SquareLine Studio, Project Settings, what is the Depth value you have? Other possibilities can be that the touch sensor works, hence you can interact with the “area” where the button should be displayed, but the LCD doesn’t due to incorrect pin configuration or the graphics library doesn’t support the LCD itself. Have you tried to run the LVGL widget demo on this hardware with success?

6

Hi hjani,

Using the following configurations:

SquareLine Studio
Depth = 16 bit
Board Group = Arduino
Board = Arduino with TFT_eSPI
Version = v1.1.3
LVGL = 8.3.11

Arduino
LVGL library by kisvegabor
version 9.2.2.

I was able to show the display button by setting the following line in the “.c” image files as indicated:

.header.cf = 0x0F

which is the same as:

.header.cf = LV_COLOR_FORMAT_RGB888

Thanks.