Lovelace: Button card

[ASNNetworks]

Why go to al that trouble if you just want the picture instead of icon? Just set for example:

- type: ‘custom:button-card’
  entity: light.living_room
  name: Living Room
  show_icon: false
  show_entity_picture: true
  entity_picture: ‘/local/picture.png’

And you can also create a state variable, that when entity state is off, it’ll show a different entity_picture.

Or maybe I don’t understand what you’re trying to achieve.

[xADDRx (Ben)]

Petro, thank you.

it works now:

[Harry-1976]

Thx for the reply. I know that option but imho it’s a bit different with this card.

It’s this card (inspired by this card):

I’d like to replace the icons in front of each trash-type with an image. Just can’t figure out how.

[KTibow (Kendell R)]

What’s the result if you use that anyway?
For the other ones:

        return `<img src="/local/myimg.png">

[Harry-1976]

It works when i replace the icon with a pic inside the img-cell (i like to keep the icon though) but not inside the three custom fields or in the ‘styles’ section of the custom fields.

This:

‘<img src=“/local/image.png”>

works though!

Thanks alot!

[Mariusthvdb (Marius)]

of course you are going to post that button ?

If you have a look at Garbage pickup date (mijnafvalwijzer.nl) custom_component you understand why the community is interested

[Harry-1976]

Sure, here you go:

custom_fields:
  rest: |
    [[[
      return `<img src="/local/restgft_80.png"
        style="width: 12px; height: 12px;">
        <span style="font-size: 12px; opacity: 0.6;">Rest/GFT: </span>
        <span style="font-size: 11px; color: var(--primary-text-color);">${states['sensor.trash_rest_gft'].state}</span>`
    ]]]
  pmd: |
    [[[
      return `<img src="/local/dhm_80.png"
        style="width: 12px; height: 12px;">
        <span style="font-size: 12px; opacity: 0.6;">Papier/Pmd: </span>
        <span style="font-size: 11px; color: var(--primary-text-color);">${states['sensor.trash_papier_pmd'].state}</span>`
    ]]]
  tuin: |
    [[[
      return `<img src="/local/takken_80.png"
        style="width: 12px; height: 12px;">
        <span style="opacity: 0.6; font-size: 12px;">Tuinafval: </span>
        <span style="font-size: 11px; color: var(--primary-text-color);">${states['sensor.trash_tuinafval'].state}</span>`
    ]]]
  first: |
    [[[
      return `<span style="font-size: 13px; color: limegreen;">${entity.state}</span>`
    ]]]
entity: sensor.trash_first_next_item
icon: 'mdi:delete-empty'
name: Ophaaldata
styles:
  card:
    - padding: 10%
    - margin: '-5px 10px 10px'
    - font-size: 10px
    - font-family: 'Google Sans, Roboto'
    - text-transform: capitalize
    - width: 175px
    - height: 175px
    - border-radius: 15px
    - border-width: 1px
    - border-style: solid
    - border-color: var(--primary-background-color)
    - box-shadow: '-4px -4px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)'
    - background-color: var(--primary-background-color)
  custom_fields:
    rest:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
    pmd:
      - padding-bottom: 2px
      - align-self: middle
      - justify-self: start
    tuin:
      - align-self: middle
      - justify-self: start
    first:
      - align-self: start
      - justify-self: end
  grid:
    - grid-template-areas: '"i first" "n n" "rest rest" "pmd pmd" "tuin tuin"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr min-content min-content min-content min-content
  icon:
    - color: var(primary-icon-color)
    - width: 77%
    - opacity: 0.4
    - align-self: start
    - justify-self: start
  img_cell:
    - justify-content: start
    - align-items: start
    - margin-bottom: 18px
  name:
    - font-weight: bold
    - font-size: 18px
    - align-self: start
    - justify-self: start
    - padding-bottom: 10px
    - opacity: 0.4
type: 'custom:button-card'

[xbmcnut]

Wondering if I could get some assistance with adding the battery level (sensor.steel_gate_battery_level) in the top right corner of my sensor cards? I see someone has done it and it looks great but I can’t seem to see the full code.

I’ve managed to copy some code here to get my light brightness working that way and it’s super helpful so looking to add more value to some other cards. What would I need in the custom_fields section for a sensor to report a value?

color: yellow
color_type: icon
custom_fields:
  notification: |
    [[[ var bri = Math.round(entity.attributes.brightness / 2.55);  if
      (entity.state === 'on') return (bri ? (bri+"%") : '') ]]]
entity: light.shelly_dimmer_kitchen

[xbmcnut]

I’ve been hunting high and low this evening trying to find the full code to implement the same circle battery levels inside cards that display the other sensors. Any chance you could provide a link?

[pollinolas]

I am personally using decluttering card to set variables
https://github.com/custom-cards/decluttering-card

[RomRider]

@Mariusthvdb

As of HA 115 templates will be updated on each state change the system derives automatically, see 0.115: B-Day release! Media browser, tags, automations & WTH
will/won’t this impact button-card negatively?

This is only for the developper panel where you can test jinja2 templates. Unrelated to what button-card is doing or any other card.

@ASNNetworks

Is this possible? I tried with the animation varibale, but I don’t think it’s that simple (doesn’t work that way).

You need to use css transitions for that but it works unreliably with media_player images as those are fetched asynchronously. Nothing I can do on button-card.

@ptdalen

If I use an entty card the icon shows “yellow” as it should. As I reduce the brighness it does become visible, just “grey”. Once I change the color to any other color it appears as it should

Yeah, that’s because the icon represents the color of the light, and if the light is set to pure white (rgb(255, 255, 255)), then the icon is going to be white and since your background is white also it’s displayed but not visible. I’m not sure how to fix this because everyone has a different theme and the background color is different for everyone.

[ptdalen]

But the icon shows as yellow in HA. That was shown in the image. Also if I use an entity card it shows yellow. I get that it’s white. Just shows different that in HA natively. Also I swear that this started maybe 4 or 5 versions ago and was not always like that. But I could be wrong.

[RomRider]

I don’t think HA’s icon follows the color of the light anymore. If you don’t want the icon to follow the color of the light then you can use an empty value for the color parameter and then the icon will be yellow (or whatever your theme defines as the color for on).

- type: custom:button-card
  color:
  entity: light.my_light

[ptdalen]

HA does Still follow color icons. But maybe not for white.

[KTibow (Kendell R)]

As for default Home Assistant behavior:
If it’s slightly off white, it shows the color. If it’s exactly white, it shows paper-item-active-icon-color.

[xbmcnut]

Sorted it with thanks to this post Lovelace: Button card

color: green
color_type: icon
custom_fields:
  notification: |
    [[[ return states['sensor.steel_gate_battery_level'].state ]]]
entity: binary_sensor.door_window_sensor_steel_gate
icon: 'mdi:gate'
name: Steel
size: 40%
state:
  - color: red
    icon: 'mdi:gate'
    styles:
      icon:
        - animation: blink 10s ease infinite
    value: 'on'
  - color: orange
    icon: 'mdi:gate'
    styles:
      icon:
        - animation: blink 3s ease infinite
    value: unavailable
  - operator: default
styles:
  card:
    - height: 85px
    - border-radius: 3%
    - border: 'solid 2px rgba(255,255,255,.2)'
  custom_fields:
    notification:
      - background-color: |
          [[[
            if (states['sensor.steel_gate_battery_level'].state >= 98)
              return "green";
            return "red";
          ]]]
      - border-radius: 50%
      - position: absolute
      - left: 75%
      - top: 5%
      - height: 18px
      - width: 18px
      - font-size: 9px
      - line-height: 18px
  grid:
    - position: relative
type: 'custom:button-card'

[ptdalen]

Is there a way to change that behavior?

[KTibow (Kendell R)]

No, you can’t really change icon color without custom-ui or something.

[ptdalen]

It’s just weird to me that HA shows yellow icon when I set it to pure white, button card sets it to while. I dont know enough about theming, etc to know why the button card shows the “true” color and an HA entity card shows yellow. It’s not a big deal, just weird to me.

[KTibow (Kendell R)]

The --paper-item-icon-active-color is yellow, so HA uses it for a white light on. button-card uses its own color calculation model.