Lovelace: Button card

fich · October 31, 2023, 12:52pm

hm, ease-in-out might not solve the problem…

But if you look in his third video, advanced animation I think you might be able to fix something.

I use it myself, but then when my heater is on, just slightly turning the icon to right-left in different angels so it appears to be a moving flame, at least with fantasy

So I guess with the right angels at the right percent you could make it speed up.

or maybe it’s possible to do some sort of ramp up in time, no clue right away how to code it, but something like

first:
'rotating 0.5s '
then:
'rotating 1s'
then:
'rotating 1.5s'

Since I look through his videos quite often right now, it seems, I will let you know if I find an easier solution to the problem.
Let me know if you find one first:

Krivatri · November 1, 2023, 7:39am

thank you for spending time on this, much appreciated!
I did some playing around with different animation settings and found out that when not using the option ‘infinite’ , the animation should work only once, but it does not, it just stops when changing from infinite to not infinite.
so I guess there is an issue with the animation itself and not the coding to start with?
I’m not an expert, hence my original question to bypass this issue, just being curious and trying to learn new stuff.

fich · November 1, 2023, 2:01pm

well, I have gotten a lot of help from others, you don’t have to scroll that far up in the thread to find an example, and that turned out to be me fotgotten to reload…

So, to share my mental list to check when things don’t work:

is it something that needs reloading? Sometimes you have to refresh the web page (ctrl+F5) to clear the cashe.
are everything indented as it should? semicolons missing? any other stupid typing misstake, trust me, they are easy to miss…
read the docs… yepp, easy to miss that one too unfortunatley it is not that easy to find answers here on the forum, sometimes it feels like you are spending more time reading than coding…

och, and checked what it says here /in general an excellent side for references, the hard thing if you are new to this is to adapt it to homeassistan)

so maybe ease-in is an option.

w3school

The animation-timing-function property specifies the speed curve of the animation.

The animation-timing-function property can have the following values:

ease - Specifies an animation with a slow start, then fast, then end slowly (this is default)
linear - Specifies an animation with the same speed from start to end
ease-in - Specifies an animation with a slow start
ease-out - Specifies an animation with a slow end
ease-in-out - Specifies an animation with a slow start and end
cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function

one day it will be you turn to help someone.

rwzdoorn · November 9, 2023, 7:55pm

Hi,

I’m kind of new to creating dashboards in Home Assistant, specially with the custom:button-card. As I am a bootstrap geek, I am using the Bootstrap grid card option and it works already solid.

Now I’m facing an easy issue: I want to have a button card with an icon always positioned to the left and next to it a label. Although my dashboard is pretty responsive, when I change views my icon currently is positioning in the center, same for my label. The reason I want to have it always on the same position is because I show a notification icon to indicate if a device is online or offline (like my NAS in the following example)

I have this code:

    - type: custom:button-card
      class: col-6
      color_type: icon
      entity: button.nas_shutdown
      layout: icon_label
      label: |
        [[[
          return 'NAS';
        ]]]                      
      icon: mdi:nas
      show_label: true
      show_name: false
      styles:
        card:
          - height: 60px
        icon:
          - width: 32px
          - margin-left: 10px
          - justify-self: start
      custom_fields:
        notification: |
          [[[
            if (entity.state != 'Unavailable'){
              return `
                <div
                  style="
                    position: absolute;
                    top: 14px;
                    left: 32px;
                    width: 14px;
                    height: 14px;
                    background-color: green;
                    border-radius: 50%;
                  "
                >
                </div>
              `;
            } else {
              return '';
            }
          ]]]
      card_mod:
        style: |
          ha-card {
            border-radius: 14px; 
            border: 0px;
          }

So, how can I get the icon always on the left and a label next to it horizontally?

Thanks in advance!

Ricardo_b · November 18, 2023, 1:53pm

Hi,

i am trying to understand the grid a little bit better so I can improve my custom buttons. I have one question where I couldn’t find an answer for. Is it possible to make a grid this way? I am just curious if it is possible

  styles:
    grid:
      - grid-template-areas: item1 item3 item2
      - grid-template-columns: min-content min-content 
      - grid-template-rows: min-content min-content min-content 
      - column-gap: "50px"

      item1:
        grid-row-start: 1 
        grid-row-end: 1 
        grid-column-start: 1
        grid-column-end: 1 
        

      item2:
        grid-row-start: 2
        grid-row-end: 2
        grid-column-start: 1
        grid-column-end: 1

      item3:
        grid-row-start: 3 
        grid-row-end: 3
        grid-column-start: 1
        grid-column-end: 1

aidanmc1998 · November 22, 2023, 1:00am

Hi there,

I apologise if this has already been asked, but I am in the process of coding up a button card and I am wanting it so that the background color of the image cell is dictated by the colour of the icon/entity, however I have very limited experience with coding and I can not figure out the correct syntax for the life of me. Currently I just have the colour set to a preset rgba value, so any helpe is appreciated.

type: custom:button-card
show_state: true
show_icon: true
entity: light.aidan_s_light
color: auto
styles:
  grid:
    - grid-template-areas: '"i n" "i s"'
    - grid-template-columns: 12% 75%
    - grid-template-rows: auto
  img_cell:
    - background-color: rgba(255,235,59,0.2)
    - border-radius: 50%
    - height: 42px
    - width: 42px
    - justify-self: start
  name:
    - font-family: assistant
    - font-weight: bold
    - font-size: 14px
    - color: rgb(242, 242, 242)
    - justify-self: start
  card:
    - title: Red
    - flex-direction: column
    - padding: 12px
  state:
    - font-family: assistant
    - font-size: 12px
    - font-weight: bolder
    - color: rgb(166, 166, 166)
    - justify-self: start
state:
  - value: 'on'
    styles:
      card:
        - background-color: '#303033'
  - value: 'off'
    styles:
      card:
        - background-color: '#202124'
      img_cell:
        - background-color: rgba(111,111,111,0.2)
      icon:
        - color: rgba(111,111,111,1)

aidanmc1998 · November 22, 2023, 4:14am

So it turns out that if I had of read the documentation a tad more thoroughly I would have come across the note that says light entity colors are referred to in the following way:

var(--button-card-light-color)

This good to know going forward, however my next challenge going forward is to be able to apply a alpha channel to the color. I was hoping the following would work:

rgba(var(---button-card-light-color),0.2)

however I am unable to get this or any other variation to work. I also cant just slap an opacity on the cell because then this will impact the visibility of the icon within it. Does anyone have any thoughts?

pedolsky · November 22, 2023, 6:36am


    - background: |
        [[[
           return 'rgba(' + entity?.attributes.rgb_color + ',.2)';
        ]]]

The question mark prevents card errors in case the entity becomes unavailable.

aidanmc1998 · November 22, 2023, 9:07am

You’re an absolute legend, that worked flawlessly.

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.