House layout with temperature tile

🛎️ Get Help
1

I'm trying to set up a dashboard where the background is a top down image of my house. I can add the image through the background settings, but it doesn't fit inside the "screen". Only half of the image is displayed, and when scrolling, it just moves the tilea.
Am I missing a step?

What I'm trying to accomplish is have the image of the house with all the temp sensor tiles placed on the image. That way we can view at a glance the temperatures. We have multiple sensors in each room , and it would be nice to easily see any differences.

We've been working hard on getting out home insulated properly, and i keep finding new problems :stuck_out_tongue: so knowing one half of the room is reporting 70, and the other half 80 keys me into a new problem to fix.

2

You can do exactly what you are looking for with Tile Builder Rooms. See this thread.

2 Likes
3

I did look at that, thank you. I'm not really sure i like the way it works, but I'll give it another shot. But I'll keep looking for alternatives as well.

4

If I were trying to do what you are doing using Tile Builder here is how I would do it.
I nominally divide the screen into two sections, lets say left and right.

I'd create two "Rooms" tiles (if I needed up to 20 temps), turn off the border and make the background transparent. Place one room over the left of the dashboard and the other on the right. You now can place you temperatures (and anything else) anywhere over your house map.

Just one approach.

P.S. For the background if you make it the same proportions as your dashboard it will fill it. Or you could add it via an image tile and control the size that way.

5

Forgive me, but how do you add an image tile? Add tile, image template? That might work if I can get the image to be opaque and in the background.

6

Go to settings, file manager and upload a file.

Click on that file to open it. Copy the URL that shows in the browser for this file. Something like:
http://192.168.0.201/local/myfile.jpg

Go to the dashboard and add a new device (any device) and pick the image as the template.

image
image1900×409 20.2 KB

Put in the URL you copied from the prior step. (case sensitive)

Size it how you like it.
image

You would have to add this to your CSS to put it in the background.
#tile-0 {z-index:-1}

7

if you are using the native Hubitat dashboard. Try this with CSS

Background image scale/stretch

html {
background-size: 100% 100% !important;
}

1 Like
8

I think Gary's solution is more what i'm looking for. Background images are static, but the tiles scroll. So now I just need to figure out how to decrease the transparency of tiles, and remove the Device names from tiles...

Thanks everyone!

1 Like
9

Try Simple CSS Editor by @sburke781 . It can help you make the most common CSS changes without having to know how CSS works. You can find it in Hubitat Package Manager.

1 Like
10

Ok, I held off, but will chime in... Thanks for the plug @wayne.pirtle :slight_smile:

The output from my editor when choosing to hide the titles for ALL tiles is:

/* *********  Tile Settings   *********  */

 /* ******* Hide All Tile Titles    ******** */
.tile-title { visibility: hidden; display: none; }

For an individual tile:

/* tile-33 Settings */
	#tile-33 .tile-title { visibility: hidden; display: none; }

The CSS Editor @wayne.pirtle refers to is here:

One day I will get back to it.... Too many interesting projects... Still, they are fun.... If you have any pressing requests in this space let me know.

1 Like