House layout with temperature tile

[sahamilton9864]

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 so knowing one half of the room is reporting 70, and the other half 80 keys me into a new problem to fix.

[garyjmilne]

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

[RELEASE] Tile Builder - Build Beautiful Dashboards

Tile Builder Rooms is now Available for Download via HPM. TB Rooms allows you to construct tiles containing multiple devices intended to represent a room. Tiles are placed on a grid using XY positioning to give exact control. [image] The appearance of each device is governed by the Device Profile that is applied to the device. For example the default device profile for a bulb looks like this (in short): [image] When the bulb is in the Off state it will have a red circle background and sh…

[sahamilton9864]

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.

[garyjmilne]

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.

[sahamilton9864]

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.

[garyjmilne]

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.

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

Size it how you like it.

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

[Navat604]

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

Background image scale/stretch

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

[sahamilton9864]

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!

[wayne.pirtle]

@sahamilton9864

So now I just need to figure out how to decrease the transparency of tiles, and remove the Device names from tiles...

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.

[sburke781]

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

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:

[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…

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.