getting an error with this … any help please?
type: 'custom:button-card'
entity: scene.safe_mode
show_state: true
icon: 'mdi:home'
hold_action:
action: none
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.safe_mode
Try:
type: 'custom:button-card'
show_state: true
icon: 'mdi:home'
hold_action:
action: none
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.safe_mode
Hi All,
I have some button cards. They work but changing color is not working.
When I change from high to low or low to medium the color is not change from yellow to almost transparant. When I refresh browser its good.
How to solve this?
button_card_templates:
fan-settings:
size: 15%
styles:
card:
- font-size: 14px
- height: 60px
- cards:
- type: 'custom:button-card'
template: fan-settings
name: low
icon: 'hass:fan'
tap_action:
action: call-service
service: fan.set_preset_mode
service_data:
entity_id: fan.afzuiging_badkamer
preset_mode: low
styles:
card:
- background-color: |
[[[
if ((states['fan.afzuiging_badkamer'].attributes.preset_mode === 'low') && (states['fan.afzuiging_badkamer'].state === 'on'))
return 'rgba(251, 214, 67,1)';
return 'rgba(10,10,10,0,1)';
]]]
- type: 'custom:button-card'
template: fan-settings
name: med
icon: 'hass:fan'
tap_action:
action: call-service
service: fan.set_preset_mode
service_data:
entity_id: fan.afzuiging_badkamer
preset_mode: medium
styles:
card:
- background-color: |
[[[
if ((states['fan.afzuiging_badkamer'].attributes.preset_mode === 'medium') && (states['fan.afzuiging_badkamer'].state === 'on'))
return 'rgba(251, 214, 67,1)';
return 'rgba(10,10,10,0,1)';
]]]
- type: 'custom:button-card'
template: fan-settings
name: high
icon: 'hass:fan'
tap_action:
action: call-service
service: fan.set_preset_mode
service_data:
entity_id: fan.afzuiging_badkamer
preset_mode: high
styles:
card:
- background-color: |
[[[
if ((states['fan.afzuiging_badkamer'].attributes.preset_mode === 'high') && (states['fan.afzuiging_badkamer'].state === 'on'))
return 'rgba(251, 214, 67,1)';
return 'rgba(10,10,10,0,1)';
]]]
type: horizontal-stack
you need a decimal point in the rgba():
background: rgba(0,0,0,0.2)
Serieus… didn’t saw this one anymore… spot blind haha Thanks is working now!
Hi all,
I would like to have just two columns where I have an entity_picture on the left side and 4 lines for sensor data on the right. I can’t get my head around the grid-system, and I don’t know even if it is possible?
I want the entity_picture to be 100% (relative to height), so if the button-card is 300 x 300 px, the left column would be 300px high and 150px wide, meaning if I had an image of 280* 130px it would fill the left column.
Can this be done?
Help me, thanks.
ButtonCardJSTemplateError: TypeError: Cannot read property ‘state’ of undefined in ‘return `…’
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.processor_use'].state}%</span></span>`
]]]
Did your sensor sensor.processor_use work before?
sensor sensor.processor_use working, but does not work with above code, button card
this might not be it, but there’s no termination with a semicolon in your template.
`;
this is what I use, and there has never ben any error at all…
cpu: >
[[[ return `<ha-icon icon=mdi:server style='width:12px;height:12px;
color:deepskyblue;'> </ha-icon>
Cpu: <span style='color: var(--text-color-sensor);'>
${states['sensor.processor_use'].state}%</span>`; ]]]
Do you see that all the time, or maybe only at startup? btw check the first Span, dont think that is necessary. All my custom fields on that button have only span for the variable
Unfortunately no. This code is definitely working:
return `<ha-icon
icon="mdi:home"
style="width:22px;height:22px">
</ha-icon><span> <span style="color: #e45649;">${states['device_tracker.xxxxxxxxx'].state}</span></span>`
@pedolsky @Mariusthvdb I am using HA 2021.4.6, I have copied this code from button-card github. Your code is not working
yes it is:
what exactly do you see when changing the code? and, did you add the ‘;’ ?
Don’t know if that’s the reason, but in your screenshot, it looks like there’s a backtick instead of an apostrophe in the red circle you drew.
what does
{{states('sensor.processor_use')}}
show in the developer tools template?
that should be there, as it is html.
{{states('sensor.processor_use')}}
this code error: SyntaxError: Unexpected string in ‘return ` <…’
${entity.state} => NOT ERROR
${states[‘sensor.processor_use’].state} and {{states(‘sensor.processor_use’)}} => ERROR
{## Imitate available variables: ##}
{% set my_test_json = {
"temperature": 25,
"unit": "°C"
} %}
The temperature is {{ my_test_json.temperature }} {{ my_test_json.unit }}.
{% if is_state("sun.sun", "above_horizon") -%}
The sun rose {{ relative_time(states.sun.sun.last_changed) }} ago.
{%- else -%}
The sun will rise at {{ as_timestamp(strptime(state_attr("sun.sun", "next_rising"), "")) | timestamp_local }}.
{%- endif %}
For loop example getting entity values in the weather domain:
{% for state in states.weather -%}
{%- if loop.first %}The {% elif loop.last %} and the {% else %}, the {% endif -%}
{{ state.name | lower }} is {{state.state_with_unit}}
{%- endfor %}.
Right, didn’t catch that, sorry!
I fear you are not only entering the template…
Please clear the template editor and only enter my template and tell us what that does