Views vs Dashboards - What am I missing?

Configuration Frontend
1

Okay, I was eagerly anticipating 0.107 and the ability to create dashboards (accessability) according to user level.
I’ve played with the functionality and I’m clearly missing something.

Basically it seems that I can have views OR dashboards NOT both ??? (please prove me wrong !)

I have 14 views (tabs) and I split functionality across those views to give general fuctionality in different areas but I also have some views that I prefer to ‘hide’ from general users. (z-wave nodes, timers, enables, entities I just want to hide etc.)

Dashboards require a file (per dashboard) in the config folder (why can’t I put them in a ‘dashboard’ sub_folder ? or ALL the lovelace files in a ‘lovelace’ sub-folder ? )

So far the only way I see this working is to replace the top row (tabs/views) with the side column (of tabs/dashboards) with the associated clutter in my config folder

I see that !include 's of lovelace still works so I can either break the yaml down into cards or ‘views’ and basically call the views in at dashboard level.

Is there a wrinkle that I’m just too dumb to see ?

2

I’ve split my tabs into two dashboards. One dashboard is for all users and one is for administrators(i.e me) which is hidden. You could make a different dashboard per device-type with finely tuned layouts for a phone v. tablet v. computer v. tv which might be nice but I’m happy with the flowed layout I have on my various machines.

3

Micque,
So everything on your HA has to be displayed on just two pages ?
Doesn’t that involve a lot of scrolling ?

4

I haven’t updated yet but I’m pretty sure you can still have multiple views in a dashboard.

5

Each dashboard can have as many views as you like. I have dashboards for landscape devices, such as pcs and portrait devices, phones. These main two are built in yaml mode. I use layout-card at the top level of each view. Cards are created in include files, then I can include them in separate views, within the layout card. Easy to make separate views without duplicating all the config.

I have another auto generated view, and a final one that I use if I want to quickly play with the gui editor. These are for admins only,

You add views to each dashboard exactly as you did before.

1 Like
6

and then you make this or that default on a specific device, is that correct? haven’t tried it yet.

is layout-card to get more predictable layout?
when you say created, do you mean each card is in a separate file and you can easily combine them by adding - !include to your view file?

what’s your main lovelace mode btw?
mine is storage and it does not let me add storage dashboard (tried to do it manually) but yaml dashboards can be added fine.

7

@tom_l, yes I was under the same impression

@eggman, that’s eggsactly (pun intended) what I’m after and what I tried to create.
I’m fine with the includes (either at card or view level) but the structures between I just don’t have a handle on.

I came to lovelace near its early implementation and so always just coded everything in yaml by hand, so I don’t know about ‘auto generated’ or ‘gui editor’ views

Do you have a git-hub repo or can you share a basic structure - configuration.yaml - dash1, dash2, an include view, a couple of include cards - - - just to get my head round this.?

Thanks

8

I don’t have my config online but here’s some key bits -

configuration.yaml - enables storage mode as default with two specific yaml dashboards

frontend:
  themes: !include_dir_merge_named ../themes/

lovelace_gen:

lovelace:
  mode: storage
  dashboards:
    db-mobile:
      mode: yaml
      title: Mobile
      icon: mdi:cellphone-android
      show_in_sidebar: true
      filename: db_mobile.yaml
    db-pc:
      mode: yaml
      title: PC
      icon: mdi:laptop-chromebook
      show_in_sidebar: true
      filename: db_pc.yaml

db_pc.yaml - I keep this small and put each view in a separate include file


preload_cards:
  - markdown

views: # split these out to make the files more manageable
  - !include viewfiles/view_pc_media.yaml
  - !include viewfiles/view_pc_broadcast.yaml
  - !include viewfiles/view_pc_whereabouts.yaml
  - !include viewfiles/view_pc_controls.yaml

view_pc_whereabouts.yaml - uses layout-card, so I can put things wherever I like, I also use lovelace_gen so I can reuse card configurations with different parameters.

# lovelace_gen

title: Whereabouts
path: presence
icon: mdi:map-search-outline
panel: true

cards:
  - type: custom:layout-card
    layout: grid
    gridrows: 45% 45% auto
    gridcols: 25% 25% 25% 25%
    cards:

      - !include 
        - card_person.yaml
        - person: person.daniel
          tracker: device_tracker.google_maps_100052762951237766231
          pronoun: his
          row: 1 / 2
          col: 1 / 2

      - !include 
        - card_person.yaml
        - person: person.claire
          tracker: device_tracker.google_maps_105978805128046889243
          pronoun: her
          row: 2 / 3
          col: 1 / 2
      
      - !include 
        - card_person.yaml
        - person: person.april
          tracker: device_tracker.google_maps_102322051749378610106
          pronoun: her
          row: 1 / 2
          col: 4 / 5

      - !include 
        - card_person.yaml
        - person: person.ryan
          tracker: device_tracker.google_maps_107837278918296041603
          pronoun: his
          row: 2 / 3
          col: 4 / 5

      - !include 
        - card_map.yaml
        - row: 1 / 3
          col: 2 / 4

      - !include
        - card_homer_map.yaml
        - row: 2 / 3
          col: 3 / 4

card_person.yaml - an actual card - most cards are a lot simpler than this

# lovelace_gen

type: custom:stack-in-card
title: Where's {{ person.split('.')[1]|capitalize }}?
gridrow: {{ row }}
gridcol: {{ col }}
style: 'ha-card { height: 100%; }'

cards:
  - type: picture-elements
    image: /local/images/medium-empty.png
    elements:
      - type: image
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            entity_id: input_select.map_shows
            option: {{ person }}
        entity: {{ person }}
        image: /local/images/{{ person.split('.')[1] }}.png
        style: 
          top: 50%
          left: 10%
          width: 20%

      - type: custom:hui-markdown-card
        content: >
          {% raw %}
          Last seen {{ relative_time(state_attr('{% endraw %}{{ tracker }}{% raw%}', 'last_seen')) }} ago, 
          {% if states( '{% endraw %}{{ person }}{% raw%}' ) == 'not_home' %} 
          {{ distance( '{% endraw %}{{ person }}{% raw%}' ) | round(2) }} miles away at {{ state_attr('{% endraw %}{{ tracker }}{% raw%}', 'address') }}.
          {% else %} 
          at {{ states( '{% endraw %}{{ person }}{% raw%}' ) }}. 
          {% endif %}
          
          
          {% endraw %}{{ pronoun|capitalize }}{% raw%} phone was {{ state_attr('{% endraw %}{{ tracker }}{% raw%}', 'battery_level') }}% charged.

          
          {% if distance( '{% endraw %}{{ person }}{% raw%}' ) > 1 %}
          {% if states('sensor.{% endraw %}{{ person.split('.')[1] }}{% raw%}_to_home') != 'unknown' %}
          In current traffic, it would take about {{ states('sensor.{% endraw %}{{ person.split('.')[1] }}{% raw%}_to_home') }} {{ state_attr('sensor.{% endraw %}{{ person.split('.')[1] }}{% raw%}_to_home', 'unit_of_measurement') }} to drive home.
          {% endif %}
          {% endif %}

          {% endraw %}        
        theme: no-shadow
        style:
          transform: none
          top: 10%
          left: 20%
          width: 75%

  - type: history-graph
    entities: 
      - {{ person }}

card_map.yaml - this is simpler

# lovelace_gen

type: custom:config-template-card
entities:
  - input_select.map_shows
card:
  type: map
  entities: 
    - ${ states['input_select.map_shows'].state }
  default_zoom: 18
  style: 'ha-card { height: 100%; }'
  
gridrow: {{ row }}
gridcol: {{ col }}

That gives me this on a PC, when I click one of the side cards the map updates to show the person I clicked on. At the moment everyone’s home - if people were out I’d get different info showing, hence some of the complexity in the 1st card.

image
image3832×1616 963 KB

And on mobile I get something like this, by using a different view file, I have to scroll down to see the detail cards but can use the glance card to change who’s shown in the map:

image
image834×1660 248 KB

3 Likes
9

Hello eggman. Just wondering if you have these files? I’d like to setup some similar dashboards and this would be a great starting point. Any help would be greatly appreciated.

10

This is so logical, even for a GUI-guy like me!

Everything in its place, and easily invoked. Wow. I would be so grateful if you’d put your config up for us to dissect and make into ours. I know it’s been a couple of years since this post, and I don’t know if things have broken or changed too much to make it work still, but I’m pretty sure you’d have kept up with the evolution seeing how ordered you have everything behind the scenes. So… Pleeeeease? :innocent:

1 Like