sg72
July 20, 2023, 5:02pm
1
Good morning
I have configured my roller shutters so that when I press on it the roller shutter lowers indicating the return of “Closed” state as well as the color red.
type: horizontal-stack
title: Volets
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_bureau_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
name: Garage
styles:
card:
- width: 80px
- height: 80px
- font-size: 12px
icon:
- width: 40px
- height: 40px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_hangar_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
styles:
card:
- width: 80px
- height: 80px
- font-size: 12px
icon:
- width: 40px
- height: 40px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_garage_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
styles:
card:
- width: 80px
- height: 80px
- font-size: 12px
icon:
- width: 40px
- height: 40px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_baie_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
styles:
card:
- width: 80px
- height: 80px
- font-size: 12px
icon:
- width: 40px
- height: 40px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
When the shutters are open, the status feedback shows open and the shutters are displayed in white color.
What I’m now trying to do, and rather than having buttons separated from each other, I want to put them in a single column like glance.
type: glance
title: Volets
entities:
- entity: switch.volet_garage_md
tap_action:
action: toggle
name: Hangar
The problem is that I can’t modify the image according to the opening and closing of the pane as well as the name “disabled” according to the opening or closing of the pane.
I’ve been on it for several days, but I can’t. Do you have any idea how I could do it? Thanks in advance.
There is a custom card in HACS called the “stack in card” which allows you to create a vertical or horizontal stack without the borders between the buttons, so that they all look as if they’re in a single card. Would that do what you want?
sg72
July 21, 2023, 7:11am
3
This is what I managed to do
type: vertical-stack
cards:
- show_name: true
show_icon: true
type: glance
entities:
- entity: switch.volet_hangar_md
tap_action:
action: toggle
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
styles:
icon:
- width: 60px
- height: 80px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
- entity: switch.volet_hangar_md
tap_action:
action: toggle
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
styles:
icon:
- width: 60px
- height: 80px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
columns: 4
The problem is that I can’t customize my Stats and my icons despite my code
I can’t replace Désactivé to ouvert
Wrong, cannot use a code from custom:button-card inside Glance card.
Check the advice about “stack in card” given above.
sg72
July 21, 2023, 1:48pm
5
I’ve been looking for a solution for more than a week, but I can’t find where the problem is. I’ve tried a lot of things, but I can’t!
Repeat - the easiest way is to take your code from the 1st post with stacks & replace all conventional stacks with “custom:stack-in-card”. Surely you need to read docs for this card to add alterations if needed.
sg72
July 21, 2023, 2:40pm
7
What do you mean by all conventional stacks ?
type: custom:stack-in-card
title: Volets
cards:
- type: custom:stack-in-card
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_bureau_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
name: Garage
styles:
card:
- width: 80px
- height: 80px
- font-size: 12px
icon:
- width: 40px
- height: 40px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
- type: custom:stack-in-card
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_hangar_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
styles:
card:
- width: 80px
- height: 80px
- font-size: 12px
icon:
- width: 40px
- height: 40px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
- type: custom:stack-in-card
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_garage_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
styles:
card:
- width: 80px
- height: 80px
- font-size: 12px
icon:
- width: 40px
- height: 40px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
- type: custom:stack-in-card
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_baie_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
styles:
card:
- width: 80px
- height: 80px
- font-size: 12px
icon:
- width: 40px
- height: 40px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
Standard horizontal & vertical stack cards.
Do you have stack-in-card installed? If no - install it. Every custom card must be installed first.
sg72
July 21, 2023, 3:34pm
9
It’s a little better, just have to align them horizontally
type: custom:stack-in-card
title: Volets
cards:
- type: custom:stack-in-card
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_bureau_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
name: Garage
styles:
card:
- width: 80px
- height: 80px
- font-size: 12px
icon:
- width: 40px
- height: 40px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
- type: custom:stack-in-card
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_hangar_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
styles:
card:
- width: 80px
- height: 80px
- font-size: 12px
icon:
- width: 40px
- height: 40px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
- type: custom:stack-in-card
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_garage_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
styles:
card:
- width: 80px
- height: 80px
- font-size: 12px
icon:
- width: 40px
- height: 40px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
- type: custom:stack-in-card
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_baie_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
styles:
card:
- width: 80px
- height: 80px
- font-size: 12px
icon:
- width: 40px
- height: 40px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
Set horizontal mode.
Alternatively you may use a conventional Grid card if you need a grid-like view.
sg72
July 21, 2023, 4:42pm
11
I think I succeeded
type: custom:stack-in-card
title: Volets
cards:
- type: horizontal-stack
cards:
- type: grid
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_bureau_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
name: Garage
styles:
card:
- width: 80px
- height: 80px
- font-size: 12px
icon:
- width: 80px
- height: 80px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_bureau_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
name: Garage
styles:
card:
- width: 80px
- height: 80px
- font-size: 12px
icon:
- width: 80px
- height: 80px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_bureau_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
name: Garage
styles:
card:
- width: 80px
- height: 80px
- font-size: 12px
icon:
- width: 80px
- height: 80px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_bureau_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
name: Garage
styles:
card:
- width: 80px
- height: 80px
- font-size: 12px
icon:
- width: 80px
- height: 80px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
On the other hand, I encounter a problem at the level of the columns! Look at the picture below
style="--grid-card-column-count: 3; is 3!
If I manually display at 4, that’s perfect, but I don’t see how to change this value?
sg72
July 21, 2023, 4:54pm
13
Is good all works
type: custom:stack-in-card
title: Volets
cards:
- type: horizontal-stack
cards:
- type: grid
columns: 4
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_bureau_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
name: Bureau
styles:
card:
- width: 100px
- height: 100px
- font-size: 12px
- border: none
icon:
- width: 80px
- height: 80px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_hangar_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
name: Hangard
styles:
card:
- width: 100px
- height: 100px
- font-size: 12px
- border: none
icon:
- width: 80px
- height: 80px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_garage_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
name: Garage
styles:
card:
- width: 100px
- height: 100px
- font-size: 12px
- border: none
icon:
- width: 80px
- height: 80px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_baie_md
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
name: Baie
styles:
card:
- width: 100px
- height: 100px
- font-size: 12px
- border: none
icon:
- width: 80px
- height: 80px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open