Lovelace: Button card

well, this is (1 of the) the way(s) to do it, so nothing wrong with the code :wink:

1 Like

triggers_update doesn’t support templates and never will. It’s a chicken and egg problem.

yeah, I seemed to remember something like that. I might be able to use the decluttering templates though, replacing the ‘id’ in the desired spot…

but, if Id use the triggers_update on the individual button, lets say
triggers_update: group.marijn

would the group_expand: true in the button card template still take care of updating the button on all entity changes in that group? (asking since the group_expand: was designed after I asked you to update the card on group entities, where the group is used as main button entity. Since I now use the group as triggers_update entity, I am not sure it does the same thing … :wink: )

Yes, group_expand: true applies also to groups defined in triggers_update :slight_smile:

3 Likes

cool, you’re a magician!
thanks for confirming

I might have posted it already but this is my Air Purifier card I made :slight_smile:

obraz

4 Likes

Very nice. Can you also post the config ?

1 Like

Sure.
Graph:

animate: true
color_thresholds:
  - color: '#DDDDDD'
    value: 1
  - color: '#BBBBBB'
    value: 5
  - color: '#9A9A9A'
    value: 7
  - color: '#707070'
    value: 15
  - color: '#505050'
    value: 20
  - color: '#303030'
    value: 50
  - color: '#000000'
    value: 80
decimals: 0
entities:
  - entity: sensor.home_aqi
    name: Air Purifier Pro
extrema: true
hour24: true
hours_to_show: 12
icon: 'mdi:leaf'
line_color: '#606060'
line_width: 2
name: Air Purifier Pro
points: false
points_per_hour: 12
show:
  fill: fade
  icon_adaptive_color: true
tap_action:
  action: more-info
  entity: fan.xiaomi_miio_device
type: 'custom:mini-graph-card'

Status + buttons:

cards:
  - cards:
      - template: air_purifier_status_button_template
        type: 'custom:decluttering-card'
        variables:
          - entity: sensor.air_purifier_filter_remaining
          - action: none
      - template: air_purifier_status_button_template
        type: 'custom:decluttering-card'
        variables:
          - entity: sensor.air_purifier_motor_speed
          - action: none
    type: horizontal-stack
  - cards:
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: power-standby
          - condition: 'states[''fan.xiaomi_miio_device''].state === ''on'''
          - svc_name: fan.toggle
          - svc_data:
              entity_id: fan.xiaomi_miio_device
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: weather-night
          - condition: 'states[''fan.xiaomi_miio_device''].attributes.speed === ''Silent'''
          - svc_name: fan.set_speed
          - svc_data:
              entity_id: fan.xiaomi_miio_device
              speed: Silent
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: circle-slice-3
          - condition: >-
              (states['fan.xiaomi_miio_device'].attributes.speed === 'Favorite'
              && states['fan.xiaomi_miio_device'].attributes.favorite_level ==
              4)
          - svc_name: script.air_purifier_set_favorite
          - svc_data:
              fav_level: 4
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: circle-slice-4
          - condition: >-
              (states['fan.xiaomi_miio_device'].attributes.speed === 'Favorite'
              && states['fan.xiaomi_miio_device'].attributes.favorite_level ==
              8)
          - svc_name: script.air_purifier_set_favorite
          - svc_data:
              fav_level: 8
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: circle-slice-6
          - condition: >-
              (states['fan.xiaomi_miio_device'].attributes.speed === 'Favorite'
              && states['fan.xiaomi_miio_device'].attributes.favorite_level ==
              12)
          - svc_name: script.air_purifier_set_favorite
          - svc_data:
              fav_level: 12
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: circle-slice-8
          - condition: >-
              (states['fan.xiaomi_miio_device'].attributes.speed === 'Favorite'
              && states['fan.xiaomi_miio_device'].attributes.favorite_level ==
              16)
          - svc_name: script.air_purifier_set_favorite
          - svc_data:
              fav_level: 16
      - template: air_purifier_control_button_template
        type: 'custom:decluttering-card'
        variables:
          - icon: brightness-auto
          - condition: 'states[''fan.xiaomi_miio_device''].attributes.speed === ''Auto'''
          - svc_name: fan.set_speed
          - svc_data:
              entity_id: fan.xiaomi_miio_device
              speed: Auto
    type: horizontal-stack
type: 'custom:vertical-stack-in-card'

And decluttering templates I used:

decluttering_templates:
  air_purifier_control_button_template:
    card:
      color: 'rgba(255, 255, 255, 0)'
      color_type: card
      icon: 'mdi:[[icon]]'
      state:
        - operator: template
          styles:
            card:
              - color: var(--primary-color)
          value: |
            [[[ return [[condition]] ]]]
        - operator: default
          styles:
            card:
              - color: 'rgba(150,150,150, 1.0)'
      styles:
        card:
          - height: 50px
          - color: 'rgba(150, 150, 150, 1.0)'
          - box-shadow: none
      tap_action:
        action: call-service
        service: '[[svc_name]]'
        service_data: '[[svc_data]]'
      type: 'custom:button-card'
  air_purifier_status_button_template:
    card:
      color: 'rgba(255, 255, 255, 0)'
      color_type: card
      entity: '[[entity]]'
      show_icon: false
      show_name: true
      show_state: true
      size: 30%
      styles:
        card:
          - height: 70px
          - box-shadow: none
          - padding: 8% 0px 4% 0px
        grid:
          - grid-template-areas: '"s" "n"'
        name:
          - color: var(--primary-text-color)
          - font-size: 15px
          - align-self: start
        state:
          - color: var(--primary-text-color)
          - padding-left: 10px
          - font-size: 20px
          - font-weight: bold
          - align-self: end
      tap_action:
        action: '[[action]]'
      type: 'custom:button-card'
3 Likes

Hey everyone!
I have been struggling with what seems like it should be simple but I have been trying to create the button seen in the mock up image I made below using the custom button card.
I have gotten as far as getting the gradient and color matching for the lights but can not seem to figure out how to add the decorative bar at the top as shown.

4 Likes

I would solve it this way:


type: 'custom:button-card'
color_type: icon
aspect_ratio: 1
entity: light.xxxxxxxxxxx
tap_action:
  action: toggle
hold_action:
  action: more-info
styles:
  card:
    - border-radius: 5%
    - border-top: 2rem solid var(--button-card-light-color)
  icon:
    - color: |
        [[[
          if (entity.state == 'on') return 'var(--button-card-light-color)';
        ]]]

3 Likes

That’s spot on for what I was looking for and a much easier solution than I had expected. Thanks!
My next question, is there a way to modify the var(–button-card-light-color) value that is returned? For example take the current color of the light and make it darker or lighter?

Yes, you can use a brightness filter:


styles:
  …
  icon:
    - color: |
        [[[
          if (entity.state == 'on') return 'var(--button-card-light-color)';
        ]]]
    - filter: brightness(500%)

Play with the percentage, e. g. 0% or 50%.

thank you, this is very nice! this will be the first addition to my light templates that havent changed in a long time! very nice indeed.

Because I dont want to color anything in the ‘off’ state, ive templated it like this:

  styles:
    card:
      - border-top: >
          [[[
            if (entity.state == 'on') return '0.5rem solid var(--button-card-light-color)';
            return null;
          ]]]

and minimized the top a bit more, leaving more space for my custom field:

4 Likes

Lovely. Gives a very clean look.

yes I like it too, check this for indication motion:

sensor: off
Schermafbeelding 2021-06-02 om 09.47.10

sensor: on

Schermafbeelding 2021-06-02 om 09.47.32

motion!:

Schermafbeelding 2021-06-02 om 09.47.39

catches the eye does it?

4 Likes

Hey there,

just a perhaps stupid question. I defined a button-card based on the neon theme with percentage values for hight and width.
For width it works like a charm but the hight does not change equal which value I enter.

Could you have a quick look, what I do wrong?

type: 'custom:button-card'
show_icon: true
entity_picture: /local/house.png
show_entity_picture: true
tap_action:
  action: navigate
  navigation_path: '#p1'
entity: sensor.aussenfuhler_temperature
name: Hemma
show_label: true
styles:
  custom_fields:
    graph:
      - position: absolute
      - left: 0px
      - top: 142px
    topleft:
      - position: absolute
      - left: 15px
      - top: 10px
    topright:
      - position: absolute
      - left: 115px
      - top: 10px
  grid:
    - grid-template-areas: '"i" "n" "l"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  card:
    - border-radius: 10px
    - box-shadow: '5px 5px 20px rgba(0, 0, 0, 0.2)'
    - height: 100%
    - width: 250%
  icon:
    - width: 50px
  img_cell:
    - padding-top: 30px
  name:
    - color: var(--secondary-text-color)
    - justify-self: center
  label:
    - font-size: 12px
    - justify-self: center
    - padding-bottom: 70px
state:
  - value: disarmed
    label: Avlarmat
  - value: armed
    label: ABC
    entity_picture: /local/larmet.png
  - value: partially_armed
    label: DEF
    entity_picture: /local/sleep.png
custom_fields:
  graph:
    card:
      type: 'custom:mini-graph-card'
      card_mod:
        style: |
          ha-card {
          --ha-card-background: transparent; 
          color: var(--secondary-text-color);
          width: 150px;
          border-radius: 0px;
          }
      entities:
        - entity: sensor.aussenfuhler_humidity
      show:
        icon: false
        name: false
        points: false
      font_size: 40
    color_thresholds:
      - value: 19
        color: '#b0abf4'
      - value: 21
        color: '#c696eb'
      - value: 23
        color: '#cd79b3'
  topright:
    card:
      type: 'custom:button-card'
      entity: switch.jeq0067030
      show_state: false
      show_name: false
      icon: 'mdi:shield-outline'
      styles:
        icon:
          - width: 24px
  topleft:
    card:
      type: 'custom:button-card'
      entity: switch.jeq0067030
      show_state: false
      show_name: false
      icon: 'ios:house'
      styles:
        icon:
          - width: 24px

Height and % is tricky because it‘s a relative value in reference to its parent element. When you don‘t know the parent’s height you have no reference point and cannot put your container value in relation.
Try and play with 100vh .

Hi Marius,
would you mind sharing the code for your custom buttons? I like them pretty much, in particular the way you display the percentages.
Thanks!

Hi!
I would like to apply a background image to my card with opacity.
The ha-card is inheriting the opacity to all child CSS elements thus the opacity is applied to all elements like Icon, Name etc. as well.
How can I apply opacity to just the background image and nothing else?

    extra_styles: |
      ha-card {
          background-image: url("https://images-na.ssl-images-amazon.com/images/I/41hX%2B2Es%2BvL._AC_.jpg"); 
          background-size: cover; 
          opacity: 0.2;
      }

image

sure, those are made with templates button_lights.

this is the main buttons config of that section:

  - type: horizontal-stack
    cards:

      - type: custom:button-card
        color_type: blank-card

      - type: custom:button-card
        color_type: blank-card

      - type: custom:button-card
        template: button_light
        name: Bureau left
        entity: light.bureau_left

      - type: custom:button-card
        template: button_light
        name: Bureau rght
        entity: light.bureau_right
        styles:
          icon:
            - transform: scaleX(-1)

  - type: horizontal-stack
    cards:

      - type: custom:button-card
        color_type: blank-card

      - type: custom:button-card
        template: button_light
        entity: light.drawer

      - type: custom:button-card
        template: button_light
        entity: light.toilet_hall

      - type: custom:button-card
        template: button_light
        entity: light.world_map

and my templates you can find here: My Button card templates ¡ GitHub

1 Like