Lovelace: Button card

At the moment i am trying to get depper into the template function to reduce the amount of the same definitions over and over…

Is it possible to include the template definition with a separate file?
That would be great because i use different Dashboards for different devices

The custom decluttering card can handle it.

Is there a way to colour an SVG part based on a state?

I have the following custom field which creates a hue bulb. At the moment the base (bulb) is a set colour of #C0C0C0 and the light is filled with “var(–button-card-light-color)” which for Hue bulbs works fine as the light part displays the light of the bulb nicely and it goes grey when off.

custom_fields:
  icon_hue: >
    <svg viewBox="0 0 32 32"><path id="Bulb" d="M16,11.999c1.523,0 3.746,-0.143
    5.539,-0.553c-1.358,4.219 -1.591,8.078 -1.545,9.176c0.011,0.255 -0.076,0.496
    -0.242,0.689l-0.441,0.504c-0.952,0.113 -2.055,0.184 -3.311,0.184c-1.256,0
    -2.359,-0.071 -3.311,-0.184l-0.441,-0.504c-0.166,-0.193 -0.253,-0.434
    -0.242,-0.689c0.046,-1.098 -0.187,-4.957 -1.545,-9.176c1.793,0.41
    4.016,0.553 5.539,0.553Zm-2.998,10.862c1.042,0.101 2.188,0.138
    3.002,0.138c0.814,0 1.96,-0.037 3.002,-0.138l-0.501,3.108c-0.026,0.218
    -0.132,0.42 -0.3,0.573l-0.467,0.424c-0.032,0.029 -0.061,0.06
    -0.089,0.092l-0.493,0.583c-0.19,0.226 -0.48,0.358
    -0.787,0.358l-0.365,0l-0.365,0c-0.307,0 -0.596,-0.132
    -0.786,-0.358l-0.495,-0.583c-0.027,-0.032 -0.056,-0.063
    -0.087,-0.092l-0.467,-0.424c-0.168,-0.153 -0.275,-0.355
    -0.301,-0.573l-0.501,-3.108Z" style="fill:#C0C0C0;"/><path id="Light"
    d="M22.304,5.398c1.525,1.402 0.137,3.985 -0.329,4.907c-1.257,0.366
    -3.269,0.695 -5.975,0.695c-2.706,0 -4.717,-0.329 -5.974,-0.695c-0.466,-0.922
    -1.855,-3.505 -0.329,-4.907c1.631,-1.499 6.028,-1.396 6.303,-1.396c0.276,0
    4.672,-0.103 6.304,1.396Z"
    style="fill:var(--button-card-light-color)"/></svg>

However when the light is off i would also like the bulb part to be dimmer as #C0C0C0 is quite bright. I have tried the following but with no success:

state:
  - styles:
      custom_fields:
        icon_hue:
          - fill: red
      state:
        - color: var(--disabled-text-color)
      label:
        - color: var(--disabled-text-color)
    value: 'off'

Normally the bulb is a sudo element and is access via the .bulb entity within CSS and fill being the value but in the button card its handled differently.

Any ideas how to achieve this?

Side note, after setting this up i have noticed that Hue bulbs go grey when off however zigbee bulbs dont and stay the last colour/temp they where at. Not sure exactly why this happens.

Edit: above comment, just noticed --button-card-light-color-no-temperature value can be used however this sets it to the icon active colour from the theme. Anyway to override this value without changing the theme?

That’s how YAML works, so yes you can split your templates, but that’s not up to button-card, but how YAML works. Use !include to split your code.

See docs for more info: Splitting up the configuration - Home Assistant

I have separate files for button-card templates, decluttering-card, popup cards, markdown style options and more.

thx, sometimes… i made an error an then i thought the simple way does not work…
And then my idea’s get more and more complex…

1 Like

There’s a thread about the creation of the card

how to add the off button to the red position, and remove box-shadow below the button thanks.
Capture

type: 'custom:button-card'
custom_fields:
  speed:
    card:
      type: 'custom:button-card'
      show_name: false
      size: 45%
      icon: 'mdi:weather-windy'
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          entity_id: remote.rm3_mini_remote
          device: fan_senko
          command: speed
  osc:
    card:
      type: 'custom:button-card'
      size: 50%
      icon: 'mdi:cached'
      show_name: false
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          entity_id: remote.rm3_mini_remote
          device: fan_senko
          command: osc
  mode:
    card:
      type: 'custom:button-card'
      size: 50%
      name: MOD
      show_name: faldse
      tap_action:
        action: call-service
        service: remote.send_command
        service_data:
          entity_id: remote.rm3_mini_remote
          device: fan_senko
          command: mode
styles:
  grid:
    - grid-template-areas: '"i i i i i" "n n n n n" ". speed osc mode ."'
    - grid-template-rows: min-content 1fr 2fr
    - grid-template-columns: 5% 1fr 1fr 1fr 5%
  card:
    - max-width: 200px
    - max-height: 300px
    - padding-bottom: 0
icon: 'mdi:fan'

I’m trying to use a button card to track an input_boolean. The card is inside of a popup, and when I update the sensor while it’s open, it reflects the changes. But as soon as I close the popup and reopen it, the card thinks the sensor is off, even it’s still on?

Here’s my code
https://pastebin.ubuntu.com/p/hgkHF5xhQZ/

You should create a custom field and set the position: absolute style and then move it around using top: 10px, left: 10px for eg.

Probably because of if (entity.state = 'off'). This should be if (entity.state == 'off')

thanks for the reply, but can you use the grid? and how to remove box-shadow below the button

Hi,
Anyone know a way to make the ripple effect less square when tapping on a button on mobile app?
Is that possible at all?

image

That is not happening by default so your config is probably producing that. Mind sharing it?

Hi,
Sure, this is one of my buttons. Actually I am using a lot of decluttering card templates, but I have created one clean example to past here, without templates.

      - type: custom:button-card
        entity: light.work_room
        #icon: '[[icon]]'
        aspect_ratio: 1/1
        name: Work Room
        color: auto
        color_type: icon
        show_last_changed: false
        lock:
          enabled: false
          duration: 5
          unlock: tap
        styles:
          card:
            - padding: 10%
            - font-size: 12px
            - font-weight: bold
            - text-transform: capitalize
            - border-radius: 16px
            - background-color: 'rgba(47, 49, 54, 0.8)'
            - color: '#8D8E93'
            - backdrop-filter: blur(20px)
          grid:
            - grid-template-areas: '"svg_icon corner" "svg_icon corner_2" "n n" "cust_1 cust_2"'
            - grid-template-columns: 2fr 3fr
            - grid-template-rows: 1fr 2fr 4fr 1fr
          name:
            - font-size: 1.20em #15px
            - align-self: middle
            - justify-self: start
            - align-self: end
            - padding-top: 8px
            - padding-bottom: 4px
          lock:
            - color: '#BEBEBE'
          custom_fields:
            svg_icon:
              - justify-content: start
              - align-items: start
              - margin: none
              - height: 100%
              - padding-bottom: 0px
            corner:
              - align-self: start
              - justify-self: end
              - font-size: 1em #14px
              - font-weight: bold
              - color: '#797A7F'
              - min-width: 12px
              - line-height: 22px
              - padding: 0px 5px
              - height: 22px
            corner_2:
              - padding-top: 8px
              - align-self: start
              - justify-self: end
              - color: '#797A7F'
            cust_1:
              - padding-bottom: 2px
              - align-self: middle
              - justify-self: start
              - color: '#797A7F'
            cust_2:
              - padding-bottom: 2px
              - align-self: middle
              - justify-self: end
              - color: '#797A7F'
        custom_fields:  
          svg_icon: "[[[ 
            const state = entity.state === 'on' ? 'animate' : null;
            return `<svg viewBox='0 0 24 24'>
            <path fill='#9da0a2' d='M8,9H11V4H13V9H16L20,17H4L8,9M14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18H14Z'/>
            <path class='${state}' fill='var(--button-card-light-color-no-temperature)' d='m 7.957375,9 h 3 -3 8 -3 3 l 4.062,8 h -16 l 3.938,-8 m 6.06975,5.256348 c 0.763134,0.727302 -0.531684,1.303507 -1.636253,1.303507 -1.104569,0 -3.0516803,-1.562904 -3.0602403,-2.667473 z'/> </svg>`;
            ]]]"
          corner: ""
          corner_2: ""
          cust_1: "[[[ return entity.state ]]]"
          cust_2: ""
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
        state: 
        - value: "on"
          styles:
            card:
              - background-color: '#393C43'
              - color: '#F0F0F0'
            custom_fields:
              cust_1:
                - color: '#A5A7AB'
              cust_2:
                - color: '#A5A7AB'
        - value: "unavailable"
          styles:
            icon:
              - color: '#7F848E'  
            name:
              - color: '#7F848E'  
            custom_fields:
              svg_icon:
                - --button-card-light-color-no-temperature: '#7F848E'  
              corner:
                - color: '#7F848E'  
              corner_2:
                - color: '#7F848E'  
              cust_1:
                - color: '#7F848E'  
              cust_2:
                - color: '#7F848E'
1 Like

I’m trying to create a template for buttons like yours. Would you mind sharing the coffee for these buttons?

How do I define background color for cards based on states?
I.e. State On sets red, off sets blue etc…
Peace :dove:

I cant get the circle to be seen. The value at State On is shown…
I’m using a light template, is that the fault here?

Would be helpful if you posted your config…

Do you have active-color in your theme?.
For testing purposes, try a hard coded color.

cards:
      - type: grid
        cards:
          - type: grid
            cards:
              - entity: light.kok
                icon: 'mdi:silverware-variant'
                name: Köket
                theme: noctis
                template: light
                type: 'custom:button-card'
              - entity: light.tv_vardagsrum_och_hall
                icon: 'mdi:lightbulb-group-outline'
                name: Hela VDR
                template: light
                type: 'custom:button-card'
              - entity: light.tv_rum
                icon: 'mdi:sofa-outline'
                name: 'Lampor vid TV:n'
                template: light
                type: 'custom:button-card'
              - entity: light.sovrummets_fonsterlampor
                icon: 'mdi:bed-outline'
                name: Sovrummet
                template: light
                type: 'custom:button-card'
            square: false
            columns: 4
          - type: grid
            cards:
              - type: 'custom:slider-entity-row'
                entity: light.kok
                name: hide_state
                full_row: true
                hide_state: true
              - type: 'custom:slider-entity-row'
                entity: light.tv_vardagsrum_och_hall
                name: hide_state
                full_row: true
                hide_state: true
              - type: 'custom:slider-entity-row'
                entity: light.tv_rum
                name: hide_state
                full_row: true
                hide_state: true
              - type: 'custom:slider-entity-row'
                entity: light.sovrummets_fonsterlampor
                name: hide_state
                full_row: true
                hide_state: true
            columns: 4
            square: false
        columns: 1
        square: false

  light:
    aspect_ratio: 1/1
    color: auto-no-temperature
    color_type: card
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    show_icon: true
    show_name: true
    custom_fields:
      info: |
        [[[ if (entity.state == 'on' && entity.attributes.brightness) {
            const brightness = Math.round(entity.attributes.brightness/2.54);
            const radius = 20.5; const circumference = radius * 2 * Math.PI;
            return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}"
            stroke="var(--active-color)" stroke-width="2" fill="none"
            style="transform: rotate(-90deg); transform-origin: 50% 50%;
            stroke-dasharray: ${circumference};
            stroke-dashoffset: ${circumference - brightness / 100 * circumference};" />
            <text x="50%" y="54%" fill="white" font-size="16" 
            text-anchor="middle" alignment-baseline="middle">
            ${brightness}<tspan font-size="10">%</tspan></text></svg>`;} ]]]
    styles:
      custom_fields:
        info:
          - position: absolute
          - right: 5%
          - top: 10%
          - width: 30%
      card:
        - font-size: 90%
        - border-radius: 1ems
    state:
      - value: 'off'
        styles:
          icon:
            - color: black
      - value: 'on'
        styles:
          icon:
            - color: white

did you test the hard coded color, and, do you have the var(–active-color) in your theme?

Hi
To the best of my knowledge i don’t have the var(--active-color) in my theme.
I have no theme implemented in HA yet…