OK, I’ve been fighting with this for about a week and a half and obviously need some guidance.
Basically, I want to create a Home screen that will reside on an iPad mounted on the wall. (I may use Apple’s Home Assistant native app in kiosk mode, or simply a browser - yet TBD.)
I’m looking to layout three rows and three columns, containing:
Row 1: (weather) (Stacked card with numerous light cards) (Nest thermostat status)
Row 2: (Something, probably wx radar), (Stacked card with various door states/controls), Media
Row 3 : (A few-pixel-height window for alerts, such as Ring doorbell pressed, etc.)
My home card (under development) is a single panel, that contains the declaration:
layout: (correctly indented, of course)
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: auto;
grid-template-area: |
“weather lights temps”
“radar doors media”
“alerts alerts alerts”
justify-items: stretch
rtl: false
padding: 5px
Each of the cards has
view_layout:
grid-area: doors (or weather, or one of the other pre-defined areas)
However, the result are:
- Weather (which should be in column1, row 1) completely disappears and is replaced by Lights (which should be in column 2)
- Doors and Media are in the correct rows, but appear on top of each other in column 3 !!
Any guidance would be appreciated.