HE Dashboard Tile Stacking

[spelcheck]

This was originally posted to HE forums by @TechMedX.

… a neat ‘trick’ I learned and want to share. Some of you may know this, but for those that don’t here goes.

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. Tiles on top are created 1st and tiles that come after are placed on top. If you want a tile to be on top c/p it’s JSON tile entry below that of the way you want 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”

[yoyotogblo]

Thanks for this. I have stacked tiles in my Dashboard and have a question about changing the color of one tile based off a different tile.

When off, this stacked tile looks fine:

When on, the mode attribute stays black while everything else becomes white:

Would love the “Watch Fire TV” text to become white also.

Any ideas please?

Thanks

[spelcheck]

Edit: @yoyotogblo in the next release of smartly-inject we’ll be injecting the first word of text within Attribute tiles as a CSS class. What does this mean? It means you should be able to make your overlaid attribute tile change text color based on what it says.

The code you’ll use WHEN THIS FEATURE IS RELEASED will be:

#tile-99.attribute-PowerOff {
color: black;
}

#tile-99.attribute-Watch {
color: white;
}

[yoyotogblo]

Sounds great! Thank you

[rdstov]

@spelcheck is it possible to integrate an option into smartly inject (checkbox perhaps?) to allow stacking?

[spelcheck]

Sadly stacking just isn’t possible with gridstack, the library we use for drag-and-drop, so there isn’t a way to enable anything like that.

BUT we could have a tile mod checkbox for “exclude from drag-and-drop” so they don’t even show in drag and drop mode, keeping them from being automatically shifted out of the way when overlapped (or underlapped)… the problem is you wouldn’t be able to click on them in smartly editor in order to activate that option unless they are on top.

I like the idea though, having a way to selectively exclude them from drag and drop. For the time being, we could just bring our “background” tiles to the front to just enable that option, then send them to the back using the method in the OP.

[spelcheck]

Ok crazy idea, instead of “exclude” checkbox, it should be a “send to back” checkbox. Click on PAW brings up the normal tiles in drag-and-drop mode. A long press on the PAW, however, opens drag-and-drop mode with only those “send to back” tiles. Essentially two separate layers handled in drag-and-drop separately, then combined into one on JSON on save. Freaky, would probably work fine.

In smartly-editor, tiles that are “send to back” enabled could be shifted slightly to one side so they would still be clickable while still having tiles above them. A 3px solid border on that side would be a good target.

To create a new “back” tile you would just create it in HE in open space, enable “send to back” in smartly. Back in HE, long press PAW for “back” drag and drop mode, drag and resize that tile and on save it automatically injects it into the back (start of the tiles:{} JSON).

Heck the cool thing to do for “back” drag-and-drop mode (drag-and-drop itself is an overlay) is to make the tiles bright outlines and transparent so you can see the existing dash underneath. That way you be able to position them in one shot.

[rdstov]

I’m smart enough to copy and paste code, but implanting it and not screwing it up is not my favorite task. Any method that makes coding the CSS via a GUI is certainly a better route to success for me. You guys are great! I’m sure you will do better with your end product. But until then…

[TechMedX]

I know I’m late to the party. However I wanted to also post these examples here for people to see what can be done using smartly advanced grid setting and tile stacking.

7tiles

4 tiles each (need to update all color coding now that it is cold)

3 tiles (with bunches of CSS entries, thank you @spelcheck)

2 tiles each (icons are on/off, bulb for color changes)

[TechMedX]

Here is that entire dash showing lots of stacks including my newest, camera image w/PTZ preset control tile.

*left most “button” on the camera tile is invisible. Middle is showing the “touched” button, and the right most one was made visible for presentation purposes.