Lovelace: Swiper card

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

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

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

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

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

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

Should be type: module instead of js.

1 Like

Correct to module. thank you :wink:

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

1 Like

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 ]]

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

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

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

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

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?

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…

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

cards:

  • type: vertical-stack
    cards:
    • type: custom:swipe-card
      cards:
      • type: custom:mini-graph-card
        entities:
        • sensor.temperature_158d0002xxx9
          name: Woonkamer
          hours_to_show: 24
          points_per_hour: 1
      • type: sensor
        name: Woonkamer
        entity: sensor.humidity_158d0002xxx019
        graph: line
        detail: 2

As you can see i’m using the first one as a mini-graph, the 2nd one as normal. Just to try out if it works.
This results in the swipe card to work, but resulting in a empty field that can be swiped towards the normal sensor.

Try this:

cards:
  - type: vertical-stack
    cards:
      - type: custom:swipe-card
        cards:
          - type: custom:mini-graph-card
            name: Woonkamer
            hours_to_show: 24
            points_per_hour: 1
            entities:
              - entity: sensor.temperature_158d0002xxx9
          - type: sensor
            name: Woonkamer
            graph: line
            detail: 2
            entity: sensor.humidity_158d0002xxx019

Hello,

Sadly the cards:< part doesn’t work.
Also the entity: part within the entities looks like not giving any effect.