luixal/lovelace-media-source-image-card

A Lovelace custom card for showing images stored in Media Source

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

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.

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

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

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

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.

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.

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"

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?

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.

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