n refers to the default button name and i to the icon. That way you don’t have to define custom_fields for these two should you choose to utilize them. Same goes for ‘l’ as in label.
Sorry about the choppiness. Its the converter I used for mp4 to gif.
2 Likes
wow that is a huge config… might benefit from some templating optimizations, but other than that, I would really recommend creating a separate ‘show off’ post for that in the category Share your Projects.
it will be lost here very soon, and given it’s unique properties really needs its own topic 
you could elaborate on the actual ticker animation, and give us some details on how you managed to set the speed and duration of the animation, in relation to the content (length of the string) which is by definition dynamic considering the many sources and news they bring?
Ive found that to be the most challenging aspect moving from the html marquee tag (which simply scrolls the string that it is offered) to the js translateX code (which requires all sorts of complex calculations depending on screen size/available button estate and string length )
Especially when showing on Desktop and Mobile. Which makes me wonder how your ticker tape actually shows on mobile…
thanks for sharing
2 Likes
Hey, I know it’s a large config section. I tried to move it over to sensors.yaml but I couldn’t get it to work without errors with a couple other sensors I have for something else.
Truth be told, I found this code online in one of the threads on here if I remember correctly. Regarding the speed and duration, in their code, I played around with the following two lines and it some how (don’t understand how) it allows me to control those attributes:
transform: translate3d(-100%, 0, 0); # I change the -100% up or down depending on what I need to speed it up or down)
and
animation-duration: 240s; # I use this for the duration after watching the ticker and seeing if it restarted prematurely or way too late
Here’s what it looks like on mobile (Ignore the colour, I used a gif converter and compressor to get it under 3mb haha and I haven’t done anything regarding mobile, so ignore the placement of everything):
yeah, thats what I did at first, but it was never right… so I ended up calculating the total string length, and setting those variables based in the length.
ofc, the difficulty also lies in the fact that the available space is different with different media screen sizes and orientations…
but I managed
Hi,
Weird question that I have searched and searched for the answer for.
Let’s assume I have a variable use_state.
variables:
use_state: false
icon_color: blue
I want to conditionally set the property color in styles (or card_mod equivalent). (pseudo code)
styles:
icon:
if use_state == false
- color: {{ icon_color }}
endif
The point is, I need the whole -color prop to be conditional, because button card by default will apply the active or inactive color. if it fails the use_state conditional, I don’t touch the -color prop. if I make the conditional to be the color prop:
- color: if use_state etc...
then it zaps the color prop completely and I lose all the normal button-card color styling.
I’ve tried {% if … %} and [[[ if… ]]] - all to no avail.
FWIW - this is in a popup script. and so I can also pass in variables to the script.
Any ideas? I hope I explained this sufficiently!
Hello, I tried following the example in the 1st post but I assume some things are a bit outdated.
Can someone help me figure out what the problem is with the following?
I use a template (part of the example):
blind-option:
template: option-button
tap_action:
action: perform-action
perform_action: cover.set_cover_position
target:
entity: '[[[ return variables.entity ]]]'
data:
position: '[[[ return variables.set_value ]]]'
state:
- operator: default
styles:
card:
- background-color: '[[[ return variables.option_button_off_color ]]]'
- color: '[[[ return variables.option_text_off_color ]]]'
- operator: template
value: >-
[[[ return (entity.attributes.brightness||0) >= variables.range_start
&& (entity.attributes.brightness||0) <= variables.range_stop ]]]
styles:
card:
- background-color: '[[[ return variables.option_button_on_color ]]]'
- color: '[[[ return variables.option_text_on_color ]]]'
in my dashboard.yaml file I use the following code:
- type: 'custom:button-card'
entity: cover.scherm
template: presets
name: Blinds
variables:
entity: cover.scherm
option_template: blind-option
option1_name: ANG
option1_set_value: 12
option1_range_start: 2
option1_range_stop: 35
option2_name: OPN
option2_set_value: 50
option2_range_start: 36
option2_range_stop: 99
option3_name: CLN
option3_set_value: 100
option3_range_start: 100
option3_range_stop: 100
option4_name: CLS
option4_set_value: 0
option4_range_start: 9999
option4_range_stop: 9999
When I press one of the 4 buttons I get the following error:
Failed to perform the action cover/set_cover_position. must contain at least one of entity_id, device_id, area_id, floor_id, label_id.
any suggestions?
Kind regards,
Remco
for those who need it. Here is my full custom template file for this button section:
---
standard:
color_type: card
size: 80%
hold_action:
action: more-info
styles:
card:
- padding: 0.2em
- '--mdc-ripple-color': yellow
- '--mdc-ripple-press-opacity': 0.5
icon:
- opacity: 0.5
name:
- font-size: 0.65em
- white-space: normal
state:
- font-size: 0.65em
- white-space: normal
label:
- font-size: 0.4em
- white-space: normal
wide:
template: standard
styles:
grid:
- position: relative
- grid-template-areas: '"i n"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr
container:
color_type: label-card
color: dimgray
styles:
card:
- padding: 0
name:
- border-radius: 0.4em 0.4em 0 0
- padding: 0.1em
- width: 100%
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "buttons"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
buttons:
- background-color: 'rgba(0,0,0,0.3)'
- margin: 0
- padding: 0.3em
option-button:
template: standard
show_icon: false
aspect_ratio: 1/1
styles:
card:
- border-radius: 20%
blind-option:
template: option-button
tap_action:
action: perform-action
perform_action: cover.set_cover_position
target:
entity: '[[[ return variables.entity ]]]'
data:
position: '[[[ return variables.set_value ]]]'
state:
- operator: default
styles:
card:
- background-color: '[[[ return variables.option_button_off_color ]]]'
- color: '[[[ return variables.option_text_off_color ]]]'
- operator: template
value: >-
[[[ return (entity.attributes.brightness||0) >= variables.range_start
&& (entity.attributes.brightness||0) <= variables.range_stop ]]]
styles:
card:
- background-color: '[[[ return variables.option_button_on_color ]]]'
- color: '[[[ return variables.option_text_on_color ]]]'
presets:
template: standard
color_type: icon
tap_action:
action: none
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 ]]]'
I am trying to create a card that adjusts to the currently logged-in user in HA, and my intention is to capture their image from the user profile. I adjusted the code already shared here by user @sebbaT Fun with custom:button-card - #861 by sebbaT because the entity names have accents and contain two personal names per user, in my case for example, “João Silva.”
type: custom:button-card
entity: |-
[[[
return "person." + user.name.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/ /g, "_");
]]]
show_entity_picture: true
The question I want to ask is whether there is a cleaner alternative to achieve this by capturing data from the currently logged-in user entity.
Can anyone help… I have this custom field pulling in Temp & Humidity and i just want an icon beside both. No need to change color or anything.
custom_fields:
temp: |
[[[ return states['sensor.main_floor_thermometer_temperature_2'].state +
'°C' ]]]
hum: |
[[[ return states['sensor.main_floor_thermometer_humidity_2'].state + '%'
]]]
there is a nice example how to do that in the cards documentation, did you check that?
I looked at it… must have been late. i see it now. Thank you…
custom_fields:
temp: >
[[[
return `<ha-icon
icon="mdi:thermometer"
Style="width 22px; height: 22px; color: yellow;">
</ha-icon><span>${states['sensor.main_floor_thermometer_temperature_2'].state}°C`]]]
1 Like
nice yu9 it it working, though Style should really be style…
also the state can use the built-in helpers function lokalize, so you int need to add the unit anymore
look it up, its a real powerful option of button-card
helpers.localize(entity)
if you use the entity, or, eg
return helpers.localize(states[afstand],undefined,0);
if you want to set the rounding.
not you dont need to add .state anymore when using the helpers, it just requires the ‘state’ entity_id
so in your case
${states['sensor.main_floor_thermometer_temperature_2'].state}°C
would become
${helpers.localize(states['sensor.main_floor_thermometer_temperature_2'])
I’ve gotten rid of all units on all cards like that, just let the system take care of that.
the Processor button with all the custom_fields uses:
custom_fields:
temp: >
[[[ return `<ha-icon icon=mdi:thermometer
<span style='width:15px; color: var(--state-color);'> </ha-icon>
${helpers.localize(entity)}</span>`; ]]]
cpu: >
[[[ return `<ha-icon icon=mdi:server style='width:12px;'> </ha-icon>
Cpu: <span style='color: var(--cpu-color);'>
${helpers.localize(states['sensor.processor_use'])}</span>`; ]]]
ram: >
[[[ return `<ha-icon icon=mdi:memory style='width:12px;'></ha-icon>
Ram: <span style='color:var(--ram-color);'>
${helpers.localize(states['sensor.memory_use_percent'])}</span>`; ]]]
disk: >
[[[ return `<ha-icon icon=mdi:harddisk style='width:12px;'></ha-icon>
Disk: <span style='color:var(--disk-color);'>
${helpers.localize(states['sensor.disk_use_percent_home'])}</span>`; ]]]
in my setup
Just find out what’s the original value of the property (with code inspector), and then assign that value if your condition isn’t met. You can also try values like ‘unset’, ‘initial’, ‘inherit’.
- color: "[[[ return variables.use_state ? variables.icon_color : 'unset'; ]]]"
Can anyone guide me on setting colors for light & dark mode? I’m missing a step or 2
One set of lights:
type: custom:vertical-stack-in-card
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: markdown
content: |
### Master Bedroom
card_mod:
style: |
ha-card {
height: 100%;
width: 250%
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.security_booth_lights_l1
icon: mdi:lightbulb-group
show_name: false
show_icon: true
color_type: card
aspect_ratio: 1/1
styles:
grid:
- grid-template-areas: "\"i\" \"n\" \"s\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
name:
- justify-self: center
- font-weight: normal
state:
- justify-self: start
state:
- value: "off"
styles:
card:
- color: SlateGrey
- background-color: var(--switch-button-off-color) !important;
- value: "on"
styles:
card:
- color: White
- background-color: var(--switch-button-on-color) !important;
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
entity: switch.security_booth_lights_l2
icon: mdi:television-classic
show_name: false
show_icon: true
color: auto
color_type: card
aspect_ratio: 1/1
styles:
grid:
- grid-template-areas: "\"i\" \"n\" \"s\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
name:
- justify-self: center
- font-weight: normal
state:
- justify-self: start
state:
- value: "off"
styles:
card:
- color: SlateGrey
- background-color: var(--switch-button-off-color) !important;
- value: "on"
styles:
card:
- color: White
- background-color: var(--switch-button-on-color) !important;
- type: custom:button-card
entity: switch.security_booth_lights_l3
icon: mdi:air-conditioner
show_name: false
show_icon: true
color: auto
color_type: card
aspect_ratio: 1/1
styles:
grid:
- grid-template-areas: "\"i\" \"n\" \"s\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: center
- text-align: start
name:
- justify-self: center
- font-weight: normal
state:
- justify-self: start
state:
- value: "off"
styles:
card:
- color: SlateGrey
- background-color: var(--switch-button-off-color) !important;
- value: "on"
styles:
card:
- color: White
- background-color: var(--switch-button-on-color) !important;
view_layout:
position: sidebar
card_mod:
style: |
ha-card {
background: transparent !important;
margin-top: 0px;
#margin-left: 15px;
#max-width: 450px;
}
EDIT:
Found a solution here
UPDATE:
It works but isn’t consistent for button card. Modifying the Metro theme but the background-color reference I created for off is (finally) behaving itself, on isn’t registering consistently at all. Using element inspector sometimes the color doesn’t change to the reference selected for on without reloading the page. If I color the card directly in yaml, the on color stays loaded in off mode for light or dark.
Relevant part of theme yaml
light:
lovelace-background: var(--background-image)
background-image: "center / cover no-repeat fixed url('/local/Metro_day.svg')"
switch-button-off-color: "rgba(255,255,255,.55)"
switch-button-on-color: "rgba(255,193,7,.75)"
dark:
lovelace-background: var(--background-image)
background-image: "center / cover no-repeat fixed url('/local/Metro_night.svg')"
switch-button-off-color: "rgba(0,0,0,.55)"
switch-button-on-color: "rgba(255,193,7,.75)"
I got an interesting question that maybe someone is able to answer. Is there a way to template a custom_field (with or without card mod) so it shows two different values (of two sensors) in an alternating way?
Meaning it looks like it falshes every second or so at at each flash it shows the other value.
I am trying to make a climate card that when the AC is running shows the current temperature and the set temperature flashes in place until it’s done cooling/heating.
I have been unable to use template sensors or animations (in card mod as they don’t support templated content).
Any ideas?
@mynolix1986, you might find this interesting. I didn’t do alternating values, but I did arrange multiple values around the button to show the states of my HVAC.