Lovelace: Button card

[bschatzow (Bill Schatzow)]

@petro

nclude options act the same way as the viewbox

when you do the merged list one, each separate file is a viewbox.

If you just do a normal include, the whole file is the viewbox.

I have. What I was trying to do was was split my configuration in to several different files and folder locations to get it better organized. I was not understanding that I could not just cut and past my existing yaml file and save the code into a new file. Your explanation is far better (to me) than this document. I was having difficulties understanding how HA was using the new file. This created errors because of my spacing and hyphens.

Thanks for all your help. I am very close to “getting it” now. You referenced a document above that about object list and object. What document are you referencing?

[gnammyx (Gianmarco)]

Hello, I’m trying to use button card to show my Philips lights on the floorplan, with a sort of glow around like this (I’m working on it)

I want to reduce the toggle click area (tap action and hold action) only on the icon, and not in the glow area.
How I can achieve this? Thanks

[petro]

@bschatzow

What document are you referencing?

that’s just the button card documentation. But the normal documentation is similar.

heres a snip from the entities card

[bschatzow (Bill Schatzow)]

Got it. Thanks again.

[petro]

@gnammyx

How I can achieve this? Thanks

Don’t think you can. You’d have to play with margins and card size.

[gnammyx (Gianmarco)]

@petro

@gnammyx

How I can achieve this? Thanks

Don’t think you can. You’d have to play with margins and card size.

Your reply made me turn on an idea light: I solved the problem applying the glow at the card, and setting same size at the card and the glow, now the only clickable area is the icon.
Something like this:

template_name:
 size: 35px
 show_name: false
 styles:
  card:
    - height: 35px
    - width: 35px
	- background: transparent
	- border-radius: 100%
    - -webkit-box-shadow: 0px 0px 40px 20px var(--button-card-light-color)
	- box-shadow: 0px 0px 40px 20px var(—button-card-light-color)
  icon:
	- border-radius: 100%
	- height: 35px
	- width: 35px

thanks

[petro]

Yep, that’s about the best you can do unfortunately.

[jarrah]

Is it possible to include an editable input_datetime entity within a button by any chance?

I’m looking for a solution to display this editable entity in as small a space as possible, so I can neatly integrate it within my layout. So far it seems the only way is via an entities card, which adds too much gumf for my needs.

e.g. like this entities card but smaller and with no border or extra text:

Thanks.

input_datetime:
  test:
    name: Test
    has_date: false
    has_time: true
    initial: '21:00:00'

ui-lovelace.yaml
    - type: entities
      show_header_toggle: false
      entities:
        - entity: input_datetime.test

[AhmadK (akasma74)]

to do something similar (using input_number though) I user stack-in-card and inside I have Entities card that has button-cards to display labels and units and original input_text customised to have no icon and no label, here’s how it looks

Not sure it’s possible to just use your input_datetime in button-card directly - maybe you can do it by generating html code instead of plain text but I haven’t tried it.

[RomRider]

You should use card-mod for that, it’s going to be way easier. You’ll be able to hide what annoys you and resize the card easily.

[brucehvn (Bruce H)]

@RomRider

BTW I think I’ve understood what is overall wrong with what you do: You expect entity.state to be equal to the activity, but it is not! It is on or off .
This will correct the issue:

@RomRider Actually, I mentioned in one of my previous posts that as an attempt to see if state was an issue, I created two template sensors one for my upstairs hub and one for my downstairs hub. Those sensors use the current activity as the state, which is why the later code looks like that.

@RomRider

And +1 to what @petro is saying. I’m also using switches templates for that:

Do you or @petro have an example of a template switch for a remote button that’s just a press and release type (momentary)? Like the “OK” button shown in your screenshot. From what I can see of template switches, they are like normal switches meaning they are on or off. Whereas a remote button is on while you press it, then off when you release.

[RomRider]

@brucehvn

Do you or @petro have an example of a template switch for a remote button that’s just a press and release type (momentary)?

Remote buttons are not switches, it’s just a button without an entity:

- type: custom:button-card
  size: 80%
  aspect_ratio: 1/1
  icon: mdi:arrow-up-bold
  styles:
    card:
      - padding: 6px
    grid:
      - border-radius: 50%
      - box-shadow: var(--ha-card-box-shadow, 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2))
    entity_picture:
      - padding: 10px
      - width: 55%
      - filter: invert(100%)
    name:
      - font-weight: bold
  tap_action:
    action: call-service
    service: remote.send_command
    service_data:
      entity_id: remote.living_room
      device: 44119728
      command: DirectionUp
  hold_action:
    action: call-service
    service: remote.send_command
    repeat: 300
    service_data:
      entity_id: remote.living_room
      device: 44119728
      command: DirectionUp

[AhmadK (akasma74)]

@RomRider

Remote buttons are not switches, it’s just a button without an entity:

thanks for the example.
just wanted to ask - is the styles section generic here as for this particular button with no entity styling of name is irrelevant, isn’t it?

[jarrah]

It’s a good point and I should have mentioned I’ve tried using that and ended up with this so far:

            - type: entities
              show_header_toggle: false
              style: |
                ha-card {
                  padding: 0px;
                  border-radius: 0px;
                  height: 45px
                }
              entities:
                - entity: input_datetime.test

It’s good to know I’m on the right track so will google CSS options to see if I can discover what works.
Thanks!

[AhmadK (akasma74)]

@jarrah

It’s good to know I’m on the right track so will google CSS options to see if I can discover what works.

apart form that (actually, before doing that), you’ll need to investigate how your input_datetime is constructed in HTML and then find out what to change to get the desired result (as the element in question might be deep inside ha-card or there might be no ha-card visible at all as it’s inside shadow-root - all sorts of stuff).

[RomRider]

That will hide the text and the icon on the entity line:

  - entity: input_datetime.test
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
            display: none;
          }
          div.text-content {
            display: none;
          }

[pergola.fabio]

petro, one more question:

this is a valid template, it retuns a nice text for me

{{ as_timestamp(strptime(states.calendar.pergola_quintens_gmail_com.attributes["start_time"], '%Y-%m-%d %H:%M:%S')) | timestamp_custom('%A @ %H:%M') }} : {{ states.calendar.pergola_quintens_gmail_com.attributes["message"] }}

how can i use that the button name?

i tried :

#- name: "[[[return `${as_timestamp(strptime(states.calendar.pergola_quintens_gmail_com.attributes["start_time"], '%Y-%m-%d %H:%M:%S')) | timestamp_custom('%A @ %H:%M') }} : {{ states.calendar.pergola_quintens_gmail_com.attributes["message"] }`]]]"

also with some extra {{ }} , but always got syntax error?

[petro]

format it please, also one template is jinja, the other is js. You can’t copy one to the other. It’s completely different code.

[pergola.fabio]

yeah, trying too
edit: thats why, ok not gonna work then
created now some extra sensors for those, but i want them to be removed if not needed

[petro]

You’ll have to make a template sensor with that jinja and use that instead. The code can be performed in JS but it’ll be completely different.