Slideshow Card

Slideshow Card for Home Assistant’s UI LoveLace

GitHub zsarnett/slideshow-card Slide Show Card for Home Assistant's UI LoveLace. Contribute to zsarnett/slideshow-card development by creating an account on GitHub.

Configuration Variables

Name Type Default Description type string Required custom:slideshow-card cards list Required/Optional List of cards Reqires 2 or more cards Only Optional if folder=true style list Optional List of Style attributes arrow_color string Optional Color of the Navigational Arrows, Default: Black arrow_opacity string Optional Opacity of the Navigational Arrows, Default: 1 flush boolean Optional Makes the inner Cards flush with the Slideshow Card, Default: false auto_play boolean Optional Option to turn on/off auto switching of the cards, Default: false auto_delay string Optional Seconds between switching to next card when autoplay=true, Default: 5 folder entity Optional This is for dynamically pulling images from a folder See Dynamic Slideshow

Added Child Card Variables

Name Type Default Description style list Optional List of Style Attributes per Card - This allows for styling of Child Cards

Dynamic Slideshow

This allows you add images to a folder in your WWW folder that contains images you would like the see in the slideshow. Currently, this requires over writing the Folder Sensor so that the client can see the files. I am working on a built in method but wanted to get this feature available.

You will need to create a folder in your config directory named custom_components , within the custom_components folder you will need to create a sensor folder, and within that folder copy the folder.py file.

Create a folder in your config directory named custom_components Create a folder in your custom_components named sensor Copy the folder.py into the sensor folder Add the folder sensor to your configuration.yaml file - sensor - platform: folder_test folder: /config/www/images Create a folder in your WWW folder named images Add your images to this folder Restart Home Assistant Check the sensor.images entity to see if the fileList attribute lists your image files Add a card to your ui-lovelace.yaml - type: custom:slideshow-card folder: sensor.images The other configuration variables are still available to use Refresh your Lovelace Frontend

Any files you add to the folder should automatically get added to the slide show

Installation

Copy slideshow-card.js to <config directory>/www/slideshow-card.js Add slideshow-card as a resource in ui-lovelace.yaml

resources: - url: /local/slideshow-card.js type: js

Example Configuration

Showing Flush Feature along with Auto Play and Styling the Outer Card

- type: custom:slideshow-card flush: true arrow_color: White arrow_opacity: .5 auto_play: true auto_delay: 4 style: 'border-radius': '25px' cards: - type: picture image: /local/images/1.jpg - type: picture image: /local/images/2.jpg - type: picture image: /local/images/3.jpg

Showing Arrow Color/Opacity Features and working with functional cards

- type: custom:slideshow-card arrow_color: var(--primary-text-color) arrow_opacity: .7 cards: - type: glance column_width: 30% entities: - entity: device_tracker.person1 name: Person 1 - entity: device_tracker.person2 name: Person 2 - entity: sensor.house_alarm_sensor - entity: sensor.to_work icon: mdi:car name: To Work - entity: sensor.to_store icon: mdi:car name: To Store - type: glance column_width: 30% entities: - entity: light.light_1 name: Light 1 tap_action: toggle - entity: light.light_2 name: Light 2 tap_action: toggle - entity: light.light_3 name: Light 3 tap_action: toggle - light.office_1 - light.office_2 - type: glance column_width: 30% entities: - light.bedroom_1 - light.bedroom_2 - light.bedroom_3 - light.bedroom_lamp_2

Showing Styling of the Inner Cards

- type: custom:slideshow-card arrow_color: var(--primary-text-color) arrow_opacity: .5 cards: - type: picture image: /local/images/1.jpg style: 'border-radius': '25px' - type: picture image: /local/images/2.jpg - type: picture image: /local/images/3.jpg style: 'border-radius': '10px'

Let me know if you have any questions, issues or suggestions!

EDIT: Added Dynamic Slideshow options