Fun with custom:button-card

Share your Projects! Dashboards & Frontend
405

Here’s what I did to return not only conditional text, but also an icon that changes (color and image) in response to an attribute.

        [[[
          var fan_mode = entity.attributes['fan_mode'];
          var fan_action = entity.attributes['fan_action'];
          var color = "lightGrey";
          if (fan_mode == "on")
            if (fan_action == "running")
              color = "lightSkyBlue";
            else
              color = "white";
          else if (fan_mode == "auto")
            if (fan_action == "running")
              color = "lightSkyBlue";
            else
              color = "white";
          return `<ha-icon icon="mdi:fan"
          style="width: 14px; height: 14px; color: ${color};"></ha-icon>
          ${fan_mode}/${fan_action}`
        ]]]
1 Like
406

Uau… thanks a lot! It “kinda” works… i managed to correct your code to get correct word for fully-up and fully-down, but i still can’t get to show attribute value in between (in percents). I just can’t get to the point to have any attribute value to be shown. When moving code "return state_attr(…) results in an error…

EDIT: yeah!! It works. I replaced “return state_attr(“cover.kitchen” , “current_position”)” with "return cover_mode + “%” (silly me…)
Many thanks again!!!
It seems that i’ll have to learn to use variables…

  [[[
type: custom:button-card
entity: cover.kitchen
attribute: current_position
show_state: false
icon: mdi:stop-circle-outline
show_name: false
show_label: true
label: |
    var cover = entity.attributes['current_position'];
    if (cover_mode == "100")
        return 'OPEN';
    else if (cover_mode == "0")
        return 'CLOSED'
    else
    return state_attr("cover.kitchen" , "current_position")
  ]]]
407

Hi everyone
following “template: alerter-dual”
I have managed to make the button blink when it is turned on, but how is it done so that it only blinks when it is “unknown”?

Thank you so much

408

@neo2angel, answered in your duplicate post here: Dual-entity flashing button template for custom:button-card

410

Hello, I was using some button-card with a sensor that was reading the value from History Stats attribute (In that way I was able to format the time in a readable way).
This attribute was removed with the last core update and now I can only display the time using the History Stats state but is repoted like 8,5h, is there a wa to convert this value in something like 08:12 (HH:MM) or 8h 12m (XXh YYm) for expample?

1 Like
411

following, I am in the same boat

412

try templating it with timestamp_custom like this:

  "{{ whatever_the_state_is | timestamp_custom('%Hh %Mm') }"
413

That didn’t work for me but it worked doing that:

template:
  - sensor:    
    - name: "Time spent home Lovalace"
      state: >
       {% set list = states('sensor.time_at_home').split('.') %}
       {{ list[0] }}h {{ (60 * ('0.'~list[1]) | float) | round(0) }}m

Where ‘sensor.time_at_home’ is the history stat sensor

1 Like
414

Thanks all including the devs for this card.

Im finally shaping my dashboard the way I wanted.

Few more cleanups, tweaks to do. When completed, Ill share my code and resources if anyone is interested.

Screenshot_

5 Likes
415

@Shan, that’s a great looking design!

1 Like
417

Hi there anyone knows an anwser to this:

I want to show 2 states of different entities in one button.
I’ve got the state of my weather entity but I also want to show the temprature which is another entity so maybe it can be done by label or something.

cloud

button:

type: custom:button-card
entity: weather.buienradar
show_name: false
show_state: true
state:
  - value: cloudy
    color: white
    icon: mdi:cloud
  - value: clear
    icon: mdi:weather-sunny
  - value: fog
    icon: mdi:weather-fog
  - value: rainy
    icon: mdi:weather-pouring
  - value: snowy
    icon: mdi:weather-snowy
  - value: lightning
    icon: mdi:weather-lightning
styles:
  card: null
  icon:
    - width: 42px
    - height: 42px
    - padding: 18%
    - color: white
    - border-radius: 50%
  name:
    - font-size: 14px
    - font-weight: bold
  state:
    - font-size: 14px
    - font-weight: bold
1 Like
418

Look way, way, back in this thread (here: Fun with custom:button-card - #94 by qoheleth) and you’ll see a way to put multiple entity states on a single card.

419

Don’t use static button sizes, use aspect ratio

420

My code doesn’t work, can anybody help me?!

venue: >
[[[ return {{states['sensor.venue_england'].attributes['response'] 
|selectattr('name','search', variables.venue) 
|map(attribute='image') 
|list 
|replace("]","") 
|replace("[","") 
|replace("'","")  }}
]]]
422

custom button card uses JS templates, not jinja templates.

423

Ok, thanks!

424

it’s possible to do this same filter with js?

425

Is there a way to have a script for several buttons? For example lets say I have 4 custom buttons, they all call the same script but in the script I want something like this:

- service: number.set_value
        data_template:
          {% set entity_id = 'number.'+button_name %}
          value: 140
426

it is, but the syntax is completely different and much harder. It’s probably better to just do your template in a template sensor’s attribute and display the attribute.

venue: >
  [[[
    return states['sensor.venue_england'].attributes['response'].filter(item => item.name.includes(variables.venue)).map(item => item.image).join(', ');
  ]]]

No idea if that will work as I had to google all the calls.

EDIT: You might need to change item.image to item['image']. Same goes for item.name.

2 Likes
427

works perfectly. Thanks…