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:
Would you mind help me out or at least clarify if I should ask this to the mini-graph-card author?
Thanks 
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:
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 
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
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
- sensor.temperature_158d0002xxx9
- type: sensor
name: Woonkamer
entity: sensor.humidity_158d0002xxx019
graph: line
detail: 2
- type: custom:mini-graph-card
- type: custom:swipe-card
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.