Lovelace: Button card

mr_home-assitant · November 29, 2023, 9:52am

I’m setting up a dashboard, where the menu for switching to different views looks like this. Every button has an tap_action. That part is working great. Now i want to have the button(icon) of the “active” view getting a different color.
So it should maybe something as

state == ? than use: background-color: var(--yellow)

? How to achieve this?

type: custom:button-card
icon: mdi:sofa-single
aspect_ratio: 1/1
tap_action:
  action: navigate
  active: true
  name: Licht
  navigation_path: /da-house/living_room
styles:
  card:
    - border-radius: 24px
    - background-color: var(--blue)
  icon:
    - color: var(--black)

mr_home-assitant · November 29, 2023, 2:21pm

Look like I solved it myself using this code and variate that per button for the different views.

type: custom:button-card
icon: mdi:outdoor-lamp
aspect_ratio: 1/1
tap_action:
  action: navigate
  active: true
  name: Licht
  navigation_path: /da-house/outdoor
styles:
  card:
    - border-radius: 24px
    - background-color: |
        [[[
          if (variables.currentview == 'outdoor') {
            return 'var(--yellow)';
          } else
            return 'var(--blue)';
        ]]]    
  icon:
    - color: var(--black)
variables:
  currentview: |
    [[[ 
      return window.location.pathname.split('/').slice(-1);
    ]]]

FedeL16 · December 4, 2023, 5:21pm

hello im not able to configure button card template because if I write on my dashboard

“button_card_templates: !include_dir_merge_named buttom_templates/” I have an error: “unknown tag”.

i have created in root config another root called bottom_templates and then I have uploaded my file template.yaml.

Immagine 04-12-23 - 18.21

could you help me please?

pedolsky · December 4, 2023, 5:36pm

!include tags only work in storage or yaml mode.

Ildar_Gabdullin · December 4, 2023, 5:37pm

… and there is no any other 3rd mode))

Ildar_Gabdullin · December 4, 2023, 5:39pm

~~1. If you remove that 1st line with “include” - will your dashboard work?~~
~~2. (just in case) Do you have button-card installed?~~

Where ?
In storage mode (which you seem to use) ~~this line should be added in “raw yaml editor”.~~
Sorry - this should be done in “raw yaml editor”:

button_card_templates:
  template_xxx:
    ...
  template_yyy:
    ...
...
views:
...

i.e. you may use “!include_…” only in pure yaml mode.
In storage mode you need to paste all templates in “raw yaml editor”.

FedeL16 · December 4, 2023, 9:10pm

yes im using raw yaml editor. how can write my dashboard? I have a file with a template, I add this my new dashboard? and the card? I don’t manage to understand how set raw yaml editor.

FedeL16 · December 4, 2023, 9:23pm

thanks for your answer… im trying to create card for my Netatmo valve:

i don’t understand how set my raw yaml editor, because i have the sensors and card.yaml with template.yaml, but I need only the cards in my climate dashboard, I don’t want create a dedicate dashboard .

I hope to explain my idea

pedolsky · December 4, 2023, 9:27pm

You cannot use !include in the ‘normal’ UI, you have to copy your whole templates into raw editor. See Ildars example.

FedeL16 · December 4, 2023, 9:42pm

and if I want to create a single card and not the dashboard?

Ildar_Gabdullin · December 4, 2023, 9:55pm

You already have a dashboard (at least one created automatically on HA setup - it has one “view”).
You may add more “views” in UI to this dashboard.
On each “view” you may add/edit/delete cards - by using UI.

To add button-card-templates into some dashboard you need to open this dashboard, then select “Edit dashboard”:

Then select “raw editor”:

then add your one or several templates before the 1st line here:

this particularly:

Then on any view of this dashboard you may add a button-card with a any of these added templates.
What is a button-card-template, what is it’s purpose - read Docs.

FedeL16 · December 4, 2023, 10:00pm

great!! now I can add my button card

“type: custom:button-card
template_xxx:
etc”

thank you

Ildar_Gabdullin · December 4, 2023, 10:12pm

Note that you may use button-card w/o adding templates.
Templates are only needed if you need to reuse one button-card in many places.

FedeL16 · December 4, 2023, 10:15pm

I tried to create a single card, anyway I don’t be able to reply the card, because I know very well mushroom card but not button card, so if I have template and card I don’t manage to use together in a single card

Ildar_Gabdullin · December 4, 2023, 10:23pm

What?

Unclear.

pedolsky · December 4, 2023, 10:37pm

Post your code, not pictures.

Mariusthvdb · December 5, 2023, 2:16pm

because I couldnt find a post on setting a live internet image as background to a button-card, please let me post this as some reference.

a local image is straightforward:

styles:
  card:
#     - background: rgb(223,236,247) #replaced by the image 
    - background: >
        [[[ return "url('/local/season/autumn.png')"; ]]]
    - background-size: cover

the internet image: https://cdn.knmi.nl/knmi/map/current/weather/warning/waarschuwing_land_0_new.gif

can be set as entity_picture using:

show_entity_picture: true
size: 80%
entity_picture: https://cdn.knmi.nl/knmi/map/current/weather/warning/waarschuwing_land_0_new.gif

use it as a background image, so we can add some overlaying texts and notifications etc with:

styles:
  card:
    #     - background: rgb(223,236,247)
    - background: >
        [[[ return "url('https://cdn.knmi.nl/knmi/map/current/weather/warning/waarschuwing_land_0_new.gif')"; ]]]
    - background-size: cover

It’s not in the documentation so fixing it here for others that might be able to use it

svenschuldt · December 11, 2023, 5:29pm

Hi,

I am restructuring my complete Home Assistant setup - specifically splitting files into subfiles, as I am loosing an overview with these huge code-files and their content. I am using buttons-card templates in order to minimize the coding effort and to maximise the standardisation when it comes to design and look.
However, I am having massive problems right form the start and I need help, please.
My directory structure is as follows:

/config
- ui-lovelace.yaml
- configuration.yaml
- button-card-template.yaml
- /integrations
  - lovelace.yaml
- /lovelace
  - /views
    - living-room.yaml
  - /button-card-templates
    - button-card-templates.yaml

In ui-lovelace.yaml I have following code:

title: My Home
button-card-templates: !include /config/lovelace/button-card-templates/button-card-templates.yaml
views:
  - !include lovelace/views/living-room.yaml

In button-card-templates.yaml I have following code:

title-header:
  styles:
    card:
      - font-family: Metropolis-Regular.otf
      - background: none
      - padding: 16px 0
      - '--mdc-ripple-press-opacity': 0
    name:
      - font-size: 32px
      - color: var(--contrast20)

Last but not least, in living-room.yaml the code is as follows:

 - type: custom:button-card
   template: title-header
   name: Living Room

But I constantly get the error message

Button-card-template “title-header” is missing

.

I am certainly blind but I think I have everything referenced.

What am I missing?

Thanks a ton!

OptimalHome · December 14, 2023, 5:29am

I’m wondering if anyone has suggestions how I might get calendar events into a custom button card. A basic example using 2023.12:

type: custom:button-card
show_state: true
show_name: false
show_icon: false
state_display: |
  [[[
    var results = hass.callService(
      'calendar', 
      'get_events', 
      { 
        entity_id: 'calendar.birthdays',
        duration: "72:00:00"
      },
      {
        entity_id: ['calendar.birthdays'],
      });
    console.log(results);
  ]]]

Leads to this error: "Service call requires responses but caller did not ask for responses"

And some searching leads me to find that HA recently added response support to WebService in this PR which made it to 2023.12.

But I also see in connection-mixin.ts that the javascript API doesn’t support setting the return response field.

Is there a way I can make this work or is this a Feature Request?

Expanize · December 20, 2023, 9:12am

Hi Everyone!

I’m a bit new to YAML and still figuring it out.
I’m trying to set a background-color with rgb attributes of current light
AFAIK, background-color can recieve rgb in this format only:

background-color: rgb(255,0,0)

i try something like this:

background-color: rgb( {{ 
states.light.somelight.attributes.rgb_color[0] | int }} , {{ 
states.light.somelight.attributes.rgb_color[1] | int }} , {{ 
states.light.somelight.attributes.rgb_color[2] | int }} )

but with no success…
can anyone point me to a solution? ive been searching non-stop with no success
AFAIK i need to be in a JS template [[[ return ...]]] style but with attributes inside.
also important to mention that the background-color that I’m trying to change is for a notification inside the button and the background of the button itself.