Lovelace: Swiper card

petro · October 14, 2018, 1:02pm

So this card does not display anything beyond this card if you add a sensor to the custom:mini-graph-card that outputs a string. Example: I have a sesnor that outputs used space on a disk drive. The sensor outputs units with the state so the result is ‘34gb’ instead of 34. When this happens, everything below this card in the current view does not load.

          - type: custom:swipe-card
            card_width: '185px'
            start_card: 1
            parameters:
              effect: 'coverflow'
              grabCursor: true
              centeredSlides: true
              slidesPerView: 'auto'
              coverflowEffect:
                rotate: 50
                stretch: 0
                depth: 100
                modifier: 1
                slideShadows : true
              pagination:
                type: 'bullets'
            cards:
               # This card breaks the swipe-card and every card below swipe-card
               # if the sensor.used_space_volume_1 returns a string that cannot be
               # converted to a number.
               - type: custom:mini-graph-card
                 entity: sensor.used_space_volume_1
                 name: Used
                 line_width: 8
                 line_color: '#FF6384'

EDIT: To clarify, if i use a different configuration it works. It appears as if the ‘smaller sized’ card that does not contain a graph messes this exact configuration up.

EDIT: It seems as if it’s just the custom:mini-graph-card that is causing the problems. It just doesn’t display with some sensors.

LAST EDIT: Updated from 0.75.3 to 0.80. Fixed all issues I was having with this.

Bram_Kragten · October 14, 2018, 6:07pm

here you go:

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

juan11perez · October 15, 2018, 6:52am

Great, thank you very much. see below.

woody4165 · October 16, 2018, 8:34am

Great, really hot space saving in an UI

Is it possible to give a title to the entire card?
I tried with name: and title: but with no success.

Thanks!

Argo · October 16, 2018, 4:32pm

Hey there!

Here is a mistake isn’t it? Should be:

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

Not swipe-card.js but swiper-card.js

petro · October 16, 2018, 4:44pm

@Bram_Kragten I second Woody, this would be a nice enhancement to the card.

matisaul · October 16, 2018, 11:59pm

Hi, could you share that config?? I’m using the button-card, but I can’t success using swiper

sfnetwork · October 17, 2018, 1:52am

Wow… I have to say this one is just beautiful and works great without issues the first time…
this really makes the UI pop, feels like a major HA upgrade.

Thanks so much for this!!!

woody4165 · October 17, 2018, 7:39am

Can someone share the code for this swipe card?

Thanks

Bram_Kragten · October 17, 2018, 10:13am

      - type: custom:swipe-card
        parameters:
          spaceBetween: 8
        cards:
          - type: vertical-stack
            cards:
            - type: horizontal-stack
              cards:
                - type: entity-button
                  entity: light.eettafel
                  icon: mdi:sofa
                  color: red
                  action: more_info
                  name: Tafel
                - type: entity-button
                  entity: light.eettafel
                  icon: mdi:ceiling-light
                  action: more_info
                  name: Tafel
                - type: entity-button
                  entity: light.ron
                  icon: mdi:lamp
                  action: more_info
                  name: TV
                - type: entity-button
                  entity: light.snape
                  icon: mdi:floor-lamp
                  action: more_info
                  name: Floor
            - type: horizontal-stack
              cards:
                - type: entity-button
                  entity: light.living_room_lights
                  icon: mdi:sofa
                  action: more_info
                  name: Living
                - type: entity-button
                  entity: light.harry
                  icon: mdi:ceiling-light
                  action: more_info
                  name: Ceiling
                - type: entity-button
                  entity: light.ron
                  icon: mdi:lamp
                  action: more_info
                  name: TV
                - type: entity-button
                  entity: light.snape
                  icon: mdi:floor-lamp
                  action: more_info
                  name: Floor
          - type: vertical-stack
            cards:
            - type: horizontal-stack
              cards:
                - type: entity-button
                  entity: light.eettafel
                  icon: mdi:sofa
                  color: red
                  action: more_info
                  name: Tafel
                - type: entity-button
                  entity: light.eettafel
                  icon: mdi:ceiling-light
                  action: more_info
                  name: Tafel
                - type: entity-button
                  entity: light.ron
                  icon: mdi:lamp
                  action: more_info
                  name: TV
                - type: entity-button
                  entity: light.snape
                  icon: mdi:floor-lamp
                  action: more_info
                  name: Floor
            - type: horizontal-stack
              cards:
                - type: entity-button
                  entity: light.living_room_lights
                  icon: mdi:sofa
                  action: more_info
                  color_type: card
                  name: Living
                - type: entity-button
                  entity: light.harry
                  icon: mdi:ceiling-light
                  action: more_info
                  name: Ceiling
                - type: entity-button
                  entity: light.ron
                  icon: mdi:lamp
                  action: more_info
                  name: TV
                - type: entity-button
                  entity: light.snape
                  icon: mdi:floor-lamp
                  action: more_info
                  name: Floor

maurizio53 · October 17, 2018, 10:28am

Why i get this little difference between the two cards having the same code?

- type: custom:swipe-card
  card_width: '80%'
  parameters:
    effect: 'coverflow'
    centeredSlides: true
    slidesPerView: 'auto'
    spaceBetween: 8
    pagination:
      type: 'progressbar'
    navigation:
    keyboard:
      enabled: true
      onlyInViewport: true
  cards:
    - type: sensor
      entity: sensor.temperature_158d0002009a82
      name: Temperatura Salotto
      line_width: 8
      line_color: '#FF6384'
    - type: sensor
      entity: sensor.temperature_158d0001b95fa0
      name: Temperatura Camera Letto
      line_color: '#36A2EB'
      line_width: 8
    - type: sensor
      entity: sensor.temperature_158d0001b95f60
      name: Temperatura Balcone
      line_color: '#ffce57'
      line_width: 8
    - type: sensor
      entity: sensor.bagno_temperature
      name: Temperarura Bagno
      line_color: "#4BC0C0"
      accuracy: 8
      line_width: 8      

- 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.humidity_158d0002009a82
      name: Umidità Salotto
      line_width: 8
      line_color: '#FF6384'
    - type: sensor
      entity: sensor.humidity_158d0001b95fa0
      name: Umidità Camera Letto
      line_color: '#36A2EB'
      line_width: 8
    - type: sensor
      entity: sensor.humidity_158d0001b95f60
      name: Umidità Balcone
      line_color: '#ffce57'
      line_width: 8
    - type: sensor
      entity: sensor.bagno_humidity
      name: Umidità Bagno
      line_color: "#4BC0C0"
      accuracy: 8
      line_width: 8

Bram_Kragten · October 17, 2018, 10:34am

Because of this:

sfnetwork · October 17, 2018, 1:27pm

Could you share how you did this this way?
Mine works but the tiles aren’t all the same size like this, can’t really figure out how…
It seems to be auto adjusting with the text but how do I force the format like yours?

2018-10-17%2009_26_42-Home%20Assistant

Bram_Kragten · October 17, 2018, 2:01pm

Yeah, just make sure the texts are about the same lenght

maurizio53 · October 17, 2018, 3:10pm

Arghhhh… forgot to disable !!!

sfnetwork · October 17, 2018, 3:19pm

tested different settings and ended up better

matisaul · October 17, 2018, 3:43pm

Is there a way to put the bullet pagination lower than the cards? (like margin-bottom)

Bram_Kragten · October 17, 2018, 3:44pm

You can change the css file

Bram_Kragten · October 17, 2018, 3:53pm

It would look weird, this card is not a card itself. Like is does not have a background color and drop shadow.

matisaul · October 17, 2018, 6:12pm

I don’t know why I get an error message, but refreshing the browser several times works:

Uncaught TypeError: element.setConfig is not a function

Am I doing something wrong, or is a known bug?