Lovelace: Button card

[petro]

remove the margin on the grid

[ASNNetworks]

Do you happen to know what the code is? I inspected the element but can’t seem to find the correct one that sticks with card-mod.

[petro]

It should just be:

  grid: 
  - margin: 0

and it’s not card mod, this card has built in styling.

[ASNNetworks]

That goes under the button-card variable styles right? Where card, label, name etc (and grid already is if using grid option) right?

So in my case:

styles:
  custom_fields:
    control:
      - width: 100%
      - height: 100%
      - position: absolute
  entity_picture:
    - border-radius: 20px
    - height: 100%
  grid:
    - margin: 0
  name:
    - font-weight: bold

I tried that, but doesn’t do anything.

[petro]

Ok, are you trying to have an image as the background of the button? Here’s what I use for that… Keep in mind, this is a work around. There may be better ways to do this, I haven’t tried to fix/optimize it in 2 years.

entity_picture: /local/images/petro_large.png
styles:
  card:
    - background-image:  /local/images/petro_large.png
    - background-repeat: no-repeat
    - background-size: 100% 100%
    - border-radius: 15px
    - padding: 0px
  entity_picture:
    - width: 100%
    - padding-bottom: 0%
    - opacity: 0.0

I make the entity_picture opaque so that the size of the card is set to the size of the entity_picture. Then I set the background image to whatever image I want. This places the image behind all the text, outside the grid.

[ASNNetworks]

Basically I want the entity_picture to be the background, full sized. I use a media_player as the entity, so it automatically shows the artwork when using entity_picture. But I can’t seem to get the picture_entity to show fullscreen (so without the grid margings of the card itself).

edit:

I got it to work using this:

styles:
  card:
     - padding: 0px
  entity_picture:
    - border-radius: 20px
    - height: 100%
    - width: 100%
    - position: absolute

[petro]

when you use width and height 100%, you’ll get goofy aspect ratios if your image doesn’t match your button ratio.

[ASNNetworks]

I use it for Spotify/Chromecast music, which always shows it in a 1:1 ratio artwork. But thanks for the heads up, if stuff do look weird I know what the issue is.

[petro]

just keep the button aspect ratio to 1/1 and you’ll be fine. You technically shouldn’t need to specify both, only 1. I typically use width and omit height.

[RichardU (Richard)]

Problem with the github example …

I’m learning the grid system, and was frustrated while trying to left justify the icon until I tested this github example on my system. The example shows the icon left justified, but on my system, the icon is still centered.

What’s the best practice for left-justifying the icon?

- type: custom:button-card
  entity: switch.skylight
  name: <3 Apple
  icon: mdi:fire
  show_state: true
  styles:
    card:
      - width: 100px
      - height: 100px
    grid:
      - grid-template-areas: '"i" "n" "s"'
      - grid-template-columns: 1fr
      - grid-template-rows: 1fr min-content min-content
    img_cell:
      - align-self: start
      - text-align: start
    name:
      - justify-self: start
      - padding-left: 10px
      - font-weight: bold
      - text-transform: lowercase
    state:
      - justify-self: start
      - padding-left: 10px
  state:
    - value: 'off'
      styles:
        card:
          - filter: opacity(50%)
        icon:
          - filter: grayscale(100%)

[Mariusthvdb (Marius)]

please help me find the error in my button. I need to capitalize these:

which is coded like this:

button_meterget:
  template: button_force_body
  name: >
    [[[
      function capitalizeFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
      }
      var id = entity.entity_id.split('_').slice(-1);
      return id;
    ]]]
  icon: >
    [[[
      var id = entity.entity_id.split('_meterget')[0].split('.')[1];
      return states['switch.' + id].attributes.icon;
    ]]]
  tap_action:
    action: call-service
    service: script.turn_on
    service_data:
      entity_id: entity
    haptic: light
  styles:
    card:
      - color: var(--text-color-on)
      - background-color: var(--background-color-on)
    icon:
      - color: var(--text-color-on)

the function capitalizeFirstLetter() isnt yet used. However, if I do use it, as I do in numerous other spots, the full button disappears…

 name: >
    [[[
      function capitalizeFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
      }
      var id = entity.entity_id.split('_').slice(-1);
      return capitalizeFirstLetter(id);
    ]]]

what’s wrong here? thanks for having a look!

[petro]

verify your entity_id is being supplied to the function. Nothings wrong with the function. The only thing that could be wrong is that you aren’t supplying an entity

[Mariusthvdb (Marius)]

yeah, but it must be? otherwise the current name wouldn’t exist would it.this is the card config:

  - type: horizontal-stack
    cards:
      - type: custom:button-card
        template: button_meterget
        entity: script.netwerk_auditorium_meterget_power
      - type: custom:button-card
        template: button_meterget
        entity: script.netwerk_auditorium_meterget_usage
      - type: custom:button-card
        template: button_meterget
        entity: script.netwerk_auditorium_meterget_state

and a script is like:

  netwerk_auditorium_meterget_state:
    alias: Netwerk Auditorium State
    sequence:
      service: shell_command.netwerk_auditorium_meterget_state

  netwerk_auditorium_meterget_usage:
    alias: Netwerk Auditorium Usage
    sequence:
      service: shell_command.netwerk_auditorium_meterget_usage

  netwerk_auditorium_meterget_power:
    alias: Netwerk Auditorium Power
    sequence:
      service: shell_command.netwerk_auditorium_meterget_power

[petro]

yeah, it must be… when I run your function I get output if I change the ID to a string, so the error is beyond that point

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}

var id = "foo";
console.log(capitalizeFirstLetter(id));

You can even modify your code to log the entity and look at the errrors:

      function capitalizeFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
      }
      var id = entity.entity_id.split('_').slice(-1);
      console.log(id);
      return capitalizeFirstLetter(id);

[Mariusthvdb (Marius)]

yeah, how odd, even without the capitalize function, I see this:

ButtonCardJSTemplateError: TypeError: Cannot read property 'entity_id' of undefined in 'var id = entity.entity_id.split('_').slice(-1);
  console.log(id);
  return id;'

though the buttons show fine, and work Only I cant see working is the capitalize function.

also the console shows:

[petro]

Okay, there’s your problem. It’s an array not a string.

      function capitalizeFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
      }
      var id = entity.entity_id.split('_').slice(-1)[0];
      console.log(id);
      return capitalizeFirstLetter(id);

[Mariusthvdb (Marius)]

so, that’s remarkable isnt it? How can that be an array, and not a string? also how come it says the entity is undefined, while it most certainly is:

      - type: custom:button-card
        template: button_meterget
        entity: script.netwerk_auditorium_meterget_power

update

2 things solved:

• the entity undefined: well that was a simple typo. so correct error
• Capitalize is solved by using

  name: >
    [[[
      function capitalizeFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
      }
      var id = entity.entity_id.split('_').pop(-1);
      console.log(id);
      return capitalizeFirstLetter(id);
    ]]]

pop() instead of slice()

[petro]

@petro

.slice(-1)

slice returns an array.

[Mariusthvdb (Marius)]

yeah, see my post above. thanks for your analysis.

have another quest now that all is solved: trying to write a decluttering template:

card:
  type: horizontal-stack #<-- no dash in front of the type: here!!
  cards:
    - type: custom:button-card
      template: button_meterget
      triggers_update: switch.[[id]]
      entity: script.[[id]]_meterget_power

    - type: custom:button-card
      template: button_meterget
      triggers_update: switch.[[id]]
      entity: script.[[id]]_meterget_usage

    - type: custom:button-card
      template: button_meterget
      triggers_update: switch.[[id]]
      entity: script.[[id]]_meterget_state

so I can use a simple:

  - type: custom:decluttering-card
    template: meterget
    variables:
      - id: kast_library

for all of my 25 switches, instead of having to copy all of this:

  - type: horizontal-stack
    cards:
      - type: custom:button-card
        template: button_meterget
        triggers_update: switch.kast_library
        entity: script.kast_library_meterget_power
      - type: custom:button-card
        template: button_meterget
        triggers_update: switch.kast_library
        entity: script.kast_library_meterget_usage
      - type: custom:button-card
        template: button_meterget
        triggers_update: switch.kast_library
        entity: script.kast_library_meterget_state

somehow I’ve mixed things up, but I cant bend my head around it… it errors out with

have a suggestion on this? Checking the red cards reveals the exact same code as the yaml section…?

Sorted! had a ‘-’ in front of the card type from a previous edit, marked it in the code above…

[Mariusthvdb (Marius)]

made life just a bit easier for now using below code for decluttering card:

    - type: horizontal-stack
      cards:

        - type: custom:button-card
          template: button_meterget
          triggers_update:
            - switch.[[id]]
            - sensor.[[id]]_actueel
          entity: script.[[id]]_meterget_power
          name: Power
          variables:
            sensor: sensor.[[id]]_actueel
            unit: ' W'

        - type: custom:button-card
          template: button_meterget
          triggers_update: switch.[[id]]
          entity: script.[[id]]_meterget_usage
          name: Usage
          variables:
            sensor: sensor.[[id]]_totaal
            unit: ' kW'

        - type: custom:button-card
          template: button_meterget
          triggers_update: switch.[[id]]
          entity: script.[[id]]_meterget_state
          name: State
          variables:
            sensor: sensor.[[id]]_state
            unit: ''

Simply hardcoding the name here is waay less error prone than the js function;-)

only using small configs like these for all my switches now in the card config:

  - type: custom:decluttering-card
    template: force_switches
    variables:
      - id: netwerk_dorm
      - on-icon: wifi
      - off-icon: wifi-off

thanks for the amazing button-card and decluttering-card, using templates and variables!