Dashboard layout

[acoustic ember]

Hi all,

Over the past few weeks I have been making cards with some graphs and data that I want to eventually display on a wall mounted tablet dashboard (see screenshots for some examples). Now that the content that I want to display on the dashboard is completed, I want to start building the dashboard. However, I have been struggling.

I have tried multiple layouts but run into problems every time. Some examples of problems that I have encountered are cards being rearranged when I display the dashboard on my tablet, or issues with sizing and precise placement of cards.

What I would like is to basically "tetris" cards of different sizes into the dashboard. With as much design freedom as possible.

Any tips on how I can realise the design for my dashboard that I have in mind? Considering that I want to design for the purpose of an android tablet using fully kiosk.

[distant lotus]

If you want complete control over placement of cards on the dashboard, I recommend the layout-card. It is not the easiest card to configure sometimes but once it is working it is great. I'm not sure how well it works with the Editor UI; I tend to run dashboards like this written completely in YAML. There's a bit of a learning curve involved but it is worth it in the long-run, IMO.

Here's a sample of one of my configurations. I basically set the screen as two columns and populate the sides with the appropriate areas.

  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 50% 50% 
      grid-template-rows: auto
      grid-template-areas: |
        "header       header"
        "lights       media"
        "printers     printers"
        "column1      column2"
        "bottom_left  bottom_right"
    cards:
      - !include header.yaml
```Using YAML-based dashboards allows using `!include`s. Shown above, the header.yaml file holds all of the code to show the header. (You can't do this with a UI-based dashboard.)
The areas for the cards are defined like this: ```yaml
    # Lights section
    - type: horizontal-stack
      view_layout:
        grid-area: lights
      cards:

You mentioned setting up like Tetris. You could define several columns and the areas can span across columns as needed. Something like ```yaml
layout:
grid-template-columns: 20% 20% 20% 20% 20%
grid-template-rows: auto
grid-template-areas: |
"header header header header header"
"vertical 1x1-A 1x1-B horizontal horizontal"
"vertical 2x2-A 2x2-A 2x2-B 2x2-B"
"vertical 2x2-A 2x2-A 2x2-B 2x2-B"

The areas that I have named bottom_left and bottom_right are actually pinned to the bottom corners using a custom:mod-card. with a vertical stack holding the appropriate cards. ```yaml

Bottom_right section

• type: custom:mod-card
  view_layout:
  grid-area: bottom_right
  card_mod:
  style: |
  ha-card {
  border: none;
  background: transparent;
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 800px;
  }
  card:
  type: vertical-stack