ColtonYYZ
October 14, 2024, 2:35am
1127
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…
skavan
October 18, 2024, 1:09am
1129
Hi,
Weird question that I have searched and searched for the answer for.
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!
Remcove
October 18, 2024, 9:54am
1130
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,
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
slimak
November 14, 2024, 10:51pm
1137
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'; ]]]"
madjetey
November 19, 2024, 3:17pm
1138
Can anyone guide me on setting colors for light & dark mode? I’m missing a step or 2
Example of the problem
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:here
UPDATE: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)"
mynolix1986
December 10, 2024, 12:20am
1139
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?
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.
I have been really pleased with how my compact climate button turned out, so I decided to share with the community. This uses the custom button card and is designed to be used on a picture elements card, but it can be used by itself if you don’t mind the fixed sizing. I created it for my pool control UI, which you can read about here . That post was before I created this new climate button, so it is using a much simpler template for the various temperatures.
Example 1: four compact climate butt…
fra
December 13, 2024, 7:56pm
1141
hi at all!
fra
December 14, 2024, 6:04pm
1143
thanks a lot!
please, i don’t understand how to add my last custom field to my button card at right bottom.
Could you help me?
this is my code
color_type: icon
lock:
enabled: true
unlock: double_tap
duration: 2
entity: sensor.alarm_battery
icon: mdi:car-battery
name: BATTERY
tap_action:
action: none
hold_action: none
show_label: true
show_state: false
label: |
[[[
if (states['input_boolean.alarm_battery'].state == 'on')
return '<b>ON</b>';
return 'OFF';
]]]
custom_fields:
btn2:
card:
type: custom:mushroom-chips-card
chips:
- type: template
entity: input_boolean.alarm_battery
tap_action:
action: toggle
icon: mdi:power
card_mod:
style: |
ha-card {
--chip-background: grey;
padding: 1px !important;
border-radius: 100px !important;
color:white;
}
styles:
custom_fields:
btn2:
- justify-self: start
- align-self: start
state:
- label: ALARM
styles:
grid:
- grid-template-areas: "\"n\" \"l\" \"btn2\" \"btn2\""
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content min-content min-content
- align-items: start
- will-change: transform
card:
- padding: 20px 8px 22px 12px
- height: 190px
img_cell:
- justify-content: start
- position: absolute
- width: 150px
- height: 150px
- left: 0
- bottom: 0
- margin: 0 0 -40px -40px
- background: orange
- border-radius: 500px
- opacity: "0.5"
name:
- justify-self: start
- position: absolute
- font-size: 13px
- font-weight: 500
label:
- justify-self: start
- align-self: start
- margin-top: 10px
- font-size: 11px
- font-weight: 500
icon:
- position: relative
- width: 80px
- color: "#ffffff"
- opacity: "0.7"
value: "off"
type: custom:button-card
card_mod:
style: |
#lock {
width: 18px !important;
}
Menino103
December 19, 2024, 8:33pm
1145
just set this button to <display: absolut> and then add <top: 12px> and <left: -12px> play arround with the px to set the button where you want
Hi, I’m trying to pass variables to button_card_templates: but something is wrong
button_card_templates:
orange_button:
styles:
name:
- font-size: 11px
- word-break: break-word
- white-space: unset
variables:
var_confronto: ''
var_stato: ''
card_mod:
style: |
div#img-cell > ha-state-icon {
{% if is_state('[[[ return variables.var_confronto ]]]', 'off') %}
color: orange !important;
{% else %}
color: grey !important;
{%- endif %}
}
and in dashboard
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
show_name: true
show_icon: true
tap_action:
action: toggle
entity: script.riscaldamento_basso
hold_action:
action: none
icon: valutta:Riscaldamento GIU
theme: slate
template: orange_button
name: Riscaldamento<br/>basso
variables:
var_confronto: input_boolean.riscaldamento
var_stato: 'off'
“if is_state” have something wrong doesn’t change
youre mixing the JS (= javascript, native templating to the button-card) with Jinja (native to card-mod), and that wont work
why not use all of the config in the button-card itself, and stop using card-mod.
also you dont need
in the template. this will be merged with the config, and since you set the variables there, all will be taken from those values
Thank you!!!
type: custom:button-card
show_name: true
show_icon: true
tap_action:
action: call-service
service: script.riscaldamento_basso
entity: input_boolean.riscaldamento
hold_action:
action: none
icon: valutta:Riscaldamento GIU
theme: slate
template: orange_button
name: Riscaldamento<br/>basso
state:
- value: "off"
color: orange
- value: "on"
color: grey
So better!!!
