Fun with custom:button-card

stickman89 · November 5, 2023, 1:41pm

Hi,

I created a binary sensor (Aqara T1 Door Sensor) button card which calls a script to turn on my A/C on tap action. This function works fine, and I’m also able to change the state name to On/Off instead of the default Open/Closed.

However, I have difficulty changing the icon color based on the state. Below is my code, is there anything I’m doing wrong?

type: custom:button-card
entity: binary_sensor.living_room_air_con_sensor_contact
name: Air Con
show_name: false
show_state: true
size: 30%
tap_action:
  action: call-service
  service: script.living_room_air_con_toggle
color_type: icon
color: |
  [[[
    if (entity.state === 'off')
      return 'Green'
    else
      return 'Grey'
  ]]]
state_display: |
  [[[
    if (entity.state === 'off')
      return 'Off'
    else
      return 'On'
  ]]]

I’ve also tried using;

  state:
    - value: 'On'
      color: Green
    - value: 'Off'
      color: Grey

The icon color changes to yellow despite the above coding, which seems to be the default color for this senor/entity.

Thanks.

tomcoleman · November 6, 2023, 7:49am

guys ive got a real werid one and not sure if this is the right place to post.

my setup is as follows.

Core2023.11.1
Frontend20231030.1
Button card v4.1.1

So I have 2 lights (sideboard & underlight)

The code for these lights is

                  - type: custom:button-card
                    entity: light.kitchen_sideboard
                    name: <marquee behavior=scroll scrollamount="3">Side Board Lamp</marquee>
                    template:
                      - light
                      - icon_lamp
                      #- loader

                  - type: custom:button-card
                    entity: light.kitchen_under_light
                    name: Underlight
                    template:
                      - base
                      - icon_lamp

If i turn light.kitchen_sideboard on/off works fine no issues.

BUT if i turn off light.kitchen_under_light i get this error

When i turn the light back on goes back to normal.

So its as if it can report something in its off state? BUT the strange thing is the other light light.kitchen_sideboard works fine when on/off with no errors.? which is throwing me to work out what it is.?!?!

I have tried switching templates from -base to -light

Any help would be great

Scoff · November 6, 2023, 10:17am

I’ve not managed to make any progress with this - can anyone shed any light on how to achieve? Would it require CSS styling instead, in order to split out the format?

cismarine · November 7, 2023, 11:27am

Hi,
I have an issue with variables not showing.
Followed the instructions, but unfortunately no success.
Any obvious errors?

type: custom:button-card
entity: input_select.bs9000
show_name: true
show_icon: true
variables:
  - var_disc: input_select.bs9000
  - var_pos: input_number.bs9000_sled
name: [[[ return variable.var_disc; ]]]

guy0nabuffalo · November 8, 2023, 7:40pm

Hello,

I’m able to display the name of the logged in user with this code.

type: custom:button-card
name: |
  [[[
    return "Hi "+ user.name + "!"
  ]]]

Does anyone know if it’s also possible to display the profile picture for the logged in user?
This is how I’m thinking it would look.

The image above is done by statically setting entity: person.drew and show_entity_picture: true. I’m looking for the picture to by dynamic, just like the name based on whoever is logged in.

sebbaT · November 8, 2023, 9:24pm

This should work:

type: custom:button-card
entity: '[[[ return "person." + user.name.toLowerCase(); ]]]'
show_entity_picture: true
name: '[[[ return "Hi " + user.name + "!" ]]]'

guy0nabuffalo · November 8, 2023, 9:32pm

YES!!! Thank you!

Ranur · November 9, 2023, 8:51pm

Is oit posssible to use two images in an setup like
“i s i”
“i n i”
“l s l”
?

cismarine · November 13, 2023, 10:56pm

Hi,
How can I use marquee on sensor value?

- type: custom:button-card
  entity: media_player.lounge_2
  label: >
    [[[ return '<marquee> entity.attributes.media_title <\marquee>' ]]]

This scrolls: entity.attributes.media_title and not the value of entity.

Nemesis24 · November 16, 2023, 4:37pm

Hi,

is it possible to use something like replace here on ${states[“sensor.enceinte_etat”].state
like replace “-” by line break

enceinte: '[[[return `<ha-icon icon="mdi:speaker" style="width: 14px;
 color: var(--color-icon-blue); margin-right: 2px;"></ha-icon><span>
 ${states["sensor.enceinte_etat"].state}</span>`]]]'

Thanks for all help

Scoff · November 17, 2023, 5:49pm

Your closing marquee tag should be </marquee> - see if that resolves it

cismarine · November 19, 2023, 4:08pm

thanks! well spotted!

cismarine · November 19, 2023, 4:18pm

Unfortunatelly, it still scrolls sensor name )-:

VietNgoc · November 19, 2023, 5:22pm

Use extra_styles for css

extra_styles:  >
    .marquee {
      animation: marquee 20s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    }
    @keyframes marquee {
      from {
        transform: translateX(0%);
      }
      to {
        transform: translateX(-80%);
      }
    }

      state_display: >
        [[[
          if (entity)
              return  `<div class="marquee"> ${states['sensor.someting'].state} </div>`;
        ]]]

CleanShot 2023-11-19 at 18.20.36
CleanShot 2023-11-19 at 18.21.30

Scoff · November 19, 2023, 7:29pm

exactly this. As an example from my dashboard, I am using this to generate the marquee on one of my button cards for my echo device, as the state display:

state_display: >
  [[[
    let artist = entity.attributes.media_artist;
    let title = entity.attributes.media_title;
    if (entity.state === 'standby') {
      return 'Standby';
    } else if (artist && title) {
      return `<marquee>${artist} - ${title}</marquee>`;
    } else if (artist) {
      return `<marquee>${artist}</marquee>`;
    } else if (title) {
      return `<marquee>${title}</marquee>`;
    }
  ]]]

Richi_Bowzer · November 19, 2023, 8:31pm

Still my fav card this, been playing around recently and addeding different elements to it.

cismarine · November 20, 2023, 2:23am

Thank you. I think that is the solution.
On another note…
Is it possible to dynamically move card or element inside card? Replacing hard coded position coordinate with variable driven by different entity?

jeells102 · November 20, 2023, 11:28am

Hey All,

I’m trying to add the mini-graph as it shows in this post; Fun with custom:button-card - #852 by edwardtich

However, when I’ve added this into my button-card, it’s just adding [object Object] in place of the graph. I can’t work out what I’m doing wrong, and ChatGPT isn’t helping me either (ha!).

Any ideas?

SCR-20231120-kkhu

type: custom:button-card
entity: light.office_light_switch
icon: mdi:desk
name: Office
tap_action:
  action: navigate
  navigation_path: /lovelace/office
  haptic: medium
styles:
  grid:
    - grid-template-areas: '"i temp" "n hum" "graph graph"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr min-content min-content
  card:
    - background: var(--contrast2)
    - padding: 16px
    - '--mdc-ripple-press-opacity': 0
  img_cell:
    - justify-self: start
    - width: 24px
  icon:
    - width: 24px
    - height: 24px
    - color: var(--contrast8)
  name:
    - justify-self: start
    - font-size: 14px
    - margin: 4px 0 4px 0
    - color: var(--contrast)
    - font-family: Montserrat
    - font-weight: 600
  custom_fields:
    temp:
      - align-self: start
      - justify-self: end
      - font-size: 13px
      - font-weight: 500
      - margin: 4px 0 0px 0
      - color: var(--contrast8)
      - font-family: Montserrat
    hum:
      - align-self: start
      - justify-self: end
      - font-size: 13px
      - font-weight: 500
      - margin: 4px 0 12px 0
      - color: var(--contrast8)
      - font-family: Montserrat
    graph:
      - padding-top: 0%
      - width: 100%
      - height: 100%
      - margin-bottom: '-3%'
custom_fields:
  temp: |
    [[[
    return `<ha-icon
      icon="mdi:thermometer"
      style="width: 18px; height: 18px; color: var(--orange);">
      </ha-icon><span>${parseFloat(states['sensor.office_temperature_sensor_temperature'].state).toFixed(0)}°C</span>`
    ]]]
  hum: |
    [[[
    return `<ha-icon
      icon="mdi:water-percent"
      style="width: 18px; height: 18px; color: var(--blue);">
      </ha-icon> <span>${parseFloat(states['sensor.office_temperature_sensor_humidity'].state).toFixed(0)}%</span>`
    ]]]
  graph:
      type: custom:mini-graph-card
      entities:
      - entity: sensor.office_temperature_sensor_temperature
        name: Temperature
        color: '#ff8c00'
      - entity: sensor.office_temperature_sensor_humidity
        name: Humidity
        color: '#3399ff'
        y_axis: secondary
      height: 50
      hours_to_show: 24
      line_width: 3
      font_size: 50
      animate: true
      show:
        name: false
        icon: false
        state: false
        legend: false
        fill: fade
      card_mod:
        style: |
          ha-card {
            position: absolute !important;
            height: 100%;
            width: 100%;
            top: 0px;
            --ha-card-border-width: 0;
          }
          ha-card:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
          }
state:
  - value: 'on'
    styles:
      card:
        - background: |
            [[[
                var color = entity.attributes?.rgb_color;
                if (entity.state != "on"){
                  return 'var(--contrast20)';
                }
                else if (color){
                  return 'rgba(' + color + ')'
                }
                else{
                  return 'var(--yellow)'
                }
            ]]]
      icon:
        - color: var(--red)
        - animation: bounce 2s infinite
      name:
        - color: var(--black)
  - value: 'off'
    styles:
      name:
        - color: var(--contrast20)
extra_styles: |
  @keyframes bounce {
    0% { transform: scale3d(1, 1, 1); }
          7% { transform: scale3d(1.25, 0.75, 1); }
          10% { transform: scale3d(0.75, 1.25, 1); }
          12% { transform: scale3d(1.15, 0.85, 1); }
          16% { transform: scale3d(0.95, 1.05, 1); }
          19% { transform: scale3d(1.05, 0.95, 1); }
          25% { transform: scale3d(1, 1, 1); }
  }

EDIT: I managed to get this working, and also do some cool stuff with it. So now, when the entity is on, the color of the name changes, and the icon bounces.

If anyone is interested in using my code to add to their setup, it is below.

type: custom:stack-in-card
cards:
  - type: custom:button-card
    entity: light.living_room_light_switch
    icon: '[[[ return entity.attributes.icon ]]]'
    show_icon: false
    name: Living Room
    tap_action:
      action: navigate
      navigation_path: /lovelace/living-room
      haptic: medium
    styles:
      card:
        - background: var(--contrast2)
        - padding: 16px
        - '--mdc-ripple-press-opacity': 0
      icon_cells:
        - justify-self: start
        - margin-top: 12px
        - margin-left: 15px
        - animation: |
            [[[
              var state = states['light.living_room_light_switch'].state;
              return state === 'on' ? 'bounce 2s infinite' : 'none';
            ]]]
      img_cell:
        - justify-self: start
        - width: 24px
      custom_fields:
        temp:
          - align-self: start
          - justify-self: end
          - font-size: 13px
          - font-weight: 500
          - margin: 4px 0 0px 0
          - color: var(--contrast8)
          - font-family: Montserrat
        hum:
          - align-self: start
          - justify-self: end
          - font-size: 13px
          - font-weight: 500
          - margin: 1px 0 12px 0
          - color: var(--contrast8)
          - font-family: Montserrat
        graph:
          - padding-top: 0%
          - width: 100%
          - height: 100%
        icon_cells:
          - width: 24px
          - height: 24px
          - color: var(--contrast8)
          - animation: |
              [[[
                var state = states['light.living_room_light_switch'].state;
                return state === 'on' ? 'bounce 2s infinite' : 'none';
              ]]]
      name:
        - justify-self: start
        - font-size: 14px
        - margin: 1px 0 1px 0
        - color: |
            [[[
              var state = states['light.living_room_light_switch'].state;
              return state === 'on' ? 'white' : 'grey';
            ]]]
        - font-family: Montserrat
        - font-weight: 600
      grid:
        - grid-template-areas: '"icon_cells slider temp" "n slider hum"'
        - grid-template-columns: 1fr min-content 1fr
        - grid-template-rows: 1fr min-content min-content
    custom_fields:
      icon_cells: |
        [[[
         var state = states['light.living_room_light_switch'].state;
         if(state == "on")
          return `<ha-icon
          icon="mdi:sofa"
          style="width: 25px; height: 25px; color: yellow;">
          </ha-icon>
          `;
         else 
          return `<ha-icon
          icon="mdi:sofa-outline"
          style="width: 25px; height: 25px; color: grey;">
          </ha-icon>
          `;
        ]]]
      temp: |
        [[[
          return `<ha-icon
          icon="mdi:thermometer"
          style="width: 18px; height: 18px; color: var(--orange);">
          </ha-icon><span>${parseFloat(states['sensor.living_room_temp_sensor_temperature'].state).toFixed(0)}°C</span>`
        ]]]
      hum: |
        [[[
          return `<ha-icon
          icon="mdi:water-percent"
          style="width: 18px; height: 18px; color: var(--blue);">
          </ha-icon> <span>${parseFloat(states['sensor.living_room_temp_sensor_humidity'].state).toFixed(0)}%</span>`
        ]]]
    card_mod:
      style: |
        ha-card {
          z-index: 1;
          height: 70px;
        }
    extra_styles: |
      @keyframes bounce {
        0% { transform: scale3d(1, 1, 1); }
        7% { transform: scale3d(1.25, 0.75, 1); }
        10% { transform: scale3d(0.75, 1.25, 1); }
        12% { transform: scale3d(1.15, 0.85, 1); }
        16% { transform: scale3d(0.95, 1.05, 1); }
        19% { transform: scale3d(1.05, 0.95, 1); }
        25% { transform: scale3d(1, 1, 1); }
      }
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.living_room_temp_sensor_temperature
        name: Temperature
        color: '#ff8c00'
      - entity: sensor.living_room_temp_sensor_humidity
        name: Humidity
        color: '#3399ff'
        y_axis: secondary
    height: 40
    hours_to_show: 24
    line_width: 3
    font_size: 50
    show:
      name: false
      icon: false
      state: false
      legend: false
    card_mod:
      style: |
        ha-card {
          position: absolute;
          height: 100%;
          width: 100%;
          top: 0px;
          --ha-card-border-width: 0;
        }
        ha-card:after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
        }

Light On:

Light Off:

pab11o · November 20, 2023, 9:52pm

encja

How to use a fan that rotated proportionally to the entity’s rotation.

type: custom:button-card
state:
  - value: 'on'
    color: blue
    spin: true
entity: entity: sensor.panasonic_heat_pump_main_fan2_motor_speed
show_state: tfalse
icon: mdi:fan

cismarine · November 21, 2023, 7:49am

Hi,
Have look here…

github.com

3ative/button-card-7-pwm-controller/blob/30249a26cd2ee8a8b86adf60f7f00b73875d84aa/Button_Card.yaml

type: custom:button-card
entity: fan.media_centre_fan
triggers_update: all
name: |
  [[[
    var name = states[entity.entity_id].attributes.friendly_name
    var id = entity.entity_id.slice(4, -4)
    var temp = states["sensor." + id + "_temperature"].state
    var fan = states["fan." + id + "_fan"].attributes.percentage
    var speed = (fan > '1')? fan + "%" : "Off"
    return "🍺 " + name + ": " + temp + "℃" + " | " + speed
  ]]]
state:
  - value: 'on'
    styles:
      icon:
        - animation: |
            [[[
              var fan = "fan." + entity.entity_id.slice(4, -4) + "_fan"
              var input = states[fan].attributes.percentage

This file has been truncated. show original