[smartly] BASIC 135/60 to ADVANCED 60/22 grid conversion instructions

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 :musical_note: Shania Twain singing in the distance

Now that we have Drag and Drop with [RELEASE] smartly 2.1.0 featuring smartly-inject, we’ve followed through and built a converter so that we all have access to the elusive and previously-unsupported [ARCHIVE][smartly] ‘quarter height’ and ‘half width’ tiles HOWTO.

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 :raised_hands:

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.

  1. Backup your current JSON by copying the JSON from Settings > Advanced into a text file.
  2. Go into your HE dashboard settings. [the gear, top right]
  3. Clear both the Column Width and Row Height fields. [see Example 3]
  4. Hit spacebar in both of those empty fields, which will make HE show a “NaN”. [see Example 4]
  5. 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”.

image

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.

4 Likes

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.

image

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.

BASIC (default)

Column Width 135 / Row Height 60

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%”)

ADVANCED THE OLD WRITEUP IS here.

Column Width 60 / Row Height 22

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.

  • 1x height only has space for a single line title.
  • 2x height is identical to BASIC 1x.
  • 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.
  • 4x height is identical to BASIC 2x.

And now, the @TechMedX magic.

ADVANCED grid has another benefit, the ultra-rare HALF WIDTH tiles.

image

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.

6 Likes

This post is reserved for future use 1.

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 :wink: “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.

Lighting Dash Before

Lighting Dash After (not much custom CSS in this one)

Main Dash Before

Main Dash After (lots of custom CSS and tile stacking in this dash)

2 Likes

Can anyone explain this?

Replied in smartly release thread :v:

A post was merged into an existing topic: [smartly] bug report and support thread

Well that explains what im doing wrong!

2 Likes