Can you help a newbie understand the YAML structure used here?

[pqpxo]

Can you help a newbie understand the YAML structure used here?

[pqpxo]

Hi there!

Which bit of YAML are you looking at in particular?

I must admit that I haven't updated most of GitHub in a while.

Saying that the structure would be the same. I've been creating my cards/dashboards the lazy way via the Web UI instead of using YAML mode so some code format/structure might be a tad bit different.

[sddgit]

Thanks for the reply. I’m just looking at the dashboards. Yours have the structure in the first block above. Mine have the second. I was wondering what this achieves, and also how you manage to keep things in nice, structured columns.

[shyne99]

It is because you are seeing the structure of the entire dashboard.

For example in this :

    cards:
      - cards:
.
.
          -cards:

The first cards, is of type vertical-stack, and list all the cards in the vertical stack. The second is a horizontal stack inside the vertical one, and the last should be the card itself.

The cards all have a type attribute, define in the same indentation as the array declaration. If this confuses you, take a break and read more about YAML structure and the Lovelace documentation.

[sddgit]

Mine looks like this:

title: Pool
views:
  - path: default_view
    title: Home
    badges: []
    cards:
      - type: custom:stack-in-card
        cards:
          - type: grid
            title: Metrics
            cards:
              - type: gauge
                entity: sensor.orp_no_unit
                needle: true
                severity:
                  green: 650
                  yellow: 750
                  red: 770
                name: ORP
                max: 800
                min: 600

Just couldn’t figure out why yours has - cards:. but no big deal!

[pqpxo]

Mine looks like this:

title: Pool
views:
  - path: default_view
    title: Home
    badges: []
    cards:
      - type: custom:stack-in-card
        cards:
          - type: grid
            title: Metrics
            cards:
              - type: gauge
                entity: sensor.orp_no_unit
                needle: true
                severity:
                  green: 650
                  yellow: 750
                  red: 770
                name: ORP
                max: 800
                min: 600

Just couldn’t figure out why yours has - cards:. but no big deal!

Yeh apologies I've not included the 'entire' YAML code via 'Raw configuration editor' which would of included the

title: xxx
views:
 ... 

These YAML snippets are just the 'vertical-card's as I build each 'column' under 1 single 'vertical-card' card on each dashboard

I've gone the lazy route and do all my building/creating via the Web UI

[sddgit]

Thanks. So each column is a vertical card, maybe with horizontal cards within them. Do you just let the vertical cards “flow” across the screen however they’d like? What happens when these layouts are shown on a small iPhone screen?

[pqpxo]

Thanks. So each column is a vertical card, maybe with horizontal cards within them. Do you just let the vertical cards “flow” across the screen however they’d like? What happens when these layouts are shown on a small iPhone screen?

Indeed!

I use a single 'vertical-stack' to make the column (on a blank dashboard, setup via UI mode) and then use 'horizontal-stack' cards within for each row.

I've got one or two other dashboards where I have 3-4 columns which sit side by side on Desktop view and underneath each other via Mobile view.

At the moment I've focusing on redesigning my dashboards purely for mobile view so there a some formatting odities here and there when viewing via Desktop but nothing major.

[sddgit]

Thank you very much for the pointers. Getting the layouts right can be challenging at times! Is there a way to have different layouts for mobile vs desktop? If not, I think that would be handy - automatically use one layout for desktop, and another for mobile.

[Takroemin]

I love the dashboard!! Kudos for the work. Some questions if you dont mind :

• In the header you uses input_select.light_menu_select but in the menu input_select.chr_light_menu_select, why is that ?
• Would you mind sharing the input_select for the dashboard so i can better wrap my head around the concept and what belongs to which input_select ?
• Beer on the way if i get this working !! 👍

[mariusvanderwerff]

Hi there,

I really really love your dashboard but I don't know where to start, can you point me into the right direction? How do I create the mobile dashboard inside HA? I will edit the files for my needs thats not a problem I just need a start

[pqpxo]

I love the dashboard!! Kudos for the work. Some questions if you dont mind :

* In the header you uses input_select.light_menu_select but in the menu input_select.chr_light_menu_select, why is that ?

* Would you mind sharing the input_select for the dashboard so i can better wrap my head around the concept and what belongs to which input_select ?

* Beer on the way if i get this working !! 👍

Hi there!

So input_select.light_menu_select and input_select.chr_light_menu_select are the same. The ".chr_" part is simply the name (codename) I intially gave the the input_select when building the dashboard.

Here is an example of the input_select:

input_select:
  chr_light_menu_select:
    name: 'Light Menu Select'
    options:
      - Overview
      - Ground
      - First
      - Second
    initial: Overview
    icon: mdi:lamp

[pqpxo]

Hi there,

I really really love your dashboard but I don't know where to start, can you point me into the right direction? How do I create the mobile dashboard inside HA? I will edit the files for my needs thats not a problem I just need a start

Hi there!

I've simply created an new Lovelace dashboard soley to view on a mobile device which means everything is tailored for a mobile viewing when it comes to styling, formatting etc.