Lovelace: Button card

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

Thank you. Works perfectly.

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

ádas

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:

Schermafbeelding 2021-04-28 om 17.58.10

what exactly do you see when changing the code? and, did you add the ‘;’ ?

version HA do you use? still error

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 %}.

image

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

3

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?

image

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