Lovelace: Button card

[Pirol62 (Jörg Nauen)]

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'

[RomRider]

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';
                ]]]

[Mariusthvdb (Marius)]

just for the fun of it, and pushed by the demise of CH, I have adapted my shortcut_menu buttons, so they dont show the icon of the current view, but another, mostly related view to navigate to.

Makes optimal use of the small space it takes, no use showing the icon you’re on, for navigating purposes that is.
have a look, these are the 2 first icons:

type: custom:stack-in-card
mode: horizontal
keep:
  background: true
cards:

  - type: custom:button-card
    template: button_shortcut_menu
    variables:
       path: home
       tooltip: >
        [[[ return (window.location.pathname.split('/')[2] == 'home')
          ? 'Hassio' : 'Home'; ]]]
    icon: >
        [[[ return (window.location.pathname.split('/')[2] == 'home')
          ? 'mdi:home-assistant' : 'mdi:home'; ]]]
    tap_action:
      action: navigate
      navigation_path: >
        [[[ return (window.location.pathname.split('/')[2] == 'home')
          ? '/ui-data/home_assistant' : '/lovelace/home'; ]]]
    styles:
      icon:
        - color: >
            [[[
              return (states['sensor.count_alerts_notifying'].state > 0)
              ? 'red': 'green';
            ]]]
    state:
      - operator: template
        value: >
          [[[ return (states['sensor.count_alerts_notifying'].state > 0) ]]]
        spin: true

  - type: custom:button-card
    template: button_shortcut_menu
    variables:
      path: lights
      tooltip: >
        [[[ return (window.location.pathname.split('/')[2] == 'lights')
          ? 'Light settings' : 'Lights'; ]]]
    icon: >
        [[[ return (window.location.pathname.split('/')[2] == 'lights')
          ? 'mdi:home-lightbulb' : 'mdi:light-switch'; ]]]
    tap_action:
      action: navigate
      navigation_path: >
        [[[ return (window.location.pathname.split('/')[2] == 'lights')
          ? '/ui-settings/light_settings' : '/lovelace/lights'; ]]]
    styles:
      icon:
        - color: >
            [[[
              return (states['group.all_inside_lights'].state == 'on')
              ? 'gold': 'grey';
            ]]]

[jarrah]

Of course, can’t believe I didn’t spot that. The logic says if dummy_one or dummy_two is on, then it’s red, else green. Why I had green before red I’ve no idea.
Thanks @RomRider

[alphabeta279]

Amazing plugin, just tinkering with it and struggling to get attributes to display.

Below sensor state works fine, just the attribute code doesn’t work, can anyone give a pointer on this?

custom_fields:
  loc: >
    [[[
      return `<ha-icon
        icon="mdi:map"
        style="width: 42px; height: 42px; color: yellow;">
        </ha-icon><span> ${state_attr('sensor.pixel_2_xl_geocoded_location', 'locality') }}</span>`
    ]]]
  battery: >
    [[[
      return `<ha-icon
        icon="mdi:battery"
        style="width: 32px; height: 32px; color: deepskyblue;">
        </ha-icon><span> Battery: <span style="color: var(--text-color-sensor);">${states['sensor.pixel_2_xl_battery_level'].state}%</span></span>`
    ]]]

[RomRider]

@alphabeta279

${state_attr('sensor.pixel_2_xl_geocoded_location', 'locality') }}

This is not javascript, this is jinja2, only javascript is supported.

In javascript: states['sensor.pixel_2_xl_geocoded_location'].attributes.locality

[alphabeta279]

@RomRider

states[‘sensor.pixel_2_xl_geocoded_location’].attributes.locality

Ah, didn’t realise that - faceplant!

Thanks for pointer!

[Dolores]

And shortly afterwards, it stopped working! I’m quite convinced that I didn’t change anything between “working” and “not working.” Very bizarre!

[RomRider]

Try to clear your cache please, on all your devices.

[sini180]

Hello, loving the button-card but having trouble with a clock. I am using state and notification for the time and date but the time appears top left and date bottom right in grid. I can’t figure out how to just have two rows / 1 column with both centered?

If I disable “grid-area: notification / notification / notification / notification” on notification div it shows correctly, but can’t figure out how in the backend.

  - type: 'custom:button-card'
    entity: sensor.time_formatted
    show_icon: false
    show_name: false
    show_state: true
    tap_action:
      action: none
    styles:
      state:
        - font-size: 3em
      custom_fields:
        notification:
          - grid-area: null
    custom_fields:
      notification: |
        [[[
          return states['sensor.date_formatted'].state
        ]]]

[KTibow (Kendell R)]

@sini180

but can’t figure out how in the backend.

What do you mean?

[RomRider]

@sini180

I can’t figure out how to just have two rows / 1 column with both centered?

That should do the trick
Information about how to play with the grid can be found here

  - type: 'custom:button-card'
    entity: sensor.time_formatted
    show_icon: false
    show_name: false
    show_state: true
    tap_action:
      action: none
    styles:
      state:
        - font-size: 3em
      grid:
        - grid-template-areas: '"s" "notification"'
        - grid-template-rows: min-content min-content
        - grid-template-columns: 1fr
    custom_fields:
      notification: |
        [[[
          return states['sensor.date_formatted'].state
        ]]]

[sini180]

@RomRider

      grid:
        - grid-template-areas: '"s" "notification"'
        - grid-template-rows: min-content min-content
        - grid-template-columns: 1fr

Perfect! Thanks. I did read but obviously not well enough. I put ‘“s” “n”’ which wasn’t what I was trying to achieve. Many thanks.

[Umbe (Umberto)]

Hi petro , i am trying to manage the code into the template , but is not working.
I cancelled your 2 entities and replaced with entity: “[[[ return entity.entity_id ]]]”

and on the lovelace file i added

              cards:
              - entity: sensor.0x00158d00044b3373_humidity_1
                type: "custom:button-card"
                template: 'graph_button_style2'
                name: Living

but it does not recgnize the template.
shall i add something else ?

thanks

[petro]

not sure, I don’t use templates.

[Umbe (Umberto)]

Thanks!

[sini180]

I thought I might contribute the below, expanding on code by Petro and RomRider (I think) for light brightness sequence but with light groups. Groups have a state but not brightness, so script pulls first entity from group and checks that for brightness. I only just started with Hassio and Jinja2 a couple weeks ago so excuse me if not formatted or best code, but it works.

I use this with a single button press is toggle (on/off) and double tap runs the below to cycle brightness

dim_on_off:
  sequence:
    - service_template: light.turn_on
      data_template:
        entity_id: >
          {{ light }}
        brightness: >
          {% set light = states.light | selectattr('entity_id', 'in', state_attr(light, 'entity_id')) | selectattr('state', 'equalto', 'on') | map(attribute='entity_id') | list %}
          {% if light[0] is defined %}
            {% if (state_attr(light[0], 'brightness') | int) >= 254 %}
              0
            {% elif (state_attr(light[0], 'brightness') | int) >= 150 %}
              255
            {% elif (state_attr(light[0], 'brightness') | int) >= 20 %}
              150
            {% else %}
          {% endif %}
          {% else %}
            20
          {% endif %}

Double tap example…

        double_tap_action:
          action: call-service
          service: script.dim_on_off
          service_data:
            light: group.kitchen_lights

[yuval221183 (yuval)]

hello

can you share yor code ?
i was happy that my system would loolk like this :))

[pawel0415 (Pawel)]

Hi, i have a problem with the example from GitHub. Card is very big and I want to make it smaller like in the example. Can you help me ? Below I attach a photo how it looks like in my ha.

[KTibow (Kendell R)]

I think it takes up max space possible, put it in a horizontal stack and it’ll take up less space.