#Dashboard sizing for tablet

1 messages · Page 1 of 1 (latest)

thick berry
#

Would anyone be willing help guide me through sizing my current dashboard for a Galaxy Tab A8 (1920 x 1200)?
When I open it up on Fully Kiosk, it puts the fourth section straight under the first.

What I want to do:

Column 1:

  • 4 buttons with scripts (evening (turn on certain lights, close certain blinds), day (opposite of evening), screens down, screens up
  • Weather card
  • Some text accompanying the weather
  • TrashCard for trash reminders
  • Entity with image (video of front doorbell)

Column 2:

  • Shared Calendar
  • Link to our total energy production (color for producing energy, color for taking energy off the grid)
  • markdown card to advise to use a dishwasher, washing machine, ... depending on the value of the energy production
  • ???

Column 3:

  • Layout card with all our AC units
  • ??

Was thinking about evolving this to a room control cards once I have zigbee temperature units as I don't like the temp provided by the AC unit

Column 4: will be used for nice extra's

  • Radio (will buy a wifi radio soon to control it from here)

Suggestions are all welcome but fitting this into the tablet screen would be sweet already. But the misalignment is driving me crazy.

outer surge
#

To have full control over the size of each column and the layout in general, you need to design the dashboard in YAML mode. This here is an example for a dashboard with 5 columns using button-cards:

title: Home
path: "home"
icon: mdi:<whatever>
type: custom:grid-layout
layout:
  grid-template-columns: 15% 20% 25% 25% 15%  
  grid-template-rows: auto
  grid-template-areas: |
    "header header header header header"
    "col1   col2   col3   col4   col5"
cards:
  - type: custom:button-card
    template: <template for header>
    view_layout:
      grid-area: header
  - type: vertical-stack
    view_layout:
      grid-area: col1
    cards:
      - type: custom:button-card
        template: <template for whatever>
      - type: custom:button-card
        template: <template for whatever>
  - type: vertical-stack
    view_layout:
      grid-area: col2
    cards:
      - type: custom:button-card
        template: <template for whatever>
      - type: custom:button-card
        template: <template for whatever>
...

Each column has a given width which can be adjusted by changing the % values. The header uses the whole width of the screen and goes left to right on top of all columns. You put your cards into vertical-stacks into each column.
But be aware the a.m. design will only work on a tablet or computer, it is not responsive and for your mobile device you would need to build a separate view.

thick berry
#

Thank you, I'll give that a try.

Mobile view doesn't matter for this as this'll be used purely for the tablet in house

sharp pendant
#

Is the custom:grid-layout card the right one to use? The only one that I can find hasn't been updated in seven years. I think the preferred card is the layout-card set to grid layout_type. (Everything else is basically the same.)
EDIT: This is what I use for my tablets with FKB.

type: custom:layout-card
layout_type: grid
```Here's a link to the forum with some discussion about achieving some different layouts. [LINK](<https://community.home-assistant.io/t/custom-layout-card-grid-layout-please-help/334526>)
#

But be aware the a.m. design will only work on a tablet or computer, it is not responsive and for your mobile device you would need to build a separate view.
Mediaquery can be added to the code above to make it more adaptive. For example, if the resolution is 1920x1080 then it will use the four column layout, but a PC's layout (at a higher resolution) would use five columns (per OP's design.) I have an example somewhere that show's how to make the layout adapt based on rotation of the screen; vertical shows a single column while horizontal would show three columns, for example.

#

Also, since your displaying on a tablet, I suggest checking out Kiosk Mode for some useful options such as hiding the header and sidebar.

thick berry
thick berry
sharp pendant
# thick berry Is the grid template stuff the same?

The layout section looks the same (obviously, designed the way you want), but you would use the two lines I posted above instead of just type: custom:grid-layout. Also, note the addition of the ```yaml
view_layout:
grid-area: header #and other areas

thick berry
sharp pendant
#

A lot of cards don't like being re-sized. That's where card_mod can be used. Can also modify other CSS to get them to look the way you want.

#

Not sure if you've had a chance to play with it yet, but in FKB, I don't recommend using the camera to wake up the tablet. More than likely, it won't work in the dark. If your Tab A8 supports tap-to-wake, then that might not be too big of a deal. My Amazon Fire tablets don't support it and the camera doesn't work in the dark. Instead, I have a motion detector in the room with the tablet; an automation wakes the screen when motion is detected. I also have it's power plug connected to a smart plug to handle "smart" charging. Battery charges to 95%, turn off charger; under 20% turn on charger.

outer surge
thick berry
#

But I figure I'll be struggling a bit to get to my goal of displaying it correctly haah

outer surge
sharp pendant
outer surge
sharp pendant
sharp pendant
thick berry
#

Now it's putting the weather card next to the buttons 😛
I'm learning.. slowly, but learning

#

Or it might be because I haven't filled other columns, I'll add some

sharp pendant
#

Or you can cheat and put the buttons and the weather card in a horizontal stack.

#

If you want to get real fancy with it, you can take coasting24's example and micromanage it even further by sectioning off the columns. (So col1 would turn into button1 and weather1, but you have to adjust the number of columns and sizes to be able to support that.)
Maybe something like this; ```yaml
grid-template-columns: 15% 10% 25% 25% 25%
grid-template-rows: auto
grid-template-areas: |
"but1 wea1 col2 col3 col4"
"col1 col1 col2 col3 col4"

thick berry
#

Haha, I added

view_layout:
grid-area: col1

to my horizontal stack of buttons and it disappeared

#

Sorry you have to deal with me 😛

sharp pendant
thick berry
# 
  - title: Home
    path: home
    icon: mdi:tablet-dashboard
    type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 25% 25% 25% 25%
      grid-template-rows: auto
      grid-template-areas: |
        "col1 col2 col3 col4"```
outer surge
# sharp pendant My usage: <https://github.com/dsellers1/home-assistant/blob/21b512018283d531a39b...

OK, I see the difference. I have my layout on the topmost level, right after the view: section, whereas you add 2 further levels before you add it:

Mine:

views:
  title: Home
  path: "home"
  icon: mdi:<whatever>
  type: custom:grid-layout
  layout:
  cards:

Yours:

views:
  - title: ViewSonic
    cards:
      - type: vertical-stack
        cards:
          - type: custom:layout-card
            layout_type: grid
            layout:
              grid-template-columns: 50% 50%
            cards:
thick berry
#

Gotta go to family now but I'll try and sort it later..

sharp pendant
thick berry
#

@sharp pendant @outer surge
Thank you both so far!
I've been able to get everything to fit on the tablet.
Now that I have a better understanding of it, I can finish the dashboard!

sharp pendant
# sharp pendant I forget why I set it up like that. I think I was building the layout and just p...

@outer surge I remember now why I went with the vertical-stack to contain everything first. I use two custom:mod-cards to "pin" vertical-stacks at the bottom right and bottom left corners of the screen.
I've made some changes to my dashboard (not posted to GH yet) and now it starts with this:

views:
  - title: ViewSonic
    type: panel 
    background: black
    theme: dark-mode
    cards:
      - type: custom:layout-card
        layout_type: grid
        layout:
          grid-template-columns: 50% 50% 
          grid-template-rows: auto
          grid-template-areas: |
            "header       header"
            "lights       media"
            "column1      column2"
            "bottom_left  bottom_right"
```The *column1* and *column2* areas are just empty areas on the screen at this point.
#

Now that I have a better understanding of it, I can finish the dashboard!
@thick berry You say it's finished now... But... it will never be truly finished. You'll find more stuff to add or incorporate into the dashboard. Case in point: I realized I never finished working on the browser_mod popups. I started to get it working the way I wanted but never finished incorporating it in to the rest of the buttons.

#

This looks like a normal button to turn on/off a light group (with a brightness slider underneath).

image.png
#

But, I can press-and-hold and display a pop-up that let's me adjust individual lights and brightness and will have other stuff to interact with/display without having to show it on the main dashboard at all times.

thick berry
#

Phnom, far from finished haha! Just happy I can size it for the tablet. Now to organise and see what's handy or what can help convince the wife to use it haha

outer surge
# thick berry Phnom, far from finished haha! Just happy I can size it for the tablet. Now to o...

I can tell from experience, that the less information you show, the better the WAF will be 😉 Use conditional cards to only show information that is really required. For example, you do not need to have a sensor on the dashboard showing that a window or door is closed. Even the number of open windows/doors could be too much already. Show such information only when it really matters. You have an open window and it rains or is about to rain in the coming hours, for example. Avoid to have sensors on the first page showing technical infos, like what the temp of the Raspi is... and all such nerdy things.
Heating is a must, weather info and forecast is a good one, upcoming events and birthdays too, light switches also but scenes would be better. For switching lights on/off you usually still have physical switches or you use voice commands. Use buttons in your design and make them big enough. I am a contributor to the HaCasa theme which is based on button-cards and designed to have a very good WAF. Maybe you should have a look into this too. On the HaCasa discord channel I just posted my responsive design as a framework.

sharp pendant
#

For example, you do not need to have a sensor on the dashboard showing that a window or door is closed.
I do though. 😉 But that's by design. They tell me more than just open/closed. I can see its battery level and if its unavailable (prompting investigation as to why.) In this screenshot, I set the Living Room motion detector to unavailable and the Office motion detector to on. (The doors act the same.)

20250609-0702.gif
#

But, like coasting24 said: less is more. You don't need every little thing shown on the dashboard. I have lights, the sensors shown in the above screenshot, media player controls (when playing), weather/radar, and a camera feed. It also has a header showing some of my device battery levels (phone, tablet, watch) and some toggles (like Guest Mode and enabling interior motion detectors.) This dashboard is also on a 24" inch screen and still have tons of empty space.
I have a couple of tablet dashboards. The one in the living room is designed to show just living room-related stuff, but I can still easily turn off the bedroom lights, for example. Same with the tablet beside my bed. Intended for the bedroom stuff, but can still turn off the living room lights.

outer surge
outer surge
thorny forge
outer surge
thorny forge