👆 Swipe Glance Card

Add a 👆Swipe Glance Card to your Home Assistant set-up. It may be useful for you if want glance and swipe on your mobile device.

Install

Install swipe-glance-card.js as a module

resources:
  - url: /local/swipe-glance-card.js
    type: module

For more information, see Thomas Loven's Lovelace-Plugins guide.

Swipe Glance Card Configuration

The 👆Swipe Glance Card has the same configuration variables as the default Lovelace Glance Card. I highly recommend using Thomas Loven's auto-entities plugin to auto-populate and sort the entities and his card-mod plug-in for styling (not all styling options are supported at this time).

Example simple configuration

entities:
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
title: Vanilla Swipe Glance Card
type: 'custom:swipe-glance-card'

Example configuration with card-mod plugin, no title, no state

entities:
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
  - entity: sun.sun
style: |
  ha-card {
    font-variant: small-caps;
  }
  .card-header {
    font-size: 16px;
  }
show_state: false
type: 'custom:swipe-glance-card'

Example configuration with auto-entities plugin

card:
  title: Swipe Glance Card with Auto-Entities
  type: 'custom:swipe-glance-card'
filter:
  template: |
    {{ states|map(attribute='entity_id')|join('\n') }}
type: 'custom:auto-entities'

Example configuration to toggle on a hold action

card:
  show_state: false
  title: Lights
  type: 'custom:swipe-glance-card'
filter:
  include:
    - domain: light
      options:
        hold_action:
          action: toggle
type: 'custom:auto-entities'

Example configuration with navigation arrows

card:
  swiper_parameters:
    navigation:
      nextEl: '.swiper-button-next'
      prevEl: '.swiper-button-prev'
  title: Swipe Glance Card with Navigation
  type: 'custom:swipe-glance-card'
filter:
  template: |
    {{ states|map(attribute='entity_id')|join('\n') }}
type: 'custom:auto-entities'

Example configuration with pagination bullets

card:
  swiper_parameters:
    pagination:
      el: '.swiper-pagination'
  title: Swipe Glance Card with Pagination
  type: 'custom:swipe-glance-card'
filter:
  include:
    - domain: binary_sensor
    - domain: climate
    - domain: cover
sort:
  method: name
type: 'custom:auto-entities'

Example configuration with progression bar

card:
  swiper_parameters:
    scrollbar:
      el: '.swiper-scrollbar'
      dynamicBullets: true
  title: Swipe Glance Card with Scrollbar
  type: 'custom:swipe-glance-card'
filter:
  include:
    - domain: binary_sensor
    - domain: climate
    - domain: cover
sort:
  method: name
type: 'custom:auto-entities'

Known Issues

Breaks lovelace edit mode.
Does not currently support card-mod ShadowDom styling (i.e., :host styles).

Author

Duy Nguyen

Acknowledgments

This card integrates the excellent SwiperJS plugin, and supports many of the options of the API.

I cribbed a lot of these persons' repositories (especially Bram's swipe-card plugin) for ideas and best practices:

License

This project is licensed under the MIT License - see LICENSE.md for more information.

dooz127 / swipe-glance-card