Configure picture-elements card with authenticated image

Configuration Frontend
1

Hi,

is there any way I can configure an image that is hosted within the /media folder for the picture elements card? I know that I can use hosting but that will expose the media file to the whole web to see, since it doesn’t use authentication.

When I right click an image from the media browse and copy the url authSig is added as an attribute, but that Sig Key does expire. When I try to access the file without that authSig attribute I get an unauthorized message Why isn’t homeassistant just using a header token, when accessing media files?

Is there any other easy way I can host a media file with authentication? I know I could setup nginx, but that can’t be the only way, right? Shouldn’t there be an easier solution for something as basic?

Hope someone here can help.

2

So I finally got around to investigate this some more and I finally found a solution.

Quick Recap: The Picture Elements documentation tells us that to use locally hosted image we have to use hosting.
grafik

However if we follow that advice the file is accesible for the whole internet without authentication!

I want to have a detailed 3D floor plan of my appartment in a picture elements card like the many awesome examples displayed in this thread. And call me crazy, but I don’t want you weirdos on the internet to easily get a good look at what I have inside my appartment :wink:

The solution is the local file camera integration.

  1. Upload the image in media
    grafik

  2. Add a local file camera to your configuration.yaml and change file_path to to point to the image e.g.

camera:
  - platform: local_file
    file_path: /media/floor_plan.png
    name: "Appartment"
  1. Restart Home Assistant
  2. Now in the picture elements card change image to “camera_image” and point into to your camera created in step 2 e.g.
type: picture-elements
elements:
  - type: state-icon
    entity: switch.1234_on_off
    icon: mdi:lightbulb
    tap_action:
      action: toggle
    style:
      top: 50%
      left: 50%
camera_image: camera.appartment

You now have your floor plan or image hosted in a way that only authenticated users can access the image file.

The “Local file” integration also allows us to easily update the camera image via Service local_file.update_file_path which opens up a whole lot of possibilities (e.g. have multiple images with time of day rendereing and update the camera every hour or so).

camera_image can also be used for image elements in the card.

Maybe someone else who minds their privacy like I do, will find this usefull.

12 Likes
3

Thank you so much for posting this!

I have several cameras doing snapshots of my house and I want to display the images on my HA dashboard. But obviously I didn’t want them exposed on the www.

I was reading HA documentation: http file hosting and media source but none of them mention the local file integration that you mentioned. Took me a few searches to find your post. I hope HA documentation has a “related” topics section so that we can find similar integrations more easily.

Thanks again!

4

In my use-case I have a locally stored mp4 (from my blink video door bell latest ring) which I want to display in a lovelace card.
I tried to use this local camera:

camera:
  - platform: local_file
    file_path: /media/video/blink/blink_klingel_latest.mp4
    name: "Klingel Latest Video"

i can play the video via the media tab, but have no clue how to integrate it into a dashboard.
Any idea?

5

I have been using this gallery-card, which can be installed via HACS.

My setting in the dashboard:

type: custom:gallery-card
entities:
  - path: media-source://media_source/local/ring-videos
    recursive: false
show_reload: false
menu_alignment: hidden
maximum_files: '1'

(Note: looks like the author of gallery-card won’t be updating it anymore, and has been using frigate card)

1 Like
6

Works like a charm :slight_smile: