Lovelace: Button card

Your code is fine:

Strange. What could be causing that error I’m getting about the picture card being a custom element?

I only put the template in the raw config under button_card_templates: and adjusted the image path.

Gotcha. I’ll have to play around some more, then.

Found the solution which was easier than I thought. For those interested in the final code

button_card_templates:
  AC_template:
    triggers_update:
      - sun.sun
    icon: "mdi:fan"
    variables:
      sensor_humidity: " "
      sensor_power: " "
      AC_entity: " "
    state:
      - value: "off"
        color: rgba(0,0,0,0)
      - value: "cool"
        color: deepskyblue
        spin: true
      - value: "heat"
        color: rgba(255,0,0,0.6)
        spin: true
      - value: "heat_cool"
        color: orange
        spin: true
    styles:
      card:
        - width: 110px
        - height: 110px
        - margin: 3px
        - padding: 3px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
        - box-shadow: >
            [[[
              if (states['sun.sun'].state == "below_horizon")
                return '-5px -5px 15px #2c2c2c, 5px 5px 15px #191919';
              else if (states['sun.sun'].state == "above_horizon")
                return '-5px -5px 15px #ffffff, 5px 5px 15px #ebebeb';
            ]]]
      grid:
        - grid-template-areas: '"i i temp" "i i humidity" "i i power" " set set mode" "n n n"'
        - grid-template-columns: 1fr 1fr 1fr
        - grid-template-rows: 1fr 1fr 1fr 3fr 2fr
      name:
        - font-weight: bold
        - font-size: 13px
        - color: var(--primary-text-color)
        - align-self: middle
        - justify-self: left
      img_cell:
        - justify-content: start
        - align-items: start
        - margin-top: -5px 
      icon:
        - width: 70%
      custom_fields:
        temp:
          - align-self: start
          - justify-self: end
          - font-size: 10px
        humidity:
          - margin-top: 10px
          - align-self: middle
          - justify-self: end
          - font-size: 10px
        power:
          - margin-top: 15px
          - align-self: middle
          - justify-self: end
          - font-size: 10px
        set:
          - margin-top: 15px
          - align-self: middle
          - justify-self: end
          - font-size: 30px
        mode:
          - justify-content: end
          - align-items: end
          - font-size: 30px

    custom_fields:
      temp: >
        [[[
          return `<ha-icon
            icon= "mdi:thermometer"
            style="width: 14px; height: 14px; color: green;">
            </ha-icon><span> <span>${entity.attributes.current_temperature}°C</span></span>`
        ]]]
      humidity: >
        [[[
          return `<ha-icon
            icon= "mdi:water-percent"
            style="width: 18px; height: 18px; color: deepskyblue;">
            </ha-icon><span><span>${states[variables.sensor_humidity].state}%</span></span>`
        ]]]
      power: >
        [[[
          if (variables.sensor_power ==" ")
            return " "
          else 
            return `<ha-icon
              icon= "mdi:power-plug"
              style="width: 18px; height: 18px; color: red;">
              </ha-icon><span><span>${states[variables.sensor_power].state}kWh</span></span>`
        ]]]
      set: >
        [[[
          return `
            </ha-icon><span><span>${entity.attributes.temperature}°</span></span>`
        ]]]
      mode: >
        [[[
          if (entity.state =="cool")
            return `<ha-icon
              icon= "mdi:snowflake"
              style="width: 25px; height: 18px; color: rgba(0,0,255,0.6);">
              </ha-icon>`
          else if (entity.state =="heat")
            return `<ha-icon
              icon= "mdi:fire"
              style="width: 25px; height: 18px; color: rgba(255,0,0,0.6);">
              </ha-icon>`
        ]]]```
1 Like

entity picture is not loading , what mistake am i doing .

Try path “/local/images”

2 Likes

Hi, I have been using this button card for years and now I am facing an issue, hope someone can help:

I try to show some buttons to toggle to a certain mode the air purifier, and also highlight the current mode button (changing the background color).

That’s the code for the buttons (there are four in total), see image below:

color_type: card
color: lightwhite
entity: climate.xiaomi_miot_air_purifier
icon: 'mdi:fan-auto'
name: auto
show_name: true
type: 'custom:button-card'
styles:
  card:
    - height: 50px
    - background-color: |
        [[[
          if (states['climate.xiaomi_miot_air_purifier'].state == 'auto')  return 'rgb(156,184,191)'; return 'lightwhite'; 
        ]]]
tap_action:
  action: call-service
  service: climate.set_preset_mode
  service_data:
    entity_id: climate.xiaomi_miot_air_purifier
    preset_mode: Auto

Desired result:
image

But when I press more than a button without refreshing the page and the air purifier updates its state I get highlighted both the old state and the new one:
image

I also tried changing states['climate… with entity.state but the result is the same.
Any ideas?

There you go , Boom it worked :slight_smile:

Is it Auto or auto ?

Sometimes a kind of workaround helps by reversing the rules:


styles:
  card:
    …
    - background-color: |
        [[[
          if (states['climate.xiaomi_miot_air_purifier'].state != 'auto') return 'lightwhite'; return 'rgb(156,184,191)'; 
        ]]]

Both presets (Auto and auto) are accepted by the component when using the service-call.

Tried reversing the rules, same result until a reload is forced: colored buttons are the states previously active plus the current one:
image

Where can I find more about that “triggers_update”? I think that may be a solution to issues I was having with multi-entity cards where only the primary entity would update the card.

triggers_update

(because I wanted to know more about just in the same time :slightly_smiling_face: )

Hi There,
I think the button card is great and very flexible.
I’m not a great programmer, unfortunately, but I have been able to make a reasonable switchboard using examples.
Now I am using a standard template and I would like to make the colors of the map, icon and map shadow variable.
Who can help me with that?
Thanks in advance
This is my template :

button_card_templates:
  container:
    color_type: label-card
    color: dimgray
    styles:
      card:
        - padding: 0
      name:
        - border-radius: 6px 6px 0 0
        - padding: 2px
        - width: 100%
        - font-weight: bold
      grid:
        - grid-template-areas: '"i" "n" "buttons"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      custom_fields:
        buttons:
          - background-color: 'rgba(20,20,70,1)'
          - margin: 0
          - padding: 5px
  jja_standaard:
    hold_action:
      action: more-info
    aspect_ratio: 1/1
    size: 80%
    label: >
      [[[ var bri = Math.round(entity.attributes.brightness / 2.55);  if
      (entity.state === 'on') return (bri ? (bri+"%") : '') ]]]
    show_label: true
    show_name: true
    variables:
      shadow_color: '#F9C536'
      icon_color: ' '
      name_color: ' '
    styles:
      card:
        - border-radius: 15px
        - margin: 5px 5px 5x 5x
        - padding: 0px 0px
        - '--paper-card-background-color': 'rgba(30, 30, 30, 1)'
        - '--mdc-ripple-color': green
        - '--mdc-ripple-press-opacity': 0.8
      name:
        - text-transform: uppercase
        - font-size: 11px
        - color: dimgray
        - white-space: normal
      state:
        - font-size: 10px
        - white-space: normal
      label:
        - font-size: 10px
        - white-space: normal
    state:
      - id: value_on
        value: 'on'
        styles:
          card:
            - box-shadow: '0px 0px 10px 3px #F9C536'
          icon:
            - color: '#F9C536'
          name:
            - color: '#F9C536'
            - font-size: 11px

Can it be possible that the preset function influences this behavior?

Your board is super-nice!

I solved it this way (but I’m not sure if it couldn’t be done more tightly):

The variables:


button_card_templates:
  farbschema_dunkel:
    variables:
      basis_unavailable_color: 'rgba(253,253,253,0.9)'
      basis_unavailable_bg: 'rgba(99,99,99,0.9)'
      basis_unavailable_icon: 'rgba(213,213,213,0.9)'

The corresponding template:


  button_basis:
    template: farbschema_dunkel
    aspect_ratio: 1/1
   …
   …
    state:
      - value: unavailable
        styles:
          card:
            - color: '[[[ return variables.basis_unavailable_color ]]]'
            - background-color: '[[[ return variables.basis_unavailable_bg ]]]'
          icon:
            - color: '[[[ return variables.basis_unavailable_icon ]]]'
 

Thank you for your reply.
I’ve tried your solution, but it’s not quite what I want to accomplish
I want to be able to fill in the variable in the card configuration.
Standard the button has the default color scheme, but for example, in the event of an triggered alarm, I can make the icon red and the box shadow turns red instead of the default color.

I don’t think so, it’s part of the service data, and the call-service part is working fine. Removed the tap-actions completely and it is behaving the same way.

It’s just that the button-cards are not getting the update of the entity state.

Also tried with a template sensor copying the climate device state, but no luck

It follows the same scheme:

Variables:


button_card_templates:
  farbschema_dunkel:
    variables:
      …
      sensorwarnung_card_color: 'rgba(255,255,255,0.9)'
      sensorwarnung_card_bg: |
        [[[
          if (entity.state == 'on') return 'rgba(219,23,9,0.9)'; return 'rgba(0,179,0,0.9)'; 
        ]]]

Template:


    styles:
      card:
        - color: '[[[ return variables.sensorwarnung_card_color ]]]'
        - background-color: '[[[ return variables.sensorwarnung_card_bg ]]]'
      icon:
        - color: '[[[ return variables.sensorwarnung_card_icon ]]]'

Card:


type: 'custom:button-card'
template:
  - button_sensor_warnung
entity: binary_sensor.wassersensor

Ok, thanks.
I’m gonna try it tommorow! My wife is calling :wink:
Sleep tight