Lovelace: Swiper card

ASNNetworks · May 4, 2023, 11:25am

He’s talking about the cards in the swipe card itself as swipe cards. You say that Vandaag and the two cards below it are in the swipe. But what cards show up when actually SWIPE? We don’t see thsoe cards on a screenshot. Most likely that card is taller, which is why the container is larger. You can prevent this by using autoHeight parameter.

parameters:
  autoHeight: true

Also: if asking for help, posting just a screenshot will only waste time of others trying to guess, like we’re doing now. Just post your relevant code and your issue with a screenshot, so others actually know what your setup is.

Faecon · May 4, 2023, 12:26pm

- type: custom:swipe-card
  cards:
      - square: true
        type: grid
        columns: 1    
        cards:
          - type: vertical-stack        
            cards:
              - type: horizontal-stack
                cards:      
                  - type: custom:mushroom-template-card   
                    primary: Vandaag  
                    secondary: >-
                      {% set mon = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"] %}
                      {{ (now().day) }} {{ (mon[now().month-1])}}
                    fill_container: true
                    layout: horizontal
                    multiline_secondary: false
                    card_mod:
                      style: |
                        :host([dark-mode]) {
                          background: rgba(var(--rgb-primary-background-color), 0.2);
                          height: 49px;
                        }
                        :host {
                          background: rgba(var(--rgb-primary-text-color), 0.025);
                          height: 49px;
                        }
              - type: horizontal-stack
                cards:
                  - type: custom:mushroom-entity-card
                    entity: sensor.totalpowerexportday
                    icon: mdi:weather-sunny
                    icon_color: yellow
                    name: " "
                  - type: custom:mushroom-entity-card
                    entity: sensor.totalpowerimportday
                    icon: mdi:power-plug
                    icon_color: purple
                    name: " "
      - square: true
        type: grid
        columns: 1
        cards:
          - type: vertical-stack        
            cards:          
              - type: horizontal-stack
                cards:      
                  - type: custom:mushroom-template-card
                    primary: Gisteren  
                    secondary: >-
                      {% set mon = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"] %}
                      {{ (now().day-1) }} {{ (mon[now().month-1])}}
                    fill_container: true
                    layout: horizontal
                    multiline_secondary: false
                    card_mod:
                      style: |
                        :host([dark-mode]) {
                          background: rgba(var(--rgb-primary-background-color), 0.2);
                          height: 49px;
                          }
                        :host {
                          background: rgba(var(--rgb-primary-text-color), 0.025);
                          height: 49px;
                        }
              - type: horizontal-stack
                cards:
                  - type: custom:mushroom-entity-card
                    entity: sensor.export_stroom_gisteren
                    icon: mdi:weather-sunny
                    icon_color: yellow
                    name: " "
                  - type: custom:mushroom-entity-card
                    entity: sensor.import_stroom_gisteren
                    icon: mdi:power-plug
                    icon_color: purple
                    name: " "
  - type: "vertical-stack"
    cards:
      - type: horizontal-stack
        cards:      
          - type: "custom:stack-in-card"
            cards:
  ...

indentation is not ok here, but ok at home. Between the swipe-card and the vertical stack next, there is a gap. That’s the one i want gone

basbrus · May 4, 2023, 12:29pm

Set square to false in the grid card config.

And what is idea behind using a vertical stack in a grid card that exist of just 1 column. Only the vertical stack will give you the same (and even beter result as it does not square the contents inside)

ASNNetworks · May 4, 2023, 12:30pm

If you don’t want a square, changing this would help:

      - square: true
        type: grid

Don’t see why you use square for gird, when you clearly don’t want a square card? Set that to false for all grid cards you don’t want to force as a square, but adapt to cards inside it.

Faecon · May 4, 2023, 12:31pm

the swiped-card is just the same as the front swipe…

Faecon · May 4, 2023, 12:34pm

the square thing was the solution. Thanks guys

devitus · May 14, 2023, 9:33am

@Bram_Kragten I know you’ve stopped supporting the plugin, but wanted to ask for your advise.

I’m running a lovelace dashboard on Fire HD 10 using Fully Kiosk Browser:

Android Version: 9 (Fire OS) (SDK 28)
WebView version: 104.amazon-webview-v104-5112-tablet.5112.114.50
Fully Kiosk Browser Version: 1.50

This is my lovelace config for the Swiper Card:

type: custom:swipe-card
start_card: 2
view_layout:
  grid-area: cam
parameters:
  autoplay:
    delay: 60000
  disableOnInteraction: false
  effect: coverflow
  navigation: null
  pagination:
    type: bullets
cards:
  - type: custom:webrtc-camera
    url: [redacted]
    muted: true
    ui: true
    poster: >-
      [redacted]
    intersection: 0.5
    background: false
    style: >-
      video {aspect-ratio: 16/9; object-fit: cover; object-position: bottom;}
      .mode {display: none;}
    card_mod:
      style: |
        ha-card {
        --ha-card-border-radius: 20px;
        }
  - type: custom:webrtc-camera
    url: [redacted]
    muted: true
    ui: true
    poster: >-
      [redacted]
    intersection: 0.5
    background: false
    style: >-
      video {aspect-ratio: 16/9; object-fit: cover; object-position: bottom;}
      .mode {display: none;}
    card_mod:
      style: |
        ha-card {
        --ha-card-border-radius: 20px;
        }
  - type: custom:webrtc-camera
    url: [redacted]
    muted: true
    ui: true
    poster: >-
      [redacted]
    intersection: 0.5
    background: false
    style: >-
      video {aspect-ratio: 16/9; object-fit: cover; object-position: bottom;}
      .mode {display: none;}
    card_mod:
      style: |
        ha-card {
        --ha-card-border-radius: 20px;
        }

The issue is that Swiper Card content renders blank on page refresh and requires 2-4 further refreshes for the card content to appear. See it in action here (Google Photos link).

I’ve tried the following:

Removing Swiper Card and leaving only one of three custom:webrtc-camera cards. The issue disappears, suggesting that the issue is linked to the Swiper Card.
Updated Fully Kiosk Browser and Fire Tablet to the latest OS to ensure the latest version of webview is used. This didn’t fix the issue.
Tried toggling between hardware and software acceleration in Fully Kiosk Browser. This didn’t fix the issue.

This appears to be caused by some form of conflict between the Fully Kiosk Browser and Swiper Card, but I can’t point out what it is.

I’d really appreciate any help in finding the root cause.

Thanks in advance!

pgr · May 14, 2023, 3:05pm

@devitus is your problem the same as this one?

Do you get the same JS error in the browser console?

devitus · May 14, 2023, 6:31pm

Hey @pgr managed to get remote debug logs from Fully Kiosk Browser, got a very similar error to yours:

Uncaught (in promise) TypeError: this.createCardElement is not a function
    at ee._rebuildCard (swipe-card.js:19:1842)
    at t.addEventListener.once (swipe-card.js:19:1774)
    at n (fire_event.ts:76:8)
    at create-element-base.ts:129:5
_rebuildCard	@	swipe-card.js:19
t.addEventListener.once	@	swipe-card.js:19
n	@	fire_event.ts:76
(anonymous)	@	create-element-base.ts:129
Promise.then (async)		
(anonymous)	@	create-element-base.ts:127
u	@	create-element-base.ts:215
d	@	create-element-base.ts:172
w	@	create-card-element.ts:98
_createCardElement	@	swipe-card.js:19
await in _createCardElement (async)		
(anonymous)	@	swipe-card.js:19
_createCards	@	swipe-card.js:19
setConfig	@	swipe-card.js:6
a	@	create-element-base.ts:97
(anonymous)	@	create-element-base.ts:111
u	@	create-element-base.ts:215
d	@	create-element-base.ts:172
w	@	create-card-element.ts:98
value	@	hui-view.ts:64
(anonymous)	@	hui-view.ts:283
value	@	hui-view.ts:282
value	@	hui-view.ts:216
value	@	hui-view.ts:130
performUpdate	@	reactive-element.ts:1329
scheduleUpdate	@	reactive-element.ts:1263
_$Ej	@	reactive-element.ts:1235
await in _$Ej (async)		
requestUpdate	@	reactive-element.ts:1210
u	@	reactive-element.ts:948
g	@	reactive-element.ts:931
r	@	hui-view.ts:43
E	@	scoped-custom-element-registry.js:385
t	@	scoped-custom-element-registry.js:236
value	@	hui-root.ts:926
(anonymous)	@	hui-root.ts:103
(anonymous)	@	debounce.ts:18
setTimeout (async)		
i	@	debounce.ts:23
handleEvent	@	lit-html.ts:2003
n	@	fire_event.ts:76
(anonymous)	@	create-element-base.ts:129
Promise.then (async)		
(anonymous)	@	create-element-base.ts:127
u	@	create-element-base.ts:215
d	@	create-element-base.ts:172
c	@	create-view-element.ts:19
value	@	hui-view.ts:237
value	@	hui-view.ts:212
value	@	hui-view.ts:130
performUpdate	@	reactive-element.ts:1329
scheduleUpdate	@	reactive-element.ts:1263
_$Ej	@	reactive-element.ts:1235
await in _$Ej (async)		
requestUpdate	@	reactive-element.ts:1210
u	@	reactive-element.ts:948
g	@	reactive-element.ts:931
r	@	hui-view.ts:43
E	@	scoped-custom-element-registry.js:385
t	@	scoped-custom-element-registry.js:236
value	@	hui-root.ts:926
(anonymous)	@	hui-root.ts:670
setTimeout (async)		
(anonymous)	@	render-status.ts:2
requestAnimationFrame (async)		
n	@	render-status.ts:2
value	@	hui-root.ts:670
_$AE	@	reactive-element.ts:1380
performUpdate	@	reactive-element.ts:1345
scheduleUpdate	@	reactive-element.ts:1263
_$Ej	@	reactive-element.ts:1235
await in _$Ej (async)		
requestUpdate	@	reactive-element.ts:1210
u	@	reactive-element.ts:948
g	@	reactive-element.ts:931
k	@	lit-element.ts:115
P	@	hui-root.ts:99
E	@	scoped-custom-element-registry.js:385
t	@	scoped-custom-element-registry.js:236
u	@	lit-html.ts:1121
g	@	lit-html.ts:1528
_$AI	@	lit-html.ts:1372
$	@	lit-html.ts:2168
update	@	lit-element.ts:165
performUpdate	@	reactive-element.ts:1331
scheduleUpdate	@	reactive-element.ts:1263
_$Ej	@	reactive-element.ts:1235
await in _$Ej (async)		
requestUpdate	@	reactive-element.ts:1210
set	@	reactive-element.ts:726
value	@	ha-panel-lovelace.ts:292
await in value (async)		
value	@	ha-panel-lovelace.ts:153
_$AE	@	reactive-element.ts:1378
performUpdate	@	reactive-element.ts:1345
scheduleUpdate	@	reactive-element.ts:1263
_$Ej	@	reactive-element.ts:1235
await in _$Ej (async)		
requestUpdate	@	reactive-element.ts:1210
u	@	reactive-element.ts:948
g	@	reactive-element.ts:931
k	@	lit-element.ts:115
r	@	ha-panel-lovelace.ts:66
E	@	scoped-custom-element-registry.js:385
t	@	scoped-custom-element-registry.js:236
value	@	hass-router-page.ts:296
value	@	hass-router-page.ts:316
_currentLoadProm.l.then._currentLoadProm	@	hass-router-page.ts:214
Promise.then (async)		
value	@	hass-router-page.ts:205
performUpdate	@	reactive-element.ts:1331
scheduleUpdate	@	reactive-element.ts:1263
_$Ej	@	reactive-element.ts:1235
await in _$Ej (async)		
requestUpdate	@	reactive-element.ts:1210
u	@	reactive-element.ts:948
g	@	reactive-element.ts:931
n	@	hass-router-page.ts:48
r	@	partial-panel-resolver.ts:44
E	@	scoped-custom-element-registry.js:385
t	@	scoped-custom-element-registry.js:236
u	@	lit-html.ts:1121
g	@	lit-html.ts:1528
_$AI	@	lit-html.ts:1372
$	@	lit-html.ts:2168
update	@	lit-element.ts:165
performUpdate	@	reactive-element.ts:1331
scheduleUpdate	@	reactive-element.ts:1263
_$Ej	@	reactive-element.ts:1235
await in _$Ej (async)		
requestUpdate	@	reactive-element.ts:1210
u	@	reactive-element.ts:948
g	@	reactive-element.ts:931
k	@	lit-element.ts:115
c	@	home-assistant-main.ts:52
E	@	scoped-custom-element-registry.js:385
t	@	scoped-custom-element-registry.js:236
u	@	lit-html.ts:1121
g	@	lit-html.ts:1528
_$AI	@	lit-html.ts:1372
$	@	lit-html.ts:2168
update	@	lit-element.ts:165
value	@	home-assistant.ts:32
performUpdate	@	reactive-element.ts:1331
scheduleUpdate	@	reactive-element.ts:1263
_$Ej	@	reactive-element.ts:1235
await in _$Ej (async)		
requestUpdate	@	reactive-element.ts:1210
set	@	reactive-element.ts:726
value	@	hass-base-mixin.ts:52
_updateHass	@	context-mixin.ts:95
(anonymous)	@	connection-mixin.ts:241
s	@	store.js:19
(anonymous)	@	collection.js:25
Promise.then (async)		
c	@	collection.js:25
d	@	collection.js:27
(anonymous)	@	collection.js:52
subscribe	@	collection.js:95
T	@	services.js:37
(anonymous)	@	core.ts:119
Promise.then (async)		
(anonymous)	@	core.ts:113
(anonymous)	@	core-hpNqcTVzWqI.js:1
(anonymous)

guensen0 · May 15, 2023, 7:06am

Hi,

one question… is it somehow possible to track which slide is currently shown? I would like to show other elements in the view based on which slide is shown… any ideas / suggestions? Thx.

devitus · May 15, 2023, 6:55pm

Based on docs for Swiper API this integration is based on there’s a swiper.activeIndex property that holds “Index number of currently active slide”. If you can refer to this property somehow, you could achieve what you’re looking for potentially.

markblokpoel · May 23, 2023, 8:54pm

Hi,

I’m building a card that displays a subset of cards relative to conditions in combination with the awesome swiper card. For example, when my partner is driving home, the derivative of her travel time is negative, so I add a map card to the swipe based on this condition. When it is bedtime for the kids, I add a card with camera’s, etc. Swipe card allows me to save a lot of space with this approach, which is inspired by the Android Auto cards (that aim to display relevant info). I’m running into a very specific problem, however, with the custom cards I’ve designed.

A minimal working example is below. When embedding a tile card in a custom:button-card, on an android mobile device, the touch events are not caught by the swipe card. If you happen to gesture on the dots, or in the margin of the button-card, then you can still swipe. It might be a peculiar combination, but I’m quite happy with the “glance cards” I made using button-card and tile cards. Anyone have any idea if this is a bug, or how else to investigate the issue? Happy to provide more info or help the search. On a desktop browser (e.g., Firefox) there is no issue, it works fine.

type: custom:swipe-card
reset_after: 10
parameters:
  spaceBetween: 8
  watchOverflow: true
  grabCursor: true
  centeredSlides: true
  slidesPerView: auto
  pagination:
    type: bullets
cards:
  - type: custom:button-card
    custom_fields:
      e:
        card:
          type: tile
          entity: sun.sun
    show_state: false
    show_label: false
    show_name: false
    styles:
      grid:
        - grid-template-areas: '"e"'
  - type: tile
    entity: sun.sun

alxscott · June 2, 2023, 4:28pm

Hi all,

Im trying to setup a Sonoff NSPanel Pro and Swiper is ideal!

However; I have the issue where I can’t adjust a Mushroom Slider without changing sliders? I’ve tried the following SliderJS options:

parameters:
  edgeSwipeDetection: prevent
  effect: slider
  observer: true
  noSwiping: true
  noSwipingClass: slider
  preventInteractionOnTransition: true

GIF attached to show what I mean!!
Screen Recording 2023-06-02 at 17.09.48

Any suggestions?

elementoulis · June 7, 2023, 10:36pm

It’s weird that it doesn’t prioritize your light card over the swiper because I had the exact reverse problem : Lovelace: Swiper card - #625 by elementoulis

Is this mushroom or minimalist ?

alxscott · June 8, 2023, 7:54pm

Is I’m actually using https://github.com/phischdev/lovelace-mushroom-better-sliders?

And although I haven’t quite figured out how / why adding the option cssMode:True seems to have mostly helped with the slider issue!

pinolocke · June 14, 2023, 11:57am

Hello, I am new to this forum.
I use the swipe-card very extensively in my dashboard (thx) and wanted to know it is possible to automatically switch the focus to the corresponding card for a certain event.

A concrete example would be, if the load of my monitored server reaches a certain threshold, I would like the corresponding card to be displayed without having to swipe myself.

Is this possible?
Thank you very much for an answer.

Faecon · June 15, 2023, 5:57am

did you manage it to go back to the first card ?

j3tang · June 15, 2023, 10:25am

No, not properly. The post right after mine suggested the use of the parameter loop: true did allow you to wrap around, but worked only under certain conditions (which I don’t recall anymore) and ultimately didn’t behave the way I hoped it would.

Give it a try, maybe I just wasn’t using it correctly. I just gave up on it because it was a nice to have but didn’t bother me enough if I couldn’t get it to work.

Faecon · June 15, 2023, 3:31pm

is it possible to loop ? I have 2 cards. When I swipe the second, I want to go back to the first. Is that possible ?

panhans · June 16, 2023, 6:57am

Maybe here is someone who is able to help me: I need the content of the swipe card stretched. Without swipe-card the graph fits fine. The swiper-card element needs display: flex. Or is there an option that children gets maximized to swiper cards size? Had no luck with card-mod. Maybe there is another option I don’t know.

The swiper card itself has the right size but the content card doesn’t get stretched/fit to it.

Thanks in advance!

Bildschirmfoto 2023-06-16 um 08.55.42