Configure picture-elements card with authenticated image

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.

15 Likes