Lovelace: Button card

remove the margin on the grid

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.

It should just be:

  grid: 
  - margin: 0

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

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.

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.

1 Like

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

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

1 Like

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.

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.

1 Like

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%)

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

Schermafbeelding 2020-09-15 om 17.53.46
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!

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

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

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);

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 :wink: Only I cant see working is the capitalize function.

also the console shows:

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);

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 :wink:
  • 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()

slice returns an array.

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…

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!