From c3ca7591f950d8bc669842bbfa67c2cb6642fd61 Mon Sep 17 00:00:00 2001 From: TarheelGrad1998 <47931551+TarheelGrad1998@users.noreply.github.com> Date: Mon, 18 Jan 2021 18:40:14 -0500 Subject: [PATCH] Updates for v3.0 --- README.md | 33 ++++++++++++++++++++++++++++----- 1 file changed, 28 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f0eac7e..b62a046 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,24 @@ # Gallery Card -Custom card for Home Assistant's UI LoveLace which will display images and videos in the style of a gallery. +Custom card for Home Assistant's UI LoveLace which will display images and videos in the style of a gallery. Also supports displaying camera images. This was developed for use alongside the [component for Kuna cameras](https://github.com/marthoc/kuna) but should work with any images/videos, in theory. -New in v2.0 - support for selecting Camera entities in addition to the Files Component entities. +New in v3.0 - support for media source, error logging, slideshow, sorting, and image/camera maximizing. ![Screenshot](https://github.com/TarheelGrad1998/GalleryCard/raw/master/screenshot.png) +## Images/Video sources +To display files from a folder, there are now two options when using v3.0+: +1. [The files component](https://github.com/TarheelGrad1998/files), a separate integration you must install and configure. +2. Using a [media source](https://www.home-assistant.io/integrations/media_source/). Set up the media source per hass and ensure it appears in the media browser. + +#### Pros/Cons +At present, the decision of which to use is up to you, but there are consequences. The files component loads the files from the server on the backend into a sensor. This means when Lovelace loads it is much faster to access files. However, you MUST store your files in the www directory, which means they are essentially publicly available to anyone who can access your HA URL. The media source component only retrieves files when you load the page, which means it appears slower to load. However, those files are protected by Home Assistant's authorization and not publicly available. Additionally, media source files are currently only sorted by file name, where files has more options for date and file size. + ## Installation [![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg)](https://github.com/custom-components/hacs) -To display files from a folder, this card requires [the files component](https://github.com/TarheelGrad1998/files) to be installed/configured. - Now available in HACS, but follow the below to install manually. For more details, see [Thomas Loven's Install Guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins) 1. Place the `gallary-card.js` file under your `/config/www/` folder of Home Assistant (suggest - create a subdirectory for `cards`) @@ -25,6 +31,7 @@ Now available in HACS, but follow the below to install manually. For more detai entities: - camera.front_door - sensor.gallery_images + - 'media-source://media_source/videos/' menu_alignment: Responsive maximum_files: 10 file_name_format: '%YYY_%m_%d_%H_%M_%S' @@ -37,12 +44,28 @@ Whether using the editor or yaml, the following configurations can be used: | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| entities | string | **Required** | A list of entity_id of the files sensor added above or of camera entities. +| entities | string | **Required** | A list of entity_id of a files sensor or camera entity, or the media source path (see below). | title | string | **Optional** | The name to show at the top of the card. | menu_alignment | string | **Optional** | Alignment of the menu (the small list of images/videos to view). Default is if not specified is Responsive (see below) | maximum_files | integer | **Optional** | The number of files to show from each entity in the gallery list. You may want to limit videos to make it perform better and to conserve bandwith. Used in combination with sort (using the config as above, the latest 10 for each entity by date will be shown) | file_name_format | string | **Optional** | The format of the file names (see below). Used in combination with caption_format for the captions below the image/video. | caption_format | string | **Optional** | The format of the caption (see below). Used in combination with file_name_format. +| slideshow_timer | integer | **Optional** | If present and greater than 0, will automatically advance the gallery after the provided number of seconds have passed. +| reverse_sort | boolean | **Optional** | Whether to sort the items with the newest first. The default is true. + +### Media Source +To add a media source, specify the path to the media source folder as an entity. +The format of a media source path should be: media-source://media_source/{your folders}/ + +Additionally, media source entities can have an additional option "recursive" to specify whether to load files only under this folder (the default, false) or from any subfolder under the folder specified. Example: + + ``` + entities: + - path: 'media-source://media_source/surveillance/Carport/' + recursive: true + ``` + +Use caution if your folders are very deep (lots of subfolders) or wide (lots of folders/files) as you could overload the Home Assistant web service. If your UI loops between "Connection Lost" and reloading the page, try removing the recursive option or using a more direct folder path. ### Menu Alignment Available options for Menu Alignment are below: