I solved it with a template sensor returning different icons if the entity is on or off and included the entity as tap_action to that template sensor button.
1 Like
Does anybody have problems with swiper-card and conditional-card? Accessing my Dashboard for the first time this weird visual error occurs, if i reload or change to another and back to that dashboard it seems fine 
Any ideas?
If the condition is met it looks like this
type: custom:swipe-card
parameters:
roundLengths: true
effect: coverflow
speed: 650
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
cards:
- type: conditional
conditions:
- entity: sensor.washer_status
state: 'True'
card:
type: picture-elements
aspect_ratio: 100%
image: /local/washer.png
elements:
- entity: sensor.power_washer
style:
color: black
font-size: 1rem
left: 15%
top: 93%
type: state-label
- entity: sensor.consumption_22
style:
color: black
font-size: 1rem
left: 70%
top: 93%
type: state-label
- entity: sensor.washer_status
state_image:
'True': /local/washer_on.gif
'False': /local/washer.png
style:
clip-path: circle(30% at center)
width: 100%
left: 50%
top: 50%
tap_action:
action: more-info
type: image
- type: grid
columns: 2
cards:
Thanks in advance!
First off, thanks @Mattias_Persson for sharing your work/design here. it has really helped me as a framework to work from to learn how lovelace UI works.
I have gotten stuck on 1 part, I was hoping someone here could help me. Its more CSS related but hopefully someone here knows the answer.
im trying to change how the gridlayout works for a particular card. I figured the simplest way to do this is to create a new button_card_template, that references the “base” template and change the grid layout. that seemed to work but i cant figure out what to change to get what i want.
for the bottom right tile, the text is “sync bedrooms” it is too long and gets truncated to “sync bedro…” I wanted the text to wrap onto the next line. I dont need the state displayed, it can be hidden as it is just a toggle switch and i will show the state by modifying the icon displayed.
this is what i have tried (code snippet for above image)
base2:
template:
- base
styles:
grid:
- grid-template-areas: |
"icon ."
"n n"
"n n"
- grid-template-columns: fit-content(100%) 1fr
- grid-template-rows: 1fr 1fr 1fr
- gap: 2%
- align-items: start
I assumed by change the last row of the grid would allow the text to occupy the whole area, but it didnt work. i tried a variety of settings like change grid template columns and rows etc. but never got good results. ideally it would be proportioned exactly like the others. (the “n” refer to name, and “s” to the entity state right?)
Thanks for any help
Nice one!
Could you please share the code for the colored circle ?
Thanks! 
Try in a horizontal-stack
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: sensor.washer_status
state: 'True'
1 Like
It’s the .ellipsis class in button-card truncating the name.
This should work
- type: custom:button-card
...
show_state: false
styles:
name:
- white-space: normal
- text-align: justify
1 Like
like the media swiper-card, yes i tried. But then i do have a empty horizontal-stack in the first swiper-card Any idea, what could cause this visual bug?
like the media swiper-card, yes i tried. But then i do have a empty horizontal-stack in the first swiper-card Any idea, what could cause this visual bug?
I also get a weird bug if im using swipe-card for a single grid button:
type: grid
title: Wohnzimmer
columns: 2
cards:
- type: custom:swipe-card
cards:
- type: custom:button-card
entity: light.wohnzimmer_stehlampe
name: Stehlampe
template:
- light
- icon_shade
- type: custom:button-card
entity: light.wohnzimmer_stehlampe
name: Stehlampe
template:
- light
- icon_shade
On mobile it looks like this:
Well, your conditions have to be met, otherwise it’s blank
- type: grid
title: Media
view_layout:
grid-area: media
columns: 1
cards:
- type: custom:swipe-card
start_card: 1
parameters:
roundLengths: true
effect: coverflow
speed: 650
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
cards:
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: light.dator
state: 'on'
card:
type: picture-elements
aspect_ratio: 100%
image: /local/mattias.png
elements:
- entity: sensor.power_washer
style:
color: black
font-size: 1rem
left: 15%
top: 93%
type: state-label
- entity: sensor.consumption_22
style:
color: black
font-size: 1rem
left: 70%
top: 93%
type: state-label
- entity: sensor.washer_status
state_image:
'True': /local/mattias.png
'False': /local/mattias.png
style:
clip-path: circle(30% at center)
width: 100%
left: 50%
top: 50%
tap_action:
action: more-info
type: image
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: media_player.vardagsrum
name: Vardagsrum
template:
- media
- icon_apple_tv
- type: custom:button-card
name: Sovrum
entity: media_player.sovrum
template:
- media
- icon_apple_tv
- type: custom:button-card
entity: media_player.spotify
name: Spotify
template:
- media
- icon_spotify
- type: custom:button-card
entity: media_player.kok
name: Nest Mini
template:
- media
- icon_nest_mini
sure, the thing i want is to show the entity-picuter only if the sensor is on. If not i just want to have the normal grid-buttons. Maybe i need to talk to the swiper-card people, cause probably its a specific card problem. If im using swiper-card in the grid-card the size is not working right.
Or do you have any other ideas? Thanks you!
1 Like
Cheers mate that worked perfectly
swipe-card adds “pages” for each card
- condition true → picture-elements
- grid
if the condition is false
- condition false → blank
- grid
You can solve it, but then you don’t need swipe card
conditional true → picture elements
conditional false → grid
1 Like
Yes, all of them are working.
Maybe I should say I didnt use HA in Docker like you. I use the Supervisor on a Raspi.
sure no problem, im not a programmer all im doing with Mattias code is thrugh trial and error, just trying to read what he has done. i don´t know if that´s the best way to do it but i’ve created a template to use only with my water card and not changing other circles through the dashboard. then i just replaced the stroke color from stroke="#313638" to stroke="#03a9f4". see below my card code. also i’ve add graph to it.
water:
template:
- base
show_state: false
custom_fields:
circle: >
[[[ {
const reabastecimentos = Math.round(entity.state);
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><style>circle { transform: rotate(-90deg); transform-origin: 50% 50%;stroke-dasharray: ${circumference};stroke-dashoffset: ${circumference - reabastecimentos / 100 * circumference};}
tspan {font-size: 10px;}</style> <circle cx="25" cy="25" r="24.5" stroke="#03a9f4" stroke-width="1.5" fill="#FFFFFF08" style="
transform: rotate(-90deg); transform-origin: 50% 50%;" />
<text x="50%" y="54%" fill="#8d8e90" font-size="11" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${reabastecimentos}</text></svg>`; } ]]]
graph:
card:
type: "custom:mini-graph-card"
line_color: "#3182b7"
line_width: 4
font_size: 75
upper_bound: ~100
lower_bound: ~0
show:
name: false
icon: false
state: false
legend: false
labels: false
styles:
name: [top: 57%, left: 0%, width: 100%, position: absolute]
custom_fields:
graph: [bottom: 0%, left: 0%, width: 100%, position: absolute]
circle:
[
top: 6.5%,
left: 54.5%,
width: 3.5vw,
position: absolute,
letter-spacing: 0.03vw,
]
icon:
- width: 67%
- fill: "#9da0a2"
1 Like
yeah true,
but I still want to have the option to swipe once to get to my buttons for the bathroom while the washer is on and the picture-entities card is shown
Now I happy I find this one nice work
I solved the problem with the state-switch. Works like a charm to who it whom.
type: custom:state-switch
entity: sensor.washer_status
states:
'True':
type: custom:swipe-card
parameters:
roundLengths: true
effect: coverflow
speed: 650
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
cards:
- type: picture-elements
aspect_ratio: 100%
image: /local/washer.png
elements:
- entity: sensor.power_washer
style:
color: black
font-size: 1rem
left: 15%
top: 93%
type: state-label
- entity: sensor.consumption_22
style:
color: black
font-size: 1rem
left: 70%
top: 93%
type: state-label
- entity: sensor.washer_status
state_image:
'True': /local/washer_on.gif
'False': /local/washer.png
style:
clip-path: circle(30% at center)
width: 100%
left: 50%
top: 50%
tap_action:
action: more-info
type: image
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: light.badezimmer_spiegel
name: Spiegel
template:
- light
custom_fields:
icon: >
<ha-icon icon="phu:adore-mirror"
style="color:var(--button-card-light-color);"></ha-icon>
- type: custom:button-card
entity: light.badezimmer_decke
name: Decke
template:
- light
- icon_spot
- type: custom:button-card
entity: sensor.xiaomi_bad_temperature
name: Klima
custom_fields:
graph:
card:
entities:
- sensor.xiaomi_bad_temperature
tap_action:
action: more-info
template:
- temperature
- icon_temp
- type: custom:button-card
entity: binary_sensor.bewegungsmelder_bad
name: Bewegung
template:
- base
- icon_bathroom
'False':
type: grid
columns: 2
cards:
- type: custom:button-card
entity: light.badezimmer_spiegel
name: Spiegel
template:
- light
custom_fields:
icon: >
<ha-icon icon="phu:adore-mirror"
style="color:var(--button-card-light-color);"></ha-icon>
- type: custom:button-card
entity: light.badezimmer_decke
name: Decke
template:
- light
- icon_spot
- type: custom:button-card
entity: sensor.xiaomi_bad_temperature
name: Klima
custom_fields:
graph:
card:
entities:
- sensor.xiaomi_bad_temperature
tap_action:
action: more-info
template:
- temperature
- icon_temp
- type: custom:button-card
entity: binary_sensor.bewegungsmelder_bad
name: Bewegung
template:
- base
- icon_bathroom
1 Like
Hi! Have you managed to fix this issue? I have exactly the same symptoms as yours. For whatever reason I couldn’t find out, my tablet suddenly became extremely slow. I can’t even refresh it. I haven’t changed anything other than HA and HACS updates. it is only the tablet, my phone and computer works well. The way it is now, I’m considering to remove it from the wall. Thanks!
hello,
is that you mean
Date.now() - Date.parse(entity.last_changed) < 1000
something like that ?
and by the way i wanna ask what’s the meaning of entity === undefined? the return value of timeout, i dont understand the meaning of this code below.
timeout: >
[[[ return entity === undefined || Date.now() - Date.parse(entity.last_changed); ]]]
can you please explain this code? Thank you so much.
timeout: >
[[[ return entity === undefined || Date.now() - Date.parse(entity.last_changed); ]]]