[RELEASE] Dashboard Tile Utility — Command-Line Layout Tool for Hubitat v1 Dashboards

Developers Code Share
1

[RELEASE] Dashboard Tile Utility — Command-Line Layout Tool for Hubitat v1 Dashboards

Current Version: 1.2.204 20260707

This started out as a Python script because I wanted to insert space for a new device in my overly crowded dashboard, without having to move every other tile one at a time. That led to a script to copy tile CSS, which led to more scripts... and 20 scripts later, this project was born.

Dashboard Tile Utility is a Python tool designed to make it easier to perform layout changes on Hubitat Dashboard v1 layouts.

There's also a GUI version (Dashboard Layout Studio), but that’s for another post. For now:

Project Links

Features at a Glance

Main Features

Load and Save Dashboard Layout JSON

  • Load layout JSON from the clipboard

  • Save modified layouts back to the clipboard

  • Load from local files

  • Save to local files

  • Load directly from the hub

  • Save directly to the hub

  • Use any combination of the above

  • Save to multiple destinations

Layout Actions

  • Insert rows

  • Insert columns

  • Delete rows

  • Delete columns

  • Move rows

  • Move columns

  • Move rectangular ranges

  • Copy rows

  • Copy columns

  • Copy rectangular ranges

  • Clear rows or columns while preserving empty space

  • Crop a layout to a row, column, or rectangular range

  • Trim unused empty space

Move, Copy, and Merge Operations

  • Move layout sections within a dashboard

  • Copy layout sections within a dashboard

  • Merge rows, columns, or ranges from another dashboard

  • Copy tiles while assigning safe new tile IDs

  • Copy tile-scoped CSS with remapped tile IDs

  • Handle layout conflicts with configurable overlap rules

Spacing Tools

  • Add spacing between rows

  • Add spacing between columns

  • Add spacing across the full layout

  • Set uniform row spacing

  • Set uniform column spacing

  • Set uniform spacing across the full layout

  • Remove or reduce existing spacing

  • Unstack overlapping tiles and spread them out

CSS Handling

  • Copy tile-scoped CSS when copying tiles

  • Remap copied CSS selectors to new tile IDs

  • Remove CSS rules when tiles are removed

  • Detect orphaned tile CSS

  • Scrub orphaned tile CSS

  • Compact CSS

  • Preserve relevant CSS comments where possible

  • Avoid false orphan detection for intentionally neutralized selectors

CSS Cleanup

  • Tile delete cleanup: Removes tile-scoped CSS when matching tiles are removed

  • Orphan cleanup: Finds CSS for tile IDs that no longer exist in the layout

  • Duplicate cleanup: Helps identify repeated declarations

  • Compact CSS: Reformats CSS into a compact layout

Listing and Map Output

  • Generate tile lists with attributes in tabular, tree, or nested text formats

  • Display text-based layout maps for previews, results, or conflict detection

6 Likes
2

I’d like to be the first to acknowledge “this is a big deal” and worthy of exploring more deeply when I have the time. Over the past couple of years, I’ve kept all my Dashboard related utilities under wraps mostly because they are solutions in search of a need (beyond my own).

But if things light up on this post, I may take heed and push something novel out there!

Either way, thanks for contributing something unique and powerful for the HE community.

5 Likes
3

This looks like it could be useful for me, so thanks for posting! :+1:

I curious about one thing though, and it doesn't seem to be explicitly mentioned in your write up.

All may dashboards use very small row heights and column widths, as small as 30x30. Most all my tiles span multiple rows and columns to be able be various custom sized tiles with custom spacing.

How does this handle that scenario? My impression is I could only use the features with rectangular range selection to move a single row or column of spanning tiles.

This got me thinking...

In the past, I had created dashboards without spanning tiles. When changing a dashboard to use small widths and heights from larger values where each tile filled only one row and column, everything collapses into the corner and pulling each tile out, expanding it to the new size, and putting where it "was" in the larger layout, takes forever.

A tool to do that for you would be great, to resize a dashboard column width and height for tile spanning, and when it is changed, to also auto-span and space the tiles to closely appear how they were before the major column/width change.

Also when using spanning tiles, every new tile created has to be expanded out manually. I would like to setup most of a new dashboard using a larger grid, and then just convert it use a smaller grid so I don't have to expand every new tile I create in order to use custom tile sizes and spacing.

I'm probably a pretty niche case for that feature, but this post made me think what a tile utility could actually do for me.

1 Like
4

I’m not sure if I understand what you’re asking. But here’s my test dashboard. The grid is 100 x 80. Every tile spans quite a few columns and rows. All of these tiles are overlapping and nested and kind of absurd but of everything I came up with, this was the type of interface that got the spouse to budge on having any of this. So I make the spouse happy. But image with all of those tiles how much work moving just a few devices could be. So the app is designed with the probably not smart assumption that anyone who was likely to find this useful, was also layout out spanning tiles.

image
image1896×1303 312 KB

I’d say give the GUI a spin because nothing in the GUI is live until you actually save it and the back end logic is the same. Plus the GUI version has undo/redo stacks.

As far as stacks, neither the cli or the gui versions can create original tiles. They create new tiles by copying existing tiles (with new ids and transfered css) but you still have to add completely new tiles via the hubitat gui. So I just add tiles one on top of another and then use the cli or gui to unstack and space them out. From there its easy to resize and arrange them as I need.

You wouldn’t believe the number of dashboards I have that are almost identical but exist so that the flow makes sense to the one who matters. So what I use the CLI the most for is to copy a new cluster of tiles that make up a new device into all of the other dashboards. It inserts the copies in each dashboard and gives them and their CSS a non-conflicting tile-ID. If I’m doing just a few, I’ll use the GUI version because that one will verify the devices are allowed in that dashboard and add them if their not.

Hope that sort of answers your question.

5

great!

I wasn't suggesting it should, I mentioned that while manually creating my tiles, I have to manually expand them.

I'm pretty sure you are saying it can expand tiles for me if I just stack them up. i will try it out.

6

expand yes, and set them to a specific size.

7

Version 1.2.204 is now available. Rules loaded through @import statements in customCSS (if reachable) are merged with tile-scoped rules in customCSS when copying tiles.

1 Like