HE 2.2.3+ introduced an incompatibility with this conversion feature. Until it’s fixed, do not update your JSON using BLANK values for row height and column width (a.k.a. “autofit”) as it will trigger this conversion.
Loooooks like we made it Shania Twain singing in the distance
Shoutout to my main man @techmedx for pioneering quarter-height half-width process, and @joehuntley for his work early on. It’s about time we open it up to the masses
Click here to read up on the history of the SMARTLY grid, and what you gain by switching from BASIC to ADVANCED grid.
Since 2.0 hp4 - When updating a dashboard for the FIRST TIME, you’ll automatically be using ADVANCED grid.
Enough nerd! convert my BASIC-■■■ grid to ADVANCED.
Backup your current JSON by copying the JSON from Settings > Advanced into a text file.
Go into your HE dashboard settings. [the gear, top right]
Clear both the Column Width and Row Height fields. [seeExample 3]
Hit spacebar in both of those empty fields, which will make HE show a “NaN”. [seeExample 4]
Update your JSON with SMARTLY [not covering it in this post]
Example 3 - Clear both Column Width and Row Height
Example 4 - Hit spacebar in both of those empty fields, which will make HE show a “NaN”.
Okay, I’m a little interested in what’s happening.
After updating your JSON, re-import it into your dash and save, it should look identical to how it was BUT you can now resize your tiles with laser precision like an absolute madman.
SMARTLY detects those null values, recognizes you want to ADVANCIFY your dashboard and will multiple the height and width of each tile by 2, then will update your Column Width and Row Height to the new fancy ADVANCED values of 60/22.
damnit, I typed all of this up and accidentally LOST IT ALL… just like what will happen if you don’t BACK UP YOUR DASHBOARD JSON before messing with it. Just do it, before pasting into SMARTLY, just paste it into a new text file. Do it.
Why even enforce a grid in SMARTLY? WHO DO YOU THINK YOU ARE
The smartly designs are curated, striving for pixel-perfect efficient use of space. The only way to achieve anything close to that, and the only way to support this whole thing is to standardize the grid size.
This is the grid size that’s set by default when you first convert to SMARTLY, and each time you update (unless you have converted to ADVANCED).
1x height has space for a single line title, an icon and the tertiary value (usually a temperature or battery %)
2x height is a square and has real estate for all of the above including control elements (if applicable) and the Icon Helper Text (example: “Inactive” or “37%”)
You only need to convert ONCE. Doing this process multiple times will continue to halve and split your tiles until eventually time and space will fold onto itself.
3x height is MY FAVORITE, the magical 3/4 tile with space for everything you want on most tiles. This is the OG smartly tile height, before techmedx and crew turned it into a monster.
ADVANCED grid has another benefit, the ultra-rare HALF WIDTH tiles.
It requires a little bit of custom CSS to hide a few elements, and DEFINITELY requires the use of SMARTLY title replacement, but the tiles basically turn into SOLID GOLD NUGGETS.
Automatic conversation! Drag and Drop!? Oh where was that back in them good ol’ days. My conversion were done before @spelcheck created a conversion process, or @markus gave us drag and drop. There was a lot of clicking involved back then. Be thankful those days are behind now, and my once shamed “hacking” is now a supported mod!
Here are two examples of my basic to advanced converted dashboards. As you can see the advanced grid gives you tons of extra space to work with . smartly advanced grid and tile stacking can take you plain boring dashboards to a whole new level.
Shania Twain singing in the distance
“hacking” is now a supported mod!
