Trying to display an image in lovelace based on a path stored in a text helper

Configuration
1

I’ve trying to set Home Assistant up to take snapshots from my CCTV system when a motion sensor is triggered, so that I can display them on a Lovelace card rather than accessing them through the camera’s app.

I want to take three pictures a short time apart so that I can see someone when they first come into view, and then again as they get closer to the camera.

I’m recording video as well, but I want something that will load faster if I’m in an area with no wifi and which doesn’t need the camera’s own app to view it.

I used to just email the pictures to myself using the SMTP integration, but my email provider is going to change the security requirements soon to one that’s not compatible with the integration, so I’m looking for another way to view the images.

I’m currently using the code below to tell Home Assistant what I want my snapshots to be called, and where I want to save them.

I’m basically just repeating the same code three different times with a delay in between so that the files have slightly different names based on the time that they were taken being slightly different.

This code tells a text helper what name to give my snapshot


metadata: {}
data:
  value: cam1_1 {{now().strftime("%Y%m%d-%H%M%S")}}.jpg
target:
  entity_id: input_text.snapshot_name_cam1_1
action: input_text.set_value

I have a different helper for each of the three images, and for each camera on my network

snapshot_name_cam1_1
snapshot_name_cam1_2
snapshot_name_cam1_3

I’m using this code to take the snapshot, and to save it to the file name specified in the text helper above

metadata: {}
data:
  filename: /share/snapshots/cam1/{{states('input_text.snapshot_name_cam1_1')}}
target:
  entity_id: camera.cam1_snapshots_clear
action: camera.snapshot

It’s a little bit of a botch, but I already have this up and running on the automation that emails the images, and it’s been doing OK for a couple of years. So I’ve not bothered to change it.

I’m currently using this code to add the file names and paths to an email

  data:
    images:
      - >-
        /share/snapshots/cam1/{{states('input_text.snapshot_name_cam1_1')}}
      - >-
        /share/snapshots/cam1/{{states('input_text.snapshot_name_cam1_2')}}
      - >-
        /share/snapshots/cam1/{{states('input_text.snapshot_name_cam1_3')}}

I thought that I could just use the exact same path in an image card on Lovelace to display the exact same image as I currently do in my email, but I’m obviously doing something wrong as it’s just showing a blank section like it can’t find the snapshot.


type: vertical-stack
cards:
  - type: picture
    image: >-
        /share/snapshots/cam1/{{states('input_text.snapshot_name_cam1_1')}}
  - type: picture
    image: >-
         /share/snapshots/cam1/{{states('input_text.snapshot_name_cam1_2')}}
  - type: picture
    image: >-
         /share/snapshots/cam1/{{states('input_text.snapshot_name_cam1_3')}}
title: Snapshot

Am I formatting the path incorrectly, or is using a path that contains a helper state not possible with the image card.

I’ve tried the same thing with the frigate card and it’s given me the same problem.

Can anyone see where I’m going wrong?

I’m already successfully using this code to capture snapshots and email them to me, the images attach to the email perfectly, but using the same path the images don’t show up in Lovelace.

2

I use the local file integration to do this. It will create a camera entity that shows an image file instead of a live video stream. You can use it with a picture glance card.

3

I may be reading the instructions wrong, but that integration looks like it requires you to put the path to the file in your configuration.yaml file, which would then fix the path, and would only allow you to change the path when you reload the configuration.

I need the path to be read from a helper, so that it always picks up the last three images based on the values set at the time that the snapshots were taken.

I could probably re-write my automation to save two copies of each snapshot. one with a variable name and one with a fixed name, but I’m still confused as to why the code that I have at the moment isn’t doing what I expected.

4

I have not read your all of your post but some of the reasons why it doesn’t work is due to errors in the code.

At some place you are missing a {. And pretty much everywhere you have not enclosed the template in " ".
Correct these things first and see what happens.

5

The missing { is just where I clipped it when I changed the name of the camera to something more generic on this page, it’s in the actual code on my system. I’ve corrected it in the question, good spot. I hadn’t noticed.

adding quotes does nothing, I’ve tried single and double quotes. I’ve already got these paths running for adding images to emails without them.

6

The only way I have been able to display an image, on the local disk short of exposing to the internet using www, is with the local file integration. I thought it was templatable but I guess not.

Every other method seems to require a url. You can template an image entity but that requires a url. You can use a markdown with ![image] but again it needs a url.

Supposedly the frigate card can display a local image but I have yet to figure it out.

7

Well, that makes sense. I tried just using a fixed address and it failed the same way.

I guess that the problem is that either Home Assistant can’t display local images in this way or I’m not formatting the address correctly.

9

OK, so I’ve followed the instructions here

and I’ve created this in my configuration.yaml file

I’ve restarted my system.

camera:
  - platform: local_file
    name: Reolink_Snapshot_3_1
    file_path: /share/snapshots/camera1_1.jpg

How exactly I use this to display an image?

10

Use a picture glance card or any card that accepts a camera entity. You will have an entity camera.reolink_snapshot_3_1

11

That did the trick.

12

OK, cracked it using Local_file and Frigate.

I used this in an automation to capture a snapshot and to save it to the desired directory:

metadata: {}
data:
  filename: /share/snapshots/mysnapshot1.jpg
target:
  entity_id: camera.mycamera_snapshots_clear
action: camera.snapshot
alias: mycamera1

I added this text into into my configuration.yaml, one platform per camera snapshot.

camera:
  - platform: local_file
    name: mycamera1
    file_path: /share/snapshots/mysnapshot1.jpg

  - platform: local_file
    name: mycamera2
    file_path: /share/snapshots/mysnapshot2.jpg

  - platform: local_file
    name: mycamera3
    file_path: /share/snapshots/mysnapshot3.jpg

I then added one frigate card per image to display the images, one frigate card per camera snapshot.

type: custom:frigate-card
cameras:
  - camera_entity: camera.mycamera1