Please help me understand how to use Cards, spaces, ”-”, and so on

[crazytok (Thomas)]

I really dont understand this yaml Coding!! Im a total noob at this and I have tried copying/pasting, trials and error… sometimes it works, sometimes it dont. More often it dont…

Sometimes I coding yaml directly in lovelace card, sometimes in raw editor… dont really understand when to use what.

Also, sometimes there is spaces sometimes its not, sometimes there is ”-” sometimes its not!!

Sometimes it says ”cards:” sometimes it says ”card:”…

Sometimes I do cut and paste, in my beleive that it would just works as it would be a correct code. But nope… still need to truggle with spaces to get it working!

Sometimes it says ”type:” sometimes it says ”- type:”, sometimes it says ”cards:” sometimes it says ”- cards:”…!!..!!

What the fu****

Fine, doing a one card only configuration is often not a big problem. But when using Many cards together, and maybe using vertical and/or horisontal stacks I really gets lost and have no clue what im doing!!

Can someone please help me out on this, please explain when to use what!! And why!
Also, should I use any kind of text editor instead of raw editor as it is impossible to get all the spaces correctly!?

[tom_l]

@crazytok

Sometimes I coding yaml directly in lovelace card, sometimes in raw editor… dont really understand when to use what.

Better to use a card if you can. Less chance of catastrophic effects if you mess something up.

@crazytok

Sometimes it says ”type:” sometimes it says ”- type:”, sometimes it says ”cards:” sometimes it says ”- cards:”…!!..!!

“-” is used to denote a list of items. If there is only one item it is not needed.

e.g. in this example (of a UI editor card) there is only one horizontal-stack but many entities cards:

type: Horizontal-stack
cards: 
  - type: entities
    etc: ...
  - type: entities
    etc: ...
  - type: entities
    etc: ...

It does not matter which key: value pair of the card the “-” list indicator goes in front of. e.g. this is the same as the example above:

type: Horizontal-stack
cards: 
  - etc: ...
    type: entities
  - etc: ...
    type: entities
  - etc: ...
    type: entities

Spacing is very important.

The top level card type will never have “-” in front of it if using the UI card input method. It will if viewing in the raw editor as you are looking at a list of cards in a view. Not a single card.
e.g. this is what the first example would look like in the RAW editor:

views:
  - title: first_view
    cards:
      - type: Horizontal-stack 
        cards: 
          - type: entities
            etc: ...
          - type: entities
            etc: ...
          - type: entities
            etc: ...
      - type: another-card
        cards: 
  - title: second_view
    cards:

I have left a lot of key: value pairs out for clarity.

[finity]

try starting out with this as a starter for understanding YAML:

http://thomasloven.com/blog/2018/08/YAML-For-Nonprogrammers/

As for “card:” or “cards:” the distinction lies in the fact of whether the underlying configuration supports multiple cards (hence “cards:” is used) or a single card (and that is when “card:” is used).

[nickrout]

There is a bit of info here (although I seem to recall the page used to be more helpful!)

YAML

[crazytok (Thomas)]

Thank you everyone for your help!

I think I understand a little bit better now, althought its quite difficult when there is many cards and horisontal/vertical stacks, and entities together!

Like this one, I want to make a layout that have this structure. Left column (red) would be fixed and on all my tabs. But middle and right column would be more dynamic and on all my tabs with various info.

How do I build this. Would it be cards, in cards, in cards…

Or cards in vertical stacks, in horisontal stacks?

My guess is that it would be SOMETHING like this:

    title: Home
    id: home
    panel: true
    cards:
      - type: horizontal-stack #creates a horisontal stack
        cards:
          - type: vertical-stack #within horisontal stack I create vertical stack 1
            cards: 
              - type: entity-button
                entity: binary_sensor.ubiquiti_ap_villa
              - type: entity-button
                entity: binary_sensor.ubiquiti_ap_villa
              - type: entity-button
                entity: binary_sensor.ubiquiti_ap_villa
          - type: vertical-stack #within horisontal stack I create vertical stack 2
            cards:
              - type: entity-button
                entity: binary_sensor.ubiquiti_ap_villa
              - type: entity-button
                entity: binary_sensor.ubiquiti_ap_villa
          - type: vertical-stack #within horisontal stack I create vertical stack 3
            cards:
              - type: entity-button
                entity: binary_sensor.ubiquiti_ap_villa
              - type: entity-button
                entity: binary_sensor.ubiquiti_ap_villa

But I dont manage to get the cards work correctly. Althought it creates my horisontal and vertical stacks, and also my cards… my cards is not editable like a “real” cards?

Look at this, this is what I get:

But I dont get this “edit card” function:

Why?

Also, Is this the right way to do what I want to accomplish?