you need a decimal point in the rgba():
background: rgba(0,0,0,0.2)
1 Like
Serieusā¦ didnāt saw this one anymoreā¦ spot blind haha Thanks is working now!
1 Like
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
still error, ButtonCardJSTemplateError: TypeError: Cannot read property āstateā of undefined in āreturn `ā¦ā
I tried, sensor.processor_use, sensor.disk_use_percent => ERROR: Cannot read property āstateā of undefined. Only, sensor.memory_use_percent and sensor.processor_temperature WORKING
you are still not showing the result of this templateā¦
and, the template I suggested isnāt for the button-card config (it is Jinja template and the button card uses JS templates), so that will, never work.
You probably havenāt configured the system monitor to create the processor_use, or maybe you have it named differently.
what is your config for that?
custom_fields:
cpu: |
[[[
return `<ha-icon
icon="mdi:cpu-64-bit"
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>`
]]]
ram: |
[[[
return `<ha-icon
icon="mdi:memory"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.memory_use'].state}MB</span></span>`
]]]
sd: |
[[[
return `<ha-icon
icon="mdi:harddisk"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon> <span>SSD: <span style="color: var(--text-color-sensor);">${states['sensor.disk_use_percent_home'].state}%</span></span>`
]]]
speed: |
[[[
return `<ha-icon
icon="mdi:pulse"
style="width: 14px; height: 14px; color: deepskyblue;">
</ha-icon> <span> <span style="color: var(--text-color-sensor);">${states['sensor.cpu_speed'].state} GHz</span></span>`
]]]
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 14px; height: 14px; color: orange;">
</ha-icon> <span>${entity.state}Ā°C</span>`
]]]
entity: sensor.cpu_temp
2 Likes