sg72
July 19, 2023, 10:46am
1
Hello,
type: vertical-stack
title: Volets
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_bureau_md
styles:
card:
- width: 80px
- height: 80px
icon:
- width: 40px
- height: 40px
state:
- value: 'on'
color: red
name: Fermé
icon: mdi:window-shutter
- value: 'off'
color: white
name: Ouvert
icon: mdi:window-shutter-open
In my button, I canât put the name of the button! For example, Iâm looking to put the word âGarageâ like the image below!
Is it possible with switch ?
sg72
July 19, 2023, 12:48pm
3
I tried, but it doesnât work!
type: vertical-stack
title: Volets
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_bureau_md
name: Garage
styles:
card:
- width: 80px
- height: 80px
icon:
- width: 40px
- height: 40px
state:
- value: 'on'
color: red
name: Fermé
icon: mdi:window-shutter
- value: 'off'
color: white
name: Ouvert
icon: mdi:window-shutter-open
i donât see that in your card ! ?
under - type same intend as tap_action: and entity:
Ahh i see now
EDIT: but you are changing it with your state !
You need to add âshow_stateâ, so you get both âname and stateâ, and template the state value
This change the ânameâ of the card/entity , you need to change the State - value ( and add show_state ) please have a look att some of the examples in the Doc
sg72
July 19, 2023, 1:12pm
7
Yes I agree, but I need this name value to change the state of my pane (open or closed)
no you donât you are changing THE NAME, Not the VALUE , please add âshow_stateâ under the entity, above name(garage), then youâll see , then remove name under state:, and you have your garage, AND state value (on/off) , it is these values you have to change using âstate_displayâ
state:
- value: on ... means when value is on, then color red, the name is Ferme(NOT the value, on)
sg72
July 19, 2023, 1:33pm
9
type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_hangar_md
show_state: true
styles:
card:
- width: 80px
- height: 80px
icon:
- width: 40px
- height: 40px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
yes, then you have to add âstate_display:â same intend as the entity( i.e under the entity, )
state_display: |
[[[
if (entity.state == 'on') return 'Opened'; return 'Closed';
]]]
⊠or the other way around
sg72
July 19, 2023, 1:59pm
12
I will have another question, is it possible to modify the #state div?
yes, with/under style, add name: - font-size, state: - font-size
Please read the examples in the url above
When CSS/Template options in a card is not enough, you can install Card_Mod( Tons of examples in this Forum )
sg72
July 19, 2023, 2:35pm
14
like that ?
type: custom:button-card
card_mod:
style: |
#state {
font-size:10px
}
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
icon:
- width: 40px
- height: 40px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
nooo, under styles: as you already have , if you had bothered to look in the DOC-EXAMPLES , you would know that this card has comprehensive Style options, with CSS/Templating(which you have already added some)
sg72
July 19, 2023, 3:35pm
16
Sorry, but I donât understand the process. I have successfully installed card_mod via HACS
I tried to see if anything move with this code, but nothing moves
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_hangar_md
card_mod:
style: |
ha-card {
font-family: "Lucida Handwriting";
--card-primary-font-size: 10px
}
show_state: true
state_display: |
[[[
if (entity.state == 'on') return 'Fermé'; return 'Ouvert';
]]]
styles:
card:
- width: 80px
- height: 80px
icon:
- width: 40px
- height: 40px
state:
- value: 'on'
color: red
icon: mdi:window-shutter
- value: 'off'
color: white
icon: mdi:window-shutter-open
Donât use card_mod, you donât need card_mod,(noone told you to use card_mod for this) read my previous post
sg72
July 19, 2023, 4:26pm
18
i think i found
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
ok, and if you want different size on name/state , then you add name: (and) state: ⊠as you have card: and icon under styles: where you define CSS like width, height, color, font-type, etc, then you can specify colors/font-size/bold/type etc, individually for âNameâ and âState:â
sg72
July 20, 2023, 7:05am
20
Ok thank you very much it works great
I added columns: 4 to my code but it doesnât work!
type: vertical-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: custom:button-card
styles:
card:
- width: 80px
- height: 80px
icon:
- width: 40px
- height: 40px
icon: mdi:window-shutter
name: Bureau
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_bureau_stop
styles:
card:
- width: 80px
- height: 80px
icon:
- width: 40px
- height: 40px
icon: mdi:stop
name: STOP
- 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: custom:button-card
styles:
card:
- width: 80px
- height: 80px
icon:
- width: 40px
- height: 40px
icon: mdi:window-shutter
name: Hangar
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_hangar_stop
styles:
card:
- width: 80px
- height: 80px
icon:
- width: 40px
- height: 40px
icon: mdi:stop
name: STOP
- 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: custom:button-card
styles:
card:
- width: 80px
- height: 80px
icon:
- width: 40px
- height: 40px
icon: mdi:window-shutter
name: Garage
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_garage_stop
styles:
card:
- width: 80px
- height: 80px
icon:
- width: 40px
- height: 40px
icon: mdi:stop
name: STOP
- 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
- type: custom:button-card
styles:
card:
- width: 80px
- height: 80px
icon:
- width: 40px
- height: 40px
icon: mdi:window-shutter
name: Baie
- type: custom:button-card
tap_action:
action: toggle
entity: switch.volet_baie_stop
styles:
card:
- width: 80px
- height: 80px
icon:
- width: 40px
- height: 40px
icon: mdi:stop
name: STOP
columns: 4
