Lovelace: Swiper card


#1

I created a card with swiper, that lets you flick through multiple cards.

You can use (almost?) all options of swiper, these can be found here.

More info can be found in the repo: https://github.com/bramkragten/custom-ui/tree/master/swipe-card

A few config examples:

image

Full width cards with scrollbar:

      - type: custom:swipe-card
        parameters:
          spaceBetween: 8
          scrollbar:
            hide: false
            draggable: true
            snapOnRelease: true
        cards:
          - type: sensor
            entity: sensor.temperature_158d0001720278
            name: Temperatuur
            line_width: 8
            line_color: '#FF6384'
          - type: sensor
            entity: sensor.humidity_158d0001720278
            name: Luchtvochtigheid
            line_color: '#36A2EB'
            line_width: 8
          - type: sensor
            entity: sensor.illumination_f0b429cc4c88
            name: Licht
            line_color: '#ffce57'
            line_width: 8
          - type: sensor
            entity: sensor.pressure_158d0001720278
            name: Druk
            line_color: "#4BC0C0"
            accuracy: 8
            line_width: 8

image

Coverflow with pagination:

      - type: custom:swipe-card
        card_width: '185px'
        start_card: 2
        parameters:
          effect: 'coverflow'
          grabCursor: true
          centeredSlides: true
          slidesPerView: 'auto'
          coverflowEffect:
            rotate: 50
            stretch: 0
            depth: 100
            modifier: 1
            slideShadows : true
          pagination:
            type: 'bullets'
        cards:
          - type: sensor
            entity: sensor.temperature_158d0001720278
            name: Temperatuur
            line_width: 8
            line_color: '#FF6384'
          - type: sensor
            entity: sensor.humidity_158d0001720278
            name: Luchtvochtigheid
            line_color: '#36A2EB'
            line_width: 8
          - type: sensor
            entity: sensor.illumination_f0b429cc4c88
            name: Licht
            line_color: '#ffce57'
            line_width: 8
          - type: sensor
            entity: sensor.pressure_158d0001720278
            name: Druk
            line_color: "#4BC0C0"
            accuracy: 8
            line_width: 8

image

Navigation, keyboard and progressbar:

      - type: custom:swipe-card
        card_width: '80%'
        parameters:
          centeredSlides: true
          slidesPerView: 'auto'
          spaceBetween: 8
          pagination:
            type: 'progressbar'
          navigation:
          keyboard:
            enabled: true
            onlyInViewport: true
        cards:
          - type: sensor
            entity: sensor.temperature_158d0001720278
            name: Temperatuur
            line_width: 8
            line_color: '#FF6384'
          - type: sensor
            entity: sensor.humidity_158d0001720278
            name: Luchtvochtigheid
            line_color: '#36A2EB'
            line_width: 8
          - type: sensor
            entity: sensor.illumination_f0b429cc4c88
            name: Licht
            line_color: '#ffce57'
            line_width: 8
          - type: sensor
            entity: sensor.pressure_158d0001720278
            name: Druk
            line_color: "#4BC0C0"
            accuracy: 8
            line_width: 8

image

Default:

      - type: custom:swipe-card
        cards:
          - type: sensor
            entity: sensor.temperature_158d0001720278
            name: Temperatuur
            line_width: 8
            line_color: '#FF6384'
          - type: sensor
            entity: sensor.humidity_158d0001720278
            name: Luchtvochtigheid
            line_color: '#36A2EB'
            line_width: 8
          - type: sensor
            entity: sensor.illumination_f0b429cc4c88
            name: Licht
            line_color: '#ffce57'
            line_width: 8
          - type: sensor
            entity: sensor.pressure_158d0001720278
            name: Druk
            line_color: "#4BC0C0"
            accuracy: 8
            line_width: 8

Place swipe-card.js in /config/www/custom-lovelace/swipe-card/
Place swiper.min.js in /config/www/custom-lovelace/swipe-card/js/
Place swiper.min.css in /config/www/custom-lovelace/swipe-card/css/

  - url: /local/custom-lovelace/swipe-card/swipe-card.js?v=1.1.0
    type: module

Optional: add to custom_updater:

https://raw.githubusercontent.com/bramkragten/custom-ui/master/updater.json


Schlage Connect Locks - HA Integration Needs Attention
Ariela - Home Assistant Android Client
#2

I can’t tell by the picture but does each ‘card’ snap into place if you >half slide it?


#3

Yes, it does. Also if you half slide the scrollbar.


#4

This is really cool, nice one! :+1:


#5

Nice space saver cheers


#6

That looks awesome! Very useful.


#7

You could also go all out with coverflow :sunglasses:


#8

This is damn hot! :+1:

EDIT:
@Bram_Kragten can’t get it working, log says:
TypeError: element.setConfig is not a function

tested with Chrome, Iron (Chromium) and Firefox :frowning:


#9

Got any example code for this?


#10

I get the same error (running on Safari)…

…/custom-lovelace/swipe-card/swipe-card.js?v=0.42:71:32 TypeError: element.setConfig is not a function. (In ‘element.setConfig(item)’, ‘element.setConfig’ is undefined)


#11

Yes, working on the final version, will be up tonight (CET) with all config options.

Same goes for the errors, try the new version tonight and see if it solves it.


#12

New version is on, please try :slight_smile:


#13

Really nice space saver, will try it out!


#14

Just tested with the latest version:

swipe-card.js?v=1.0:81 Uncaught TypeError: element.setConfig is not a function
    at _cards.config.cards.map (swipe-card.js?v=1.0:81)
    at Array.map (<anonymous>)
    at HTMLElement.set hass [as hass] (swipe-card.js?v=1.0:73)
    at config.cards.map.cardConfig (27194aefb40e6f5b8d5f.chunk.js:1371)
    at Array.map (<anonymous>)
    at HTMLElement._createCards (27194aefb40e6f5b8d5f.chunk.js:1371)
    at Object.runMethodEffect [as fn] (app-084b7564.js:1067)
    at runEffectsForProperty (app-084b7564.js:1067)
    at runEffects (app-084b7564.js:1067)
    at HTMLElement._propertiesChanged (app-084b7564.js:1067)

My config:

- type: custom:swipe-card              
  card_width: '185px'                  
  parameters:                          
    effect: 'coverflow'                
    grabCursor: true                   
    centeredSlides: true               
    slidesPerView: 'auto'              
    coverflowEffect:                   
      rotate: 50                       
      stretch: 0                       
      depth: 100                       
      modifier: 1                      
      slideShadows : true              
    pagination:                        
      type: 'bullets'                  
  cards:                               
    - type: sensor                     
      entity: sensor.serre_temperature 
      name: Temperatuur                
      line_width: 8                    
      line_color: '#FF6384'            
    - type: sensor                     
      entity: sensor.serre_humidity    
      name: Luchtvochtigheid           
      line_color: '#36A2EB'            
      line_width: 8                    

- url: /local/custom-lovelace/swipe-card/swipe-card.js?v=1.0
  type: js

#15

What version of home-assistant are you on? The sensor card you are using is only available in beta right now…


#16

Ah damn using version 0.79.2, wasn’t clear in the topic.


#17

The topic is about the slider, you can use it with any card.

You can use Lovelace: Mini graph card for now.


#18

I’m still getting this error:

.../custom-lovelace/swipe-card/swipe-card.js?v=1.0:81:32 TypeError: element.setConfig is not a function. (In 'element.setConfig(item)', 'element.setConfig' is undefined)

Safari, and HassOS v. 0.79.3


#19

Same here, using iPad app. Love the card though!


#20

What is your config? Are you also using the sensor card? You should swap that below ha version 0.80 for Lovelace: Mini graph card if you want to do the same.