Lovelace: Swiper card

folrewef · October 31, 2018, 11:11am

I have now resolved all ui problems after updating to 0.81.2 but still get the message:

Custom element doesn’t exist: swipe-card.

I have updated swipe-card.js and swiper.min.js (I recreated the files and copied the code of each file from the links above).

I have the files in
config/www/custom-lovelace/swipe-card
config/www/custom-lovelace/swipe-card/js
config/www/custom-lovelace/swipe-card/CSS

I have the following in my ui-lovelace.yaml:

  - url: /local/custom-lovelace/swipe-card/swipe-card.js?v=1.1.0
    type: module

Now I am at a loss as to what to to.

I have restarted HA several times and I have emptied the cache.

I must have missed something.

Can anyone help me?

matisaul · October 31, 2018, 2:28pm

Same problem here.

folrewef · October 31, 2018, 3:05pm

I finally got it to work by updating the files from the links in post 77.

matisaul · October 31, 2018, 3:48pm

Thanks!! That’s it.

Changing type to module, and replacing the files did the trick.

da_syygy · November 8, 2018, 2:24pm

I can’t get it to work properly either - the cards are placed like in a vertical stack not horizontally.
I have the newest files, copy&pasted the sample code and just changed the entities.

Any ideas? I’m using hassi.io and HA 0.81.6

marat · November 10, 2018, 10:11am

Love the custom add-on @Bram_Kragten. One thing I’ve noticed is the add-on doesn’t have a drop shadow like the other UI objects do:

Is there something I can do to add the drop shadow back in to make it match the other UI objects?

silvio · November 12, 2018, 12:37pm

I’m having the same issue. Running HassOS v0.82.0 on RPI3.
All cards are stacked on top of each other. When swiping to the second panel it is empty.

Br,
Silvio

kflinderman · November 13, 2018, 2:04am

I also have this same problem, but it only occurs on my front page (first view) and only on desktop (funnily enough it doesn’t stack on chrome like it does in firefox, but it doesn’t work properly). It works on later pages fine as well which is strange.

Also, if I use the progress bar on the one on the front page, it tends to cover the whole view in the color of the progress bar. It is awfully strange.

silvio · November 13, 2018, 10:29am

Will check if it works on the other pages … my test was done on the first page as well.
Will report in a few

Bram_Kragten · November 13, 2018, 2:18pm

Probably the resources are not loaded before the element is created, will check it.

Schocker · November 13, 2018, 8:49pm

@Bram_Kragten This is awesome! Thank you for your work on this!

Has anyone gotten this to work inside of card-modder? I can get the scrolling to work but the style seems to be overwritten (i.e. no rounded corners etc)

card%20swipe%20with%20card%20modder

Sorry that the gif is so small

 - type: custom:card-modder
   style:
     background-image: url("/local/cardbackK.png")
     background-repeat: no-repeat
     background-color: rgba(50,50,50,0.9)
     background-size: 100% 68px
     border-radius: 10px
     border: solid 1px rgba(100,100,100,0.3)
     box-shadow: 3px 3px rgba(0,0,0,0.4)
   card:
     type: custom:swipe-card
     parameters:
       spaceBetween: 8
       scrollbar:
         hide: false
         draggable: true
         snapOnRelease: true
     cards:
      - type: glance
        title: Current Date & Time
        column_width: calc(100% / 6)
        entities:
          - sensor.date
          - sensor.time
        style:
          - text-transform: none
      - type: glance
        title: Important Times
        column_width: calc(100% / 6)
        entities:
          - entity: sensor.dublin
            name: "Dublin"
          - entity: sensor.yukon
            name: "Yukon"
          - entity: sensor.pacific
            name: "Pam"
        style:
          - text-transform: none
      - type: glance
        title: Timezones
        column_width: calc(100% / 6)
        entities:
          - entity: sensor.atlantic
            name: "Atlantic"
          - entity: sensor.eastern
            name: "Eastern"
          - entity: sensor.central
            name: "Central"
          - entity: sensor.mountain
            name: "Mountain"
          - entity: sensor.pacific
            name: "Pacific"
        style:
          - text-transform: none

silvio · November 14, 2018, 1:08pm

I have the same issue on other tabs. Has anyone been able to solve this? I’ll check if this behaviour is due to some other custom lovelace components.

Will feedback asap.

teachingbirds · November 14, 2018, 1:13pm

I think you need to also use card modder with the same styling on all of the cards inside the swiper.

Schocker · November 15, 2018, 1:36am

Thanks @teachingbirds! That worked! I also removed the top level card-modder as it was causing a weird border. Now it looks and works great!

lolouk44 · November 19, 2018, 1:27pm

Thanks @Bram_Kragten for this.
I have a tab that will show on a tablet for House alarm arming and I wanted to add basic control without cluttering. The swipe works great so far.

PhAzE · November 20, 2018, 7:09pm

Is there any way to add in the ability to have one swipe card trigger a swipe on another (or multiple) swipe cards?

IE: I swipe left on swipe card 1, and swipe card 2 would also shift left at the same time.

This would create some great opportunities for new UI layouts.

PhAzE · November 20, 2018, 7:10pm

Also, would be neat to have an option for vertical swipe transitions.

lolouk44 · November 20, 2018, 10:23pm

For some reason the swiper card does not work in “fully kiosk browser” on a Fire 7.
It comes up with this error message on red background:
Custom element doesn't exist: swipe-card
It work on other browsers/devices. It’s just on Fully Kiosk browser.
Any idea?

Personear · November 30, 2018, 5:00am

I’m having issues with the cards not snapping in place. I’ve attached a video and my config. If anyone is able to help, I’d greatly appreciate it! What is weird is that sometimes it works perfectly, and other times it won’t snap.

       - type: custom:swipe-card
        parameters:
          grabCursor: true
        cards:
          - type: horizontal-stack
            cards:
              - type: vertical-stack
                cards: 
                  - type: custom:bignumber-card
                    title: Yesterday's Cost
                    entity: sensor.duke_cost
                    scale: 60px
              - type: vertical-stack
                cards:
                  - type: custom:bignumber-card
                    title: Yesterday's Energy Usage
                    entity: sensor.duke_energy
                    scale: 34px                
                  - type: custom:bignumber-card
                    title: Average Energy Usage
                    entity: sensor.duke_average
                    scale: 33px
          - type: horizontal-stack
            cards:
              - type: weather-forecast
                entity: weather.yahoo

gnkarn · December 2, 2018, 1:43pm

i see that there is a missmatch between the config docs , and the actual code ,
in the docs it says to add the files all under same folder , but the code is expecting the files unde /js and /css folders ,

i just receiv the error : custom element doesnt exist swipe-card, and
404 error on console . https://mysite/local/custom-lovelace/swipe-card/js/swiper.min.js?v=1 404 ()