Lovelace: Button card

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. :slight_smile:

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

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!

1 Like

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

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

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.

1 Like

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. :smiley:

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.

1 Like

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.

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. :frowning:
Anyway, happy that it works for you with this way of writing it.

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

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

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…

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

Try making a script.

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
1 Like

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?

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.

This in dashboard yaml:

background: var(--background-image)
title: Varadero
button_card_templates:
  button_shortcut_menu:
    variables:
      dashboard: |
        [[[ return window.location.pathname.split('/')[1] ]]]
      view: |
        [[[ return window.location.pathname.split('/').slice(-1) ]]]
    size: 25px
    styles:
      icon:
        - color: |
            [[[ return variables.view == variables.path
                ? 'var(--navigation-color)' : 'var(--secondary-text-color)';
            ]]]
      card:
        - height: 35px
        - box-shadow: none
        - background: |
            [[[ return variables.view == variables.path
                ? 'var(--secondary-background-color)' : 'var(--card-background-color)';
            ]]]
views:
  - icon: 'mdi:home'
    path: default_view
    popup_cards:

and this is the button-card look like:

icon: 'mdi:home'
template: button_shortcut_menu
layout: vertical
show_icon: true
show_label: false
show_state: false
variables:
  path: 0
tap_action:
  action: navigate
  navigation_path: /lovelace-mobile/0
type: 'custom:button-card'
1 Like

Then it’s just the opposite:

          name:
            - color: |
                [[[
                  return ( states['input_boolean.dummy_one'].state == 'on' ||
                           states['input_boolean.dummy_two'].state == 'on' )
                  ? 'red' : 'green';
                ]]]