Lovelace: Button card

I only have two options in the menu -

image

:thinking:

Are there some files in CONFIG_FOLDER/www/community/button-card/: a .js and a .js.gz?
If not, HACS didnā€™t install it properly, if there are some files then please share your resources screenshot.

This is the contents of the folder:

And resources:

I donā€™t think you should have the url: in front of the path in your resources.

Oh thatā€™s embarrassing :frowning:
You were absolutely correct, thanks so much for your help.

hi at all!
How can i align to the left label and state???

see image belowā€¦

align

using layout: icon_name_state2nd state and label seems to be aligned on the right side ā€¦
what iā€™m trying to to is move state and label as the attached image.

thanks a lot

That would be:

styles:
  label:
    - align-self: start
  state:
    - align-self: start

Hi.
Iā€™m trying to figure out how to template a name for a dynamically changing input_select list.
Basically, Iā€™ll have 4 buttons, each with the name being one of the options (playlists) in input_select.synaudio_playlist. These names occasionally change as I change/add/remove my playlists.
In jinja template, I can use the following templates to return the names in each position on the list.

{%- set playlist1 = state_attr('input_select.synaudio_playlist', 'options').0%}
  {{playlist1}}

{%- set playlist2 = state_attr('input_select.synaudio_playlist', 'options').1%}
  {{playlist2}}

Itā€™s not working in the button card template though.
Iā€™ve tried a few variations in my button template, like:


- type: 'custom:button-card'
  template: tv_source_2
  entity: input_select.synaudio_playlist
  name: >
      [[[
        var playlist = (entity.attributes.options.1);
        return playlist;
       ]]]

But I get an error saying unexpected number ā€œ.1ā€. Expected ā€œ)ā€ to end a a compound expression.
Is there a way to make this work or should I just make another bunch of sensor entities using the jinja template to make it work?

Hi,
May I ask you how did you do those header cards above the grid? E.g. ā€œHassio version infoā€, ā€œHassio system infoā€?

sure, tis a button card in a vertical stack:

type: vertical-stack
cards:

  - type: custom:button-card
    name: Home Assistant version info
    template: button_default_title

  - type: horizontal-stack
    cards:

based on a template:


button_default_title:
  aspect_ratio: 12/1
  styles:
    card:
      - background-color: var(--background-color-off)
      - color: var(--text-color-off)
      - font-size: 20px
      - font-family: Helvetica
      - font-weight: bold

the var colors are in my themes, so change according to the theme settings.

1 Like

Hi. Iā€™m trying to get this effect (icons in a row)
Bez nazwy-1

I managed to get what you can see below and unfortunately I donā€™t know how to achieve my goal (there are only two icons in the code for tests - run and icon2 for tests. Maybe someone can help?

image

type: 'custom:button-card'
entity: switch.biuro
entity_picture: /local/img/piotr-moji.png
color: auto
show_entity_picture: true
show_name: false
show_icon: true
aspect_ratio: 3/1.3
state:
  - value: 'on'
    styles:
      card:
        - box-shadow: '0px 0px 3px 3px #ffeb8a'
      entity_picture:
        - border: 2px solid yellow
styles:
  card:
    - background-color: black
    - border-radius: 5%
    - padding: 5%
    - color: ivory
    - font-size: 10px
    - text-shadow: 0px 0px 2px black
    - text-transform: capitalize
  grid:
    - grid-template-areas: '" i temp" "i wilg" "i ruch" "i icon2" '
    - grid-template-columns: 1fr  2fr
    - grid-template-rows: 1fr 1fr
  name:
    - font-weight: bold
    - font-size: 13px
    - color: white
    - align-self: middle
    - justify-self: start
    - padding-bottom: 4px
  img_cell:
    - justify-content: start
    - align-items: center
    - margin: none
  entity_picture:
    - height: 140px
    - width: 140px
    - border-radius: 100%
  custom_fields:
    temp:
      - align-self: start
      - justify-self: end
      - font-size: 24px
      - padding-bottom: 0px
    wilg:
      - align-self: start
      - justify-self: end
      - font-size: 24px
      - padding-bottom: 0px
custom_fields:
  temp: |
    [[[
      if (states['climate.natalka'].attributes.hvac_action === "heating" && states['climate.natalka'].state === "auto")
        return `<ha-icon
          icon="mdi:thermometer"
          style="width: 25px; height: 25px; color: white;">
          </ha-icon><span>${states['sensor.natalka_temperature'].state}Ā°C &nbsp  <ha-icon
          icon="mdi:autorenew"
          style="width: 25px; height: 25px; color: orange;">
          </ha-icon> <span>${states['climate.natalka'].attributes.temperature}Ā°C</span>`;
      if (states['climate.natalka'].attributes.hvac_action === "idle" && states['climate.natalka'].state === "auto")
        return `<ha-icon
          icon="mdi:thermometer"
          style="width: 25px; height: 25px; color: white;">
          </ha-icon><span>${states['sensor.natalka_temperature'].state}Ā°C &nbsp  <ha-icon
          icon="mdi:autorenew"
          style="width: 25px; height: 25px; color: silver;">
          </ha-icon> <span>${states['climate.natalka'].attributes.temperature}Ā°C</span>`;
      if (states['climate.natalka'].attributes.hvac_action === "heating" && states['climate.natalka'].state === "heat")
        return `<ha-icon
          icon="mdi:thermometer"
          style="width: 25px; height: 25px; color: white;">
          </ha-icon><span>${states['sensor.natalka_temperature'].state}Ā°C &nbsp  <ha-icon
          icon="mdi:fire"
          style="width: 25px; height: 25px; color: orange;">
          </ha-icon> <span>${states['climate.natalka'].attributes.temperature}Ā°C</span>`;
      if (states['climate.natalka'].attributes.hvac_action === "idle" && states['climate.natalka'].state === "heat")
        return `<ha-icon
          icon="mdi:thermometer"
          style="width: 25px; height: 25px; color: white;">
          </ha-icon><span>${states['sensor.natalka_temperature'].state}Ā°C &nbsp  <ha-icon
          icon="mdi:fire"
          style="width: 25px; height: 25px; color: silver;">
          </ha-icon> <span>${states['climate.natalka'].attributes.temperature}Ā°C</span>`;
     if (states['climate.natalka'].state === "off")
        return `<ha-icon
          icon="mdi:thermometer"
          style="width: 25px; height: 25px; color: white;">
          </ha-icon><span>${states['sensor.natalka_temperature'].state} Ā°C</span>`;
    else 
        return `<ha-icon
          icon="mdi:thermometer"
          style="width: 25px; height: 25px; color: white;">
          </ha-icon><span>${states['sensor.natalka_temperature'].state}Ā°C &nbsp  <ha-icon
          icon="mdi:thermostat"
          style="width: 25px; height: 25px; color: silver;">
          </ha-icon> <span>${states['climate.natalka'].attributes.temperature}Ā°C</span>`;
    ]]]
  wilg: |
    [[[
      return `<ha-icon
        icon="mdi:water-percent"
        style="width: 25px; height: 25px; color: lightblue;">
        </ha-icon><span>${states['sensor.natalka_humidity'].state} %</span>`
    ]]]
  ruch: |
    [[[
     if (states['binary_sensor.biuro'].state === "off")
        return `<ha-icon
          icon="mdi:walk"
          style="width: 25px; height: 25px; color: white;">
          </ha-icon><br>`; 
     if (states['binary_sensor.biuro'].state === "on")
        return `<ha-icon
          icon="mdi:walk"
          style="width: 25px; height: 25px; color: red;">
          </ha-icon><br><span>${states['sensor.natalka_temperature'].state} Ā°C</span>`; 
          
          ]]]
  icon2: |
    [[[
     if (states['binary_sensor.biuro'].state === "off")
        return `<ha-icon
          icon="mdi:fire"
          style="width: 25px; height: 25px; color: white;">
          </ha-icon><br>`; 
     if (states['binary_sensor.biuro'].state === "on")
        return `<ha-icon
          icon="mdi:walk"
          style="width: 25px; height: 25px; color: red;">
          </ha-icon><br><span>${states['sensor.natalka_temperature'].state} Ā°C</span>`; 
          
          ]]]

options is an array, to access an array in javascript you have to use array[index].
So for you entity.attributes.options[1]. Note that the first item has the index 0.

You have to define your grid properly (i.e. One new column per icon). Check the documentation on github, thereā€™s everything you need there about CSS grids.

I could have sworn I tried that buy maybe I made another mistake at the same time.
Thank you!

Does anyone know where I can move my custom:button-card templates to that will be accessible for all of my dashboards? Iā€™d prefer to have them outside of each dashboard so I donā€™t have to duplicate the code inside each one. I was hoping I could put them in customize_domain.yaml but I donā€™t think that would work.

You can put it in any new file and !include that file in your different dashboardsā€™ yaml. Obviously this only works if youā€™re using lovelace in yaml mode, there is no solution if youā€™re using the UI editor.

Eg, for me (in my ui-lovelace.yml):

button_card_templates:
  !include lovelace/square/templates/button_square.yaml
1 Like

Hi

Anyone knows why my background starts without the set background on all buttons, but when I press one of them it updates to the set color?


When I close the popup it resets to no background?

Seems like you are using stack-in-card or vertical-stack-in-card. If you are using stack thereā€™s an option to keep the background, check the documentation. If itā€™s vertical-stack-in-card thereā€™s no option for that AFAIK

1 Like

Hmm, tried to apply it to the overall stack-in-card. Doesnā€™t work
Can you see what Iā€™m doing wrong?

probably this will work instead of what you have currently:

                        type: custom:stack-in-card
                        mode: vertical
                        keep:
                          background: true
1 Like

Hi there,
nicely done card, I like the styleā€¦perhaps would you share the code for the button cards with the graph (humidity or Illumination)? I would like to achieve something like that in my configuration

thanks