Lovelace: Swiper card

Share your Projects! Dashboards & Frontend
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).

205

I’m running hass.io 86.1 on Ubuntu 18.04, android 8.0 and Chrome is 71, on windows 10 chrome 71, on Ubuntu last Firefox. The swipe card work only on chrome of windows 10

206

Apologies in advance if I missed the answer anywhere!

I am using this swiper card to house 3 entity button cards, which each run a script when pressed (using the ‘toggle’ tap action).

Is it possible for the tap action to automatically run when slider card page changes, without having to specifically tap on the relevant entity button card?

Thanks

207

Hi there,
this card is very nice, but I am facing a very odd issue, and to be fair, I am not sure if it depends on this card directly.

I am trying to use this plugin in combination with the mini-graph-card custom card and unlike with the standard history-graph, when I use this I cannot manage to have the “big version” of the output, the mini-graph-card gets always reduced to a box.

Here my configuration:

      - type: custom:swipe-card
        cards:
          - type: custom:mini-graph-card
            name: Temperature
            line_color: red
            line_width: 8
            font_size: 75
            hours_to_show: 168
            points_per_hour: 1
            show:
              name: true
              fill: false
            entities:
              - entity: sensor.dark_sky_temperature
                name: Outside Temperature
          - type: custom:mini-graph-card
            name: Humidity
            line_color: blue
            line_width: 8
            font_size: 75
            hours_to_show: 168
            points_per_hour: 1
            show:
              name: true
              fill: false
            entities:
              - sensor.dark_sky_humidity
          - type: custom:mini-graph-card
            name: Illuminance
            line_color: yellow
            line_width: 8
            icon: mdi:theme-light-dark
            font_size: 75
            hours_to_show: 168
            points_per_hour: 1
            show:
              name: true
              fill: false
            entities:
              - sensor.illuminance

And here is how it looks:
image

Would you mind help me out or at least clarify if I should ask this to the mini-graph-card author?

Thanks :slight_smile:
Andrea

208

Hi, can you please tell me how you have seted the card dark?

209

Hi Moncie,
That’s simply the theme, you can find it here: https://www.juanmtech.com/themes-in-home-assistant/3/

210

Hi,

I’ve update to 0.87.1 and now i’ve error:
imagem

My code:

cards:
  - entity: sensor.temperatura_sala_jantar
    graph: line
    line_color: '#FF6384'
    line_width: 8
    name: Sala de Jantar
    type: sensor
  - entity: sensor.temperatura_sala_estar
    graph: line
    line_color: '#36A2EB'
    line_width: 8
    name: sala de Estar
    type: sensor
  - entity: sensor.temperatura_garagem
    graph: line
    line_color: '#ffce57'
    line_width: 8
    name: Garagem
    type: sensor
  - accuracy: 8
    entity: sensor.temperatura_quarto
    graph: line
    line_color: '#4BC0C0'
    line_width: 8
    name: Quarto
    type: sensor
  - accuracy: 8
    entity: sensor.temperatura_portao
    graph: line
    line_color: '#4BC0C0'
    line_width: 8
    name: Portão
    type: sensor
  - accuracy: 8
    entity: sensor.temperatura_cozinha
    graph: line
    line_color: '#4BC0C0'
    line_width: 8
    name: Cozinha
    type: sensor
parameters:
  scrollbar:
    draggable: true
    hide: false
    snapOnRelease: true
  spaceBetween: 8
type: 'custom:swipe-card'

and i’ve add this on start file with raw editor:

resources:
  - type: js
    url: /local/custom-lovelace/swipe-card/swipe-card.js

before update works fine, but now not. What the problem?

Thank you.

Edit: works fine on chrome but not on firefox. Strange.

1 Like
211

Should be type: module instead of js.

1 Like
212

Correct to module. thank you :wink:

213

It works on Chrome but doesn’t work in Firefox (using 65.0 version).
Does anyone has any idea?
Thanks

1 Like
214

This is an exciting option to add to Home Assistant. Thanks for all the work you have done.
I have made several attempts at adding this to my ui-lovelace.yaml but I must be missing something. I am on release 0.88

I have copy/pasted the 3 files into www/custom-lovelace/swipe-card, www/custom-lovelace/swipe-card/js & www/custom-lovelace/swipe-card/css

I have added the url into resources with module

I have cleared the cache multiple times and restarted HA, rPi & my laptop.

But yet it keeps telling me Custom element doesn’t exist: swipe-card.

The only thing that I thought odd was the copy paste on the css file comes out in nano as one very long stream (1 line) Is that right?

Is there something else I can check?

  - title: Test
    icon: mdi:star
    cards:
      - type: custom:compact-custom-header
        header: true
      - type: custom:swipe-card
        cards:
          - type: custom:useful-markdown-card
            content: >
              ## TV Schedule for:
                  [[ sensor.tv_schedule_monday.state ]]
          - type: custom:useful-markdown-card
            content: >
              ## TV Schedule for:
                  [[ sensor.tv_schedule_tuesday.state ]]
          - type: custom:useful-markdown-card
            content: >
              ## TV Schedule for:
                  [[ sensor.tv_schedule_wednesday.state ]]
215

Check your log and console, the error will be in there.

216

Yeah, Firefox is not supported till Firefox version 66 where you can enable: javascript.options.dynamicImport in about:config

217

Is it possible to have the active/front-facing card trigger an automation? For example, turn on an Input Boolean when a swiped through to a specific card?

1 Like
218

Thanks for the reply, HA log doesn’t show anything but the console is showing an error on line 5945 of module c44e5d59e2d7eb01278d.chunk.js:
}updated(changedProps){super.updated(changedProps);if(changedProps.has("narrow")||changedProps.has("showMenu")){this._updateColumns()}}firstUpdated(){this._fetchConfig(!1);this._updateColumns=this._updateColumns.bind(this);this.mqls=[300,600,900,1200].map(width=>{const mql=matchMedia((min-width: ${width}px)`);mql.addListener(this._updateColumns);return mql});this._updateColumns()}_closeEditor(){this._state=“loaded”}_updateColumns(){const matchColumns=this.mqls.reduce((cols,mql)=>cols+ +mql.matches,0);this._columns=Math.max(1,matchColumns-+(!this.narrow&&this.showMenu))}_forceFetchConfig(){this._fetchConfig(!0)}async _fetchConfig(force){let conf,confMode=this.panel.config.mode;try{conf=await fetchConfig(this.hass,force)}catch(err){if(“config_not_found”!==err.code){console.log(err);this._state=“error”;this._errorMsg=err.message;return}conf=generateLovelaceConfig(this.hass,this.hass.localize);confMode=“generated”}this._state=“loaded”;this.lovelace={config:conf,editMode:this.lovelace?this.lovelace.editMode:!1,mode:confMode,enableFullEditMode:()=>{if(!editorLoaded){editorLoaded=!0;Promise.all([webpack_require.e(7),webpack_require.e(57)]).then(webpack_require.bind(null,749))}this._state=“yaml-editor”},setEditMode:editMode=>{if(!editMode||“generated”!==this.lovelace.mode){this._updateLovelace({editMode});return}showSaveDialog(this,{lovelace:this.lovelace})},saveConfig:async newConfig=>{const{config,mode}=this.lovelace;try{this._updateLovelace({config:newConfig,mode:“storage”});await saveConfig(this.hass,newConfig)}catch(err){console.error(err);this._updateLovelace({config,mode});throw err}}}}_updateLovelace(props){this.lovelace=Object.assign({},this.lovelace,props)}}customElements.define(“ha-panel-lovelace”,ha_panel_lovelace_LovelacePanel)},78:function(module,webpack_exports,webpack_require){“use strict”;webpack_require.d(webpack_exports,“a”,function(){return loadCSS});webpack_require.d(webpack_exports,“b”,function(){return loadJS});webpack_require.d(webpack_exports,“c”,function(){return loadModule});const _load=(tag,url,type)=>{return new Promise((resolve,reject)=>{const element=document.createElement(tag);let attr=“src”,parent=“body”;element.onload=()=>resolve(url);element.onerror=()=>reject(url);switch(tag){case"script":element.async=!0;if(type){element.type=type}break;case"link":element.type=“text/css”;element.rel=“stylesheet”;attr=“href”;parent=“head”;}element[attr]=url;document[parent].appendChild(element)})},loadCSS=url=>_load(“link”,url),loadJS=url=>_load(“script”,url),loadImg=url=>_load(“img”,url),loadModule=url=>load(“script”,url,“module”)},99:function(module,webpack_exports,webpack_require){“use strict”;webpack_require.d(webpack_exports,“a”,function(){return IronRangeBehavior});var polymer_polymer_polymer_legacy_js__WEBPACK_IMPORTED_MODULE_0=webpack_require(3);/**
@license

I’m not familiar with using Console so I’m not really sure what it’s telling me other than it can’t load card-swipe. Is there maybe an update I need?
Thanks

219

I still don’t know all that I was doing wrong but by using a different browser (switched from firefox to chrome) and changing the URL to external hosting I was able to get it to work. Yahoo, this is so cool! Thank you for your work on this.

I noticed in your js & css folders you have swiper.css & swiper.js Do I need to download them as well as the 3 files mentioned in the instructions?

220

Hello SeLLeRoNe,

You sure it shows them in boxes?
Mine is not even showing any graphs if i use the mini-graph-card within the swipecard…

221

Hi @volrath

My problem was actually a bug in the mini-graph-card itself that has been fixed by the card developer.

Beside that, yes, I used the mini-graph-card in combination with the swiper-card without issue, what problem are you facing?

If you share the code I might be able to help you out, for now my suggestion would be to make sure you got both up2date :slight_smile:

Cheers
Andrea