Lovelace: Swiper card

Bram_Kragten · October 10, 2018, 6:55pm

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:

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

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

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

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/

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

Optional: add to custom_updater:

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

petro · October 10, 2018, 7:02pm

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

Bram_Kragten · October 10, 2018, 7:03pm

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

kalkih · October 10, 2018, 7:11pm

This is really cool, nice one!

jimpower · October 10, 2018, 7:34pm

Nice space saver cheers

DavidFW1960 · October 11, 2018, 3:01am

That looks awesome! Very useful.

Bram_Kragten · October 11, 2018, 8:02am

You could also go all out with coverflow

https://raw.githubusercontent.com/bramkragten/custom-ui/master/swipe-card/preview-coverflow.gif

letsoulfly · October 11, 2018, 11:37am

This is damn hot!

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

tested with Chrome, Iron (Chromium) and Firefox

silvrr · October 11, 2018, 12:44pm

Got any example code for this?

Rasser · October 11, 2018, 12:47pm

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)

Bram_Kragten · October 11, 2018, 1:09pm

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.

Bram_Kragten · October 11, 2018, 2:05pm

New version is on, please try

M203 · October 11, 2018, 2:16pm

Really nice space saver, will try it out!

phdelodder · October 11, 2018, 2:17pm

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

Bram_Kragten · October 11, 2018, 2:19pm

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

phdelodder · October 11, 2018, 2:20pm

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

Bram_Kragten · October 11, 2018, 2:22pm

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

You can use Lovelace: mini graph card for now.

Rasser · October 11, 2018, 9:59pm

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

benm7 · October 12, 2018, 3:41am

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

Bram_Kragten · October 12, 2018, 7:14am

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.