HADashboard, Widget / Tile spacing

Installation Home Assistant OS
1

Hi,
Just getting to grips with Home Assistant and in particular HADashboard, Im currently designing a lighting panel to control an open plan living area in a barn conversion.

This is what I’ve produced so far

lights
lights1920×1200 854 KB

Im reasonably happy with the results but the only thing i can’t seem to get working is the widget sizing currently between each section of light category’s i used the “spacer” tag, however as default it spaces a full square at 120 x 120 I’m wanting the “spacer” to only space 60 x 120l and to move all columns left and enable me to get an extra column in on the far right and fit it all nicely on an amazon fire 10" tablet

current layout config for above

widget_dimensions: [120, 120]
widget_size: [1, 1]
widget_margins: [5, 5]
columns: 10

I thought it would be as easy as setting widget_dimensions: [1, 1] and then on each individual widget in the layout set as…
- clock(120x120)
and then when i get to my spacer i could set at (60x120), but when i do this the whole layout goes wrong with widget’s randomly positioned all over.

Any advice would be much appreciated…

#
# Main arguments, all optional
#
title: House Lights
widget_dimensions: [120, 120]
widget_size: [1, 1]
widget_margins: [5, 5]
columns: 10


layout:
    - clock(2x1),                  spacer(6x1),                        weather(2x1)
    - light.bathroom_lights,  light.sonoff_007, spacer,  light.sonoff_010,  light.sonoff_014,  spacer,    light.sonoff_018,  light.sonoff_022,  spacer,    light.sonoff_026
    - light.bedroom_lights, light.sonoff_008, spacer,    light.sonoff_011,  light.sonoff_015,  spacer,    light.sonoff_019,  light.sonoff_023,  spacer,    light.sonoff_027
    - light.dressing_room_lights,  light.sonoff_009,           spacer,    light.sonoff_012,  light.sonoff_016,  spacer,    light.sonoff_020,  light.sonoff_024,  spacer,    light.sonoff_028
    - light.chris_bedside_light,   light.emily_bedside_light,  spacer,    light.sonoff_013,  light.sonoff_017,  spacer,    light.sonoff_021,  light.sonoff_025,  spacer,    light.sonoff_029
    - spacer(9x1)     ,                                              HOME
2

first i must say that next time you can better place dashboard and appdaemon questions in the dashboard and appdaemon section from the forum, i (and other that know a lot about it) will see the question sooner.

setting widget dimensions to [1,1] is theoretical possible.
but i that case you need to set columns and rows to the size you need
like:
columns: 1280
rows: 960

but i wouldnt advise that because loading and creating the dashboard will get very slow. (i did play around with that for a while)

better practice would be the way in the middle.
you like the spacer to be (60x120)

so set your widget_dimension to [60,120]
set the widget_size to [2,1]

now every widget will be 120x120 again, but you have the option to set the spacer to (1x1) which is 60x120

that said, i just realised again that the normal widgetsize wouldnt be 120x120
it would be 60x120 + 5x120 + 60x120 (so 125x120) because of your margins.
and the total dashboard will grow also because you get more margins.
so you probably would end up with something like

widget_dimensions: [58, 120]
widget_size: [2, 1]
widget_margins: [5, 5]
columns: 20

which will make your widgets 121x120

i hope my line off thinking and explaining does help you to go on.

1 Like
3

Just the ticket, Worked perfectly thank you

1 Like
4

you are welcome.
and please share your dashboard when ready, we are always glad to see what people create.
it inspires others :wink:

1 Like
5

Hello,

How can You set the background image?
Is there a possibility to set background images per each widget?

Thank you in advance.

6

you can use any kind of css, so also background image
in the dashfile in the widget definition you can set widget_style to change each widget seperatly.

1 Like
7

I would like make my own css files … has anyone a starter file ? I need dashboard.css and variable.yaml

8
2 Likes
9

Maaagic !! Thanks :kissing_heart: