tarheelgrad1998 / gallery-card Goto Github PK

Hi, is it possible to add some kind of transition effect in slideshow mode (slideshow_timer)? I would like to use this card as photo frame in Lovelace.

Hi there 😊
Has this error something to do with your integration or with HACS?

Logger: frontend.js.latest.202112290
Source: components/system_log/init.py:189
First occurred: 30. Dezember 2021, 19:00:13 (91 occurrences)
Last logged: 13:00:13
http://XXX.XXX.X.X:8123/hacsfiles/gallery-card/gallery-card.js?hacstag=28428386732:177:42 Uncaught TypeError: Cannot read property 'tagName' of null

I have a folder for my security camera. A new folder is created in this every day (example: 2022_01_25-2022_01_25). The recordings are kept for one month. Since not everything has to be loaded, it would be nice if only the day-by-day recordings were displayed. Is there a way here? I currently have the problem that there is otherwise a lot of data. I use the media browser variant.

Hello love the frontend so far. I have a question about sorting. I have a main folder, Camera1 and in there I have subfolders for dates, '2021-08-30', '2021-08-29', etc. and then videos with the %H-%M-%S format for the name, '06-36-14.mp4', '19-53-45.mp4'.

In this format the gallery seems to sort it based on only the file name, is it possible to sort by the subfolder name?

This would be the path:

media-source://media_source/local/motioneye/Camera1 (& subdirs)

(subdirs containing the date folders)

I use my main computer to view HA quite often, it would be useful to add left right arrow movement through the photos etc.

Thanks

Fix so that DLNA (and potentially other) media sources are supported

Hi,
Thank you for this nice job !
I'm on a raspi with hass OS.
I installed gallery-card.js and created a new card on the dashboard. I found my sensor freshly made.
I can see the gallery card with 3 pictures but the picture are broken.
If I take a look in Media, i can see the pictures.
I also add this to the configuration

`homeassistant:
  allowlist_external_dirs:
    - "/media/Cam1_SnapShot"`

and trought SSH I made a chmod 777 on a test picture, but without a result.

Do you have any idea ?

Thank you all.

Can you add auto play and loop video to gallery card?
I have it setup as a channel for my cats to watch e.g. cat tv.
it would be great if it could auto play the video I have set up
and loop it. please and thank you :)

Hey, thank you for this awesome card

Can you add an option for a fallback caption so if the date/time could not be parsed (any of the values are NaN), the caption would just fall back to a default value instead of NaN

Hello,

maybe its possible to add support for https://www.home-assistant.io/integrations/media_source/

So its not necessary to put the video files into the "www" folder.

Hi,

Could you please add support for putting the day of the week in captions? This is the '%A' field using the Python date functions.

I use this card to display the last couple of days captures from a doorbell. The full numeric date is unnecessary and ugly, but timestamps only is confusing.

Thankyou!

https://community.home-assistant.io/t/gallery-panel-for-images-videos/122571/147?u=tarheelgrad1998

Hello,

I just discovered that I get this error message in the log everytime I reload a page where the gallery page is included:

http://XX.XX.XX.XX123/hacsfiles/gallery-card/gallery-card.js?hacstag=284283867331:384:83 Uncaught TypeError: Cannot read properties of null (reading 'focus')

Any ideas what this might be?
I have tried removing the lovelace card and put it back without any sucess. The error is still there everytime I refresh.

I started using this gallery card for quite a long time without getting any error message. Can this be related to the new version?

Hello TarheelGrad1998,

First of all, thank you very much for your incredible integration!

Is it possible to add the "videosOnly" parameter?

I use nfs with videos and images, and in my dashboard I would like to filter by videos only.

I don't know if this is very difficult or not but I would really appreciate this feature.

Thanks in advance for your help

Simon

Is there any chance of getting random playback for this?

Is it possible to use an online URL as a media source?

Hi,

Can you let me have multiple lines in the caption?
I put a cleft letter in the caption, but it didn't work.

How do I make it work to see frigate clips/snapshots in this card?

I think it would be useful to have the option to display images with the latest one first, especially for a security camera. Having a config option for this would be nice.

Also, thanks for making this available via HACS.

For the snapshots of my videos in the panel card it is possible to make them bigger by clicking at the bottom right of the video, but for my camera stream I can only see the thumbnail size. I would like it to behave like the picture-entity card: once you click the image/video a pop-up is created

This is very useful, thanks.
Out of interest, would it be possible to make the image "focused on", so that the buttons work immediately rather than having to tap an arrow to get it the keyboard to work?

Originally posted by @elyobelyob in #10 (comment)

Hi, I get the fallowing error:

Logger: frontend.js.latest.202104073
Source: components/system_log/init.py:190
First occurred: 5:00:07 (3 occurrences)
Last logged: 7:00:06
http://XXXX:8123/hacsfiles/gallery-card/gallery-card.js:259:51 Uncaught SyntaxError: Unexpected token ?

Which is:

My config looks like this:

type: 'custom:gallery-card'
menu_alignment: Hidden
entities:
  - path: 'media-source://media_source/local/slideshow' 
    recursive: false
slideshow_timer: '5'

Hello!

First of all - thank you so much for your work.

I more than one year use it when I'm in shop and don't remember what was already bought and stored in the fridge.
Simple camera with sensor on fridge door to take picture when it is opened. Pictures are stored in folder where your components show them in HA.

Updated yesterday after one year of usage and interface become much better - thanx again.

But I have question - why do you not using Folder platform as source for card?
It's standard HA component and it can increase installation base of the Gallery Card.

I've use the files custom-component for a couple of years. I was a few version behind on HA so just updated to 2022.6.5. I display images using the files custom-component displayed via the gallery card. I'm pretty sure I got the files custom component from your previous implementation of gallery-panel. The files custom component used to include the attributes path, filter, number of file, bytes, fileList, sort, unit_of_measurement, icon and friendly_name. After updating to 2022.6.5 the associated sensor entities only include unit_of_measurement, icon and friendly_name. So the gallery card no longer shows any images. Any chance there is a fix somewhere for the files custom component that fixes this issue? I use the card to display images captured with alarm system events so the images need to be displayed based on file date. While the files are named including date and time, they start with the name of the object detected (person, dog, etc.) so there doesn't seem to be a way to use the folder platform to create a sensor with the images sorted by date. Thanks.

I'm using the gallery-card to display a single image from media_source as it seems the only way to do so at this point. It works fine for my purpose. I only have one image and overwrite it when there is camera motion. I always use the same file name so that the node-red process will do the overwrite. As such, I don't need to see the name on the card in Home Assistant. It would be nice to have an option to not show the file name on the card.

Since the last update, all of the thumbnails in the menu which i have set to "Bottom" are covered by the main camera feed. I've tried using Hidden and Top and get the same result.

I am using he Latest chrome and gallery-card from HACS. All cameras are setup using the MotionEye add-on.

Here's what it looks like when the live camera feed is active.

When i select one of the thumbnails, the menu thumbs display correctly.

RAW CODE SAMPLE:

type: horizontal-stack
cards:
  - type: custom:gallery-card
    menu_alignment: Bottom
    entities:
      - camera.front_door
      - path: media-source://media_source/local/Camera1/Videos
        recursive: false
    maximum_files_per_entity: false
    show_reload: true
    maximum_files: '5'
    view_layout:
      position: main
  - type: custom:gallery-card
    menu_alignment: Bottom
    entities:
      - camera.camera2
      - path: media-source://media_source/local/Camera2/Videos
        recursive: false
    maximum_files_per_entity: false
    show_reload: true
    maximum_files: '5'
    view_layout:
      position: main
  - type: custom:gallery-card
    menu_alignment: Bottom
    entities:
      - camera.camera3
      - path: media-source://media_source/local/Camera3/Videos
        recursive: false
    maximum_files_per_entity: false
    show_reload: true
    maximum_files: '5'
    view_layout:
      position: main

it would be nice to automatic reload the card by a trigger or by following a folder and waiting for new images

Hi

error in card:

Path does not exist. media-source://media_source/local/front_drive/plant.jpg

yaml:

type: custom:gallery-card
entities:
  - path: media-source://media_source/local/front_drive/plant.jpg

Run this in a browser and it produces the required image

http://192.168.68.130:8123/local/front_drive/plant.jpg

Is there anything else I can tell you?

Thanks

It keeps loading forever to eventually tell me the media directory doesn't exist, when it does, recordings are stored under folders in the recordings folder created by frigate automatically.

It keeps complaining directory does not exist but under the media it literally does, as you can see in the screenshot the recordings folder does exist, it goes to multiple folders from each day but I have the recursive setting enabled so this shouldn't be an issue.

type: custom:gallery-card
menu_alignment: Bottom
entities:
  - path: media-source://media_source/local/frigate/recordings/
    recursive: true
show_reload: true

Hello.

Nice plugin:) but im wondering if its possible to add a slideshow function?

Hope to hear from you,

Greetings justin

Hi.
I've got the card working well on my PC but when I cast it to a Chromecast, the photos don't show up(just black). A local camera feed shows up fine on the card, so I know it's casting fine, but .JPG's don't work.
Any ideas?
Thanks very much.

I've configured this card with 4 cameras. All are linked through the Xeoma integration and otherwise work just fine.

I've tried accessing this card both through a web browser and the mobile app (and on a few tablets for that matter), and it seems that if the card loads, sometimes it works perfectly. Other times, I'll click the mini image to switch the big one, and it'll change the text, but the camera image doesn't change, then the whole system slows down until I close whatever had the card open (either the browser tab, or the app).

It would be really nice if there was an option to update the image at an interval rather than streaming all the entities continuously which I suspect is sucking an enormous amount of memory and causing performance issues.

The card was working great in 0.116.2, but it is broken in 0.116.4

HA complaining about custom component "gallary-card" not found.

Back to 0.116.2 until this is resolved.

Thanks.

I'm using this format for my video captions: %d/%m %H:%M but in the card it only has 1 digit for day, month, hours and minutes (instead of two), so if the file has this name 2021_04_15_09_57 the caption shows as: 5/4 9:7 [00:16], instead of 15/04 09:57.

This is my yalm config:

type: 'custom:gallery-card'
entities:
  - camera.front_cam
  - path: 'media-source://media_source/local/folder-name'
    recursive: false
maximum_files: '10'
file_name_format: '%YYY_%m_%d_%H_%M'
caption_format: '%d/%m %H:%M '
menu_alignment: Responsive

Also, if the filename has the hour as 1 digit (9_57 instead of 09_57) the card shows the caption as NaN:NaN.

The rest of the card works great though! really happy with your work.

I'm capturing both video and screenshots, but would like to only display the screenshots (i.e. show only images, not videos).

I would like to render a horizontal list of thumbnails, mostly for a non-interactive display. Having the maximized picture takes up a lot of real-estate. Not sure how doable that is, that the navigation is done only through thumbnails, without having a big image.

Any way to override the height?

I could make separate issues for these, but not sure what can be implemented and what not. I can also lend a hand.

HI ... fantastic card...many thanks.

On the second day of using it (to show movement snapshots from my camera) I noticed that today's pics are shown at the bottom of the list. I have the reverse sort box ticked.

Although the newest day is shown at the bottom, within a given day, the pics are sorted correctly with the newest time first.

If I look at the pics in media browser, they are listed in newest date/oldest time order. The same happens in file editor. The pic names are generated in node red and are datestamped as follows ... {"filename":"/media/snapshot_{{now().strftime('%H:%M %d-%m-%Y')}}.jpg"} ... can't imagine this affects how they are listed?

Not sure if this is an issue with how I have home assistant set up or if it is a card issue?

Would be very grateful for any advice.

Many thanks indeed, Chris.

In Chome web browser, not all video thumbnails are rendered. All files are same format, but randomly some files are not showing thumbanails and video can not be played.

I'm using media source.

Interesting thing is that in Android app as well as IOS app, everything works.

Looks like something to do with scroll any lazy load.

Please add HACS support.

Hi,

I'm on

I get the below error on my Home Assistant log since I have added your great card;

Logger: homeassistant.helpers.frame
Source: helpers/frame.py:77
First occurred: 21:43:00 (1 occurrences)
Last logged: 21:43:00

Detected integration that calls media_source.async_resolve_media without passing an entity_id. Please report issue for media_source using this method at homeassistant/components/media_source/init.py, line 147: report("calls media_source.async_resolve_media without passing an entity_id")

Or is there a problem with my card config?

When I now press the selected photo, the photo will show 'fullscreen', but is showen smaller than the actual photo is.
Is it possible to make the fullscreen photo bigger?

Button to manually refresh resource list
Config to show/hide?
Config to refresh on load?

Do you mean, so it changes image every so many seconds automatically? Yeah, that's doable, I'll add it to my list. :)

Originally posted by @TarheelGrad1998 in #1 (comment)

How is the feature coming along. It would be such a nice feature to have.

The documentation for caption_format has the %d, %m, and %H options described as the 2-digit day, month, and hour respectively.

However, when using the format as "%d/%m/%YYY %H:%M" which I would expect to format as "04/09/2021 09:04" for a video from today at 09:04 AM, it actually returns "4/9/2021 9:04".

Is there any way I can have it formatted the way I want?

I can not see the gallery card on an ipad mini 2 using the companion app. I get "custom element doesn't exist" error.
It's working fine everywhere else (iMac browser and app, iPhone app, Android)
I tried to remove and reinstall the app with no success. What could be wrong?

Are you aware of a way to integrate the media from the Unifi Protect integration into the card? I would love to use this for my Unifi cameras and have an integration similar to https://github.com/dermotduffy/frigate-hass-card.

I've tried multiple media-source paths but can't quite seem to figure it out.

Is it possible to mute all video files?

I have the card setup to auto sync from a collection of photos/videos and some have audio. I like the auto play, but changes to the volume control are forgotten on rotation.

Thanks for a great project :)

Error message:

Invalid path. media-source://media_source/video/Japan

the media browser in HA does find the videos, URL is:

http://192.168.80.21:8123/media-browser/browser/app%2Cmedia-source%3A%2F%2Fmedia_source/%2Cmedia-source%3A%2F%2Fmedia_source%2Fvideo%2F./%2Cmedia-source%3A%2F%2Fmedia_source%2Fvideo%2FJapan

This translates to media-source://media_source/,media-source://media_source/video/./,media-source://media_source/video/Japan without UTL-Encoding, so the path media-source://media_source/video/Japan/ seems to be correct

It's HA Supervised installation (latest 2022.10.x) on Debioan, the "real" path is
root@homeassistant:/usr/share/hassio/media/video/Japan, the HassIO docker container sees this as /media/video/Japan

And yes, there are videos in there...

so, what's wrong here?

type: custom:gallery-card
entities:
  - path: media-source://media_source/video/Japan
    recursive: true
title: Japan Videos
show_reload: true
menu_alignment: responsive

The capabilities of this great gallery card could be expanded a great deal if tap actions were implemented on the main image.

I currently create both snapshots and recordings locally on HASS, but find that they often miss out on key events due to the 10+ second streaming lag (even with maximum "lookback" enabled).

These recordings are simultaneously captured on an NVR and/or camera SD-Card which could be played back when provided an appropriate URL with a given time stamp. This is what a tap action on the main image could enable - play back a recording from the NVR. (Default single tap could still play the recording as it does now).

This could also allow changing the media source to the snapshot directory instead of mp4's for much faster gallery display, and still allow playing the video's (assuming the filename provides the appropriate time stamp info). Then there would be no need to capture recordings on HASS at all, just snapshots.

Incidentally, there are 3 other feature requests on this github that could potentially be satisfied via tap actions (URL path, Service Call).

Hi,

Absolutely awesome dashboard card.

Question is, is it possible to disable the tap to fullscreen action. Far too often when I'm clicking next image or using companion app zoom it triggers into full screen. I would be happy to use full screen but it doesn't display correctly as I'm using this card further down in a lovelace view and the image requires me to scroll all the way to the top of the page. Ideally but not essential would be to have a small browser mod style popup but for now any way to edit the module to disable will do.

Thanks.