luixal / lovelace-media-source-image-card

A Lovelace custom card for showing images stored in Media Source

Lovelace Media Source Image Card

A Lovelace custom card for showing images stored in Media Source and, optionally, toggle an entity when clicked.

Description

The cards included in Home Assistant Lovelace for showing images only allow you to show images that are publicly accessible (i.e: url of an image from the internet). This is a privacy concern to me as I want to show pictures of my house and garden and even members of my family.

This cards allows you to store your images in a the media source module of Home Assistant and show them in Lovelace dashboards without having to make them public.

It can also toggle an entity if provided in configuration, like a light, switch, etc.

Installation

Manual Instalation

1. Download the media-source-image-card
2. Place the file in your config/www folder
3. Include the card as a resource through the UI (panels page) or using some code like this:

title: Home
resources:
  - url: /local/button-card.js
    type: module

4. If not already there, upload an image going to the Media Browser page in Home Assistant, inside the "My media" folder.
5. Include the card code dashboard by selecting the card type itself or just a manual card:

  type: custom:media-source-image-card
  image: media-source://media_source/local/my_image.jpg # put your image name here
  entity_id: switch.my_light_switch  # this entity is optional

Using HACS

This card is available as a HACS custom repository, you can follow HACS guide for custom repos, basically these are the steps to follow:

1. Go to the frontend section in your Home Assistant's HACS page.
2. Click on the 3 dots in the top right corner.
3. Select "Custom repositories"
4. Add the URL of this repo.
5. Select the correct category.
6. Click the "ADD" button.

Configuration

This card is quite simple so there are only a few options:

Name	Type	Default	Description
type	string	custom:media-source-image-card	REQUIRED
image	string		REQUIRED The path to the image in media source format. i.e: media-source://media_source/local/my_image.jpg
entity_id	string		The entity you want to toggle when card is clicked
apply_grayscale	boolean		If true applies a grayscale on the image when entity is off
forced_refresh_interval	integer		Number of seconds to force an image refresh
tap_action	string	toggle	Action to perform on click. One of none, toggle or call-service. See actions below

Actions

By default, when the card is clicked, it would toggle the entity. You can customize these action to be one of this:

• none: nothing happens
• toggle: the entity is toggled (default behaviour)
• call-service: a service is called with a custom configuration

Call Service

This is a simple call service example:

type: custom:media-source-image-card
image: media-source://media_source/local/banana.png
entity_id: input_boolean.boolean_test
apply_grayscale: true
tap_action:
  action: call-service
  service: input_boolean.turn_on
  target:
    entity_id: input_boolean.boolean_test

If no target is provided, the entity_id field is used.

Templating

You can use templates in the image field. In fact, you can use jinja2 and javascript templates.

The main difference is that jinja templates are rendered in the server and tend to hit perfomance overall while javascript templates run locally in the browser and need no additional messaging with the server.

Personally, I prefer javascript templates :)

Jinja2 Templates

You can use jinja templates like this:

type: custom:media-source-image-card
image: |
  media-source://media_source/local/{{ states('input_text.image') }}
entity_id: input_boolean.boolean_test
apply_grayscale: true
tap_action:
  action: call-service
  service: input_boolean.turn_on
  target:
    entity_id: input_boolean.boolean_test

Javascript Templates

You can also provide a javascript template like this:

type: custom:media-source-image-card
image: |
  [[[
    return `media-source://media_source/local/${ hass.states['input_text.texting'].state }`;
  ]]]
entity_id: input_boolean.boolean_test
apply_grayscale: true
tap_action:
  action: call-service
  service: input_boolean.turn_on
  target:
    entity_id: input_boolean.boolean_test

You need to enclose your function between triple brackets ('[[[' and ']]]'). The variables available in the function are:

Variable	Description
hass	The whole hass object where you can access everything
states	The states object inside hass
user	The object with information about the logged user
config	The card config itself

Examples

Simple Image

This example only shows an image:

  type: custom:media-source-image-card
  image: media-source://media_source/local/20230919_145924.jpg

Image with switch control

Shows and image. When clicked and toggles a switch on/off:

type: custom:media-source-image-card
image: media-source://media_source/local/20230919_145924.jpg
entity_id: switch.light_switch

Image with switch control applying grayscale

Shows and image. When clicked, toggles a switch on/off and applies grayscale when it's off:

type: custom:media-source-image-card
image: media-source://media_source/local/20230919_145924.jpg
entity_id: switch.light_switch
apply_grayscale: true

Image with switching a boolean input helper using a service call

type: custom:media-source-image-card
image: media-source://media_source/local/banana.png
entity_id: input_boolean.boolean_test
apply_grayscale: true
tap_action:
  action: call-service
  service: input_boolean.turn_on
  target:
    entity_id: input_boolean.boolean_test

Random image using just a template

This will refresh the image every 10 seconds, resolving the template again and showing a random image in a X.png format, where X is a number.

type: custom:media-source-image-card
image: |
  media-source://media_source/local/{{ '%02d' % range(1, 20) | random }}.png
entity_id: input_boolean.boolean_test
apply_grayscale: true
forced_refresh_interval: 10
tap_action:
  action: call-service
  service: input_boolean.turn_on
  target:
    entity_id: input_boolean.boolean_test

lovelace-media-source-image-card's Issues

Compatiility with browser mod tap action fire-dom-event

I am not sure if this is something that can easily be implemented, however, it would be amazing if this card worked smoothly with browser mod. What I am trying to achieve is to get a tap action fire-dom-event working from your lovelace-media-source-image-card. I am running version 3.0 of this frontend integration via HACS.

Lets go straight to an example; When I hit the following button a sounds gets played:

type: custom:button-card
name: |
  [[[ return `Pokémon No.${states['sensor.random_pokemon'].state}`; ]]]
tap_action:
  action: fire-dom-event
  browser_mod:
    service: script.play_sound_based_on_number
    data:
      browser_id: THIS
      number: '[[[ return states[''sensor.random_pokemon''].state; ]]]'

However, I get an error/warning and no sound playing when I try it with your card, as follows:

type: custom:media-source-image-card
image: >-
  media-source://media_source/local/test{{ states('sensor.random_pokemon')
  }}.png
entity_id: sensor.random_pokemon
forced_refresh_interval: 10
tap_action:
  action: fire-dom-event
  browser_mod:
    service: script.play_sound_based_on_number
    data:
      browser_id: THIS
      number: '[[[ return states[''sensor.random_pokemon''].state; ]]]'

I get the following error, my best guess is that it defaults to toggle when it sees the unrecognized fire-dom-event.

Log details (WARNING)
Logger: homeassistant.components.homeassistant
Source: components/homeassistant/__init__.py:137
integration: Home Assistant Core Integration ([documentation](https://www.home-assistant.io/integrations/homeassistant), [issues](https://github.com/home-assistant/core/issues?q=is%3Aissue+is%3Aopen+label%3A%22integration%3A+homeassistant%22))
First occurred: 10:58:44 PM (46 occurrences)
Last logged: 11:29:50 PM

The service homeassistant.toggle does not support entities sensor.random_pokemon

If you would like me to perform further testing please let me know!

___ edit ___
Some additional info about the fire-dom-event I am (trying) to perform can be found here.
It shows the difference between a browser mod server call and a browser call. And given the "browser" nature of this custom image card, implementing this would fit in very nicely with the card, I would say.

Picture Name String Stored in Entity?

Thank you for your source image card. How can I use a picture name stored in an Entity?

The picture name is stored in:
sensor.mqtt_12345_blueiris_front_lower_cam_image_path

This works

type: custom:media-source-image-card
image: >-
  media-source://media_source/local/camalerts/Alerts/IFU.20231101_100328.111999.3-1.jpg
entity_id: input_boolean.cam_lower_front_msg_active
apply_grayscale: false

This does not work

type: custom:media-source-image-card
image: >-
  media-source://media_source/local/camalerts/Alerts/{{states("sensor.mqtt_12345_blueiris_front_lower_cam_image_path")}}
entity_id: input_boolean.cam_lower_front_msg_active
apply_grayscale: false

bug: `media-source://` can't be a part of template

this works:

image: media-source://{{ states("sensor.photo") }}

with template sensor's template set to

media_source/local/share/{{ '%02d' % range(0, 20) | random }}.jpeg

this does not:

image: {{ states("sensor.photo") }}

with template sensor's template set to

media-source://media_source/local/share/{{ '%02d' % range(0, 20) | random }}.jpeg

freature request: add service for image update

I'd like to have a service to call from automation to update media-source-image-card:

type: custom:media-source-image-card
image: "media-source://media_source/local/gallery/{{ '%02d' % range(0, 20) | random  }}.jpeg"

Request: Add tap_action

Thanks for writing this custom card! I got here from this post:
https://community.home-assistant.io/t/image-in-media-browser-on-picture-card/292457/14

Not sure how difficult this would be to implement, but it would be great if this card supported tap actions, ie. to be able to call a service with a tap on the image as supported in other cards. Something like:

tap_action:
action: call-service
service: camera.turn_on
data: {}
target:
entity_id: camera.my_camera

Feature suggestion - folder browser

At the moment I use this card as a way to browse through the pictures in a folder. An automation saves pictures to that folder on a trigger. This has many applications like doorbells, security cameras and others. The way I use it is by defining a folder sensor in my configuration.yaml linked to that folder. I use the attributes of that sensor - the file_list specifically and an input_number helper in a the template that indicates the image location on this card. With two buttons I increment or decrement the input_number helper so I can change the index for the file_list and thus show a different picture. I do not have the coding skills required for java or python (more of a vb.net hobbyist) but I think it would be nice to be able to define a folder and browse through the files just by filling in the details in the card config.

My working card config looks like this
type: custom:media-source-image-card
image: >-
media-source://media_source/local/Doorbell/motion/{{((state_attr("sensor.motion","file_list")|sort(reverse=true))[int(states('input_number.doorbell_picture_number'))])[23:]}}
entity_id: input_number.doorbell_picture_number

double media-source in the url

What is the reason for doubling media-source?
Could it be media-source://share_name/image.jpeg instead of media-source://media-source/local/share_name/image.jpeg?

Question!

This is not a issue but a question. Do you plan to include in the future support for video files?
Btw this card is great.

doesn't seem to work for non "local" media-sources

to be clear, the files are still local in homeassistant. it just mean it's not specified under media-sources://media_source/local/...

i'm specifying:
image: media-source://media_source/photos/test.jpg

in my configuration.yaml i have this:

  media_dirs:
    media: "/media"
    photos: /media/cc_haimages

w/ samba i have a test.jpg on \homeassistant\media\cc_haimages\test.jpg

but the image doesn't show.

i do see this image using other cards e.g. custom:gallery-card and browser_mod
so i'm pretty sure i've got the config right.. but this media-source-image-card doesn't seem to be able to find the image.

note that it does recognize the path. if i change "photos" to "bogus" it properly complains that no such folder exists.

Refresh picture

I aim to use the card to view pictures stored in a folder. This is possible because the card supports templating. I use a input number to change the picture. The problem is that even though the picture address string changes in the desired way, the image itself does not refresh. Please add an option to refresh when image address/ location is changed.

Template the full image path

I want to address a minor issue I came across.
When I template only part of the image path, the card works as expected. Example:

type: custom:media-source-image-card
image: media-source://{{ states('sensor.image_path') }}

where sensor.image_path = "media_source/local/test.png"

However, when I try to template the full path the card does not work. Example

type: custom:media-source-image-card
image: {{ states('sensor.image_full_path') }}

where sensor.image_full_path = "media-source://media_source/local/test.png"

In theory, they both get the same path, but the editor gives me an error right away before I can save the card. This is definitely not a major issue as you can just format the input as the first example. But I figured I would share it. I am on the latest version of the card.