in the operator: template, you write a template to return True. In which case everything that follows will be set.
So, if you want that to be ‘Nothing’ use that in your template.
- operator: template
id: state-on #needed if you want to merge states in your template and the button config
value: >
[[[ return entity.state == 'Nothing'; ]]]
spin: true
thank you for support. But im lost now…
I thought that operator was default when above value not match with the if state part…
its like this, you can use
state:
- value: 'on'
- value: 'off'
- value: 23
- value: 'Nothing'
- operator: template
# if none of the above would check
- operator: default
see: button-card/README.md at master · custom-cards/button-card · GitHub
you shouldn’t use if - then - else templates in the state templates, only test for single values in these state templates
Thanks… I will read the GitHub and see if I can solve this myself…
sure, come back if you cant figure it out or need further assistance, glad to help 
I think I solved it:
When ‘Nothing’ is the state the operator default will use on the button.
When I change state via develop tool to other then ‘Nothing’ the styles card is showing!
type: 'custom:button-card'
template: test
entity: sensor.holiday
show_state: true
show_name: true
state:
- operator: template
value: |
[[[ return entity.state != 'Nothing'; ]]]
color: 'rgba(0,255,0,1)'
styles:
card:
- box-shadow: '0px 0px 2px 2px rgba(3, 157, 252,1)'
- operator: default
button_card_templates:
test:
show_icon: true
size: 15%
tap_action:
action: toggle
styles:
card:
- font-size: 14px
- height: 80px
you can leave out the operator: default like this since it does nothing (unless you didnt copy what’s below it?) Also: where’s the spin!?
i removed unneeded parts already… the spin was a indicator to see if the code was working… so not needed anymore
This is exactly what I was looking for, thank you so much! I couldn’t figure out how to reference the speed attribute. Thanks again!
I’m trying to use an SVG as entity_picture. However, unlike, e.g. custom_fields the entity picture does not accept HTML, so the following as a template doesn’t work:
nuki_locked_state:
state:
- id: nuki_locked_state
entity_picture: |
[[[
return `
<svg viewBox="0 0 24 24">
<circle cx="12" cy="12" r="9.5" fill="none" stroke="#000"/>
</svg>`
]]]
styles:
entity_picture:
- filter: invert()
while something like this does work (for a different button):
two_color_ceiling:
template: two_color_settings
custom_fields:
icon_color: |
[[[
const color_light = "var(--mmp-accent-color, var(--accent-color))";
const color_dark = "var(--paper-item-icon-color)";
const color_darkshell = "var(--disabled-text-color)";
const shell = entity.state === "off" ? color_dark : color_darkshell;
const light = entity.state === "off" ? color_dark : color_light;
return `
<svg viewBox="0 0 24 24">
<path d="m8 4v2h8v-2h-8zm-4.0488 3a2 2 0 0 0-1.9512 2v3a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2h-16a2 2 0 0 0-0.048828 0z" fill="${shell}"/>
<path d="m21.987 9h-19.983c0.017425 1.1153-0.037128 2.2348 0.031703 3.3472 0.15851 1.0313 1.2009 1.7536 2.2206 1.6413 5.2837-0.0024 10.567 0.0047 15.851-0.0035 1.1319-0.03437 2.0102-1.1421 1.8795-2.2456v-2.7394z" fill="${light}"/>
</svg>`
]]]
Is there any way to use an SVG for entity_picture (not just loading it from the filesystem), so that I can manipulate it depending on state? Or would I have to work around this by using a custom_element?
Feature request to @RomRider :
It would be awesome to have a generic companion card to button_card that only lives on github as a template. Idea would be that it takes a button_card configuration as a blueprint-type input and then can be made available via HACS as a new card based on button_card. Essentially, it would inject a template into the lovelace yaml so that with a few lines of code you could use such a card in the frontend.
There are so many awesome card configurations here in this forum. It would be great to have an easier way to unlock these for less savvy users.
Which graph/chart do you use in the right top corner of your button card? I’d love to use that to indicate the brigthness % of my lights but I can’t find how to do this. Could you share your config?
i am looking to make a card like this for my esxi but i am not sure how to proceed , as per the sample code on github only one entity is defined but how come cpu ,ram ,storage all coming inside one card ,
i know it has something to do with template but not sure how exactly they work, even i read the docs but i didn’t understand properly .
do you think my below template format will work ? if so i can i bring all values in same card .
Please guide in right direction to create the card .
template:
- sensor:
- name: "esxi_vmhost_memtotal"
unit_of_measurement: "GBs"
state: "{{ states['sensor.esxi_vmhost_lab'].attributes.memtotal_gb }}"
- sensor:
- name: "esxi_vmhost_memusage"
unit_of_measurement: "GBs"
state: "{{ states['sensor.esxi_vmhost_lab'].attributes.memusage_gb }}"
- sensor:
- name: "esxi_vmhost_mempct"
unit_of_measurement: "%"
state: >-
{{ ((100 * states("sensor.esxi_vmhost_memusage")|int) / states("sensor.esxi_vmhost_memtotal")|int) | round(2) }}
#EXI HOST CPU SENSORS
- sensor:
- name: "esxi_vmhost_cputotal"
unit_of_measurement: "%"
state: "{{ states['sensor.esxi_vmhost_ab'].attributes.cputotal_ghz }}"
- sensor:
- name: "esxi_vmhost_cpuusage"
unit_of_measurement: "%"
state: "{{ states['sensor.esxi_vmhost_lab'].attributes.cpuusage_ghz }}"
- sensor:
- name: "esxi_vmhost_cpupct"
unit_of_measurement: "%"
state: >-
{{ ((100 * states("sensor.esxi_vmhost_cpuusage")|int) / states("sensor.esxi_vmhost_cputotal")|int) | round(2)}}
Look at the picture left and compare the example code with it:
The style section part 1:
The ‚skeleton‘ to arrange the custom fields is a grid. 1 area for each element in order of appearance.
styles:
…
…
…
grid:
- grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
Style section part 2:
The arrangement of the custom_fields. Compare again with the left picture.
custom_fields:
temp:
- align-self: start
- justify-self: end
cpu:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
ram:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
sd:
- align-self: middle
- justify-self: start
If you want the icons to change their color if a specified value is exceeded, you have to add another styling rule to each element above:
- --text-color-sensor: '[[[ if (states["sensor.raspi_cpu"].state > 80) return "red"; ]]]'
or in total (example cpu):
cpu:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- --text-color-sensor: '[[[ if (states["sensor.raspi_cpu"].state > 80) return "red"; ]]]'
### End Of Styling Section ###
Now the sensors come into play using HTML / Javascript (note backticks).
You assign them to the individual custom fields in the following ˋcustom_fields:ˋ section (note intendation).
custom_fields:
…
cpu: >
[[[
return `<ha-icon
icon="mdi:server"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.raspi_cpu'].state}%</span></span>`
]]]
Part 1: icon and its dimensions and color.
return `<ha-icon
icon="mdi:server"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon>
Part 2: The displayed label, here: „CPU“ and its styling.
<span>CPU: <span style="color: var(--text-color-sensor);">
Part 3 - finally - the cpu sensor (with unit of measurement).
${entity.state}°C
Long story short: All you have to do is to replace the example sensors in the ˋ${ } - brackets with your own.
@pedolsky Thanks for such a detailed responce .
i did like you said and thanks it worked but ran in to small error for storage part which is not returning the value .
Argh, sorry. Out of all things, I didn’t pay attention to the sensor format. I’m using the code above in my phone card. Please compare or post your own.
battery_level: |
[[[
return `<ha-icon
icon="mdi:cellphone-iphone"
style="width: 12px; height: 12px; color: green;">
</ha-icon> ${states['sensor.pedolsky_phone_battery_level'].state} %`
]]]
Hi all. I’m still having this issue. Any thoughts?
Dear all,
I’ve been breaking my head now for a while without success, and so I reach out. I don’t have power information for all ACs. In the case I leave it blanc, the card doesn’t show which obviously not the desired effect.
If some code can be improved, please don’t hesitate.
, thanks for educating me .
button_card_templates:
AC_template:
triggers_update:
- sun.sun
icon: "mdi:fan"
variables:
sensor_humidity: " "
sensor_power: " "
AC_entity: " "
state:
- value: "off"
color: rgba(0,0,0,0)
- value: "cool"
color: deepskyblue
spin: true
- value: "heat"
color: rgba(255,0,0,0.6)
spin: true
- value: "heat_cool"
color: orange
spin: true
styles:
card:
- width: 110px
- height: 110px
- margin: 3px
- padding: 3px
- border-radius: 15px
- background-color: var(--primary-background-color)
- box-shadow: >
[[[
if (states['sun.sun'].state == "below_horizon")
return '-5px -5px 15px #2c2c2c, 5px 5px 15px #191919';
else if (states['sun.sun'].state == "above_horizon")
return '-5px -5px 15px #ffffff, 5px 5px 15px #ebebeb';
]]]
grid:
- grid-template-areas: '"i i temp" "i i humidity" "i i power" " set set mode" "n n n"'
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr 3fr 2fr
name:
- font-weight: bold
- font-size: 13px
- color: var(--primary-text-color)
- align-self: middle
- justify-self: left
img_cell:
- justify-content: start
- align-items: start
- margin-top: -5px
icon:
- width: 70%
custom_fields:
temp:
- align-self: start
- justify-self: end
- font-size: 10px
humidity:
- margin-top: 10px
- align-self: middle
- justify-self: end
- font-size: 10px
power:
- margin-top: 15px
- align-self: middle
- justify-self: end
- font-size: 10px
set:
- margin-top: 15px
- align-self: middle
- justify-self: end
- font-size: 30px
mode:
- justify-content: end
- align-items: end
- font-size: 30px
custom_fields:
temp: >
[[[
return `<ha-icon
icon= "mdi:thermometer"
style="width: 14px; height: 14px; color: green;">
</ha-icon><span> <span>${entity.attributes.current_temperature}°C</span></span>`
]]]
humidity: >
[[[
return `<ha-icon
icon= "mdi:water-percent"
style="width: 18px; height: 18px; color: deepskyblue;">
</ha-icon><span><span>${states[variables.sensor_humidity].state}%</span></span>`
]]]
power: >
[[[
return `<ha-icon
icon= "mdi:power-plug"
style="width: 18px; height: 18px; color: red;">
</ha-icon><span><span>${states[variables.sensor_power].state}kWh</span></span>`
]]]
set: >
[[[
return `
</ha-icon><span><span>${entity.attributes.temperature}°</span></span>`
]]]
mode: >
[[[
if (entity.state =="cool")
return `<ha-icon
icon= "mdi:snowflake"
style="width: 25px; height: 18px; color: rgba(0,0,255,0.6);">
</ha-icon>`
else if (entity.state =="heat")
return `<ha-icon
icon= "mdi:fire"
style="width: 25px; height: 18px; color: rgba(255,0,0,0.6);">
</ha-icon>`
]]]
Regards,
Jens