How to display an online_image:

ESPHome
21

Yep, its a dependency issue. It seems that in addition to:
[core-ssh www] apk add --update imagemagick

… you need to add the JPEG library:

[core-ssh www] apk add --update libjpeg

Now, I have got my snapshots as .PNGs and they display on the ESPHome ili9xxx TFT display. Yay…

Regards, and thanks for all the help and suggestions, M.

22

Hi, I followed your discussion which I find great but I don’t know this program very well. Is this an image folder? convert myImage.jpg myImage.png

23

I’m sorry but my memory of that project is fading fast. I gave it up as a bad job because the quality on the display just was not good enough. I mention this because I’m not sure I can help any more than by saying this:

Convert is the ImageMagick command that I used to convert myImage.jpg (which is the only format that Home Assistant HA Camera snapshot service produces) to myImage.png (which is the only format that the ESPHome display will accept). So, no, the names refer to files and not folders.

But as I say, the whole project was a “rabbit hole” - one hurdle after another. In the end I solved my problem with an AS5600 Magnetic Position sensor instead of trying to remotely viewing the LPG cylinder gauge.

Regards, M.

1 Like
24

:+1:I am working on a project to display snapshots from my camera on Frigate.

25

I use esphome LVGL for now we can only display an image downloaded on online_images

26

Can you give an example of how to do this? I am struggling to figure it out.

I think I’m on the right track by creating a text_sensor that gets the URL, but I am not sure how to use that URL in an online_image.

text_sensor:
  - id: cover_image_url
    platform: homeassistant
    entity_id: image.cover_image
    attribute: entity_picture
    on_value:
      - online_image.set_url:
          id: cover_image
          url: cover_image_url # <-- how do I properly set this
      - component.update: cover_image

online_image:
  - id: cover_image
    url: cover_image_url # <-- as well as this
    format: png

I feel like I’m missing something super basic here.

27

what system are you on, because if you are on eshome LVGL it’s a little different

28

I ended up getting something to work thanks to help on the Discord server.

Essentially just need this:

text_sensor:
  - id: my_image_url
    platform: homeassistant
    entity_id: image.my_image
    attribute: entity_picture
    filters:
      - prepend: http://192.168.2.10:8123
    on_value:
      - online_image.set_url:
          id: my_image
          url: !lambda return id(my_image_url).state;

online_image:
  - id: my_image
    url: http://192.168.2.10:8123/static/icons/favicon-192x192.png # never gets shown
    format: png
    use_transparency: true
    type: RGB565
    resize: 200x200
    on_download_finished:
      - lvgl.image.update:
          id: my_image_widget
          src: my_image

The thing I was missing was the lambda to set the URL as well as lvgl.image.update to have the widget actually display the image. Unfortunately this setup doesn’t work well as my devices all crash and reboot if more than one image is downloaded at once, so instead I have my widgets setup to download the image only when tapped, which isn’t ideal.

29

unless you do a lambda for the next or return images

30

In my setup I have a yaml file with the sensors in it as well as another with the widget in it, and they get included n times as Packages. Because of that, I can’t hard-code it so that one download finishing triggers another to start and chain it all.

31

try this little program which unfortunately on windows it is really great FolderMill

32

This small program allows you to convert images into png and replace the name of the image that you have chosen in advance, you will choose a folder so that online image can recover the image