Lovelace: Button card

pedolsky · May 14, 2021, 6:40pm

Your code is fine:

littlemike · May 14, 2021, 7:00pm

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

pedolsky · May 14, 2021, 7:32pm

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

littlemike · May 14, 2021, 7:37pm

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

Jens_Wymeersch · May 15, 2021, 6:26am

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>`
        ]]]```

kurtufiyde · May 15, 2021, 10:38am

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

Ildar_Gabdullin · May 15, 2021, 11:05am

Try path “/local/images”

foraster · May 15, 2021, 11:12am

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:

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:

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

kurtufiyde · May 15, 2021, 11:16am

There you go , Boom it worked

pedolsky · May 15, 2021, 12:11pm

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)'; 
        ]]]

foraster · May 15, 2021, 12:29pm

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:

qoheleth · May 15, 2021, 1:08pm

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.

pedolsky · May 15, 2021, 1:15pm

triggers_update

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

Plaatjesdraaier · May 16, 2021, 12:48pm

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

pedolsky · May 16, 2021, 12:54pm

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

pedolsky · May 16, 2021, 1:25pm

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 ]]]'

Plaatjesdraaier · May 16, 2021, 7:35pm

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.

foraster · May 16, 2021, 7:41pm

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

pedolsky · May 16, 2021, 8:01pm

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

Plaatjesdraaier · May 16, 2021, 8:03pm

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