Hi,
I want to move entity picture inside button card according to value of a sensor.
Is it possible to get current position of it to convert into variable and use it inside animations keyframe statement?
TIA
Hi,
I created a binary sensor (Aqara T1 Door Sensor) button card which calls a script to turn on my A/C on tap action. This function works fine, and I’m also able to change the state name to On/Off instead of the default Open/Closed.
However, I have difficulty changing the icon color based on the state. Below is my code, is there anything I’m doing wrong?
type: custom:button-card
entity: binary_sensor.living_room_air_con_sensor_contact
name: Air Con
show_name: false
show_state: true
size: 30%
tap_action:
action: call-service
service: script.living_room_air_con_toggle
color_type: icon
color: |
[[[
if (entity.state === 'off')
return 'Green'
else
return 'Grey'
]]]
state_display: |
[[[
if (entity.state === 'off')
return 'Off'
else
return 'On'
]]]
I’ve also tried using;
state:
- value: 'On'
color: Green
- value: 'Off'
color: Grey
The icon color changes to yellow despite the above coding, which seems to be the default color for this senor/entity.
Thanks.
guys ive got a real werid one and not sure if this is the right place to post.
my setup is as follows.
- Core2023.11.1
- Frontend20231030.1
Button card v4.1.1
So I have 2 lights (sideboard & underlight)
The code for these lights is
- type: custom:button-card
entity: light.kitchen_sideboard
name: <marquee behavior=scroll scrollamount="3">Side Board Lamp</marquee>
template:
- light
- icon_lamp
#- loader
- type: custom:button-card
entity: light.kitchen_under_light
name: Underlight
template:
- base
- icon_lamp
If i turn light.kitchen_sideboard on/off works fine no issues.
BUT if i turn off light.kitchen_under_light i get this error
When i turn the light back on goes back to normal.
So its as if it can report something in its off state? BUT the strange thing is the other light light.kitchen_sideboard works fine when on/off with no errors.? which is throwing me to work out what it is.?!?!
I have tried switching templates from -base to -light
Any help would be great
I’ve not managed to make any progress with this - can anyone shed any light on how to achieve? Would it require CSS styling instead, in order to split out the format?
Hi,
I have an issue with variables not showing.
Followed the instructions, but unfortunately no success.
Any obvious errors?
type: custom:button-card
entity: input_select.bs9000
show_name: true
show_icon: true
variables:
- var_disc: input_select.bs9000
- var_pos: input_number.bs9000_sled
name: [[[ return variable.var_disc; ]]]
Hello,
I’m able to display the name of the logged in user with this code.
type: custom:button-card
name: |
[[[
return "Hi "+ user.name + "!"
]]]
Does anyone know if it’s also possible to display the profile picture for the logged in user?
This is how I’m thinking it would look.
The image above is done by statically setting entity: person.drew and show_entity_picture: true. I’m looking for the picture to by dynamic, just like the name based on whoever is logged in.
This should work:
type: custom:button-card
entity: '[[[ return "person." + user.name.toLowerCase(); ]]]'
show_entity_picture: true
name: '[[[ return "Hi " + user.name + "!" ]]]'
1 Like
YES!!! Thank you!
1 Like
Is oit posssible to use two images in an setup like
“i s i”
“i n i”
“l s l”
?
Hi,
How can I use marquee on sensor value?
- type: custom:button-card
entity: media_player.lounge_2
label: >
[[[ return '<marquee> entity.attributes.media_title <\marquee>' ]]]
This scrolls: entity.attributes.media_title and not the value of entity.
Hi,
is it possible to use something like replace here on ${states[“sensor.enceinte_etat”].state
like replace “-” by line break
enceinte: '[[[return `<ha-icon icon="mdi:speaker" style="width: 14px;
color: var(--color-icon-blue); margin-right: 2px;"></ha-icon><span>
${states["sensor.enceinte_etat"].state}</span>`]]]'
Thanks for all help
Your closing marquee tag should be </marquee> - see if that resolves it
1 Like
thanks! well spotted!
Unfortunatelly, it still scrolls sensor name )-:
Use extra_styles for css
extra_styles: >
.marquee {
animation: marquee 20s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes marquee {
from {
transform: translateX(0%);
}
to {
transform: translateX(-80%);
}
}
state_display: >
[[[
if (entity)
return `<div class="marquee"> ${states['sensor.someting'].state} </div>`;
]]]
1 Like
exactly this. As an example from my dashboard, I am using this to generate the marquee on one of my button cards for my echo device, as the state display:
state_display: >
[[[
let artist = entity.attributes.media_artist;
let title = entity.attributes.media_title;
if (entity.state === 'standby') {
return 'Standby';
} else if (artist && title) {
return `<marquee>${artist} - ${title}</marquee>`;
} else if (artist) {
return `<marquee>${artist}</marquee>`;
} else if (title) {
return `<marquee>${title}</marquee>`;
}
]]]
1 Like
Thank you. I think that is the solution.
On another note…
Is it possible to dynamically move card or element inside card? Replacing hard coded position coordinate with variable driven by different entity?
Hey All,
I’m trying to add the mini-graph as it shows in this post; Fun with custom:button-card - #852 by edwardtich
However, when I’ve added this into my button-card, it’s just adding [object Object] in place of the graph. I can’t work out what I’m doing wrong, and ChatGPT isn’t helping me either (ha!).
Any ideas?
type: custom:button-card
entity: light.office_light_switch
icon: mdi:desk
name: Office
tap_action:
action: navigate
navigation_path: /lovelace/office
haptic: medium
styles:
grid:
- grid-template-areas: '"i temp" "n hum" "graph graph"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: var(--contrast2)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 24px
icon:
- width: 24px
- height: 24px
- color: var(--contrast8)
name:
- justify-self: start
- font-size: 14px
- margin: 4px 0 4px 0
- color: var(--contrast)
- font-family: Montserrat
- font-weight: 600
custom_fields:
temp:
- align-self: start
- justify-self: end
- font-size: 13px
- font-weight: 500
- margin: 4px 0 0px 0
- color: var(--contrast8)
- font-family: Montserrat
hum:
- align-self: start
- justify-self: end
- font-size: 13px
- font-weight: 500
- margin: 4px 0 12px 0
- color: var(--contrast8)
- font-family: Montserrat
graph:
- padding-top: 0%
- width: 100%
- height: 100%
- margin-bottom: '-3%'
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 18px; height: 18px; color: var(--orange);">
</ha-icon><span>${parseFloat(states['sensor.office_temperature_sensor_temperature'].state).toFixed(0)}°C</span>`
]]]
hum: |
[[[
return `<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: var(--blue);">
</ha-icon> <span>${parseFloat(states['sensor.office_temperature_sensor_humidity'].state).toFixed(0)}%</span>`
]]]
graph:
type: custom:mini-graph-card
entities:
- entity: sensor.office_temperature_sensor_temperature
name: Temperature
color: '#ff8c00'
- entity: sensor.office_temperature_sensor_humidity
name: Humidity
color: '#3399ff'
y_axis: secondary
height: 50
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
state:
- value: 'on'
styles:
card:
- background: |
[[[
var color = entity.attributes?.rgb_color;
if (entity.state != "on"){
return 'var(--contrast20)';
}
else if (color){
return 'rgba(' + color + ')'
}
else{
return 'var(--yellow)'
}
]]]
icon:
- color: var(--red)
- animation: bounce 2s infinite
name:
- color: var(--black)
- value: 'off'
styles:
name:
- color: var(--contrast20)
extra_styles: |
@keyframes bounce {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
EDIT: I managed to get this working, and also do some cool stuff with it. So now, when the entity is on, the color of the name changes, and the icon bounces.
If anyone is interested in using my code to add to their setup, it is below.
type: custom:stack-in-card
cards:
- type: custom:button-card
entity: light.living_room_light_switch
icon: '[[[ return entity.attributes.icon ]]]'
show_icon: false
name: Living Room
tap_action:
action: navigate
navigation_path: /lovelace/living-room
haptic: medium
styles:
card:
- background: var(--contrast2)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
icon_cells:
- justify-self: start
- margin-top: 12px
- margin-left: 15px
- animation: |
[[[
var state = states['light.living_room_light_switch'].state;
return state === 'on' ? 'bounce 2s infinite' : 'none';
]]]
img_cell:
- justify-self: start
- width: 24px
custom_fields:
temp:
- align-self: start
- justify-self: end
- font-size: 13px
- font-weight: 500
- margin: 4px 0 0px 0
- color: var(--contrast8)
- font-family: Montserrat
hum:
- align-self: start
- justify-self: end
- font-size: 13px
- font-weight: 500
- margin: 1px 0 12px 0
- color: var(--contrast8)
- font-family: Montserrat
graph:
- padding-top: 0%
- width: 100%
- height: 100%
icon_cells:
- width: 24px
- height: 24px
- color: var(--contrast8)
- animation: |
[[[
var state = states['light.living_room_light_switch'].state;
return state === 'on' ? 'bounce 2s infinite' : 'none';
]]]
name:
- justify-self: start
- font-size: 14px
- margin: 1px 0 1px 0
- color: |
[[[
var state = states['light.living_room_light_switch'].state;
return state === 'on' ? 'white' : 'grey';
]]]
- font-family: Montserrat
- font-weight: 600
grid:
- grid-template-areas: '"icon_cells slider temp" "n slider hum"'
- grid-template-columns: 1fr min-content 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
icon_cells: |
[[[
var state = states['light.living_room_light_switch'].state;
if(state == "on")
return `<ha-icon
icon="mdi:sofa"
style="width: 25px; height: 25px; color: yellow;">
</ha-icon>
`;
else
return `<ha-icon
icon="mdi:sofa-outline"
style="width: 25px; height: 25px; color: grey;">
</ha-icon>
`;
]]]
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 18px; height: 18px; color: var(--orange);">
</ha-icon><span>${parseFloat(states['sensor.living_room_temp_sensor_temperature'].state).toFixed(0)}°C</span>`
]]]
hum: |
[[[
return `<ha-icon
icon="mdi:water-percent"
style="width: 18px; height: 18px; color: var(--blue);">
</ha-icon> <span>${parseFloat(states['sensor.living_room_temp_sensor_humidity'].state).toFixed(0)}%</span>`
]]]
card_mod:
style: |
ha-card {
z-index: 1;
height: 70px;
}
extra_styles: |
@keyframes bounce {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
- type: custom:mini-graph-card
entities:
- entity: sensor.living_room_temp_sensor_temperature
name: Temperature
color: '#ff8c00'
- entity: sensor.living_room_temp_sensor_humidity
name: Humidity
color: '#3399ff'
y_axis: secondary
height: 40
hours_to_show: 24
line_width: 3
font_size: 50
show:
name: false
icon: false
state: false
legend: false
card_mod:
style: |
ha-card {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
}
Light On:
Light Off:
2 Likes
How to use a fan that rotated proportionally to the entity’s rotation.
type: custom:button-card
state:
- value: 'on'
color: blue
spin: true
entity: entity: sensor.panasonic_heat_pump_main_fan2_motor_speed
show_state: tfalse
icon: mdi:fan