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

Continuing the discussion from [smartly] 'quarter height' and 'half width' tiles HOWTO:

Loooooks like we made it :musical_note: Shania Twain singing in the distance

Now that we have Drag and Drop with [RELEASE] Smartly 2.0 featuring Smartly Inject, we've followed through and built a converter so that we all have access to the elusive and previously-unsupported [smartly] 'quarter height' and 'half width' tiles.

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.

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".

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.

3 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.

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.


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.

4 Likes

Reserved 2

Reserved

1 Like

What happens if you do this, is there a way to undo it?

Not sure if I did it or not when I was messing about :joy:

1 Like

I'll build a way to revert it in the next release, probably something like setting both values to 911 to halve the grid. :ambulance:

2 Likes

Hi, New to Hubitat and Smartly. Getting a “Cannot read ‘filter’ of undefined” error when trying to save Jason layout. Have tried with existing dashboard and with a freshly created one.

Sorry to have to welcome you with some bad news but....

Please know that the smartly team leader has been suspended from the HE forums for unknown reasons, so support is limited right now. Also If your new to smartly you might want to start with the basic version instead of the advanced section.

That being said I'll do my best to help. I just did one dash to test and it worked. Are you getting the error on the smartly site, or HE? if you go to pastebin.com copy your JSON and send me a PM with a link to it I can look it over for you.

1 Like

Thanks. I updated the injector device with HPM and I’m going to try deleting the virtual device and replacing it, also the tile. The error is in HE when saving the layout Jason after pasting in the new file from smartly web site.

I’ll play with it for a while and let you know how things go.

Thanks

1 Like