Lovelace: Swiper card

Share your Projects! Dashboards & Frontend
354

Hey, I’m trying to resize the bullets since i have them “clickable” and on my touchscreen (raspberry pi os) i can’t swipe (it bugs) and clicking works.
But the bullets are too small to click.
Do you have any idea how to css them and where?
This is what I have but it has no effect @Bram_Kragten

                        style: |
                            .swiper-pagination-bullet {
                              width: 20px;
                              height: 20px;
                            }
355

the only way I found to edit swipe card style was to use the custom:mod-card type on top of the swipe card

type: custom:mod-card
style: 
  swipe-card:
    $: |
      .swiper-scrollbar-drag {            
        background-color: rgba(255,79,211,0.6) !important;        
      }
card:
    type: custom:swipe-card
    cards:
3 Likes
356

Hey all, I am using this with a raspberry pi and a touchscreen, chromium. And I experience that swipe just won’t work. It won’t fully swipe as it should and it’s laggy. Did others experience this issue, and found a solution for this?

357

added the .js file in www/custom-lovelace/swipe-card/
added resources:

  • url: /local/custom-lovelace/swipe-card/swipe-card.js?v=3.0.0
    type: module
    to the top of lovelace yaml but get this error when trying to make a custom card… ??

UI editor is not supported for this config:

  • Cannot read property ‘setConfig’ of undefined
    You can still edit your config in yaml.
358

This isn’t a swiper card issue, but a user error.

Follow the docs. Nowhere do they say to put them in lovelace.yaml. It goes in configuration.yaml if you use YAML mode.

https://www.home-assistant.io/lovelace/dashboards-and-views/
As explained per example on the official docs:

lovelace:
  mode: yaml
  # Include external resources only add when mode is yaml, otherwise manage in the resources in the lovelace configuration panel.
  resources:
    - url: /local/my-custom-card.js
      type: module
    - url: /local/my-webfont.css
      type: css

This is all in configuration.yaml.

359

Awesome card, thank you. Can we make a “Thumbs Gallery” with it ?
the example of “Thumbs Gallery” from the swiper website :

360

Technically you can. Just create Picture or Glance Cards and insert those inside the Swiper Card. Then use the correct parameters and components (like navigation and/or pagination). Then you have what you showed in the demo.

1 Like
361

I tried to make a simple example and I’m not sure that what I’m trying to do is possible…
In fact the “Thumbs” component is a way to sync two swipers so the main swiper has another instance of a swiper in parameter :face_with_monocle:
So two question about the code example below (which doesn’t work) :

  1. Is vertical stack the right way to do it?
  2. Can I instantiate my sub swiper in the main swiper ?
type: vertical-stack
cards:
  - type: 'custom:swipe-card'
    title: MainSwiper
    parameters:
      navigation: null
      keyboard:
        enabled: true
        onlyInViewport: true
      Thumbs:
        swiper: SubSwiper
        autoScrollOffset: 1
    cards:
      - type: sensor
        entity: sensor.temp_chambre
      - type: sensor
        entity: sensor.temp_1
      - type: sensor
        entity: sensor.temp_2
      - type: sensor
        entity: sensor.temp_3
  - type: 'custom:swipe-card'
    title: SubSwiper
    card_width: 185px
    parameters:
      freeMode: true
      grabCursor: true
      spaceBetween: 10
      watchSlidesVisibility: true
      watchSlidesProgress: true
      slidesPerView: 2
    cards:
      - type: sensor
        entity: sensor.temp_chambre
      - type: sensor
        entity: sensor.temp_1
      - type: sensor
        entity: sensor.temp_2
      - type: sensor
        entity: sensor.temp_3

Thanks for your advice :slight_smile:

362

Is there a way to have the cards auto swype? I have all my notifications setup but I want them to auto scroll and also somehow hide the pages without any active notifications.

Well figured out autoscroll but I still need to to hide inactive cards, anyone with a tip?

      - type: 'custom:swipe-card'
        parameters:
          spaceBetween: 0
          scrollbar:
            hide: true
            draggable: true
            snapOnRelease: true
          effect: cover
          slideShadows: true
          autoplay:
            delay: 1000
          speed: 2000
        cards:
          - type: entity-filter
            state_filter:
              - 'on'
              - armed_home
              - armed_away
              - cool
              - Clean
              - heat
              - '1'
              - '2'
              - '3'
              - '4'
              - open
            show_header_toggle: false
            entities:
              - entity: alarm_control_panel.home_alarm
                icon: 'mdi:alarm-light'
                name: House Armed
              - entity: >-
                  cover.linear_nortek_security_control_llc_gd00z_4_garage_door_opener_remote_controller_barrier_state_label
                name: Garage Door
              - entity: input_boolean.mail_flag
                name: Mail Here
              - entity: switch.inovelli_unknown_type_ff00_id_ff07_switch
                name: Hose On
              - entity: input_boolean.trash_out
                name: It's Trash Day!
              - entity: input_boolean.recycle_out
                name: It's Recycling Day!
          - type: entity-filter
            state_filter:
              - 'on'
              - armed_home
              - armed_away
              - cool
              - Clean
              - heat
              - '1'
              - '2'
              - '3'
              - '4'
              - open
            show_header_toggle: false
            entities:
              - entity: binary_sensor.aerogarden_farm_left_need_water
                name: Farm Left Needs Water
              - entity: binary_sensor.aerogarden_farm_right_need_water
                name: Farm Right Needs Water
              - entity: binary_sensor.aerogarden_grandma_s_bounty_left_need_water
                name: Bounty Needs Water
              - entity: binary_sensor.aerogarden_farm_left_need_nutrients
                name: Farm Left Needs Nutrients
              - entity: binary_sensor.aerogarden_farm_right_need_nutrients
                name: Farm Right Needs Nutrients
              - entity: binary_sensor.aerogarden_grandma_s_bounty_left_need_nutrients
                name: Bounty Needs Nutrients
          - type: entity-filter
            state_filter:
              - 'on'
              - armed_home
              - armed_away
              - cool
              - Clean
              - heat
              - '1'
              - '2'
              - '3'
              - '4'
              - open
            show_header_toggle: false
            entities:
              - entity: switch.jasco_products_14288_duplex_receptacle_switch
                name: Attic Fan On
              - entity: climate.home
                name: Central Thermostat
              - entity: switch.dehumidifier_switch
                name: Dehumidifier is On
              - entity: sensor.vacuum
                name: Rosie 5 MK2
          - type: entity-filter
            state_filter:
              - 'on'
              - armed_home
              - armed_away
              - cool
              - Clean
              - heat
              - '1'
              - '2'
              - '3'
              - '4'
              - open
            show_header_toggle: false
            entities:
              - entity: input_boolean.aloe_water
                name: Aloe Plant Needs Water
              - entity: input_boolean.croton_water
                name: Croton Plant Needs Water
              - entity: input_boolean.dragon_tree_water
                name: Dragon Tree Plant Needs Water
              - entity: input_boolean.front_garden_water
                name: Front Garden Needs Water
          - type: entity-filter
            state_filter:
              - 'on'
              - armed_home
              - armed_away
              - cool
              - Clean
              - heat
              - '1'
              - '2'
              - '3'
              - '4'
              - open
            show_header_toggle: false
            entities:
              - entity: binary_sensor.updater
                name: HassIO Update Pending
              - entity: sensor.hacs
                name: Hacs Update Pending
363

Hi, auto scroll is working for me with this config :
preview:
GIF 17-11-2020 02-34-05

type: 'custom:swipe-card'
title: Backyard
card_width: 185px
start_card: 2
parameters:
  effect: coverflow
  grabCursor: true
  centeredSlides: true
  slidesPerView: auto
  autoplay:
    delay: 2000
  coverflowEffect:
    rotate: 50
    stretch: 0
    depth: 100
    modifier: 1
    slideShadows: true
  pagination:
    type: bullets
cards:
  - type: sensor
    entity: sensor.temp_1
    name: temp_1
    line_width: 6
    line_color: '#FF6384'
  - type: sensor
    entity: sensor.temp_2
    name: temp_2
    line_color: '#36A2EB'
    line_width: 8
  - type: sensor
    entity: sensor.temp_3
    name: temp_3
    line_color: '#ffce57'
    line_width: 8
  - type: sensor
    entity: sensor.temp_4
    name: temp_4
    line_color: '#4BC0C0'
    accuracy: 8
    line_width: 8

But I don’t know for hiding inactive cards…

364

Thanks, got auto working but now I have the t.setConfig error and cant get it to go away. Tried downgrading and clearing cache but its still there

365

Recently I had a problem with Nginx cache… Just in case keep it in mind when you made modifications and it doesn’t work after clearing browser cache :wink:

366

Where is that cache and when you cleared it did the t.set error go away?

367

noti

Figured it out but I am still getting t.set error if I refresh the page, until I open another tab with another swipe-card in it. I wonder if it has something to do with custom stack in card and loading it in a tab without a stack in card it fixes it. And I cant hide the header toggle something is breaking the show_header_toggle: false and the show_empty: false was the key to hide empty slides
Hopefully with the new grid stack card in 118 I won’t have to use the custom card anymore and it will work.

Posting setup in case anyone has same questions

      - type: 'custom:swipe-card'
        parameters:
          spaceBetween: 3
          scrollbar:
            hide: true
            draggable: true
            snapOnRelease: true
          effect: fade
          fadeEffect:
            crossFade: true
          slideShadows: false
          autoplay:
            delay: 1500
          speed: 1000
        cards:
          - type: entity-filter
            show_empty: false
            state_filter:
              - 'on'
              - armed_home
              - armed_away
              - cool
              - Clean
              - heat
              - '1'
              - '2'
              - '3'
              - '4'
              - open
            show_header_toggle: false
            entities:
              - entity: alarm_control_panel.home_alarm
                icon: 'mdi:alarm-light'
                name: House Armed
              - entity: cover.linear_nortek_security_control_llc_gd00z_4_garage_door_opener_remote_controller_barrier_state_label
                name: Garage Door
              - entity: input_boolean.mail_flag
                name: Mail Here
              - entity: switch.inovelli_unknown_type_ff00_id_ff07_switch
                name: Hose On
              - entity: input_boolean.trash_out
                name: It's Trash Day!
              - entity: input_boolean.recycle_out
                name: It's Recycling Day!
1 Like
368

Any update on the “t.setConfig is not a function” error? I was hopeing it would have been fixed with the new grid card but im still getting it. Getting “t.setConfig is not a function” every time its in any nested card.

So it loads 100% of the time if i go into edit mode and move the tab its on either left or right then move it back. This works for about a day then something internal refreshes and I then get the error again, this also causes a annoying issue of triggering the notification that the frontend has changed and needs to refresh.

369

Love this card and I’m using it to swipe between two picture-elements cards for my groundfloor and first floor floorplan.
On these I have different light entities that I can control by a long-press (which calls the browser_mod service) which shows different controls.
Used this card two combine those two views into one swipe card.
However the long press on an entity on each of the picture elements cards doesn’t respond anymore.
Anyone knows how to fix this?

370

Hy, thank to your works.
I try it with card type: picture-entity but every picture in swipe card appear in black and white ?
How i can visualizze in color?

thank

371

Hi
I use custom:mini-media-player in a swipe card and I would like to use the volume slider. Is it possible to disable swipe on a card ?
Thanks

372

Has anyone figured out a way to make the swiper card switch to a specific card? I would love to have a button or UI element switch to a different card than is currently displayed (ie. card 2 out of the 3). I believe the underlying code used by the card supports it, but have no idea if anyone has figured out how to do it from lovelace.

373

I don’t think it’s possible, since a button would need a service call to envoke swiper card, which swiper doesn’t have. It would need to be a custom component instead of only a custom card.

But honestly, what’s the point in using swiper card if you want to use buttons or other UI elements. That defeats the whole purpose of swiping the card (it’s in the name).

You are better off using state-switch card in your case. I use that myself as well for some elements. That card allows you to switch to different cards/views and use hash and entities to envoke it. See -> https://github.com/thomasloven/lovelace-state-switch