Lovelace: Button card

[shibby (Chris)]

Hello Community,

I am stuck. I would like to embed the mm2-clock.carc (GitHub - shbatm/mm2-clock-card: A Simple Digital/Analog Clock Card for Home Assistant Lovelace) into a a custom button-card.

I´ve tried so many different versions of the code but I cannot seem to find the right way. Could some one point me in the right direction? Maybe there is an even simpler solution which by now I haven´t found.

My main dashboard shows only active devices in my home, all in their own button-card field. all fields are the same size (280x170px).
I would like to show a clock (hour:minute AND counting seconds) plus date and shown weekday.

This is the code generating the date and time:

  - platform: time_date
    display_options:
      - "time"
      - "date"
  - platform: template
    sensors:
      startseitenuhr_zeit_und_tag:
        value_template: >
          {% set x = states('sensor.time') %}
          {% set tag = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"] %}
          {{ tag[now().isoweekday()] + now().strftime(", %H:%M")}}
        friendly_name: "Aktuelle Zeit"

I will spare you my button-card code :).

Please tell me if my wish is doable.

Thank you.
Greetings from Austria

Chris

EDIT: Typos…

[KaherdinTristan (Andrew)]

Could someone help me with a extremely simple template that just takes the current temperature from a entity, and places it in the middle of a custom card button, please.

(I know. And I’ve tried to Google and read up on it, but it’s kinda messy with the yaml code and stuff).

Best regards

[Kabala (Cata)]

Hi everyone,

is it possible to define or call up the attributes via state?
I want to change the icon when the roller blind is at 50%.
Or how can I best implement this?

[tben (Thomas)]

Hi everyone, I had a lot of fun with this component. If you want to see more details here is my post :

Lovelace UI • Minimalist

My Home Assistant Hi, my name is Thomas and I’m a UX designer and have been using Home Assistant for 4 years. After showing a little bit of my interface on Bokub’s post, I had several requests for more details on my configuration. I drew a lot of inspiration from 7ahang’s work that I found on Behance. [HA] Interface composition I use my phone most of the time to access the interface. I chose to use only one column to facilitate maintenance between the different devices. I have bee…

[Mariusthvdb (Marius)]

because of `Thomas’ post above, I re-visited my search to find a way for a back button…

  - type: custom:button-card
    template: button_shortcut_menu
    tooltip: Back
    icon: mdi:arrow-left
    tap_action:
      action: navigate
      navigation_path: history.back(-1)

to give you an idea, and "Go Back" Button | CSS-Tricks being the source for that.

looks fine:

but of course it is not functional… though at first click it did take me to buy homepage, so I cheered. On closer inspection it does that wherever I am, and does so because it simply isnt correct syntax…

@RomRider , would you know of a way to accomplish this ‘back’-button, truly navigating the Lovelace browser history? How can we implement the ‘history.back(-1)’

Would hope it to be doable, since entering it in the inspector command line does exactly that, go back in history 1 step

[Mariusthvdb (Marius)]

never noticed before, probably because I have my border-radius set to 0 by default, but on these new ‘chips’ I notice a squared pop up background border upon tap:

can I make those use the same border-radius as the chip itself? what would be the correct css option for that please? this is my chip config:

  styles:
    img_cell:
      - width: 24px
    card:
      - border-radius: 30px
      - box-shadow: var(--ha-card-box-shadow)
      - height: 36px
      - width: auto
      - padding-left: 6px
      - padding-right: 6px
    grid:
      - grid-template-areas: '"l"'
    label:
      - justify-self: center
      - padding: 0px 6px
      - font-weight: bold
      - font-size: 14px

[petro]

Edit the image with gimp or photoshop and remove the background and make it transparent. Then you won’t need to manipulate the image.

[petro]

@shibby

I would like to show a clock (hour:minute AND counting seconds) plus date and shown weekday.

This is not possible. Nothing will count seconds in the UI.

[petro]

@KaherdinTristan

Could someone help me with a extremely simple template that just takes the current temperature from a entity, and places it in the middle of a custom card button, please.

you don’t need a template. Just follow the docs and use a temperature sensor as the entity for the card. It will display the state without any crazy template. The regular built in button card does this too.

[RobertusIT]

please can you explain how to have this visualization? copy your code ?

I’m trying to have this, without success.

[jimz011 (Jim)]

Well that code is over 2 years old, so that will probably no longer work. And I have to be honest, I wouldn’t really know how I did that. However you can check out my current project and install that instead.

You can find it here: GitHub - jimz011/homekit-infused: Homekit Infused v4.0.0rc

[swifty]

Anyone know if the button card can be used to launch the ‘media browser’ popup dialog for HA ?
(I’m talking about the one that you see if you click the browse button on the spotify player lovelace card for example)

I’ve been searching a while, but have not managed to find out if it’s possible to open this popup dialog directly… i’d like to get the custom button on my dashboard to browse the spotify source.

[ASNNetworks]

Hi, anyone know a way to create a color ‘dot’ that matches the actual color of a light entity? I have seen something like this, but I can’t find it anywhere. Kinda like this:

    custom_fields:
      notification:
        - background-color: >
            [[[
              if (states['input_number.test'].state == 0)
                return "green";
              return "red";
            ]]]

But then it should return the color of the entity it’s put in (using button-card templates). Anyone has an idea?

[Mariusthvdb (Marius)]

use var(--button-card-light-color) or --button-card-light-color-no-temperature ?

GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant - Light entity color variable

[ASNNetworks]

Thanks! Can’t believe I totally missed that basic function.

[ASNNetworks]

So this is strange. Perhaps I’m missing something, or just doesn’t work like I intend to. I have a simple button card with a grid style that only shows the name. I defined that the name should always start from left with justify-self: start. This all works great and has no issues. However, if I use a template in the name field WITH an icon inside that template, it’s centered. For instance:

Is aligned left (working as intended):

name: 'Flows'

name: '[[[ return `Flows` ]]]'

Is centered (not working as intended):

name: '[[[ return `Flows <ha-icon icon="mdi:rotate-right" style=" color: var(--text-color); height: 7%; width: 7%"></ha-icon> ` ]]]'

So I thought, well maybe because I now define a style in the template, it’s back at default. So then I added justify-self: start to the template style, but same result. I also tried defining the icon style under styles (eventhough icon is not even in the grid), but it’s always centered.

Can someone help me align the name to the left WITH an icon in the template?

[pedolsky]

You can combine

styles:
  name:
    - justify-self: start
    - text-align: left

or just use

styles:
  name:
    - text-align: left

[ASNNetworks]

Thank you, this fixes it! Do you know why suddenly it needs text-align as soon as an icon comes into the template? Just curious as to why it suddenly changes its behaviour.

[pedolsky]

By using templates the item (= name „Flow“) is packed in a separate box; justify-self refers to this box.

[ASNNetworks]

Is it possible to use a template (for styles in this case) that checks current state vs previous state? Like:

if entity.state < previous entity.state return X

Basically I want the color of the name to be green when the current state is higher then previous state and red when it’s lower.