Lovelace: Button card

Mariusthvdb · June 29, 2019, 7:45am

once again you were right. I forgot I have double setups for Lovelace and legacy. I meant to say the legacy tiles works correct. It uses this:

          - entity: device_tracker.life360_name
            style_template: >
              if (state === 'home' || state === 'not_home') return 'background-image: url(\"/local/tiles/family/name_' + state + '.png\")';
              return 'background-color: #643aac;background-image: url(\"/local/tiles/family/name_' + entities['sensor.name_location_picture'].state + '.png\")';
            more_info: group.name

and this jinja template sensor for state, since I couldn’t get my head around creating 1 template for all, had to make a dedicated image template for the non home/not_home states (zones):

        value_template: >
          {% set state = states('device_tracker.life360_name') %}
          {{ state|replace(' ','_')| lower }}

so jinja does it for all occurrences… no javascript

petro · June 29, 2019, 10:21am

pretty much every language but javascript does it for all occurrences. Javascript had to be that guy.

thermseekr · June 30, 2019, 2:40pm

Hi there

I’m struggling to make button_card_templates: work, can someone please shed some light? Gotta be something simple that I can’t see.

What is ui-lovelace-card.yaml? Never saw another reference to this file.

I built a view using the example on the documentation but that also don’t work:

title: Home

resources:
  - url: /local/button-card.js
    type: module

button_card_templates:
  header:
    styles:
      card:
        - padding: 5px 15px
        - background-color: var(--paper-item-icon-active-color)
      name:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold
      label:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold

  header_red:
    template: header
    styles:
      card:
        - background-color: '#FF0000'

views:

  - title: "Test View"
    icon: mdi:wrench
    cards:

      - type: custom:button-card
        template: header_red
        name: "My Test Header"

This is what is rendered:

Thanks for any hint.

Tales Maschio

RomRider · June 30, 2019, 3:22pm

That looks like a caching issue. Clear your cache or add ?v=12345 at the end of your resource URL to validate. Also verify that you are using the latest version.

thermseekr · June 30, 2019, 5:25pm

Solved. Awesome, thank you!

iantrich · July 2, 2019, 4:21am

Revamped my weather card a bit and it’s gotten pretty slick, albeit an awful looking configuration

    type: custom:button-card
    layout: icon_label
    color: auto
    aspect_ratio: 1/1
    tap_action:
      action: more-info
      haptic: light
    show_state: false
    show_label: true
    styles:
      grid:
        - grid-template-rows: 42px auto 42px
        - grid-template-columns: 42px auto
      card:
        - border-radius: 15px
        - margin: 5px 5px 0px 0px
        - padding: 0px 0px
      icon:
        - height: 30px
        - width: 30px
      name:
        - justify-self: start
        - padding: 0px 10px
        - font-size: 10px
      label:
        - padding: 7px
        - font-size: 11px
        - font-weight: bold
        - font-family: Helvetica
    entity: weather.dark_sky
    label_template: >
      var options = { hour: 'numeric', minute: 'numeric' };
      var sunrise_date = new Date(states['sun.sun'].attributes.next_rising);
      var sunrise_time = sunrise_date.toLocaleDateString("en-US", options).split(",")[1];
      var sunset_date = new Date(states['sun.sun'].attributes.next_setting);
      var sunset_time = sunset_date.toLocaleDateString("en-US", options).split(",")[1];
      return '<div align="left">' +
                '<div style="font-weight: normal; font-size: 10px; margin-top: 0px;">' +
                  '<ha-icon icon="mdi:weather-sunset-up" style="width: 12px; color: #f4e842; padding-bottom: 4px;"></ha-icon> ' +
                  sunrise_time +
                '</div>' +
                '<div style="font-weight: normal; font-size: 10px; margin-top: -10px;">' +
                  '<ha-icon icon="mdi:weather-sunset-down" style="width: 12px; color: #f4e842; padding-bottom: 4px;"></ha-icon> ' +
                  sunset_time +
                '</div>' +
              '</div>';
    name_template: >
      var degree = 45;
      var angle = entity.attributes.wind_bearing + 22.5;
      var direction = (angle >= 0 * degree && angle < 1 * degree) ? "N" :
        (angle >= 1 * degree && angle < 2 * degree) ? "NE" : 
        (angle >= 2 * degree && angle < 3 * degree) ? "E" :
        (angle >= 3 * degree && angle < 4 * degree) ? "SE" :
        (angle >= 4 * degree && angle < 5 * degree) ? "S" :
        (angle >= 5 * degree && angle < 6 * degree) ? "W" :
        (angle >= 6 * degree && angle < 7 * degree) ? "NW" : "N";
      return '<div align="left" style="padding-top: 40px;">' +
              '<div style="font-size: 11px;">' + entity.attributes.temperature + '°F - ' + entity.attributes.forecast[0].temperature + '°F / ' + entity.attributes.forecast[0].templow + '°F</div>' +
              '<div style="font-weight: normal; font-size: 10px; margin-top: -5px;">' +
                '<ha-icon icon="mdi:water" style="width: 12px; color: #03a9f4; padding-bottom: 2px;"></ha-icon> ' +
                (entity.attributes.forecast[0].precipitation || 0) + ' in' +
              '</div>' +
              '<div style="font-weight: normal; font-size: 10px; margin-top: -10px;">' +
                '<ha-icon icon="mdi:weather-windy" style="width: 12px; color: #03a9f4; padding-bottom: 2px;"></ha-icon> ' +
                direction + ' ' + (entity.attributes.wind_speed || 0) + ' mph ' +
              '</div>' +
              '<div style="font-weight: normal; font-size: 10px; margin-top: -10px;">' +
                '<ha-icon icon="mdi:water-percent" style="width: 12px; color: #03a9f4; padding-bottom: 2px;"></ha-icon> ' +
                (entity.attributes.pressure || 0) + ' %' +
              '</div>' +
            '</div>';
    icon: mdi:weather-sunny
    state:
      - value: clear-night
        icon: mdi:weather-night
      - value: cloudy
        icon: mdi:weather-cloudy
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px purple
          icon:
            - color: purple
      - value: overcast
        icon: mdi:weather-cloudy-arrow-right
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px purple
          icon:
            - color: purple
      - value: fog
        icon: mdi:weather-fog
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px purple
          icon:
            - color: purple
      - value: hail
        icon: mdi:weather-hail
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px white
          icon:
            - color: white
      - value: lightning
        icon: mdi:weather-lightning
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px #03a9f4
          icon:
            - color: #03a9f4
      - value: lightning-rainy
        icon: mdi:weather-lightning-rainy
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px #03a9f4
          icon:
            - color: #03a9f4
      - value: partlycloudy
        icon: mdi:weather-partlycloudy
      - value: pouring
        icon: mdi:weather-pouring
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px #03a9f4
          icon:
            - color: #03a9f4
      - value: rainy
        icon: mdi:weather-rainy
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px #03a9f4
          icon:
            - color: #03a9f4
      - value: snowy
        icon: mdi:weather-snowy
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px white
          icon:
            - color: white
      - value: snowy-rainy
        icon: mdi:weather-snowy-rainy
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px white
          icon:
            - color: white
      - value: sunny
        icon: mdi:weather-sunny
        styles:
          card:
            - box-shadow: 0px 0px 10px 3px yellow
          icon:
            - color: yellow
      - value: windy
        icon: mdi:weather-windy
      - value: windy-variant
        icon: mdi:weather-windy-variant

pollinolas · July 2, 2019, 2:47pm

amazing button,i love it,just one thing…u have the attribute pression instead of humidity at name_templates.
congratulations to the creator of this card and all community that bring new ideas,im really very glad with this card in my configuration,thanks lot to all

'<div style="font-weight: normal; font-size: 10px; margin-top: -10px;">' +
                '<ha-icon icon="mdi:water-percent" style="width: 12px; color: #03a9f4; padding-bottom: 2px;"></ha-icon> ' +
                (entity.attributes.pressure || 0) + ' %' +

iantrich · July 2, 2019, 2:59pm

Thanks for catching that

jimz011 · July 2, 2019, 4:55pm

This looks pretty cool, I might use some of it to replace the simple-weather-card as I would love to use as less custom-cards as possible (this isn’t easy though).

iantrich · July 2, 2019, 6:33pm

The simple-weather-card was my starting point for it

Vahid_Barz · July 3, 2019, 4:59pm

HI
how can i add timer ( count down ) to button?

iantrich · July 3, 2019, 5:56pm

If you have a timer entity, you should just have to add it as the entity for the card

Vahid_Barz · July 3, 2019, 6:34pm

like that?

          - type: "custom:button-card"
            icon: mdi:air-filter
            color_type: icon
            color: 'var(--accent-color)'
            name: Air Cleaner
            entities:
              - input_boolean.air_cleaner
              - timer.air_cleaner
            tap_action:
              action: toggle
            hold_action:
              action: more-info

iantrich · July 3, 2019, 6:49pm

There’s no entities config, just entity

mkono87 · July 3, 2019, 10:23pm

So I thought I’d try to recreate the old badges sensor icons we had from the old ui and this is small I can get it without looking crappy but on mobile is cuts them off. Is there a way to be able to scroll with my finger? or does anyone who has done this before have any tips?

petro · July 4, 2019, 12:23pm

You know badges still exist?

Anyways, to get a scrolling ‘row’, you need to integrate a custom card that scrolls.

mkono87 · July 4, 2019, 6:53pm

Yes Im aware the badges are still around, they just fit into the “look” im going for in lovelace. Il check out that custom card though, might be my only option. Thanks.

LbDab · July 5, 2019, 5:06am

Thanks I changed all my buttons to your design and saved lots of screen space

ashfaaaa · July 5, 2019, 6:59am

hi i’m new to lovelace. will someone please help me out how can i show time of last door open below the name of sensor. i need only the last door open time it should not change when door close. thanks

this how my config looks like:

type: horizontal-stack
cards:
  - type: 'custom:button-card'
    entity: sensor.front_door
    show_name: true
    icon: 'mdi:door'
    color: 'rgb(68, 116, 156)'
    name: Front door
    size: 20%
    hold_action:
      action: more-info
    state:
      - value: 'on'
        color: 'rgb(251,216,57)'
        icon: 'mdi:door-open'
    styles:
      card:
        - height: 90px
        - width: 172px
      name:
        - color: gray
        - font-size: 15px
        - padding: 5px 5px

elRadix · July 5, 2019, 8:08am

would you mind sharing 1 button HassOS for example so that I can replicate the rest, thank you