Lovelace: Button card

gwww · July 9, 2020, 12:06am

I’m wondering if its possible to do two things on a tap_action. I’d like to call a service and change a CSS variable. I have the following SVG icon I’d like to animate (I’ve wrapped it in some HTML to load in a webpage for testing)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<style>
  svg {
    --up-or-down: translateY(-50%);
  }
  div {width: 300px;}
</style>
<body>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <defs>
        <clipPath id="doorClip">
          <rect x="0" y="10" width="20" height="14"/>
        </clipPath>
      </defs> 
      <g clip-path="url(#doorClip)">
        <path style="transition: 4.4s linear; transform: var(--up-or-down)" d="M4.999 17.991h14v-2h-14v2zm0 3h14v-2h-14v2zm0 2.5a.5.5 0 00.5.5h13a.5.5 0 00.5-.5v-1.5h-14v1.5zm13.5-10.5h-13a.5.5 0 00-.5.5v1.5h14v-1.5a.5.5 0 00-.5-.5z"/></g>
      <path d="M23.853 11.137L13.206.491c-.643-.644-1.767-.645-2.413 0L.146 11.138a.499.499 0 00.354.854H2v11.5a.5.5 0 00.5.5h1a.5.5 0 00.5-.5v-10c0-.827.673-1.5 1.5-1.5h13c.827 0 1.5.673 1.5 1.5v10a.5.5 0 00.5.5h1a.5.5 0 00.5-.5V11.991h1.5a.5.5 0 00.353-.854z"/></svg>
  </div>
</body>
</html>

Just change the var from -50% to 0 and vice-versa to see the garage door go up or down.

Mariusthvdb · July 9, 2020, 8:27am

have another view related question:

trying to color the background in a button_template, based on the current view:

button_menu_button:
  variables:
    view: >
      [[[ return window.location.pathname.split('lovelace/')[1]; ]]]
  styles:
    card:
      - background: >
          [[[ return variables.view ? 'gold' : 'var(--paper-card-background-color)'; ]]]

but this doesn’t work. While I can do this on a single button:

variables:
  view: >
    [[[ return window.location.pathname.split('lovelace/')[1] == 'home'; ]]]

and base actions on that:

hold_action:
  action: >
    [[[ return variables.view ? 'navigate' : 'call-service'; ]]]

why wont the top template work? cant it pass the variable to the button like this?

EDIT

No, not like that missed the evaluation in the action template of course…

this now works, though maybe a bit of a hack, creating variables in both the template and the button config. But hey, if it works …

Menu bar (stack)

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

      - type: custom:button-card
        template: button_menu_button
        icon: mdi:home
        tap_action:
          action: navigate
          navigation_path: home
        variables:
           path: home
        styles:
          icon:
            - color: >
                [[[
                  return (states['sensor.count_alerts_notifying'].state > 0)
                  ? 'red': 'green';
                ]]]

      - type: custom:button-card
        template: button_menu_button
        icon: mdi:light-switch
        tap_action:
          action: navigate
          navigation_path: lights
        variables:
          path: lights
        styles:
          icon:
            - color: >
                [[[
                  return (states['group.all_inside_lights'].state == 'on')
                  ? 'gold': 'grey';
                ]]]

etcetc

and template:

button_menu_button:
  variables:
    view: >
      [[[ return window.location.pathname.split('lovelace/')[1]; ]]]
  size: 25px
  styles:
    icon:
      - color: var(--secondary-text-color)
    card:
      - background: >
          [[[ return variables.view == variables.path
              ? 'var(--secondary-background-color)' : 'var(--paper-card-background-color)';
          ]]]

btw, I went away from the q-card, because the power of that card is the weakness in my current quest: it creates 1 card, which is used everywhere it is called. And I need a dedicated card everywhere on each view, it should re-render. So went for a simple !include.

title: Home
icon: mdi:home
path: home
cards:

#  - type: custom:q-card
#    card: shortcut_menu

  - !include /config/lovelace/buttons/buttons_shortcut_menu.yaml

devastator · July 9, 2020, 4:47pm

Could you post the config of that media player? Looks very neat !

Umbe · July 9, 2020, 6:25pm

Hi , i am trying to create a template but it does not recognize the entity , can someone help me to how fill it ?

template :

graph_button_style:
  template: homekit_style
  aspect_ratio: 1/1
  name: '[[[ return entity.attributes.friendly_name ]]]'
  custom_fields:
    graph:
      card:
        type: sensor
        entity: "[[entity]]"
        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

  entity: "[[entity]]"
  hold_action:
    action: more-info

card

              - type: custom:button-card
                template: graph_button_style
                entity: sensor.0x00158d00044b3373_temperature_1
                show_entity_picture: true

and error

thanks

devastator · July 9, 2020, 7:11pm

Is there a possibility to abbreviate the last_changed text ?
Sometimes the message in dutch (e.g. ‘55 minuten geleden’) does not fit. Would be nice if it could be abbreviated like ‘55m geleden’ or ‘55 min geleden’.

Mariusthvdb · July 10, 2020, 7:25am

in need of adding some css filters to a js template like this

    card:
      - background: >
          [[[ return variables.view == variables.path
              ? 'var(--secondary-background-color)' : 'var(--paper-card-background-color)';
          ]]]

I haven’t found the correct syntax to do so yet. I’d want the brightness of the ? to be 110% and the : to remain as is. for a set of other buttons, I’d need the contrast filter

Is that possible?

ronschaeffer · July 10, 2020, 9:40am

UPDATE: I’ve now accomplished the same thing by converting the SVGs to custom icons, but I’d still be interested to know if it’s possible to color SVGs as entity-pictures.

Hi, all -

Is it possible to change the color of an SVG image used as entity-picture?

I would like to be able to do something like this, which of course doesn’t work:

type: 'custom:button-card'
entity: binary_sensor.linktap_left_sprinkler
entity_picture: /local/images/logos/Logo_LINKTAP_Black.svg
show_entity_picture: true
state:
  - value: 'on'
    styles:
      entity_picture:
        - color: green
  - value: 'off'
    styles:
      entitiy picture:
        - color: red

After some googling, it seems like this might be possible using CSS. But, I don’t really know where to start.

Thanks!

yuval221183 · July 11, 2020, 8:19am

Hello,

Can you share all the code of this window please, I can not do it in my system

valsesia · July 13, 2020, 2:43am

Hello, a nobbies question: How do you create the animated SVG???
I’m having a lot of difficulty in this.

Thanks e congratulations on the layout.

Mariusthvdb · July 13, 2020, 9:33am

must have missed this before (since the ‘triggers_update’ was introduced) but in a heavy rewrite of several counting buttons now notice they are no longer working, on entities using a group. A mere count lights button with label


    [[[
      var i;
      var status = entity.state;
      var entities = entity.attributes.entity_id;
      var count = 0;
      for (i = 0; i < entities.length; i++) {
        var state = states[entities[i]].state;
        if (state == 'on') {
          count += 1;
        }
      }
      var phrase = (count == 1 ? ' light ' : ' lights ');
      return (status == 'on' ? count.toString() + phrase + status : status);
    ]]]

only updates on refresh of the view… Of course I am fully aware of the fact the group only changes state on all or nothing, but this seems to be a major issue, since I cant start adding all entities to the button… or write autmations to somehow update this, since that would involve the same backend overhead.

Couldn’t the button be adapted to auto-expand the entities and ‘listen’ to these, when a group is used for entity?

Mariusthvdb · July 13, 2020, 3:32pm

using this template:

button_title_counter:
  aspect_ratio: 16/1
  layout: icon_label
  show_icon: true
  size: 60%
  show_label: true
  show_state: false
  show_name: false
  tap_action:
    action: toggle
    haptic: light
  hold_action:
    action: more-info
    haptic: success
  styles:
    card:
      - background-color: var(--background-color-off)
      - color: var(--text-color-off)
      - padding: 4px
    icon:
      - color: var(--icon-color-off) #grey
    label:
      - color: black #'#555B65'
      - font-family: Helvetica
      - font-size: 14px
      - font-weight: bold
      - justify-self: start

the icon and label are only correctly centered on desktop in a 1 column view:

if I resize to 2 column, the icon moves down:

and on the 1 column view in the iOS app, it never shows correctly:

Ive tried adding an align center property to the icon (the label is always fine) but that has zero effect.

what am I missing here, please have a look?

Marcus_Lundblad · July 13, 2020, 7:29pm

Hello all! sry for my bad english!
Anyone knows if its possible to add a countdown timer on a light button for example?
Countdown that starts when i press it? i know how to make a timer but not how to add it on a on/off button.
Thanks !

parautenbach · July 13, 2020, 7:51pm

@Marcus_Lundblad perhaps this post can get you started.

Frank_Hagenbuch · July 15, 2020, 2:47pm

I need help find the right size for my climate card. It will not scale the right way.
How can i set it in the center of my button?

My template:

  thermostat:
    aspect_ratio: 1/1
    show_state: false
    show_icon: false
    show_name: false
    state: *button_state
    custom_fields:
      ac:
        card:
          entity: '[[[ return entity.entity_id ]]]'
          type: thermostat    
    styles:
      card:  [overflow: unset, font-family: Sf Display, letter-spacing: 0.05vw, text-rendering: optimizeLegibility, font-weight: 400, color: 'rgba(255, 255, 255, 0.3)', font-size: 1.54vw, background-color: 'rgba(115, 115, 115, 0.2)', border-radius: 0.8vw,]
      custom_fields:
        ac:
          - filter: opacity(100%)
          - padding: 10%;
          - --paper-card-background-color: 'rgba(115, 115, 115, 0)'
    tap_action:

and my button config:

          - type: custom:button-card
            entity: climate.room_climate_tom
            style:
              top: 42%
              left: 30%
              width: 8%
            template: thermostat

petro · July 15, 2020, 2:51pm

The climate card can’t scale that small. Even if you were to get it in the center it would still chop off edges and look weird.

Frank_Hagenbuch · July 15, 2020, 2:53pm

Oha, thats sad. i like the look of the button with it inside

petro · July 15, 2020, 2:58pm

Everything has a minimum size. Using a card inside a card may return undesired results when you cram 4 buttons into a single row.

RomRider · July 15, 2020, 3:00pm

Did you try with scale from CSS? https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

Frank_Hagenbuch · July 15, 2020, 3:01pm

yes, understand. i can live with it when it is to smal, but i want understand why it scale outside the button when i change the size of the browser window. All other things in my buttons scale with the button itself.

Frank_Hagenbuch · July 15, 2020, 3:12pm

not good, but closer