pw44
August 3, 2021, 4:22pm
145
Thx for the help.
tried the same with a person entity.
With default card, clicking on it open the map showing location.
With this nothing happens:
type: custom:button-card
entity: person.paulo
name: Paulo
color_type: icon
show_icon: true
show_state: true
tap_action:
action: more_info
styles:
card:
- height: 100px
- width: 150px
- background-color: white
- border-radius: 5%
- padding: 1%
- color: Ivory
- font-size: 18px
- text-transform: capitalize
- color: rgb(155, 020, 155)
- font-weight: bold
pedolsky
August 3, 2021, 4:28pm
146
My bad - I had a typo in the code above. Use
more-info
(with hyphen, not with underlined)
1 Like
pw44
August 3, 2021, 4:58pm
147
Thx! solved.
and to have the text and state at the side of the icon?
@scottda ,
For your first question, there are 2 ways you can do it:
javascript template for the name to examine the state and return the name you want to see
the state feature of the custom button card to specify what name to use based on state value
For your second question, you have the same options as the first question.
Something to consider is that you can make a single button to show all of that together, rather than having 3 buttons as you mentioned. The name would show “importing” or “exporting” and the state would show watts. To make it all work as a single button you’d need to use javascript templates rather than the state feature so you can examine multiple entities.
pedolsky
August 3, 2021, 5:27pm
149
pw44
August 3, 2021, 5:52pm
150
I did.
my code:
type: custom:button-card
entity: person.paulo
layout: icon_label
name: Paulo
color_type: icon
show_icon: true
show_state: true
tap_action:
action: more-info
styles:
styles: null
icon:
- width: 70px
- height: 70px
- color: |
[[[
if (entity.state == 'luciana') return 'lightGreen';
if (entity.state == 'home') return 'Red';
else return 'grey';
]]]
card:
- height: 100px
- width: 150px
- background-color: white
- border-radius: 5%
- padding: 1%
- color: Ivory
- font-size: 18px
- text-transform: capitalize
- color: rgb(155, 020, 155)
- font-weight: bold
label:
- font-weight: bold
- text-orientation: mixed
- justify-self: end
- align-self: middle
state_display: |
[[[ return states['person.paulo'].state ]]]
the image i have:
how to have it aligned? i didn’t find how…
pedolsky
August 3, 2021, 6:03pm
151
If you want change the stylings of text and state, you have to refer to text and state, not to label
writing-mode: vertical-rl
is missing. And you have styles: twice in your code.
pw44
August 3, 2021, 6:14pm
152
did not work. with vertical-rl or vertical-lr, text becomes vertical, right or left, but not aligned.
pw44
August 3, 2021, 6:20pm
153
layout: icon_name_state2nd is the way!
pedolsky
August 3, 2021, 6:31pm
154
pw44:
text-orientation: mixed
You used text-orientation: mixed so I assumed that you want vertical text.
pw44
August 3, 2021, 9:31pm
155
Hya,
i’trying to create the following:
type: custom:button-card
color: '#EDE7B0'
name: TC9110
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- entity: binary_sensor.tc91100
name: Coffe Machine TC91100
icon: mdi:coffee-maker
type: custom:button-card
- entity: switch.cups_2_4
name: 2 - 4
icon: mdi:coffee
type: custom:button-card
- entity: switch.cups_5_8
name: 5 - 8
icon: mdi:coffee
type: custom:button-card
- entity: switch.cups_off
name: 'Off'
icon: mdi:coffee-outline
type: custom:button-card
state_color: true
show_header_toggle: false
Not being able to create the vertical stack section… any help is welcome. By the tutorial i didn’t go far
Thx in advance!
pedolsky
August 4, 2021, 9:32am
156
To avoid further misunderstandings, you mean something like this, right?
type: custom:button-card
name: TC9110
custom_fields:
buttons:
card:
type: vertical-stack
cards:
- type: custom:button-card
entity: light.flur
icon: mdi:lamps
size: 4rem
name: test
show_state: true
- type: horizontal-stack
cards:
- entity: binary_sensor.tc91100
name: Coffe Machine TC91100
icon: mdi:coffee-maker
type: custom:button-card
- entity: switch.cups_2_4
name: 2 - 4
icon: mdi:coffee
type: custom:button-card
- entity: switch.cups_5_8
name: 5 - 8
icon: mdi:coffee
type: custom:button-card
- entity: switch.cups_off
name: 'Off'
icon: mdi:coffee-outline
type: custom:button-card
1 Like
scottda
August 4, 2021, 9:33am
157
thanks @pedolsky and @ktownsend-personal , great advice from the forum and now have simplified to one button using name state, all working nicely now so thank you (i’m no java coder so this simple option worked well for me!)
2 Likes
pw44
August 4, 2021, 11:55am
158
Genau. Hatte es nicht geschaft.
Exactly. Was not finding out how.
pw44
August 9, 2021, 6:38pm
160
Hya,
by this card, color by state is not being showed:
if (states[‘binary_sensor.tc91100’].state == ‘off’ && states[‘sensor.tc91100_notify’].state == ‘0’ return ‘lime’;
i have binary_sensor.tc91100 off and sensor.tc91100_notify 0 as shown at developer tools → state
By binary_sensor.tc91100 on, the conditions works.
type: custom:button-card
styles:
card:
- height: 185px
- width: 215px
- background-color: Ivory
- border-radius: 3%
- padding: 2%
- color: blue
custom_fields:
buttons:
card:
color: rgb(28, 128, 199)
font-weight: bold
type: vertical-stack
cards:
- type: custom:button-card
styles:
card:
- font-size: 18px
- text-transform: capitalize
- font-weight: bold
- color: rgb(28, 128, 199)
layout: icon_name_state2nd
entity: binary_sensor.tc91100
icon: mdi:coffee-maker
size: 100%
color: |
[[[
if (states['binary_sensor.tc91100'].state == 'off' && states['sensor.tc91100_notify'].state == '0' ) return 'lime';
if (states['binary_sensor.tc91100'].state == 'on' && states['sensor.tc91100_notify'].state == '1' ) return 'orangered';
if (states['binary_sensor.tc91100'].state == 'on' && states['sensor.tc91100_notify'].state == '2' ) return 'lime';
if (states['binary_sensor.tc91100'].state == 'on' && states['sensor.tc91100_notify'].state == '3' ) return 'black';
else return 'slategrey'
]]]
name: Coffe Machine
show_state: true
- type: horizontal-stack
cards:
- entity: switch.tc91100_cups_5_8
layout: vertical
name: 5 - 8
icon: mdi:coffee
color: red
size: 100%
type: custom:button-card
styles:
card:
- height: 68px
- width: 63px
- background-color: white
- border-radius: 10%
- padding: 2%
- color: black
- font-size: 18px
- text-transform: capitalize
- font-weight: bold
- entity: switch.tc91100_cups_2_4
layout: vertical
name: 2 - 4
icon: mdi:coffee
color: red
size: 100%
type: custom:button-card
styles:
card:
- height: 68px
- width: 63px
- background-color: white
- border-radius: 10%
- padding: 2%
- color: black
- font-size: 18px
- text-transform: capitalize
- font-weight: bold
- entity: switch.tc91100_cups_off
layout: vertical
name: 'Off'
icon: mdi:coffee-outline
color: blue
size: 100%
type: custom:button-card
styles:
card:
- height: 68px
- width: 63px
- background-color: white
- border-radius: 10%
- padding: 2%
- color: black
- font-size: 18px
- text-transform: capitalize
- font-weight: bold
state_display: |
[[[ return states['binary_sensor.tc91100'].state ]]]
Any hint?
Thx in advance!
pedolsky
August 9, 2021, 10:05pm
162
I don’t think that color is templatable, instead use
styles:
icon:
- color: |
[[[ … ]]]
pw44
August 10, 2021, 10:04pm
163
I really didn’t get it, as you suggested:
I would solve it in this way:
styles:
icon:
color: |
[[[
if (entity.state == 'on') return 'red';
if (entity.state == 'off') return 'black';
else return 'grey';
]]]
You can change the icon size easily by using
icon: mdi:radiator
size: 2rem
(or 14px or whatever you prefer). You can also change the size in the styles: section instead:
styles:
icon:
- width: 14px
- height: 14px
My problem is that only the first condition is not working…
pedolsky
August 10, 2021, 10:34pm
164
Because it was nonsense, I corrected it. Try this instead:
styles:
icon:
color: |
[[[
if (entity.state == 'on') return 'red';
if (entity.state == 'off') return 'black';
else return 'grey';
]]]
pw44
August 11, 2021, 2:26pm
165
Hya,
i 'm trying to insert a card into a grid card, but something is terrible wrong and i’m not finding out how to solve.
type: grid
cards:
- type: custom:button-card
styles:
card:
- height: 183px
- width: 215px
- background-color: silver
- border-radius: 3%
- padding: 2%
- color: blue
custom_fields:
buttons:
card:
color: rgb(28, 128, 199)
font-weight: bold
type: vertical-stack
cards:
- type: custom:button-card
styles:
card:
- font-size: 18px
- text-transform: capitalize
- font-weight: bold
- color: rgb(28, 128, 199)
layout: icon_name_state2nd
entity: binary_sensor.tc91100
icon: mdi:coffee-maker
size: 100%
color: |
[[[
if (states['binary_sensor.tc91100'].state == 'off' && states['sensor.tc91100_notify'].state == '0' ) return 'blue';
if (states['binary_sensor.tc91100'].state == 'on' && states['sensor.tc91100_notify'].state == '1' ) return 'orangered';
if (states['binary_sensor.tc91100'].state == 'on' && states['sensor.tc91100_notify'].state == '2' ) return 'lime';
if (states['binary_sensor.tc91100'].state == 'on' && states['sensor.tc91100_notify'].state == '3' ) return 'black';
else return 'slategrey'
]]]
name: Coffe Machine
show_state: true
- type: horizontal-stack
cards:
- entity: switch.tc91100_cups_5_8
layout: vertical
name: 5 - 8
icon: mdi:coffee
color: red
size: 100%
type: custom:button-card
styles:
card:
- height: 68px
- width: 64px
- background-color: white
- border-radius: 10%
- padding: 2%
- color: darkblue
- font-size: 18px
- text-transform: capitalize
- font-weight: bold
- entity: switch.tc91100_cups_2_4
layout: vertical
name: 2 - 4
icon: mdi:coffee
color: red
size: 100%
type: custom:button-card
styles:
card:
- height: 68px
- width: 64px
- background-color: white
- border-radius: 10%
- padding: 2%
- color: darkblue
- font-size: 18px
- text-transform: capitalize
- font-weight: bold
- entity: switch.tc91100_cups_off
layout: vertical
name: 'Off'
icon: mdi:coffee-outline
color: blue
size: 100%
type: custom:button-card
styles:
card:
- height: 68px
- width: 64px
- background-color: white
- border-radius: 10%
- padding: 2%
- color: darkblue
- font-size: 18px
- text-transform: capitalize
- font-weight: bold
state_display: |
[[[ return states['binary_sensor.tc91100'].state ]]]
- type: entity
entity: binary_sensor.ek3117
icon: mdi:egg
square: false
columns: 2
the error:
Configuration errors detected:
bad indentation of a sequence entry (40:15)
37 | ]]]
38 | name: Coffe Machine
39 | show_state: true
40 | - type: horizontal-stack
--------------------^
41 | cards:
42 | - entity: switch.tc91100_cups_5_8
Visual editor is not supported for this configuration:
Key "state_display" is not expected or not supported by the visual editor.
You can still edit your config in YAML.
where do i find the rules for indentation?
Thx in advance!
lpt2007
August 11, 2021, 3:36pm
166
How can I change position in template for show_last_changed under dome-light icon?
presets:
template: standard
color_type: icon
tap_action:
action: none
show_last_changed: true
styles:
card:
- background-color: rgba(0,0,0,0.3)
icon:
- color: white
grid:
- grid-template-areas: '"i opt1 opt2 opt3 opt4" "n opt1 opt2 opt3 opt4"'
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr
custom_fields:
opt1:
- margin: 0.1em
- overflow: visible
opt2:
- margin: 0.1em
- overflow: visible
opt3:
- margin: 0.1em
- overflow: visible
opt4:
- margin: 0.1em
- overflow: visible
variables:
option_template: dimmer-option
option_button_on_color: var(--paper-item-icon-active-color)
option_text_on_color: white
option_button_off_color: var(--paper-card-background-color)
option_text_off_color: white
option1_name: Low
option1_set_value: 51
option1_range_start: 1
option1_range_stop: 77
option2_name: Med
option2_set_value: 102
option2_range_start: 78
option2_range_stop: 170
option3_name: High
option3_set_value: 255
option3_range_start: 171
option3_range_stop: 255
option4_name: 'Off'
option4_set_value: 0
option4_range_start: 0
option4_range_stop: 0
custom_fields:
opt1:
card:
type: custom:button-card
entity: '[[[ return variables.entity ]]]'
template: '[[[ return variables.option_template ]]]'
name: '[[[ return variables.option1_name ]]]'
variables:
set_value: '[[[ return variables.option1_set_value ]]]'
range_start: '[[[ return variables.option1_range_start ]]]'
range_stop: '[[[ return variables.option1_range_stop ]]]'
option_button_on_color: '[[[ return variables.option_button_on_color ]]]'
option_button_off_color: '[[[ return variables.option_button_off_color ]]]'
option_text_on_color: '[[[ return variables.option_text_on_color ]]]'
option_text_off_color: '[[[ return variables.option_text_off_color ]]]'
opt2:
card:
type: custom:button-card
entity: '[[[ return variables.entity ]]]'
template: '[[[ return variables.option_template ]]]'
name: '[[[ return variables.option2_name ]]]'
variables:
set_value: '[[[ return variables.option2_set_value ]]]'
range_start: '[[[ return variables.option2_range_start ]]]'
range_stop: '[[[ return variables.option2_range_stop ]]]'
option_button_on_color: '[[[ return variables.option_button_on_color ]]]'
option_button_off_color: '[[[ return variables.option_button_off_color ]]]'
option_text_on_color: '[[[ return variables.option_text_on_color ]]]'
option_text_off_color: '[[[ return variables.option_text_off_color ]]]'
opt3:
card:
type: custom:button-card
entity: '[[[ return variables.entity ]]]'
template: '[[[ return variables.option_template ]]]'
name: '[[[ return variables.option3_name ]]]'
variables:
set_value: '[[[ return variables.option3_set_value ]]]'
range_start: '[[[ return variables.option3_range_start ]]]'
range_stop: '[[[ return variables.option3_range_stop ]]]'
option_button_on_color: '[[[ return variables.option_button_on_color ]]]'
option_button_off_color: '[[[ return variables.option_button_off_color ]]]'
option_text_on_color: '[[[ return variables.option_text_on_color ]]]'
option_text_off_color: '[[[ return variables.option_text_off_color ]]]'
opt4:
card:
type: custom:button-card
entity: '[[[ return variables.entity ]]]'
template: '[[[ return variables.option_template ]]]'
name: '[[[ return variables.option4_name ]]]'
variables:
set_value: '[[[ return variables.option4_set_value ]]]'
range_start: '[[[ return variables.option4_range_start ]]]'
range_stop: '[[[ return variables.option4_range_stop ]]]'
option_button_on_color: '[[[ return variables.option_button_on_color ]]]'
option_button_off_color: '[[[ return variables.option_button_off_color ]]]'
option_text_on_color: '[[[ return variables.option_text_on_color ]]]'
option_text_off_color: '[[[ return variables.option_text_off_color ]]]'
alerter:
template: standard
show_last_changed: true
color_type: icon
extra_styles: |
[[[ return `
@keyframes pulse {
20% {
background-color: ${variables.color};
}
}
`]]]
variables:
color: var(--paper-item-icon-active-color)
state:
- value: 'on'
id: value_on
styles:
card:
- animation: pulse 1s infinite
