[smartly] 'quarter height' and 'half width' tiles HOWTO

Continuing the discussion from [RELEASE] smartly v1.06 - custom icons, thermostat re-design, custom dashboard link labels and icons:

'quarter height' tiles in smartly

HALF HEIGHT - Stock smartly row height is 60px. We call this 'half-height' because at 1x height, it will show a one line title, the icon, and a secondary value like battery or temperature. When you set a tile to 2x height, it makes a square. Two halves make a whole.

QUARTER HEIGHT - Setting row height to 22px will make your 1x height tiles 'quarter-height'.. showing just the title. You'll then have to make those tiles 2x height to bring them back to the size of a smartly stock 'half height' tile. Two quarters make a half.

THE ORIGINAL SMARTLY 3/4 HEIGHT - With your row height set at quarter-height, you now have the option of setting a tile to be 3x height, which will make them the OG smartly 3/4 height. And, based on that math, 4x height will make them a square.

Also, when using 'quarter-height' row height, the 1x height 'title-only' could still be useful, as it still shows the device name and the status color.

HEIGHT OVERVIEW

When using 'quarter-height' row height in smartly (22px):

  • 1x height is 'title-only', showing the device name and the status color.
  • 2x height is great for anything where it only requires an icon (requires a single line short/shortened title).
  • 3x height is great for anything you'd like to also show the status text for under the icon (or just to be rad AF).
  • 4x height is for anything with a slider or otherwise requires a full height tile.

3 Likes

'half width' tiles in smartly

WARNING: depending on your knowledge of math, 'FORCE 2 COLUMNS WIDE' calibration in smartly may produce unexpected results when using 'half width' column width.


STOCK / FULL WIDTH - Stock smartly column width is 135px. It has enough space to fit most anything widthwise except 'thermostat' tiles, or any 3rd party tile that requires a lot of real estate. This is the smartly default.

HALF WIDTH - Setting column width to 60px will make your 1x width tiles 'half-width'. This will normally crush the tile into an unintelligible mess. Any title that's longer than 4-5 characters will need to be hidden with CSS, secondary values (like battery % or temperature) will be overlapping, underlapping and otherwise sprayed over the tile like a bug on a windshield.

You'll then have to make those tiles 2x width to bring them back to the size of a smartly stock 'full width' tile. Two halves make a whole.

WIDTH OVERVIEW

When using 'half-width' column width in smartly (60px):

  • 1x width, if title is shortened to 4-5 characters AND secondary values removed via CSS, on the most basic tile it will show status color, the shortened title and an icon.
  • 2x width is what you'll have to painstakingly set 99% of your other tiles to in order to have them be usable.

.

2 Likes

to me that equals 50 Cent!

:rofl:

Thanks for taking the time to post all the glowing details.

Does that stand for USE AT YOUR OWN RISK!!

I will need to play around with this. :thinking:

3 Likes

Yeah, until I create a 'converter' that takes a dash and splits and halves and quarters all of the tiles while maintaining position (and providing additional space to 'grow' the tiles into), it's a HUGE task moving and resizing tiles of an existing dashboard to actually use quarter height or half width. Add to that no drag-and-drop functionality and it would be a nightmare manually converting a dash.

Additionally, half width tiles can only be used in very specific conditions (ultra-short or removed title, manually CSS removed secondary value). If you are starting a dash from scratch, though, by all means do it.

2 Likes

Remove secondary and tertiary info from small tile (2x1).

Edit, then add this code to your CSS, replacing [id] with the tile id #

#tile-[id] .tile-secondary,
#tile-[id] .tile-tertiary {
    display: none;
}

Example

image
In the smartly editor I can see I'm working with tile 12,

image
so I change the code to be what's below, and c/p into Settings > Advanced > CSS

#tile-12 .tile-secondary,
#tile-12 .tile-tertiary {
    display: none;
}

Result

image

1 Like

unsupported-smartly-mod

at this point this mod is 'officially' an unsupported-smartly-mod. The above modded smartly dashboard consists of 175 lines of custom CSS code. If you are not comfortable with adding/editing CSS, or willing to put the effort into reading/learning (with reasonable help), this mod might not be for you. We encourage you to try the OG smartly editor.

With that said, I do plan to assist anyone with reasonable requests for help editing any items they may need assistance with, included anything you see in the above dashboard. Thanks for your interest in smartly and this red-headed-step-child mod. :wink:

Over the past few days I converted a couple of my dashes. You can see below how it allows better use of dashboard real estate by further reducing the default tile size.

Main Dash Before

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

Lighting Dash Before

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

1 Like

Hey there!

I have been using the Smarty dashboard beautification since I started with my hub. Both me, and more importantly my wife, love it.

As I have been adding devices and functionality to my home, I am now getting to the point where I need to look into the half height/width tiles in order to better utilize my dashboard space. I understand this isn't anything officially supported and I'll likely need to rework my titles to make sure they fit but this shouldn't be a huge issue for me.

I looked through this thread but am having a hard time figuring out how to set tiles to quarter height/width. is that something you can help me with?

And help you can give me would be greatly appreciated!

2 Likes

Start with the Gear and set these Column and Row settings in the HE Options.

1 Like

@TechMedX

Ok one last question. I followed your instructions above for removing the value that would normally show below the Icon on the half width tiles by adding the

#tile-[id] .tile-secondary,
#tile-[id] .tile-tertiary {
display: none;
}

for all the tiles i wanted to remove that value. Heres the what the CSS looks like now:

But after saving and reloading the dashboard you can see that the values are still displaying, though almost hidden because of the size of the tile, within the dashboard:
Dashboard Capture

What did I miss?

Lose the brackets.. it should be:

#tile-00 .tile-.....

Ok I dropped the brackets on all of them but that didn't seem to work either.

Does it matter what kind of tile it is? All of the ones I'm working on are switches or garage control type tiles so I'm trying to hide the on/off text for switches or the open/opening/closing/closed text for the garage controls.

I just realized you were trying to remove the text underneath the icons.. that's called the 'helper text' and you can turn that off within HE dashboard 'Settings' > 'Options' > 'Hide Icon Helper Text'.

I cannot say this enough, backup your JSON regularly. Paste it into Notepad (or similar) name it dash.date, save it, and you will always be able to undo your mistakes.

as @spelcheck said remove the helper icons via HE settings. Then I added this code to move the icons back down a bit

.material-icons {
   position: relative;
    top: -7px;
}

FYI - smartly garage icons fit better (we have open/closed), and the beds have white/black icons for off/on if you wanna look. (new desk lamp coming)

Helpful code

This tidbit is helpfull to remove the top banner, put the green check, +, gear in the lower left, make them small and grey so less visible. It helps squeeze another row too. See my Main Dash after above for example. I start all my new dashes with my zommy @media display settings (easiest to grab off another page running smartly) next is this code, followed by the icon one above, and then I start customizing that page.

.dashboard div .header {
    position: fixed;
    bottom: -1em;
    right: 1em;
    z-index: 999;
    opacity: .2;
    zoom: .6;
    -moz-transform:scale(.6);
}
.wrapper {
    height: 100%;
    margin-top: 0;
    padding-top: 1em;
}
.dashBack,
.dashName {
    display: none;
}
.dashboard div .header>.flex-auto.justify-end,
.dashboard div .header>.flex-auto.justify-end>.flex {
    display: inline-block;
}

Looking forward to seeing your final works. Let us know if you hit a snag. Enjoy.

Is there a way to hide that "Inactive" label on this tile?

image

Pretty sure that is the "helper text" Click the gear for Settings > Options > Hide Icon Helper Text (make sure it is checked)

That will remove it from all tiles. Which is needed most times in this mod.

Yep, that's what it was, although in the end, was able to adjust the icon down by a bit with some of that CSS you posted above, just modified slightly. Although either option works pretty well now.

#tile-26 .material-icons {
   position: relative;
    top: 10px;
}

image

image

The interesting thing now is that the text labels aren't visible on a computer or from my android based phone, but looks perfectly normal on an iPad. Not sure what the deal is there.

image

If looks like your zoom might be off, I don't see the leaf. Do you have calibration for those devices installed?

You could 'stack' the Text tiles 'on top' off the windows tiles (delete the text tile and ad it backing making it "newer", and it will "bring to front"). I'll post stacking details in a second, but I still don't think that would look right. If you pastebin.com me your JSON I can also take a look.

Reposting here as it may be very useful with this mod.

Tile stacking - using multiple overlapping tiles to give the impression of a single more useful tile.

The tile on the left is somewhat obvious it is 7 tiles stacked 1 lock 1 contact for each door plus an oversized background tile with a group title.

The right side has 2 sets tiles each having a switch and a color bulb tile. This is great for easy on/of plus color control from "one tile"

How To - Tiles are stacked by HE depending on the order they appear in the JSON. Think of it as a dealer laying out cards. Tiles on top are created 1st and tiles that come after are placed on top (regardless of the numerical value, like dealing cards). If you want a tile to be on top c/p it's JSON tile entry below that of the tile entry you want it to be "on top" of. Notice below I put tile 55 below 56. That change will make 55 be displayed second, and sit "on top" of 56.

This can also by achieved by removing the tiles that are "behind" other tiles and then adding then back into your dash. This will create a new tile at the bottom of the list and bringing it "to the front".

Depending on the situation both approaches have merit, and will result in the same outcome.

I didn’t have it calibrated when I took those screenshots, but even after calibrating for the two devices, it didn’t have any effect on those text tiles.

I’ll grab the json later and pastebin it, maybe I’m missing something obvious.

1 Like