Lovelace: Button card

Jpsy · October 13, 2020, 6:05pm

Hi @Dolores,
strange - it works flawlessly for me.
I also witness the effect that > is replaced by | (pipe) but this does not break the code. Might be a strange internal handling of the Lovelace UI editor.

May I suggest that you strip your button_card_templates code down to the following fragment.
Place it at the very beginning of the Lovelace raw editor code of some Dashboard view and remove all other button_card_templates.

button_card_templates:
  test_button:
    show_icon: false
    name: |
      [[[
        return entity.state;
      ]]]

views:
  - badges: []
  ...

Then use this test_button template for some button_card button like this:

- type: 'custom:button-card'
  template: test_button
  entity: sensor.one_of_your_sensors

It should remove the icon of the button and show the state instead of the name as the button text.
For me this works perfectly.

What I do NOT use so far are nested templates like you do in your example.

peytons · October 13, 2020, 8:51pm

Hi–

I recently created a button to toggle my alarm’s door chime state, but the feedback on the UI is bad-to-nonexistent. How can I create better feedback?

Here’s the relevant part of the config:

      - type: "custom:button-card"
        name: 'chime'
        entity: alarm_control_panel.my_alarm_control_panel
        show_icon: true
        show_state: true
        state_display: '[[[ return entity.attributes.chime_volume ]]]'
        state:
            - operator: template
              value: >
                [[[ return entity.attributes.chime_volume == 'high' ]]]
              icon: mdi:volume-high
              label: High
            - operator: template
              value: >
                [[[ return entity.attributes.chime_volume == 'off' ]]]
              icon: mdi:volume-mute
            - operator: default
              icon: mdi:volume-low
        tap_action:
          action: call-service
          service: simplisafe.set_system_properties
          service_data:
            system_id: <system_id>
            chime_volume: '[[[ return entity.attributes.chime_volume == "off"?3:0 ]]]'

Problems:

On the MacOS HA client, whatever rendering engine it’s using apparently doesn’t sufficiently support the ripple CSS effect so there’s effectively zero feedback
Even on clients that do support the ripple effect, I get feedback that I’ve tapped the button, but because the state update is so slow (is it happening synchronously if I tap?) the changed state doesn’t reflect on the card for several seconds.

Ideally I’d be able to trigger a state update immediately and see the results of my change, but at a minimum it might be nice to have the icon or something change until the next state update…

One thing I tried, inspired by something elsewhere in this thread is to temporarily hide the icon - is there a way to change it to the horizontal three dots instead, and have it change back to the relevant icon upon the state changing?

          always_execute: |
            [[[
              this.shadowRoot.getElementById('icon').style.opacity = 0;
              window.setTimeout(() => {
                this.shadowRoot.getElementById('icon').style.opacity = 1;
              }, 1000)
            ]]]

Dolores · October 14, 2020, 5:34pm

Thank you so much for the help! I’ve implemented your test and eliminated my other templates.

Blast!

EDIT: @Jpsy, today I opened my instance and your simple test was actually working… weird! Maybe I hadn’t actually fixed it? Thank you again! Rob Coleman fixed my problem below.

Jpsy · October 14, 2020, 6:06pm

Shit. I am running out of ideas. There must be some difference between your system and mine.

Dolores · October 14, 2020, 6:54pm

Thank you for the help regardless! I’m running the latest version of the button card and Home Assistant 0.116.2 with my lovelace in UI editor mode so I’m quite surprised that anything is different!

I’m hopeful that someone else will have a solution as I am trying to setup a nice tablet dashboard without duplicating code a dozen times. This button is amazing!

Dolores · October 14, 2020, 8:47pm

I tried adding a dashboard that is in yaml mode, just in case. That has not changed the behavior at all.

ricreis394 · October 14, 2020, 11:12pm

In templating I want to know the entity name inserted even if it doesn’t exist.
In this case the variable entity return undefined, is it possible?

EDIT: Nvm this._config.entity did the trick

rccoleman · October 15, 2020, 12:39pm

To be able to return an evaluated template in the service_data: field, I had to do this (similar to the confirmation prompt):

                      tap_action:
                        action: call-service
                        service: persistent_notification.create
                        service_data:
                          message: "[[[ return `${entity.attributes.friendly_name}` ]]]"

Note the backticks and ${}. Other forms just returned the unevaluated string for me.

Dolores · October 15, 2020, 1:06pm

That was it! Amazing! Thank you so much. This is going to be the difference between me having an okay dashboard, and being enthralled with it.

Mariusthvdb · October 15, 2020, 2:11pm

answering myself here for reference:

    icon: >
      [[[ return (window.location.pathname.split('/')[2] == 'alarmclock')
          ? 'mdi:alarm-note'
          : (states['sensor.next_alarm'].state == 'Not set')
          ? 'mdi:alarm-off' : 'mdi:alarm'; ]]]

works.

columbusgeek · October 15, 2020, 6:32pm

This is a crazy old thread, I know, but is there a way to make the map pop up or get bigger when clicked? I know I can change the tap_action to a url but ideally a tap takes you to the person you are interested in.

RomRider · October 17, 2020, 2:58pm

Both solutions should work, I don’t understand why it wouldn’t. I’m using a lot of the “not backquoted version” in my config.
Anyway, happy that it works for you with this way of writing it.

rccoleman · October 17, 2020, 4:12pm

Are you using templates like that in ‘service_data:’? That seemed to be the difference.

RomRider · October 17, 2020, 4:39pm

Yes, see:

action: call-service
service: browser_mod.popup
service_data:
  title: '[[[ return this._config.name ]]]'
  deviceID:
    - this
  style:
    $: |
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        border-radius: 10px;
      }
    .: |
      :host {
        --secondary-background-color: var(--lovelace-background, var(--primary-background-color))
      }
  card:
    type: custom:mini-graph-card
    style: |
      ha-card {
        background: none;
        border-radius: 0;
      }
    entities:
      - '[[[ return entity.entity_id ]]]'
    group: false
    show:
      name: false
      icon: false
      fill: true
    points_per_hour: 2
    line_color: rgba(255, 255, 255, 0.8)
    hour24: true

RomRider · October 18, 2020, 12:58pm

The state of the button comes from home assistant so a tap calls a service, if the state takes 5 sec to update, the button will only reflect the new state after it is updated in HA. This is the expected behavior and there’s not much I can do about it.

You ça however change the ripple effect color:

styles:
  card:
    - --mdc-ripple-color: blue
    - --mdc-ripple-press-opacity: 0.5

I’ll see if I can do something not too dirty to display a sort of optional “processing” message for those long state updates…

Glass · October 18, 2020, 9:47pm

Hi

I have a button to turn on a switch connected to my electric immersion heater. Is it possible to set it so that when i press the button it turns itself off after a set amount of time, for example I press the button to switch on the water heater and after 2,5hrs it switched itself back off without having to press the button again.

Thanks

KTibow · October 18, 2020, 10:12pm

Try making a script.

RomRider · October 19, 2020, 12:37am

As @KTibow said, this would be done with some script, but I’d use automation for that: trigger state of your switch being on for 2.5h

auto_off_after_2_5h:
  trigger:
    - platform: state
      entity_id: YOUR_ENTITY
      to: 'on'
      for: '02:30:00'
  action:
   ... Do what you want here to turn it off

jarrah · October 19, 2020, 8:07am

Ohh right, that would make sense.
So what I’d like is for it to go red if either input booleans are on (an OR statement). Would you mind suggesting a way to do this please?

ASNNetworks · October 19, 2020, 10:38am

Care to share your code? I have a navigation menu myself. I now have created separate bars for each view with altered codes based on the open tab. Your solutions sounds a lot better since I can then just use the same code.