Lovelace: Swiper card

Share your Projects! Dashboards & Frontend
184

Sorry to say but this is not working even after clear browser cache and changing module version from 1.1.0 to 2.0.0.

Image2
Image21002Ɨ440 42.9 KB

185

It seems like there is a bit of a timing issueā€¦ I added update to the set hass for now, this is not a good solution, and it can take some time before it will show correctly (the first state change). I will look for the right place to call updateā€¦

1 Like
186

Now itā€™s working OKā€¦

The only problem it seem is that until data for sensor is ā€œunknown statusā€ it getā€™s error:

Log Details (ERROR)

Thu Jan 17 2019 11:53:31 GMT+0100 (Central European Standard Time)

http://192.168.3.32:8123/lovelace/0:0:0 Uncaught

But itā€™s loaded anyway, which is OKā€¦ maybe some polishing and all will be done. Loading time is really fast now, which is greatā€¦

187

ohā€¦ itā€™s differentā€¦

Error happens only when lovelace is runnedā€¦ If I go to Configuration and then back to lovelace I get error, in other case I do not get this errorā€¦ no matter if data to sensor is loaded or notā€¦

188

But on the other browser I get error:

20190117_120215
20190117_1202154032Ɨ1960 2.19 MB

This is WallPanel which is used to show HA on Android Tabletā€¦

189

clear the cache

190

Yes, you were rightā€¦ now itā€™s workingā€¦ GREAT!!

Thank youā€¦

191

Hey, Iā€™m having the config is not defined error as well, but Iā€™ve cleared my cache, Iā€™ve tried different browsers, and Iā€™m still getting nothing.

Though, through a little troubleshooting, it seems to only fail when I add in a custom component. My swipe card works with entity cards and such, but Iā€™m trying to use the big number custom card and it fails. I also tried adding in a custom mini media player and it fails. But if it just includes like entity cards it is all fine. Also, if I comment out the swiper card, all my big number cards show up fine. I can give more info if itā€™d help. Though it doesnā€™t look as good Iā€™ve moved to the gauge card and it works just fine.

192

after i clear the cache, itll work once on my chrome browser on mac and then stop working after that,

1 Like
193

Feature Request - Is it possible to expand this card such that it can swipe between specific views? It would be a cool way to implement swipe functionality for mobile devices.

194

Ok, beginner trouble:
custom element doesnā€™t exist: swipe-card

config contains:
- url: /local/custom-lovelace/swipe-card/swipe-card.js
type: module

swipe files placed in:
/home/homeassistant/.homeassistant/www/custom-lovelace/swipe-card

Update: browser cache is the magic

195

There is a card-width attribute. Can you add a card-height parameter?

196

If you have a feature request or problem, please create an issue on my repo, it get messy real quick on the forum.

197

Try setting the view to panel: true and the swiper as only card in the view.

198

I want to use a Gauge Card, but it shows up empty.

In the IOS app itā€™s working.

200

But this would mean you would only have 1 tab right? I wish there was a way to swipe between views without losing the ā€œtabsā€.

I ā€œsolvedā€ this temporarily until I find a way to swipe without losing tabs. I made ā€œnavigationā€ buttons at the bottom. See screenshot.

image
image1125Ɨ2436 254 KB

201

Lovelace: Swiper card

read the textā€¦

202

Is it possible to have the individual cards that are swiped through be conditional cards. For example, I am trying to make travel times change depending on everyoneā€™s location. I tried something like this, but with no success:

## Testing swipe card with conditional cards
  - type: custom:swipe-card
    card_width: '185px'
    start_card: 2
    parameters:
      effect: 'coverflow'
      grabCursor: true
      centeredSlides: true
      slidesPerView: 'auto'
      coverflowEffect:
        rotate: 50
        stretch: 0
        depth: 100
        modifier: 1
        slideShadows : true
      pagination:
        type: 'bullets'
    cards:
      - type: conditional
        conditions:
          - entity: device_tracker.me
            state: "home"
        card:
          - type: sensor
            entity: sensor.travel_time_to_me_work
            graph: line
            name: me Work
      - type: conditional
        conditions:
          - entity: device_tracker.wife
            state: "home"
        card:
          - type: sensor
            entity: sensor.travel_time_to_wife_work
            graph: line
            name: wife Work

But get ā€œNo card type configured.ā€ error.

I know with 2 cards as pictured here it might be possible to have the whole swipe card in the condition because there are only 4 possible combinations (me work/wife work, me work/wife home, me home/wife work, me home/wife home). But as I expand the number of cards, this would quickly become nearly impossible to upkeep. It would be nice to have the granularity to edit each slide card with conditions.

If someone knows how to do this, let me know!

203

Hello. Iā€™ve dowloaded the file, putted in the correct folder and it works on windows (I use an ubuntu machine for hass.io and modify all from a windows pc trought cloud9). but if I enter from mobile or another pc I get custom element doesnā€™t exist: swipe-card in a red block.
What iā€™m doing wrong?

204

What OS are you running on your phine (and specifically version number). Most custom cards donā€™t work on older devices. You will need a considerably newer browser to see them (ios 9 for instance doesnā€™t work).