Lovelace: Button card

I don’t think so. I believe this is what causes most of the confusion to new users. On the screen it says edit as yaml. It doesn’t say edit as a top level or any other level. I reading it think yaml is yaml. I think your map will be helpful.
Why isn’t the hyphen needed on the manual card?
If a document could be created showing where the contents are placed depending on where and how a user creates the contents I believe this would help a lot of users.

You need to think of these things as objects. Yaml is yaml. Yaml describes objects.

Because your only looking at the single card (object)! You aren’t looking at a collection (list) of cards (object).

This simple question can always answer whether you need the hyphen or not:

Am I putting in more than 1 item (object)? Yes=hyphen, No=No hyphen.

1 Like

If I edit in the raw editor you need a hyphen. One item.

Yes, and you have 1 item. A single view lovelace configuration. Which contains a collection of views. Each view contains a collection of cards.

WHen you create a manual card, you’re creating a single card. Not a view. Not the whole configuration.

The whole configuration needs a collection of views. Each new view needs the hypen.

The views need cards. Each card needs the hyphen.

When you are inside a view and add a manual card, it knows what view you are in and it knows you are adding a single card. The hyphen is not needed.

1 Like

I guess for long time users this concept is very clear. To me until you just explained it just now I had no idea what was going on. I was told that the hyphen was implied, etc. Anyway, I have tried to move as much as possible to yaml only and not use any other editor. It least until I am much more proficient I can enter the yaml code with dic, list etc and understand how the spacing should work.
Is there a similar explanation to each of the !include options?

Think of it as a viewbox…

Hyphen is still there… you just can’t see it cause you’re zoomed in on the object.

3 Likes

This is a perfect example. I now see also the spacing is taken care of for you. This is why I was having difficulties switching between the raw editor and the manual card creation. I had no idea what HA was doing. Maybe you can attach this to the official docs so others can gain from your knowledge?

Include 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.

These are the options:

  1. !include_dir_list
  2. !include_dir_named
  3. !include_dir_merge_list
  4. !include_dir_merge_named
    I think (again I could be wrong) that this is slightly different than your answer?

Have you looked at the examples here?

They cover each one pretty well, showing you what each look like before and after the splitting.

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?

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)

image

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

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

heres a snip from the entities card

Got it. Thanks again.

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

1 Like

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

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

1 Like

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. :slight_smile:

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

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

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
Screen Shot 2020-04-01 at 22.42.19 (2)
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.

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.