Using LVGL graphics for information display on LCD - seems to be limited

ESPHome
1

I’m working on an info display/warning sign using ESPHome to drive an LCD display for my workshop door that will be able to warn people to not enter or to use safety glasses or wait for an “Okay” sign to come into the shop.

I’ve been reading up on using LVGL within ESPHome and I have a number of concerns about whether I can do this with ESPHome. Part of this is that, as with much of what can be done in a YAML file, so much seems to focus on everything being loaded or setup at boot, without the ability to make changes later. For instance, if I want to change the URL for an Online Image, I’m not clear if I can do that and load the new image instead.

1 - I’ve been reading about ESPHome Images and Online Images and I’m not clear if the images are loaded at boot or loaded later, as needed to put on the display. I’m concerned about trying to load too many images in an ESP32 on boot. I also want to be able to change the configuration and not have to reboot. Can images be loaded when needed, then cleared to make room for a new image? I did see a reference to being able to clear out an image, but I’m still a bit confused.

2 - If I get input from Home Assistant (or the ESPHome webserver), can I change the URL for an image while ESPHome is running?

3 - What do I need to do with LVGL to wipe the old image off the display and show the new one? I’ve seen comments and references about not using image refresh functions, but I suspect I may be mis-reading that information.

4 - I don’t see any way to add more images after compile time. It looks like I have to decide how many images the system will use and can’t change it. For instance, with some data types, I can add more items to the structure while it’s running. It looks like I’m going to have to define, in the YAML file, how many Images or Online Images I’m going to use and stick to it - so if I include 4 Online Images in the YAML file from the start, unless I recompile, there’s no way to add another one.

5 - I can’t find, in the LVGL, any documentation about making the screen, a widget, or text, flash or blink on the display. Is that possible?

7 - While it’s not an LVGL question, this is one of the issues I’m trying to work out: Does the URL for an Online Image have to be http or https? Could I use an image on a Samba share, so I’m using smb:// instead of http:// for an image URL?

2

For online image you can change the url, the docs are very specific how to do that.

See
https://esphome.io/components/lvgl/widgets#image

That is exactly what online image does.

3

  1. An ESP32 with decent size flash (e.g. 16MB) can hold a lot of images.

  2. Yes, you can supply a new URL. That URL could even come from a text sensor so does not have to be compiled in.

  3. You update an image with lvgl.image.update: - see the docs.

  4. Yes, the number of online images is fixed at compile time, but as per 2 the URL can be dynamic.

  5. Use a script with lvgl.update commands.

  6. MIA

  7. Only http and https schemes are supported.

4

Oops - yes, deleted it on proof reading.

Others - thanks for the info.

The most frustrating part is the limited number created at the start. I’ve encountered this with some other objects I wanted to create - just have to create more than I expect to use.

5

I looked this up. I bought a display-and-ESP32 combo. 8MB RAM. The display is 480x800, which is about 375k for one image (assuming BMP files, so no compression). When I’ve compiled my YAML file and had the system uploaded, it seems to indicate (if I’m reading it correctly) that it’s uploading 1MB of info. I should be able to fit almost 3 images in 1MB (more if they’re simple and compressed).

That’s not unlimited storage, but I would think I could go with a total of 8 images allowed.

6

Not forgetting that they can be changed. You are unlikely to need 8 full screen images at once. In fact you can only display one full screen image at once, any more and you either change the url, or place a different picture at the business end of the url.

7

I’m thinking that over. Part of the issue is that loading images involves a fair amount of extra work for a lot of people. Right now I don’t have any webserver on my LAN, so, to add images, I need a webserver where I can put the images so I can load them with an HTTP connection. (I don’t see a way to upload those images directly through the ESPHome web server interface - be cool if I could!)

One thing I can’t find, at least that I’m not clear about, is if it’s possible to load an image once and have it stay in memory between boots, and even after power-off. It’d be nice to be able to load an image and have it be persistent so, once loaded, no online source is needed anymore.

I also realized I was off on my math for image sizes once I started reading about how ESPHome handles images. I was just thinkin one pixel for size and forgot one pixel can take 1, 2, or 3 bytes. That would make the 480x800 image take over a megabyte for storage.

8

Home assistant could serve the images.

Yes, you can load the images into the firmware. Use image instead of online image.

The docs specify how many bytes per pixel. RGB565 at 2 bytes per pixel should be sufficient.

And do you really need them full screen for something so simple? Surely you want some other info or controls?

9

Okay - still putting it all together in my head and separating what Image does vs. what Online Image does.

So if Home Assistant served the images, are they stored on the HA server? I have more than enough room for that! What’s that feature called, so I can find it easily to read up on it?

I was thinking that - which would make it about 2/3 of a megabyte per image - BUT if I can store them on the HA server, that’s not an issue. (I was originally thinking if I could use the Samba share on my HA server, I could store images there and use them, but since Online Image works with HTTP, not SMB, I had ruled that out.

The easy way, at least at first, is whole screen images. I have friends interested in this and that means making it as easy to use as possible, so just saying the size of the image and leaving it at that avoids issues like having to configure a screen layout. I’m thinking it would be either text or image (which could include text) - on or the other. Eventually, maybe more.

Often not. I MIGHT add a “doorbell” button, so someone can touch it to alert me (a loud knock might distract or startle me) that someone’s outside, waiting to come in the shop, but mostly I want it to turn on as a warning when I’m working with dangerous machinery.