Lovelace: Button card

[gordonpm]

I’m quite new to this - is there a way to use a previous entity variable in a custom field?

e.g.

type: custom:button-card
entity: sensor.synstor_drive_1_temperature
hold_action:
  action: more-info
aspect_ratio: 1/1
custom_fields:
  graph:
    card:
      type: sensor
      entity: sensor.synstor_drive_1_temperature
      graph: line
      style: |
              ha-card {
                box-shadow: none;
              }
    styles:
      custom_fields:
        graph:
          - filter: opacity(50%)
          - overflow: unset
        card:
          - overflow: unset
        grid:
          - grid-template-areas: '"i" "n" "graph"'
          - grid-template-columns: 1fr
          - grid-template-rows: 1fr min-content min-content

Is there a way to use the parent entity (sensor.synstor_drive_1_temperature) as the entity in the custom field instead of hard coding it? I’ve tried a few formats but can’t seem to get it recognised.

[pedolsky]

custom_fields:
  graph:
    card:
      type: sensor
      entity: "[[[ return entity.entity_id ]]]"

does the trick.

[bschatzow (Bill Schatzow)]

When I put my sensor, entity: sensor.rpi_uptime I get card displaying either “running” or the days, hours. How do I get the card to just display the correct hours?

[gordonpm]

Can;t see the wood for the treees, maybe I;ve been staring at this for too long. Can someone hint me why this won;t work?

        stat: |
          [[[
            var staticon = 'red'
            if (states['[[entity_nasdrivestate]]'].state == 'Normal') {
              staticon = 'lime';
            }
            return `<ha-icon
            icon="mdi:power-standby"
            style="width: 16px; height: 16px; color: $(staticon);">
            </ha-icon> <span>Status: <span style="color: white;">${states['[[entity_nasdrivestate]]'].state}</span></span>`
          ]]]

The state fills out correctly but the icon will not change colour on that state,

[bschatzow (Bill Schatzow)]

rpi_uptime:
  friendly_name: RPi Uptime

  value_template: >
    {% set up_time = as_timestamp(now()) - as_timestamp(states('sensor.last_boot')) %}

    {% set minutes = (up_time // 60) | int %}
    {% set hours = (minutes // 60) %}
    {% set days = (hours // 24) %}
    {% set weeks = (days // 7) %}

    {% set minutes = (minutes % 60) %}
    {% set hours =  (hours % 24) %}
    {% set days = (days % 7) %}

    {% macro phrase(value, name) %}
              {%- set value = value %}
              {%- set end = 's' if value > 1 else '' %}
              {{- '{} {}{}'.format(value, name, end) if value | int > 0 else '' }}
    {%- endmacro %}
              
    {% set text = [ phrase(weeks, 'week'), phrase(days, 'day'), phrase(hours, 'hr'), phrase(minutes, 'min') ] | select('!=','') | list | join(', ') %}
    {% set last_comma = text.rfind(',') %}
    {% if last_comma != -1 %}
      {% set text = text[:last_comma] + ' and' + text[last_comma + 1:] %}
    {% endif %}

This is my sensor code. It works sometimes and other times the card displays running instead of the uptime.
Any ideas?

[pedolsky]

Does it show „running“ when uptime is under 1 minute?
Anyway, you might have a look at https://community.home-assistant.io/t/convert-seconds-to-days-hours-minutes/23152/22?u=pedolsky

[pedolsky]

Put the whole style definition in the variable (or use text-color-sensor instead):

custom_fields:
  stat: |
    [[[
      var nas = states['[[entity_nasdrivestate]]'].state;
      var staticon = 'width: 16px; height: 16px; color: red;'
      if (nas == 'normal') {
        staticon = 'width: 16px; height: 16px; color: lime;';
      }
      return `<ha-icon
      icon="mdi:power-standby"
      style="${staticon}">
      </ha-icon>Status: <span style="color: white;">${nas}</span>`
    ]]]

(added second variable because it’s easier).

———

Edit: cleaned <span>

[bschatzow (Bill Schatzow)]

It does not care how long I’m running. I have seen “running” while up several weeks. I’ll try the code referenced in your reply later and see if it works for me.

Any error in my code that is causing this? Trying to understand the code and figure out where the word running comes from. I would like to get an understanding of what I am doing wrong before I try something different.

[maxym]

Hello
I noticed that hold_action works kind of not reliable. I’m not able to define a pattern when it fails, but it’s pretty hard to execute an action using hold. Sometimes it works at first try, a few secs later I’m not able to succeed at all.
Not an issue of operating system since hold here works as expected (iOS14 and 15: iPhone X).
In HA app it seems like it’s too sensitive on finger movement during holding which cancels the hold feature. But it’s my rough guess.
Must not be caused by button card itself. Maybe browser-mod issue or whole iOS app?

Anyone else experienced this behavior? Is there any workaround on this?

[pedolsky]

I noticed the same, annoying. My „workaround“ is to use double_tap_action if possible.

[paddy0174 (Patrick)]

Can’t see this behaviour on Android, sorry (Android9, 10 or 11). And on Windows’/Linux either. Maybe something Apple related.

On Android you get a small circle and that is kind of “locked-in”, I can even move that circle around without loosing the hold action.

[kbrown01]

I agree here. In fact I changed all taps to hold because I found tap too sensitive and it would fire when scrolling if I touched the button. Tap does have quirks too but seems to work fine on Android where we are most of the time.

[pedolsky]

I’m not using a boot time sensor but the Dev Tools give me a float error.

[bschatzow (Bill Schatzow)]

I see there are warnings due to the new templates code. I’ll see if I can modify my existing templates to see if it fixes the issues.

[pedolsky]

Copy it into your Dev Tools.

[tman75 (Troy)]

Wow, this is exactly what I am looking for. I’m going to try this out. Thanks.

[DavidFW1960 (David)]

@kbrown01

found tap too sensitive

I did as well and started using the lock function to solve it on buttons where it would cause a problem.

[paddy0174 (Patrick)]

Can someone tell me a way, to use the !include_* function for a button_card_templates file in UI-mode? Or any other way to include the content of button_card_templates file in UI-mode? Despite copying everything into the raw-config-editor?

There is a thread with a feature request, but that doesn’t help either, as not too many voted til now (hint, hint, go vote, if you’d find that useful):

Ability to use !include directives in UI editor

As dashboards grow in complexity it would be very helpful to be able to use some of the advanced features of YAML without having to go full YAML mode for a dashboard. In particular, I would love to be able to use the !include directive in my dashboards! I’ve got a few integrations that auto-generate dashboard views that then have to be copy and pasted back into the dashboards that I have created. Ideally I could just add a !include and the path to the file and be done with it. I really don’t w…

Thanks a lot for any ideas!

[tetienne]

Hi,

I want to migrate slowly some of my button from the built-in button-card to this one. Sadly, the style be default does not match the built-in button. Can someone share the style to apply to my buttons to keep the built-in style? Thx

[rossiluis22]

Hi! I’ve done some kind of “quick look button card” to all of my main rooms, but i’m stuck while trying to center some icons in the grid, the grid i’m trying to get is 3x4, i read the documentation which says that to fill the empty space just use a period (.) but still not getting aligned like other cards. Hope someone can help me

Here is my code:

type: custom:button-card
entity: group.lights_master
tap_action:
  action: more-info
  entity: group.master
hold_action:
  action: more-info
  entity: sensor.0x00158d00027303ac_temperature
icon: mdi:bed
name: Master
styles:
  card:
    - height: 100px
    - width: 116px
  grid:
    - grid-template-areas: '"n i .""temp temp .""humidity humidity .""aire door fence"'
    - grid-template-columns: 1fr 1fr 1fr
    - grid-template-rows: 1fr 1fr 1fr 1fr
    - font-weight: bold
    - font-size: 13px
    - align-self: start
    - justify-self: middle
  icon:
    - width: 30%
    - left: 30%
    - align-self: end
    - justify-self: end
  img_cell:
    - justify-content: start
    - align-items: start
  custom_fields:
    humidity:
      - align-self: start
      - justify-self: start
      - '--text-color-sensor': >-
          [[[ if (states["sensor.0x00158d00027303ac_humidity"].state > 70)
          return "red"; ]]]
    temp:
      - align-self: start
      - justify-self: start
      - '--text-color-sensor': |-
          [[[ if (states["sensor.0x00158d00027303ac_temperature"].state < 17)
           return "red"; ]]]
    aire:
      - align-self: start
      - justify-self: start
      - color: var(--text-color-sensor)
      - '--text-color-sensor': >-
          [[[ if (states["climate.master_room_ac"].state === "cool") return
          "#339bf6"; ]]]
    door:
      - align-self: start
      - justify-self: start
      - color: var(--text-color-sensor)
      - '--text-color-sensor': >-
          [[[ if (states["binary_sensor.0x00158d0004aaecae_contact"].state ===
          "on") return "red"; else return "green" ]]]
    fence:
      - align-self: start
      - justify-self: start
      - color: var(--text-color-sensor)
      - '--text-color-sensor': >-
          [[[ if (states["binary_sensor.0x00158d0001dff41e_contact"].state ===
          "on") return "red"; else return "green" ]]]
custom_fields:
  temp: |
    [[[
      return `<ha-icon
        icon="mdi:thermometer"
        style="width: 18px; height: 18px;">
        </ha-icon> <span style="color: var(--text-color-sensor);">${states['sensor.0x00158d00027303ac_temperature'].state} °C</span>`
    ]]]
  humidity: |
    [[[
      return `<ha-icon
        icon="mdi:water-percent"
        style="width: 18px; height: 18px;">
        </ha-icon> <span style="color: var(--text-color-sensor);">${states['sensor.0x00158d00027303ac_humidity'].state} %</span>`
    ]]]
  aire: |
    [[[
      return `<ha-icon
        icon="mdi:air-conditioner"
        style="width: 18px; height: 18px;">
        </ha-icon> <span style="color: var(--text-color-sensor);">${states['climate.master_room_ac'].state}</span>`
    ]]]
  door: |
    [[[
      if (states["binary_sensor.0x00158d0004aaecae_contact"].state ===
          "off") return `<ha-icon
        icon="mdi:door-sliding-lock"
        style="width: 18px; height: 18px;">
        </ha-icon> ` ;
      else return `<ha-icon
        icon="mdi:door-sliding-open"
        style="width: 18px; height: 18px;">
        </ha-icon> `
    ]]]
  fence: |
    [[[
      if (states["binary_sensor.0x00158d0001dff41e_contact"].state ===
          "off") return `<ha-icon
        icon="mdi:gate"
        style="width: 18px; height: 18px;">
        </ha-icon> ` ;
      else return `<ha-icon
        icon="mdi:gate-open"
        style="width: 18px; height: 18px;">
        </ha-icon> `
    ]]]