Need inspiration for layout

Configuration Frontend
1

I’m trying to create a clearer view so I quickly sketched up something and used the picture-elements card to bring the needed entries into view.

image
image1920×917 282 KB

There are a couple of problems with this. The view while editing is different than the actual card, everything ends up more compressed. And the switch (in the middle of the picture) jumps as well. The card is overly tall but HA/masonry doesn’t know this and still crams some cards below it.

Just looking for a way to transform this mess into a better layout and view. I can separate some stuff into their own picture cards but HA will just randomly place them wherever.

2

If you use a vertical stack card with a horizontal stack on each row you can control the placement of each card in a grid. If you then put the dashboard into panel mode it will fill the whole display.

image
image1856×857 90 KB

There are various permutations of this. Below is a vertical stack of grid cards:

image
image642×790 106 KB

If you want to use panel mode, though, everything has to be in a single outer card.

1 Like
3

The initial question seems to be “how to adapt Picture elements card (PE) to different viewports”.
Dependently on a number of cards in a view - a size of your PE card changes.

4

Thank you both. Actually, I’m not sure how to ask the question. Just wondering if someone has a better layout (example) that shows everything in one big picture with positioning.

Also the PE card does not support a lot of elements, I ended up using custom-hui but it’s not perfect.

5

Do you mean “hui-element”?
In PE card it is only needed to show standard cards as elements.
And the only element on your PE card which may need using “hui-element” - is a toggle button.

6

Here is my take. It consumes the entire screen except for the menu bars… but it’s stable. You can add elements everywhere, including ones that will popup a frame of your choosing on an “on-tap” displayed element:

  - title: Dogtrot
    id: dogtrot
    panel: true
    cards:
      - type: picture-elements
        image: /local/dogtrot-floorplan.png
        elements:
7

Is it stable after resizing the browser’s window? When seeing on a mobile screen?

8

The placement of the elements is, the text size not so much.

9

Since it is defined in “%”.

Will be anyway since scaling works dependently on a viewport.