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

33

I could really use some help, because I cannot get this to work. The logs tell me it gets the image and there are errors, but it never displays.

I know the display is working…text and other things show.

http_request:
  useragent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/601.3.9 (KHTML, like Gecko) Version/9.0.2 Safari/601.3.9
  timeout: 10s
  verify_ssl: false

wifi:
  networks:
    - ssid: !secret wifi_ssid
    - password: !secret wifi_password
  on_connect:
    - component.update: cover_image

display:
  - platform: it8951e
    id: m5paper_display
    cs_pin: GPIO15
    reset_pin: GPIO23
    busy_pin: GPIO27
    rotation: 0
    reversed: False
    update_interval: 1000ms
    pages:
      - id: page1
        lambda: |-
          it.image(10, 10, id(cover_image));

#960x540 16 level
online_image:
  - id: cover_image
    url: https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png
    format: png
    type: RGBA
    on_download_finished:
      - display.page.show: page1
      - component.update: m5paper_display
34

Will the image or image URL ever change? If not then you could provide a URL to a regular image component to be downloaded a build time and save some headache.

Beyond that suggestion I don’t have much to offer to help other than some guesses… could the image size be part of the issue? It could be worth trying a much smaller image.

35

Yes it will change, also I am out of space as the compile with the images is too large and esphome doesnt or cannot use the sd card on the device. If I could access the card it might be ok, but pulling into psram is the only option I seem to have.