3D Room Lighting Dashboard With Dynamic Auto Scene Changes

📝 Dashboards Hubitat Dashboard
3

A few thing to add regarding using an Image tile for a background.

  1. I had issues with the background showing through the edges if the image was not perfectly sized. You can make the background transparent with CSS to get rid of this.
  2. Sizing the image to fit the dashboard when rendering is tricky to get it just right. I found it is is easier to get it close, then tweak the dimensions with CSS.
  3. The image will not go fully to the left of the tile, but the image location within the tile can also be changed with CSS

So I use this in the CSS for the image tile now to take care of transparency and the z-index:

/* Make Image as background transparent and behind others */
#tile-114 {
z-index: -10 !important;
text-shadow:none;
background-color:transparent !important;
border:none;
}

I use this to change the image location and size (note that I am only using left position, width and height, but you can add right, top and bottom offsets if needed):

#tile-114.tile.image {
left: -10px !important;
width: 1320px !important;
height: 735px !important;
}

Check what your image size actually is, then make adjustments from there for width and height in CSS.

I am also playing with using an attribute tile instead of an image tile. It works about the same, but does not enlarge to full screen when clicked. This is a better method if you don't like the fact that an image background goes full screen when clicked.

I wrote this simple driver to save an image as an attribute. Use this instead of file manager to set one of the three image attributes to an image from local files. Just put in your hub ip address, then you just use only the file name to set the image. You can make as many attribute image virtual devices as you want. Just include that device in your dashboard, then choose it and use attribute type, and pick one of the three images from the attribute list. The nice thing about the attribute tiles is that they do not need to be refreshed, they instantly change when the image is changed.

Attribute Image.groovy

You need some different CSS to modify an attribute image, so use these below, in addition to the one to make it transparent is background like an image tile. You also want to get rid of the title on the attribute tile:

/* Image Resize Attribute */
#tile-32 .tile-primary .image {
left: -10px !important;
width: 1300px !important;
height: 650px !important;
}
#tile-32 .tile-title {
visibility: hidden;
white-space: nowrap !important;
overflow: unset;
}