Lovelace: Button card

sbmlat · June 24, 2019, 12:13am

Nice card.

In my case, there are no ‘templow’ entries for the forecast. What was your configuration entry for Darksky?

08%20PM

Name is shown as 73°F - 73°F / undefined°F

{'datetime': '2019-06-23T19:00:00', 'temperature': 73, 'precipitation': None, 'condition': 'cloudy'}

iantrich · June 24, 2019, 12:26am

I’m guessing you’re using the sensor and not the weather integration found here

sbmlat · June 24, 2019, 12:39am

I am using Darksky weather integration.

weather:
  - platform: darksky
    api_key: !secret darkskyapi

iantrich · June 24, 2019, 12:42am

Ah, I see. I thought you were showing the full attributes, but that’s just one forecast item. this is mine:

    {
      "datetime": "2019-06-23T00:00:00",
      "temperature": 73,
      "templow": 58,
      "precipitation": 0.7,
      "wind_speed": 6.67,
      "wind_bearing": 232,
      "condition": "rainy"
    },

iantrich · June 24, 2019, 12:43am

Why does yours have an hour? Are you doing an hourly forecast?

sbmlat · June 24, 2019, 12:50am

Here is my darksky sensor. I am not doing an hourly forecast.

sensor:

  - platform: darksky
    api_key: !secret darkskyapi
    forecast:
      - 0
      - 1
    monitored_conditions:
      - summary
      - icon
      - temperature
      - minutely_summary
      - daily_summary
      - temperature_high
      - temperature_low
      - apparent_temperature
      - hourly_summary
      - precip_type
      - precip_intensity
      - cloud_cover
      - nearest_storm_distance
      - wind_bearing
      - wind_speed
      - humidity
      - pressure
      - precip_probability
    scan_interval:
      minutes: 5

Mariusthvdb · June 24, 2019, 7:15am

HI,

Ive tried this, but when I use the multiline notation, the droplet won’t show and simply returns the code on the button…

name_template: >
  return states['weather.home_darksky'].attributes.temperature + '°C - ' + 
         states['weather.home_darksky'].attributes.forecast[0].temperature + '°C / ' + 
         states['weather.home_darksky'].attributes.forecast[0].templow + '°C'
label_template: >
  return '\U0001F4A7 ' + (states['weather.home_darksky'].attributes.forecast[0].precipitation || 0) + ' mm';

Isn’t this accepted in the button-card?

Secondly, do you really get the more-info response? If I click the button nothing happens at all.

roflcoopter · June 24, 2019, 2:10pm

Is there any way to localize the state in entity.state?

I tried using this.hass.localize(entity.state) aswell as hass.localize(entity.state) to no avail

iantrich · June 24, 2019, 3:08pm

Try copying this or from here

Yes, more-info works

iantrich · June 24, 2019, 3:13pm

Are you trying to do that in a template? I haven’t tested this, but try the following with your entity:

this.hass.localize(states[entity].state)

I just reread the docs, what you have should have worked if it was going to work. I haven’t look much at the template support before today

RomRider · June 24, 2019, 3:22pm

The localize function doesn’t take a state string as an argument, it takes:

For binary_sensor

state.${entity.entity_id.split('.')[0]}.${entity.attributes.device_class}.${entity.state}

For everything else:

state.${entity.entity_id.split('.')[0]}.default.${entity.state}

so for your template:

hass.localize(`state.${entity.entity_id.split('.')[0]}.${entity.attributes.device_class}.${entity.state}`)

RomRider · June 25, 2019, 8:29am

Hey folks,

I’m thinking about introducing 2 new features:

Templating for all the fields: this would deprecate *_template, but I’d introduce [[ javascript_code ]] for all the field
Adding support for as many extra fields as you want, on top of name, label and state, and you’d be able to add them to button by playing with the grid style.

What do you think?

Mariusthvdb · June 25, 2019, 12:52pm

needless to say: +1!
please do…

at least, or maybe begin, adding templates for icon:

roflcoopter · June 25, 2019, 1:06pm

@iantrich Indeed, in a template.
@RomRider Ahh i see. Using your example i was able to create this monstrosity by playing with the grid

What i have done is i put the label in the upper right corner and made a multiline name_template using several divs

    styles:
      grid:
        - grid-template-areas: '"i l" "n n"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr min-content
    name_template: >
      var state = hass.localize(`state.${entity.entity_id.split('.')[0]}.${entity.state}`);
      return '<div>AC</div>' +
             '<div style="font-size: 11px;">' + (state ? state : entity.state ) + '</div>' +
             '<div style="font-weight: normal; font-size: 10px;">' + states['sensor.ac_power'].state + ' kW</div>';

roflcoopter · June 25, 2019, 1:12pm

This sounds like a great idea. It would make my previous example a lot easier

jarrah · June 25, 2019, 9:05pm

At the moment I use anchors to define a green and red state that can be used within either the on or off state of a button, depending on requirements:

anchors:
  custom_button_state_red: &custom_button_state_red
    color: rgb(71,39,45) #Red
    styles:
      label:
        - color: rgb(220,69,121)
      icon:
        - color: rgb(220,69,121)
  custom_button_state_green: &custom_button_state_green
    color: rgb(49,68,42) #Green
    styles:
      label:
        - color: rgb(134,219,85)
      icon:
        - color: rgb(134,219,85)

button_card_templates:
  security:
    color_type: card
    show_name: true
    show_icon: true
    show_last_changed: true
    size: 25px
    tap_action:
      action: more-info
    styles:
      label:
        - font-size: 10px
      card:
        - border-radius: 10px
      name:
        - font-size: 15px
      grid:
        - grid-template-areas: '"i n" "i l"'
        - grid-template-columns: min-content min-content
        - grid-template-rows: auto auto auto auto
        - width: min-content
        - grid-gap: 0px 2px

  security_windows: 
    template: security
    state:
      - value: "on"
        icon: mdi:window-open
        <<: *custom_button_state_red
      - value: "off"
        icon: mdi:window-closed
        <<: *custom_button_state_green

  security_camswitch: 
    template: security
    tap_action:
      action: toggle
    state:
      - value: "on"
        icon: mdi:power-plug
        <<: *custom_button_state_green
      - value: "off"
        icon: mdi:power-plug-off
        <<: *custom_button_state_red

Is there a way to do the same thing with Configuration Templates so that I can ditch anchors? I can’t see a way to do this using the cascading nature of template, nor can I figure out if or how ID would work in this instance?

If anchors are the best way to do this (I prefer having a single place to change all colours), I’m happy to leave things as they are.

Thanks

LbDab · June 26, 2019, 1:58am

Hi I’m trying format time as “XX ago” with templates as your screenshot but it shows long timestamp:

This shows long format:

name_template: >-
  return entity.last_changed

This shows empty line:

name_template: >
  return entity.state.substr(0, entity.state.length-11)

Please advice

Tried with show_last_changed it works but it overrides label, possible to have it all? label, name and last changed

Mariusthvdb · June 26, 2019, 5:27am

sure, this is my button:

      - type: custom:button-card
        template: horizontal-filler

      - type: custom:button-card
        template: button_motion
        name: Laundry
        entity: binary_sensor.laundry_motion_sensor
        tap_action:
          action: call-service
          service: switch.toggle
          service_data:
            entity_id: switch.laundry_motion_sensor_switch

using this template button_motion:

button_motion:
  template: button_body
  show_last_changed: true
  tap_action:
    action: more-info
    haptic: light
  hold_action:
    action: more-info
    haptic: success
#  styles:
#    name:
#      - text-overflow: unset
#      - white-space: unset
#      - word-break: break-word
#      - box-shadow: 0px 0px 2px 1px
  state:
    - value: 'on'
      styles:
        card:
          - color: red
        name:
          - color: black
        icon:
          - color: red
    - operator: template
      value: >
        return entity.attributes.on === true
      styles:
        card:
          - color: '#555B65'
        icon:
          - color: 'green'
        state:
          - color: 'green'
      id: off-icon
    - operator: default
      styles:
        card:
          - color: '#555B65'
          - opacity: 0.8
        icon:
          - color: '#555B65'
      id: off-icon

using this button_body:

button_body:
  color: auto
  size: 30%
  aspect_ratio: 1/1
  show_state: true
  show_label: true
  styles:
    icon:
      - color: var(--local-color)
    lock:
      - color: red
    card:
      - color: var(--local-color)
      - border-radius: 6px
      - background-color: ivory
      - padding-left: 5px
      - box-shadow: 0px 0px 2px 1px
    name:

      - text-overflow: unset
      - white-space: unset
      - word-break: break-word

      - text-align: start
      - justify-self: start
      - font-weight: bold
      - font-family: Helvetica 
      - font-size: 13px
    label:
      - text-align: start
      - font-size: 11px
      - font-family: Helvetica
      - justify-self: start
    state:
      - text-align: start
      - font-size: 11px
      - font-family: Helvetica
      - justify-self: start
      - text-transform: capitalize
      - font-weight: bold
    grid:
      - grid-template-areas: '"i" "n" "s" "l"'
      - grid-template-columns: 1fr
      - grid-template-rows: 1fr min-content min-content
    img_cell:
      - justify-content: start
      - align-items: start

thermseekr · June 26, 2019, 2:04pm

Hi there,

I’m using buttons to open and close shutters through service calls. I would like to set the icon color according to a MQTT payload so I can have different colors when the shutter is moving or stopped.

The code below calls a shutter close service but I have a fixed color on the buttons, I suppose I should add some template on a “states:” section to then define the colors, but I’m a bit confused about how to do that, as I haven’t yet completely understood templating.

              - type: custom:button-card
                name: Desce
                show_name: false
                entity: cover.janela
                icon: mdi:arrow-down
                tap_action:
                  action: call-service
                  service: cover.close_cover
                  service_data:
                    entity_id: cover.janela

Can someone offer any help?

Thank you.
Tales

VDRainer · June 26, 2019, 3:24pm

If you have the states for moving/stopped available, you can, for example add something like this:

                  - type: custom:button-card
                    entity: script.cover_og_bad_open
                    icon: mdi:arrow-up-thick 
                    show_name: false
                    tap_action:
                      action: call-service
                      service: cover.open_cover
                      service_data:
                        entity_id: cover.og_bad
                    styles:
                      card:
                        - background-color: rgba(0, 0, 0, 0.0) 
                    state:
                      - operator: template
                        value: >
                          return states['cover.og_bad'].attributes.current_position == 100
                        color: var(--my-icon-off)
                      - value: 'on'
                        color: var(--my-green)
                      - operator: default
                        color: white

This is the open button of a cover.
It is grey (disabled), when the cover is fully open (100%), white (enabled) when under 100% and green when moving.