you could of course have a look at the documentation which explains this: button-card/README.md at master · custom-cards/button-card · GitHub
did you try any of this?
Don’t set the width and the height, use aspect_ratio instead.
Dwains dashboard is based on button-card (for most of the buttons), you can find all the templates in his github repository.
Where do you want to display the temperature? Like the percentage of brightness (which is also supposed to draw a circle but doesn’t display it)?
Did you clear your cache? Make sure you do it on ALL your devices a’d also make sure you are running the latest version before that. Also try in private navigation mode, if it works there, it’s 200% a caching issue.
2 Likes
Hi
Temperature in the middle of the card/box. And maybe the possibility to add “C” for Celsius after?
hi,
for the fun of it, I am trying to have a custom-fields button spin, with a speed based on the actual fanspeed of an entity, sensor.argon_one_addon_fan_speed, and following the states it can have, as you see in the color template below
Of course I’ve read @Ildar_Gabdullin on Lovelace: mini graph card - #1706 by Ildar_Gabdullin but am still a bit stuck on how to move that to a button-card, so seek some assistance please…
this is my button:
template:
- button_body
- plot_list
entity: sensor.cpu_temperature
variables:
plot_entities: >
[[[ return [entity.entity_id,
states['sensor.attic_sensor_calibrated_temperature'].entity_id
];
]]]
name: Cpu temp
custom_fields:
fan:
>
[[[ return `<ha-icon icon=mdi:fan style='width:15px;color: var(--speed-color);'> </ha-icon>
<span style='color: var(--primary-color);'>
${states['sensor.argon_one_addon_fan_speed'].state} % </span>`; ]]]
styles:
custom_fields:
fan:
- font-size: 11px
- font-weight: bold
- padding: 0px 3px
- position: absolute
- right: 5%
- top: 10%
- --speed-color: >
[[[ var speed = states['sensor.argon_one_addon_fan_speed'].state;
var mapper = {0:'green',
1:'darkgreen',
3:'orange',
33:'orangered'
66:'maroon'}
return mapper[speed] ? mapper[speed] : 'red' ; ]]]
state:
- operator: '<'
value: 50
styles:
card:
- color: green
- operator: '<'
value: 60
styles:
card:
- color: darkgreen
- operator: '<'
value: 70
styles:
card:
- color: orange
- operator: '<'
value: 80
styles:
card:
- color: maroon
- default:
styles:
card:
- color: red
appreciate a little help here, thanks!
Hi Marius, is it typo?
yep… C&P error, edited it now… sorry
I could of course also add it to a top variable, and use it in the styles for the color… same for the speed could be done:
speed-rotation: >
[[[ var speed = states['sensor.argon_one_addon_fan_speed'].state;
var mapper = {0:'0',
1:'4s',
3:'3s',
33:'2s',
66:'1s'}
return mapper[speed] ? mapper[speed] : '0.3s' ; ]]]
maybe the 0 should be taken out, and a condition on state not being 0 should be included.
that way I could use the variable speed-rotation in the animation?>
Trying to simulate your case, can I have a code for
template:
- button_body
- plot_list
?
@RomRider immediately related to the post above, how can I use a top level variables:
variables:
speed_color: >
[[[ var speed = states['sensor.argon_one_addon_fan_speed'].state;
var mapper = {0:'green',
1:'darkgreen',
3:'orange',
33:'orangered'
66:'maroon'}
return mapper[speed] ? mapper[speed] : 'red' ; ]]]
in a custom fields style:
custom_fields:
fan:
>
[[[ return `<ha-icon icon=mdi:fan style='width:15px;color: var(--speed-color);'> </ha-icon>
<span style='color: var(--primary-color);'>
${states['sensor.argon_one_addon_fan_speed'].state} % </span>`; ]]]
replacing the color: var(--speed-color) which I use up to now, with color: variables.speed_color or even color: ${variables.speed_color} is unsuccessful unfortunately. Can’t this be done?
It would be very cool, because I would only need the 1 top variable, and use it in more places of course
UPDATE:
yes we can:
custom_fields:
fan:
>
[[[ return `<ha-icon icon=mdi:fan style='width:15px;color: ` + variables.speed_color + `;'> </ha-icon>
<span style='color: var(--primary-color);'>
${states['sensor.argon_one_addon_fan_speed'].state} % </span>`; ]]]
thanks to Ildar.
again typo - missing comma
I am still trying, wait a little…
33:'orangered' COMMA
1 Like
oops… 
sorry… also the closing third ] was missing…
First, regarding color of fan’s icon:
variables:
speed_color: |
[[[ var speed = states['sensor.iiyama_ohm_fans_fan_1'].state;
var mapper = {500:'green',
600:'darkgreen',
700:'orange',
800:'orangered',
900:'maroon'}
return mapper[speed] ? mapper[speed] : 'yellow'; ]]]
...
custom_fields:
fan: >
[[[ return `<ha-icon icon=mdi:fan style='width:32px;color: ` + variables.speed_color + `;'> </ha-icon>
<span style='color: var(--primary-color);'>
${states['sensor.iiyama_ohm_fans_fan_1'].state} rpm </span>`; ]]]
Note this:
color: ` + variables.speed_color + `;
Do not bother about “500,600,700”, “rpm”, that was for my testing case.
Also, note that your construction "mapper" works only for THESE values, i.e. for 500,600,700 - for 550, 650 it will return default value (this is not good)
A yes, that should work.
Thanks.
About the speeds: they are fixed in my fan add-on. So no worries about other speeds 
That’s why I didn’t make a Template with <
1 Like
As for conditional rotation - add this style with card-mod, and define conditions for speeds:
type: custom:button-card
card_mod:
style: |
div#container > div#fan > ha-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Do not bother about colors & font-sizes - that was changed while reverse-engineering your code))
1 Like
can we replace the ‘1s’ with a variables.speed_rotation?
and encapsulate it in a template:
if (states['sensor.argon_one_addon_fan_speed'].state != 0) return
You can define "1s" by using usual ways like:
animation:
{% if states('input_number.servicewithhistory_value')|int <= 250|int -%}
rotation 4s
{%- elif states('input_number.servicewithhistory_value')|int > 250|int and states('input_number.servicewithhistory_value')|int <= 500|int -%}
rotation 2s
{%- elif states('input_number.servicewithhistory_value')|int > 500|int and states('input_number.servicewithhistory_value')|int <= 750|int -%}
rotation 1s
{%- else -%}
rotation 0.3s
{%- endif %}
linear infinite;
of course, thats the jinja we need…
I was still trying to do this:
card_mod:
style: |
div#container > div#fan > ha-icon {
animation: rotation **variables.speed-rotation** linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
variables:
speed-rotation: >
[[[ var speed = states['sensor.argon_one_addon_fan_speed'].state;
var mapper = {0:'100s',
1:'4s',
3:'3s',
33:'2s',
66:'1s'}
return mapper[speed] ? mapper[speed] : '0.3s' ; ]]]
are you sure we can not load a variable there? not even a jinja version like
animation:
{% set speed = states('sensor.argon_one_addon_fan_speed')|int %}
{% if speed != 0 -%}
{% if speed == 1 %} rotation 4s
{% elif speed == 3 %} rotation 3s
{% elif speed == 33 %} rotation 2s
{% elif speed == 66 %} rotation 1s
{% else %} rotation 0.3s
{% endif %} linear infinite;
{% else %} null
{% endif %}
or
{% set speed = states('sensor.argon_one_addon_fan_speed')|int %}
{% if speed != 0 -%}
{% set mapper = {1:'4',3:'3',33:'2',66:'1'} %}
{% set rotation = mapper[speed] if speed in mapper else '0.3' %}
{{'rotation ' + rotation + 's ' + 'linear infinite'}}
{% else %} null
{% endif %}
edit:
YES! this works fine:
card_mod:
style: |
div#container > div#fan > ha-icon {
animation:
{% set speed = states('sensor.argon_one_addon_fan_speed')|int %}
{% if speed != 0 %}
{% set mapper = {1:'4',3:'3',33:'2',66:'1'} %}
{% set rotation = mapper[speed] if speed in mapper else '0.3' %}
{{'rotation ' + rotation + 's ' + 'linear infinite'}}
{% else %} null
{% endif %}
so cool ! thanks you once again @Ildar_Gabdullin
1 Like
Great, I gonna save this info for future))