Lovelace: Swiper card

[adlingtont]

The conditional card seems to make the swiper card throw and error: t.setConfig is not a function which is not happening with other card types (I’ve tried entity and custom:button-card).

type: custom:swipe-card
parameters:
  effect: fade
  pagination:
    type: bullets
  autoplay:
    pauseOnMouseEnter: true
    disableOnInteraction: false
    delay: 5000
  speed: 1000
cards:
  - type: conditional
    conditions:
      - entity: input_boolean.swiper_message_1
        state: 'on'
    card:
      type: light
      entity: light.living_room_lamp

[ASNNetworks]

Try without conditional card. You need to figure out if it’s actually conditional card or something else messing it up.

What HA version and Swiper card version are you running? I see this error in this thread and on Github with previous versions. I don’t have any issues with Swiper card myself and have very advanced card setups with nested cards inside eachother inside Swiper cards.

[Mariusthvdb (Marius)]

@ASNNetworks

In any case: this is not simple if you have never used markdown, conditional or swiper card

he can simply copy my setup, and if in need of markdown cards, add those in the !includes…

@ASNNetworks

Having said this: if nothing is displaying, you will see a white area

prevent that with the top conditional, just like I did above: only show the swiper if a certain condition is met. In my case the number of alerts is not 0 easy.

[ASNNetworks]

I have tidied up my UI with conditional cards as well using nested conditional cards like you mentioned, but that wasn’t my point. My point was if you have never used these cards, you need to understand them first so you can get creative. Otherwise you’re just mindlessly copy/pasting stuff without getting new ideas you can use in other areas. As we know Lovelace is hardly plug and play. When things go wrong or get different results it will be very frustrating to troubleshoot if you havent taken the time to read the docs.

Personally I think it would be more beneficial if people understood more what they were doing: hence reading the documentations first and just experimenting instead of copy/pasting and then asking why stuff doesn’t work.

But I understand not everyone is willing to invest that much time. But it will be harder to get the right help if you don’t understand what someone is trying to explain.

[adlingtont]

I initially tested the swiper card with some random cards and have this as my current permanent set up.

type: custom:swipe-card
parameters:
  effect: fade
  pagination:
    type: bullets
  autoplay:
    pauseOnMouseEnter: true
    disableOnInteraction: false
    delay: 5000
  speed: 1000
cards:
  - type: custom:button-card
    entity: sensor.dark_sky_daily_summary
    show_state: true
    show_name: true
    name: Next Few Day's Summary
    tap_action:
      action: none
    styles:
      card:
        - height: 100px
        - width: 500px
      grid:
        - grid-template-areas: '"i n" "i s"'
        - grid-template-columns: 40% min-content
      img_cell:
        - position: absolute
        - left: '-6%'
        - top: 0%
        - height: 150px
        - width: 150px
      state:
        - position: absolute
        - left: 20%
        - top: 55%
        - align-self: start
        - justify-self: start
      name:
        - position: absolute
        - left: 20%
        - top: 20%
        - font-weight: bold
        - align-self: start
        - justify-self: start
  - type: custom:button-card
    entity: sensor.dark_sky_hourly_summary
    show_state: true
    show_name: true
    name: Today's Summary
    tap_action:
      action: none
    styles:
      card:
        - height: 100px
        - width: 500px
      grid:
        - grid-template-areas: '"i n" "i s"'
        - grid-template-columns: 40% min-content
      img_cell:
        - position: absolute
        - left: '-6%'
        - top: 0%
        - height: 150px
        - width: 150px
      state:
        - position: absolute
        - left: 20%
        - top: 55%
        - align-self: start
        - justify-self: start
      name:
        - position: absolute
        - left: 20%
        - top: 20%
        - font-weight: bold
        - align-self: start
        - justify-self: start

Which is working flawlessly, until adding (or replacing with) the conditional card. Strangely it did work for a time, then gave the error when I refreshed the page. The conditional card is also working flawlessly by itself.

type: conditional
conditions:
  - entity: input_boolean.swiper_message_1
    state: 'on'
card:
  type: light
  entity: light.living_room_lamp

I’ve now copied (and heavily edited) Mariusthbdb’s code. I removed included and the surrounding conditional and changed the conditional entity, but functionally as far as I can tell it should still be effectively the same, and it currently works:

type: custom:swipe-card
parameters:
  spaceBetween: 8
  grabCursor: true
  centeredSlides: false
  slidesPerView: 4
  pagination:
    type: bullets
    hideOnClick: true
cards:
  - type: conditional
    conditions:
      - entity: input_boolean.swiper_message_1
        state: 'on'
    card:
      type: entities
      entities:
        - light.living_room_lamp

However, as soon as I refreshed the page.

t.setConfig is not a function
type: custom:swipe-card
parameters:
  spaceBetween: 8
  grabCursor: true
  centeredSlides: false
  slidesPerView: 4
  pagination:
    type: bullets
    hideOnClick: true
cards:
  - type: conditional
    conditions:
      - entity: input_boolean.swiper_message_1
        state: 'on'
    card:
      type: entities
      entities:
        - light.living_room_lamp

My weather swiper is still working even after a refresh.

EDIT: It seems once another change is made on the page (deleting another card for example) the swiper-conditional works again, but will t.setConfig again on a refresh.

EDIT2: So I wrapped the entire swiper card in a conditional, like the previous posters code. This seems to have resolved the issue and the swiper card has survived multiple refreshes. Interestingly the conditional seems to have no effect and the swiper card is always displayed (perhaps the vertical frame that was also in the code makes a difference there). As it stands, there seems to be a bug in how the conditional and swiper cards interact with each other, but it appears to be solvable with a workaround.

[Harro65]

if you ever figure this out, please update . Im also looking at this, would love to have the slider for my camera streams and the ability to switch to one of the cameras via a button click.

Currently using custom state switch card. But would love to have some of the additional features that slider has.

[sebbaT]

I haven’t figured it out yet - I’m sure there is a way to do it but I have placed it on hold at the moment. I think it would require far more coding knowledge than I possess!

[SED9008]

Hi All, i ran in to the same problem others are running in to which is that if you put custom button-cards in the swipe-card they are only loaded on initial load (not always) but not when refreshing the lovelace dashboard (switching tabs for instance).
Having to force close the app and reopen it is not really usable but i really like the swipe card.
Did anyone find a solution for it yet?

[ASNNetworks]

You can always try to create a ticket in the github repo.

[SED9008]

Yeah i was going to do that but i thought i’d first check whether someone found some trick/easy fix.

[Mariusthvdb (Marius)]

has anyone noticed changed behavior on buttons in the swiper, which now no longer perform on hold_action?

all my buttons have a tap and hold action, and perform as expected in a regular interface card. When displayed in the swiper they all only perform the tap action, and the hold_action circle no longer shows either.

issue in the repo: Hold action not executed · Issue #35 · bramkragten/swipe-card · GitHub

did I miss a config option in the swiper maybe, the repo isnt that explicit on card options…

[paddy0174 (Patrick)]

Check the settings for custom:button-card. There is a setting, where you can actively set the entities, which are responsible for an update of the card.

custom-cards/button-card - triggers_update

[ASNNetworks]

Mobile or desktop, or both?

[Mariusthvdb (Marius)]

didn’t even notice that, but its desktop, mobile works alright. Chrome and Safari.

[ASNNetworks]

See my post above:

Lovelace: Swiper card

This has always been the case with hold actions inside swiper card. Also affects sliders, since you have to hold and touch. I’m guessing you’re using on desktop/laptop. See my workaround I figured out here: A different take on designing a Lovelace UI - #700 by ASNNetworks I use popup slider cards inside swiper card successfully with this workaround.

This applies to button-card hold_action as well. Don’t know why it worked before for you. I use button-card inside swiper-card for over a year now and I always used this workaround, because otherwise it wouldn’t work on desktop.

I found out about it by accident when pressing/holding mouse buttons. I posted this a few times in the hopes someone would find a better solution. But at least this workaround works.

[Mariusthvdb (Marius)]

If you have a slider inside a swiper card, then it’s a little more complicated. Then you need to hold right click first and then hold left click (without letting right click off) and drag with both fingers. This means you need a mouse with both buttons (so Apple magic mouse is not usable for instance). But perhaps you can also use macro’s of function key for that.

hmm, that truly sounds like a bug… maybe I didnt notice it before, because I used another conditional config, with state_switch to determine which buttons to show.

Slider had the advantage of selecting those automatically into place, and , when reaching the max width of 4 buttons in my setup, simply have them slide in/out. With state-switch I have to manually create the structure of the buttons, and even then, when over 4 buttons it really becomes an issue…

all in all I had hoped slider was my definitive tool, and now learn it isn’t… Maybe Bran can fix it, please add to my issue in the repo, so Bram knows its not only me?

btw, of course I also use an Apple mouse…

[ASNNetworks]

I added a comment to your ticket with some extra findings on github. As you can see there are more reports and we get in a loop where I find my own workaround in a different ticket lol.

[Mariusthvdb (Marius)]

thanks, I noticed ;-), made the reference to the other issue as well in issue #7

btw, it gets even more complicated> when clicking the button with right (apple) button I can see the hold circle and it apparently then sets the action for the next button click. And yes, to url’s to the correct view. If I then right click once more, the action is toggled again.

this explains why I saw “Funny thing is, when I go to a view where this same card is always shown, the url works fine, and then going back to the swiper, makes it work…” in the issue, just didnt understand it yet.

I did try both options from this post: Swipe-card and slider-entity-row · Issue #10 · bramkragten/swipe-card · GitHub but to no avail.

[Mariusthvdb (Marius)]

as a separate post: just discovered the grid card ! this seems to work too:

  - type: grid
    title: Alerts
    columns: 4
    cards:
      !include /config/lovelace/buttons/buttons_alerts_swipe.yaml

with 1 problem: it leaves the first (left) position open in the row. other than that, it is perfect, and performs all actions just as we need

and next row instead of swipe (which is fine by me):

now how to get the first button to appear on the first spot…

[SED9008]

Thanks! I added triggers_update: all. And now the cards always show up!