Lovelace: Swiper card

dmertens · April 17, 2020, 9:59am

Hi, I want to use this card, if possible to swipe between rooms, so I want to create a swipe card with horizontal, vertical stacks, is this possible?
I can get it to work with one card without any issue, but more then one card, like this for instance does not work, or I’m stupid someone an idea if this is possible and so how to do this?

Thanks!

cards:
  - cards:
      - animate: true
        card: null
        entities:
          - sensor.processor_use
        graph: line
        hour24: true
        name: Processor
        show:
          extrema: true
          icon: false
          name: false
        style: |
          ha-card {
            border-radius: 15px;
            transform: scale(0.95);
            background-size: 100% 100%;
            border-style: dotted;
            border-width: 1px;
          }
        type: 'custom:mini-graph-card'
      - animate: true
        card: null
        entities:
          - sensor.memory_use_percent
        graph: line
        hour24: true
        name: Processor
        show:
          extrema: true
          icon: false
          name: false
        style: |
          ha-card {
            border-radius: 15px;
            transform: scale(0.95);
            background-size: 100% 100%;
            border-style: dotted;
            border-width: 1px;
          }
        type: 'custom:mini-graph-card'
    type: horizontal-stack
  - cards:
      - animate: true
        card: null
        entities:
          - sensor.speedtest_download
        graph: line
        hour24: true
        name: Processor
        show:
          extrema: true
          icon: false
          name: false
        style: |
          ha-card {
            border-radius: 15px;
            transform: scale(0.95);
            background-size: 100% 100%;
            border-style: dotted;
            border-width: 1px;
          }
        type: 'custom:mini-graph-card'
      - animate: true
        card: null
        entities:
          - sensor.speedtest_upload
        graph: line
        hour24: true
        name: Processor
        show:
          extrema: true
          icon: false
          name: false
        style: |
          ha-card {
            border-radius: 15px;
            transform: scale(0.95);
            background-size: 100% 100%;
            border-style: dotted;
            border-width: 1px;
          }
        type: 'custom:mini-graph-card'
    type: horizontal-stack
  - cards:
      - entities:
          - sensor.processor_use
        title: CPU
        title_position: inside
        title_style:
          font-size: 12px
        type: 'custom:bar-card'
      - entities:
          - sensor.memory_use_percent
        title: Memory
        title_position: inside
        title_style:
          font-size: 12px
        type: 'custom:bar-card'
    type: horizontal-stack
  - entities:
      - sensor.disk_use_percent
    title: Disk Usage
    type: 'custom:bar-card'
  - entities:
      - sensor.last_boot
      - sensor.uptime
    type: entities
title: Home Assistant
type: 'custom:vertical-stack-in-card'

ASNNetworks · April 17, 2020, 5:39pm

You can yeah. I even managed to get five ENTIRE pages (paths) in there with all the cards included. I wanted to emulate actual swiping from page to page like a native app. It worked, but it was very heavy since it loaded like 50 cards at the same time lol.

But it is possible, just wrap everything in the swiper card and you’re set.

dmertens · April 17, 2020, 6:12pm

Hi @ASNNetworks,

Thanks for your quick reply, can you help me a little with the above card, because I tried everything but cant get it to work, yaml is very hard to understand for a non dev I’m afraid

Thanks in advance!

ASNNetworks · April 17, 2020, 6:58pm

I’m not a dev either, but by practicing and studying work of others you’ll get a long way ;)!

What are the cards that you want inside the swipe card to swipe between?

dmertens · April 17, 2020, 7:11pm

Hi,

I want to create a horizontal stack and under there an entity card that’s it, to be honest, but tried everything always get errors like duplicate field or indentation problem, pff yaml so fun

title: Thuis Mertens Geysen
views:
  - path: default_view
    title: Home
    badges: null
    cards:
      - cards:
          - color_stops:
              '100': '#05AAF4'
              '500': '#E45F65'
            entities:
              - area: Nu
                decimals: 0
                entity: sensor.sb_1_5_1vl_40_netvermogen
                tap_action:
                  action: more-info
                unit: W
            horseshoe_scale:
              max: 1500
              min: 0
            layout:
              areas:
                - entity_index: 0
                  id: 0
                  styles:
                    - font-size: 1.5em;
                    - opacity: 0.8;
                  xpos: 50
                  ypos: 35
              states:
                - entity_index: 0
                  id: 0
                  styles:
                    - font-size: 2.5em;
                  xpos: 50
                  ypos: 60
            show:
              horseshoe_style: lineargradient
            type: 'custom:flex-horseshoe-card'
          - color_stops:
              '0': '#05AAF4'
              '5': '#E45F65'
            entities:
              - area: Vandaag
                decimals: 2
                entity: sensor.sb_1_5_1vl_40_dagelijkse_opbrengst
                tap_action:
                  action: more-info
                unit: KWh
            horseshoe_scale:
              max: 12
              min: 0
              width: 5
            layout:
              areas:
                - entity_index: 0
                  id: 0
                  styles:
                    - font-size: 1.5em;
                    - opacity: 0.8;
                  xpos: 50
                  ypos: 35
              states:
                - entity_index: 0
                  id: 0
                  styles:
                    - font-size: 2.5em;
                  xpos: 50
                  ypos: 60
            show:
              horseshoe_style: lineargradient
            type: 'custom:flex-horseshoe-card'
        type: horizontal-stack
      - type: entities
        title: My Title
        entities:
          - entity: light.lamp_1_bureau

ASNNetworks · April 17, 2020, 7:17pm

So the code contains two cards, one horizontal stack (with horseshoe inside) and one entity. Do you want to swipe between the horizontal stack and the entity below it? Did I understand correctly?

dmertens · April 17, 2020, 7:23pm

No I want to create more then one view like this (rooms) and then swipe between the rooms, so every room will have a horizontal stack and an entity card, so both cards need to be in one view, room, swipe

Thanks!

ASNNetworks · April 17, 2020, 7:29pm

@dmertens How do you expect me to help you with a piece of code for swipe card if you only post one card lol.

Anyway this is what you need to do: wrap the entire view in a vertical-stack card. So each view needs to be wrapped inside it’s separate vertical-stack. So:

    - cards:
        - INSERT EVERYTHING FROM VIEW 1
      type: vertical-stack
    - cards:
        - INSERT EVERYTHING FROM VIEW 2
      type: vertical-stack
    - cards:
        - INSERT EVERYTHING FROM VIEW 3
      type: vertical-stack

This gives you THREE separate vertical stacks wich each contains all the cards. So essentially now you have your three rooms each as a separate card. Then you just need to wrap that into a swiper card.

- cards:
    - cards:
        - INSERT EVERYTHING FROM VIEW 1
      type: vertical-stack
    - cards:
        - INSERT EVERYTHING FROM VIEW 2
      type: vertical-stack
    - cards:
        - INSERT EVERYTHING FROM VIEW 3
      type: vertical-stack
  start_card: 1
  parameters:
    spaceBetween: 20
    pagination:
      type: bullets
  type: 'custom:swipe-card'

So you are wrapping al the cards you want for one single room inside a vertical-stack and THEN you wrap all your vertical-stacks inside a swiper card. Change the parameters as you see fit (remove or change them to your liking)

dmertens · April 18, 2020, 7:30am

I tried every indentation I could think off, but still no success , I know its me but can you review this and explain what I’m doing wrong here?

Thanks!

title: Thuis Mertens Geysen
views:
      - cards:
          - type: horizontal-stack
            cards:
              - type: gauge
                entity: sensor.hassio_cpu_alert_level
                min: 0
                max: 100
              - type: gauge
                entity: sensor.hassio_cpu_alert_level
                min: 0
                max: 100
        type: vertical-stack
      - cards:
          - type: horizontal-stack
            cards:
              - type: gauge
                entity: sensor.hassio_cpu_alert_level
                min: 0
                max: 100
              - type: gauge
                entity: sensor.hassio_cpu_alert_level
                min: 0
                max: 100
        type: vertical-stack
      - cards:
          - type: horizontal-stack
            cards:
              - type: gauge
                entity: sensor.hassio_cpu_alert_level
                min: 0
                max: 100
              - type: gauge
                entity: sensor.hassio_cpu_alert_level
                min: 0
                max: 100
        type: vertical-stack
      start_card: 1
      parameters:
        spaceBetween: 20
        pagination:
          type: bullets
      type: 'custom:swipe-card'

ASNNetworks · April 18, 2020, 8:26am

You are missing the ‘cards:’ option of the swiper card. If you look at the code carefully you will see you are missing ‘cards:’ that define the swipe cards. Basically you have used the swipe card but did not mention what the cards are, since you left that out.

So just put ‘ - cards:’ all the way at the top and fix the problem spaces of the swipe at the bottom (2 spaces to the left) and it should work. You see the difference?

title: Thuis Mertens Geysen
views:
  - cards:
      - cards:
          - type: horizontal-stack
            cards:
              - type: gauge
                entity: sensor.hassio_cpu_alert_level
                min: 0
                max: 100
              - type: gauge
                entity: sensor.hassio_cpu_alert_level
                min: 0
                max: 100
        type: vertical-stack
      - cards:
          - type: horizontal-stack
            cards:
              - type: gauge
                entity: sensor.hassio_cpu_alert_level
                min: 0
                max: 100
              - type: gauge
                entity: sensor.hassio_cpu_alert_level
                min: 0
                max: 100
        type: vertical-stack
      - cards:
          - type: horizontal-stack
            cards:
              - type: gauge
                entity: sensor.hassio_cpu_alert_level
                min: 0
                max: 100
              - type: gauge
                entity: sensor.hassio_cpu_alert_level
                min: 0
                max: 100
        type: vertical-stack
    start_card: 1
    parameters:
      spaceBetween: 20
      pagination:
        type: bullets
    type: 'custom:swipe-card'

dmertens · April 18, 2020, 12:50pm

Hi,

Thanks for your quick reply, and yes I can see the differences but it still does not work I think?, I have now just 3 horizontal stacks in one view but no slider option?

ASNNetworks · April 18, 2020, 1:23pm

Don’t use screenshots with code, but paste it here using the correct format like I did.

Anyway, I copy and pasted my code exactly like I wrote for you (and used my own sensors for testing). Works exactly as intended.

This is what I get:

Adding extra cards within each vertical-stack gives this.

Make sure you reload the page / reset cache just in case. But other than that, I can’t explain it any clearer than this since the code I wrote works exactly like it should.

dmertens · April 18, 2020, 1:30pm

OK, thanks going to test that!

Thanks for your support!!

dmertens · April 18, 2020, 4:04pm

OK got your example working, but now I want to add an entity card below the stack, I think I did everything as in your example, but now I got an error that I have a duplicate mapping error, pff I think I will never understand yaml, pfff

views:
  - title: Bureau
  - cards:
      - cards:
          - type: horizontal-stack
            cards:
              - animate: true
                card: null
                entities:
                  - sensor.processor_use
                graph: line
                hour24: true
                name: Processor
                show:
                  extrema: true
                  icon: false
                  name: false
                style: |
                  ha-card {
                    border-radius: 15px;
                    transform: scale(0.95);
                    background-size: 100% 100%;
                    border-style: dotted;
                    border-width: 1px;
                  }
                type: 'custom:mini-graph-card'
          - type: entities
            title: My Title
            entities:
              - switch.master_innr_plug_martine
              - switch.master_innr_plug_danny
              - switch.sonos_alarm_150
        type: vertical-stack
      - cards:
          - type: horizontal-stack
            cards:
              - animate: true
                card: null
                entities:
                  - sensor.processor_use
                graph: line
                hour24: true
                name: Processor
                show:
                  extrema: true
                  icon: false
                  name: false
                style: |
                  ha-card {
                    border-radius: 15px;
                    transform: scale(0.95);
                    background-size: 100% 100%;
                    border-style: dotted;
                    border-width: 1px;
                  }
                type: 'custom:mini-graph-card'
          - type: entities
            title: My Title
            entities:
              - switch.master_innr_plug_martine
              - switch.master_innr_plug_danny
              - switch.sonos_alarm_150
    type: vertical-stack
    start_card: 1
    parameters:
      spaceBetween: 20
      pagination:
        type: bullets
    type: 'custom:swipe-card'

The page (view) works fine, but the problem is now getting in the swipe card, pfff

views:
  - title: Bureau
    cards:
      - type: horizontal-stack
        cards:
          - animate: true
            card: null
            entities:
              - sensor.processor_use
            graph: line
            hour24: true
            name: Processor
            show:
              extrema: true
              icon: false
              name: false
            style: |
              ha-card {
                border-radius: 15px;
                transform: scale(0.95);
                background-size: 100% 100%;
                border-style: dotted;
                border-width: 1px;
              }
            type: 'custom:mini-graph-card'
          - animate: true
            card: null
            entities:
              - sensor.processor_use
            graph: line
            hour24: true
            name: Processor
            show:
              extrema: true
              icon: false
              name: false
            style: |
              ha-card {
                border-radius: 15px;
                transform: scale(0.95);
                background-size: 100% 100%;
                border-style: dotted;
                border-width: 1px;
              }
            type: 'custom:mini-graph-card'
      - type: entities
        title: My Title
        entities:
          - switch.master_innr_plug_martine
          - switch.master_innr_plug_danny
          - switch.sonos_alarm_150

ASNNetworks · April 18, 2020, 8:15pm

I advise you to practice with YAML more with basic stuff first, since I can tell you are all over the place with your code. You aren’t following my example if you look closely. Each card needs it’s separate indentation. Yet, above the line ‘start card 1’ that is tied to swipe card, you now suddenly write ‘type: vertical-stack’. So basically your swipe card is broken because you now literally have written that it’s a type: vertical stack AND a type: custom:swipe-card.

Play close attention to indentations and practice your code piece by piece first. Expand the swipe card by adding cards piece by piece. When that works, you have yourself a template you can copy, paste and edit the contents for different swipe cards.

We all have to start somewehere. I had 0 experience with this and am no developer by any means. I started with HA little over 4 months ago and have learned a lot of things. So just keep working with small steps and then YAML will click suddenly

eximo84 · April 20, 2020, 9:11pm

Is it possible to swipe a horizontal stack containing within a vertical stack?

I have 4 cards but i only want to show 2 at a time, then allow a swipe to the 3rd/4th card however this horiztontal stack is currently inside a vertical stack.

ASNNetworks · April 20, 2020, 9:17pm

Just create two vertical-stack cards that each contain two horizontal-stack cards. Then wrap the two vertical-stack cards inside swiper card. You can follow my example code above basically to achieve that.

Matt_Barnes · May 1, 2020, 11:59am

Just found this card and love it!

I have only copied the base config so far with 4 sensors showing in coverflow. Aiming to change these to buttons, but when using on the app, if you swipe to move through the sensors when you let go it loads the page of data about the sensor, is there a way to need another press or something to activate a page within the swipe?

Matt_Barnes · May 1, 2020, 12:25pm

Had a look through the posts and realise no one has a final solution to accidental clicking, I have added secondary “blank” buttons in a vertical stack to help space the top buttons away from the scroll area.

Only other thing I would say is after saving my lovelace file and refreshing my UI all my other cards refresh instantly and the swiper takes probably 10+ seconds to appear on screen. Its installed using HACS?

ASNNetworks · May 1, 2020, 6:28pm

I just installed the new update. Unforttunately this plugin is now broken on Safari browsers. I get the following error: Can’t find variable: ResizeObserver. This occurs on all Safari (based) browsers I tested (macOS, iOS, iPadOS). Works fine on Chrome and other browsers (including on macOS Chrome).

Can you please fix this?