If you take a bit of time to learn basics of JS you will find it much easier to work with config and will find the best way (for you) to define tiles, pages etc.
My JavaScript skills aren’t the best but I can work my way around. I think the issue is the nesting of items within other items. Would be nice to implement some kinda drag and drop UI that does all the heavy lifting.
To be honest designing a UI for designing the UI is a bit too much 
Not only it would take twice the amount of code and effort to make something like this but this would also take away the flexibility you get while working with raw JS. If you define each tile separately than the code is more than manageable:
{
width: 3,
height: 3,
items: [
TILES.OUTDOOR_TEMP,
TILES.DOWNSTAIRS_TEMP,
TILES.UPSTAIRS_TEMP,
TILES.CLIMATE_MODE,
TILES.HOT_WATER,
TILES.TOWEL_RAILS,
TILES.POWER_USAGE,
TILES.GAS_USAGE
]
},
It would be much cooler to design some amazing THEMES for it
3 Likes
I’ll see what I can do
BTW is there anyway to stack groups on top of each other along with the group title? My attempts have given me this:
Curious about the automation tiles.
The documentation states it fires the automation, not sure i completly follow the resoning behind that but is it possible to have those simply disable or enable the automation?
For my case, I have a few automations that use TTS. Sometimes if I am working from home and on calls I need to disable these, it would be nice to have a tile on the dashboard to simply turn them off.
I can just create an input boolean if needed, but this would be cleaner if possible…
Groups can either be staked vertically or horizontally. Allowing mixing both would just create a mess and break the grid.
You can use switch tile for it.
Are you a designer?
Amongst other things yes
1 Like
I was trying to stack those 2 groups horizontally but they ended up like that. I can do it without the title but not with. Any advice?
As you may well understand I need to see the code
1 Like
There’s me thinking you were a miracle worker 
I’ll post later.
Ok, let me guess than Did you set the width of the group less than width of the tiles in it?
Maybe?
[
{
title: 'Upstairs',
width: 2,
height: 2,
items: [
{
position: [0, 0],
type: TYPES.SWITCH,
id: 'switch.fan',
title: 'Fan',
subtitle: 'Master Bedroom',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-fan",
off: "mdi-fan-off",
},
},
{
position: [1, 0],
type: TYPES.SWITCH,
id: 'switch.dehumidifier',
title: 'Dehumidifier',
subtitle: 'Jakes Room',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-water-percent",
off: "mdi-water-percent",
},
}
]
},
{
title: 'Downstairs',
width: 2,
height: 2,
items: [
{
position: [0, 1],
type: TYPES.SWITCH,
id: 'switch.fan',
title: 'Fan',
subtitle: 'Master Bedroom',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-fan",
off: "mdi-fan-off",
},
},
{
position: [1, 1],
type: TYPES.SWITCH,
id: 'switch.dehumidifier',
title: 'Dehumidifier',
subtitle: 'Jakes Room',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-water-percent",
off: "mdi-water-percent",
},
}
]
}
]Take a close look at group width and position of each tile.
Yes, it absolutely does.
Can you share your config for this?
1 Like
Ok so does the first group have to be twice as tall to fit the second group in?
Now I am confused You can not nest the groups. The position of the tiles are relative to the group. I don’t think I fully understand how you want your groups to look like.