Question: Dashboard Tiles

You could just create your own 'stereo tile' with multiple tiles stacked on top of each other. I have modified (ironically) the thermostat tile to better suit my needs and usage. Below is a screenshot of my bedroom climate display on an Android tablet running Fully Kiosk browser.

The bottom 4 tiles are just single attribute tiles for humidity and temperature. The top one is a stock thermostat tile modified using CSS to remove the unwanted/unsightly bits, retaining only the room temp, setpoint temp and up/down arrows. The 4 icons are virtual switches that when activated sets the icon to white and turns the others off then via Rule Machine sends a Broadlink IR command to my dumb aircon to set the mode.

To grey out the inactive mode switches I use the following:

#tile-84, #tile-85, #tile-86, #tile-87 .on .material-icons {
    color: white !important;
}
#tile-84, #tile-85, #tile-86, #tile-87 .off .material-icons {
     color: rgba(128, 128, 128, 1.0) !important;
}

The '2' icon is actually 4 switches stacked on top of each other for fan speed. When the mode is set, another rule turns the correct virtual switch on.....1, 2 or 3 (according to a hub variable) with a switch on top of those that when pressed, activates a rule that changes the fan speed.

I insert the following CSS code to display/hide the icons so the correct fan speed number will show according to which switch (tongue twister) is currently on:

#tile-88, #tile-89, #tile-90 .on .material-icons {
     color: white !important;
}
#tile-88, #tile-89, #tile-90 .off .material-icons {
    visibility: hidden !important
}

The z-index command is used to bring the fan speed switch to the front so as to be on top of the fan speed numbers:

#tile-91 {
   z-index:150; !important
}

'Clear' at the very top is a weather attribute tile with a transparent background overlayed over the thermostat tile. Below is a screenshot with the backgrounds turned on to show the tile stacking. The middle tile is a global off switch and the two small tiles at the bottom are my rubbish and recycling bin reminder icons (not shown). The system is off hence only the forecast, room temp and mode switches (grey on grey here) will display.

To reformat things like tile title, tile background or icon position I use code such as:

#tile-71 .tile-title {
    display: none !important
}
#tile-71 {
    background-color: rgba(128,128,128,0.0) !important
}
#tile-73 .tile-primary {
    position: absolute;
     left: -12%;
     top: 28%;
}

Most likely very inelegant but it works for me. All of this I have picked up through much trial and error after reading the following very informative posts:

The Noob’s (in)complete guide to CSS for Hubitat

Show Off Your Dashboards!

1 Like