Lovelace: Button card

[kebel87]

Hi everyone,

I’, trying to use counters + custom button card in order to have an inventory style panel in home assistant. It’s gonna be use to track how many drams are left in each of my scotch bottle in my cabinet.

Here’s a snapshot of what I’ve been able to achieve up to now.

Here’s the code that need optimization/fixing :

color: red
color_type: icon
entity: counter.bottle1
hold_action:
  action: call-service
  service: counter.reset
  service_data:
    entity_id: entity
icon: 'mdi:battery-unknown'
label: Label test
lock:
  duration: 5
  enabled: 'yes'
  unlock: tap
name: Octomore 10
show_state: 'yes'
show_unit: 'yes'
size: 60px
state:
  - icon: 'mdi:battery'
    operator: ==
    value: '100'
  - icon: 'mdi:battery-90'
    operator: '>='
    value: '90'
  - icon: 'mdi:battery-80'
    operator: '>='
    value: '80'
  - icon: 'mdi:battery-70'
    operator: '>='
    value: '70'
  - icon: 'mdi:battery-60'
    operator: '>='
    value: '60'
  - icon: 'mdi:battery-50'
    operator: '>='
    value: '50'
  - icon: 'mdi:battery-40'
    operator: '>='
    value: '40'
  - icon: 'mdi:battery-30'
    operator: '>='
    value: '30'
  - icon: 'mdi:battery-20'
    operator: '>='
    value: '20'
  - icon: 'mdi:battery-10'
    operator: '>='
    value: '10'
  - icon: 'mdi:battery-outline'
    operator: <
    value: '10'
styles:
  card:
    - background-color: silver
    - font-size: 18px
    - color: Red
  grid:
    - grid-template-areas: '"n i" "s i" "l i"'
    - grid-template-columns: 50% 50%
  name:
    - font-weight: bold
    - font-size: 18px
    - color: white
tap_action:
  action: call-service
  service: counter.decrement
  service_data:
    entity_id: entity
type: 'custom:button-card'
units: '%’

Apart from advices to optimize the cards, I’d like to introduce conditional formating for state value (i.e. 95 %) so it appears green, yellow or red depending on the value (i.e. green from 50 to 100%, yellow from 15% to 49% and red under 15%).

Also, I’ve tried to optimize the states by having the icon update dynamically based on state (instead of programming multiple instances like I did) but I couldn’t achieve it.

Thanks to anyone who would take the time to help me

[petro]

They’ll only have the same color if they are both lights. Otherwise you need to create a state on style and a state off style.

[petro]

first, there’s no reason to use card-mod and the custom:button-card. All customizations should be done in the card styles.

second, are you using chrome?

[petro]

please properly format your code and I can help create a template.

[kajmaj]

@petro I would like have “on” state color customized - it actually works fine and “off” state color for all icons the same => default.
At he moment I have 5 icons where I am not able to achieve it and not able to identify why.

[petro]

If you built the state with - value: ‘on’ and - value: ‘off’, and you have entities that are not working, then they don’t have a state of on or off. But if you are using the custom card you posted above, it will not work because of the changes in 105.

[kajmaj]

Well, I’m a bit confused now. Must read breaking changes for 105 again and more carefuly.

[petro]

Yes, that’s why I said setup the ‘states:’ functionality. Maybe you don’t know what that is… It’s the style based states.

state:
- value: 'on'
  styles:
    icon:
    - color: blah
- value: 'off'
  styles:
    icon:
    - color: blah

[kajmaj]

Is there any way how to keep “default” state color through all themes?

[petro]

yes use var(--paper-item-icon-active-color) as your on color. You don’t need to implement off because that’s just the default color.

[kajmaj]

Thanks a lot.

[Mariusthvdb (Marius)]

Please let me ask if we can have a single button automatically switch background pictures following 2 different sensors.

Use case : trash button showing today’s and tomorrow’s pickup type alternately.

I know how to have a single button flash based on the entity being ‘on’ but haven’t seen this functionality in 1 button yet . I think…

Perfection would be it not to switch if tomorrow’s trash is None

Thanks for having a look and helping me!

trying to follow this https://css-tricks.com/css-basics-using-multiple-backgrounds/ by entering:

    - background-image: >
        [[[ return `url("${states['sensor.saver_trash_today'].attributes.entity_picture}"),url("${states['sensor.saver_trash_tomorrow'].attributes.entity_picture}")`; ]]]

simply shows me the first picture, if I try:

    - background-image: >
        [[[ return `url("${states['sensor.saver_trash_today'].attributes.entity_picture}")`,`url("${states['sensor.saver_trash_tomorrow'].attributes.entity_picture}")`; ]]]

the last picture is displayed, no alteration as promised in the article…no errors in the inspector on both accounts.

for the sake of it I even tried:

    - background-image: >
        [[[ return `url("${states['sensor.saver_trash_today'].attributes.entity_picture}")`,
            return `url("${states['sensor.saver_trash_tomorrow'].attributes.entity_picture}")`; ]]]

but that is obviously very incorrect, showing no button at all and:

SyntaxError: Unexpected keyword 'return'

in inspector.

final try for now:

    - background-image: >
        [[[ return `url("${states['sensor.saver_trash_today'].attributes.entity_picture},${states['sensor.saver_trash_tomorrow'].attributes.entity_picture}")`; ]]]

shows an empty button, no error I inspector.

even hard coded wont work:

    - background-image: >
        [[[ return `url("/local/mijnafvalwijzer/kliko_geen.png,/local/mijnafvalwijzer/plastic.png")`; ]]]

or

    - background-image: >
        [[[ return `url("/local/mijnafvalwijzer/kliko_geen.png"),url("/local/mijnafvalwijzer/plastic.png")`; ]]]

can this at all be done? @romrider would you know the syntax to get this going?

[jimz011 (Jim)]

Looking for something like this? @Mariusthvdb
I’m talking about the badges (you had troubles getting it the way you want).

[Mariusthvdb (Marius)]

Yes Jim, what’s the setting you use for these fields ? Looking at partly cloudy eg?

[jimz011 (Jim)]

@Mariusthvdb

  custom_fields:
    notification:
      - background-color: "{{ background_color }}"
      - color: var(--paper-card-background-color)
      - border-radius: 12px
      - overflow: visible
      - position: absolute
      - right: 7px
      - top: 7px
      - padding: 0px 5px
      - height: 22px
      - min-width: 12px
      - font-size: 10px
      - line-height: 22px
      - font-weight: bold
      - text-transform: capitalize

[Mariusthvdb (Marius)]

Thanks, will try and let you know.

[jimz011 (Jim)]

The field is the same for all buttons (so not only the partlycloudy one). It adjusts the size dynamically.

[Mariusthvdb (Marius)]

Sure, just mentioned that so you knew what particular issue I was trying to solve . I tried the 12 px before but that wouldn’t help, so it might be the overflow field helping out. Will let you know my findings

_update-

well it’t not the overflow that makes the difference… Don’t understand why, but if I simply use 12px now, the background gets a nice form factor. Had that before, didn’t work, then went over to try the % as reported above. Wasn’t lucky with that so ended up with the 100px which worked ok.

using this now, with some adjusted heights because I like the background to be a bit closer to the text. Also not using min-width yet, since I found no reason to do so. found it…

      - padding:  0px 3px #0px 3px
      - border-radius: 12px
      - position: absolute
      - right: 5%
      - top: 10%
      - height: 18px
      - font-size: 10px
      - font-weight: bold
      - line-height: 18px

will see how the visibility of the smaller font-size works in real life, because it is tightly small…

went from:

to

so will see which works best after a few days
thanks for chiming in.

[Mariusthvdb (Marius)]

well, now I am stumped. Of all Buttons, this it the only one I can’t get the name to show in the center of the button… I must be staring myself blind here, please help…!

type: custom:button-card
entity: sensor.saver_trash_today
aspect_ratio: 1/1
show_icon: false
show_name: true
tap_action:
  action: more-info
hold_action:
  action: navigate
  navigation_path: tijd_agenda
name: >
    [[[ if (entity.state == 'plastic verpakkingsafval') return 'plastic';
        return entity.state;
    ]]]
styles:
  name:
    - text-transform: capitalize
    - font-size: 13px
    - font-weight: bold
    - color: var(--primary-background-color)
#        [[[ return states['sensor.trash_color'].state ]]]
    - position: absolute
    - bottom: 5%
    - text-align: center

  card:
    - background-image: >
        [[[ return `url("${entity.attributes.entity_picture}")`; ]]]
    - animation: >
        [[[ if (states['persistent_notification.trash_notification']) return 'blink 2s ease infinite';
            return 'none';
        ]]]
#    - background-repeat: no-repeat
    - background-size: cover #105%
#    - background-position: center
    - padding: 5px

keeps looking like:

if I use no positioning at all, it gets centered alright, but also right in the middle of the button, over the image. It would be a fall back option, and using an other text color would make it readable, but of course primary goal is to put the text at the bottom of the Button where it is now.

please have a look?
thanks!

[petro]

Charge your phone