Question: Dashboard Tiles

[user2461]

I am looking to do some simple modifications to my dashboard tiles. How do I modify the standard dashboard tiles. Some of the things I would like to do are:

1. Have my buttons state what they control (For instance they control the selected source for my stereo, and I would like them to say that)
2. Have those same buttons display an attribute from the driver. (For instance I have a tile for selected input, and a tile for a pushbutton to change that input. I would like to combine those.)
3. I would really like to modify the thermostat tile in the upper right for my stereo. That way, I could have volume control, input control, selected input, and switch control all on one tile.

I have tried finding and editing the tile CSS, but have not been able to find that. All I see is the layout css. There are some other threads out there close to this question, but they seem to pull in other apps / devices. I would really like to keep this simpler than that.

I have tried simply putting multiple buttons in the same grid space, but that didn't work for the push buttons. It did work for the switch and volume in the left column below.

By the way, several have been very helpful with other recent questions of mine. I will respond on those threads soon, but I want to get my solution complete first. Anyway, this hubitat newbie really appreciates the help.

[garyjmilne]

@user2461

I have tried simply putting multiple buttons in the same grid space, but that didn't work for the push buttons. It did work for the switch and volume in the left column below.

Interesting idea. Had not thought that might work.

[neonturbo]

@user2461

Have my buttons state what they control

So I am assuming these are virtual buttons?

How did you set up the buttons?

• Are they all 1 virtual button device, but you put say 3-4 buttons in the Number of physical buttons in the preferences section on the settings page?
• Or are these separate virtual button devices but for some reason named them the same?

[Stephan.J]

I am definitely not any css guru, but I followed some guides and without too much trouble created a dashboard for my stereo:

Most of the tiles are just buttons and I used an image on the tile and edited the css so there was nothing else on the tile. Most of the tiles just start playing either a internet radio station or a preset pandora station (the image reflects what type of music/media will start playing), but the record player beside the home tile, sets the input to my record player.

Not sure if this really helps you, just thought I would throw it out there as an idea. Also dashboards are free, by this I mean you can make as many as you like. Not sure why you would want to put so many stereo controls on one single tile.

[user2461]

The driver is a virtual driver which implements the Pushable Button capability. The tiles are from the standard dashboard tiles. They are a button template with push for the command and the tile has a field for button number.

1. So, each button is a separate tile, with different values for "Button Number" which is passed to the driver.
2. The name comes from the template, and is the name of the device. That is one thing I would like change.

[user2461]

I came across it by mistake as I was trying to swap the tiles. It worked, so I was glad I made the mistake.

[user2461]

Wow. That is really fancy. I am planning on leaving the streaming selection to the stereo app, but after seeing your work, I might have to rethink that.
You said

Most of the tiles are just buttons and I used an image on the tile and edited the css so there was nothing else on the tile. 

How do you do that? I have been unsuccessful in finding how to edit the css.

[Grizzlebeard]

A very good read if you're interested in css.

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

DISCLAIMER: I'm no web designer and my knowledge of and interest in CSS is pretty low. Everything I've put together in this post is through searching, inferring and experimenting and if there are omissions, mistakes or things that can be done better (which there will be plenty of I'm sure) I'd be happy to be corrected. Everything here is basic 101 stuff for people versed in html/CSS but probably might as well be Greek to everyone else. I won't have time to put everything down initially so will…

[sburke781]

Click the cog button to open the Settings, click Advanced and then CSS. From there you can start to use some of the CSS examples from the noobs CSS topic (or other topics of course).

[Stephan.J]

The css was edited as follows:

and the layout as follows:

The key in this screenshot is: "customIcon": "he-blank"
This made the writing that usually shows up on the button hidden. Then the image was added like this:

Note the image file is a reference to an image that is saved on my Hubitat. HE allows for files to be stored on it. This means this dashboard images will only show up on a local dashboard. That is fine by me, but if you want both local and cloud you would need to host these files elsewhere.

I basically figured out how to do all this by reading this post:

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

DISCLAIMER: I'm no web designer and my knowledge of and interest in CSS is pretty low. Everything I've put together in this post is through searching, inferring and experimenting and if there are omissions, mistakes or things that can be done better (which there will be plenty of I'm sure) I'd be happy to be corrected. Everything here is basic 101 stuff for people versed in html/CSS but probably might as well be Greek to everyone else. I won't have time to put everything down initially so will…

[Grizzlebeard]

@user2461

I would really like to modify the thermostat tile in the upper right for my stereo. That way, I could have volume control, input control, selected input, and switch control all on one tile.

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!

[sburke781]

Also, I keep meaning to mention, you may find some use for my dashboard editor tool to reduce some of the CSS you need to learn. I haven't tackled thermostat tiles in any meaningful way yet, but over time...

[RELEASE] Simple CSS Editor

The Simple CSS Editor is now released, allowing easy access to common Dashboard styling options without any CSS knowledge required. Find it on Hubitat Package Manager (HPM) under the convenience tag. Why Would I Use Simple CSS Editor? Many people, after having used HE's built-in dashboards, want to take the next step in polishing their new creation, making it a showpiece in their home. Three common barriers to this are: Easy access to basic formatting options for dashboards and tiles A lac…

[user2461]

Thanks all. I am traveling now, but i have some good thi gs to try/do when i get home.