[Preview]Tile Builder Rooms - Preview (It's very cool!)

Incredible! A while back I was wishing for something along these lines - Can't wait to give this a shot as it pertains! I am seeing the value this might bring already!

1 Like

Yes, I think WAF could be good. Now try layering some controls on top, its oretty easy.

1 Like

You set the size of the preview window in pixels when you are creating the Tile. When you place it on the dash it will automatically re-size to fill the dashboard tile.

In this image, I've taken one room and published to two different dashboards.

Simply by changing the size of the tile and the font size I can re-size the tile with reasonable fidelity so that it could be optimized for two different screen sizes and yet all be driven by the same TB Rooms design.

I've been using a tile size of 40 x 40. Making the "walls" 20 px thick makes the math and alignment easy.

1 Like

Planning the release this week, or?

This week for sure. Just tidying up the documentation right now and will do a few more examples and a video or two for release.

You can take a look at the docs from last week if you are curious. Action starts about page 10.
(https://github.com/GaryMilne/Hubitat-TileBuilder/blob/main/Tile%20Builder%20Rooms%20Help%20V1.pdf)

2 Likes

Got a notification that there was an update to Tile Builder. Applying the update adds an "add new room" button, but pressing the button results in a 404. Tried modifying and repairing with no change. I'm guessing that I jumped the gun and will wait (mostly) patiently for the real release. Documentation looks awesome so far.

Yes sorry, that was a preparatory update to the parent and the storage driver.
Rooms will be out no later than Thursday eve.

2 Likes

Thanks, you will have to re-think your dashboards again! But I think you will have a lot of fun with it.

Nah... I'll just add a new dashboard. The old ones are fine the way they are. :grin:

I'm sure they are, but who can resist the opportunity to combine two or three tiles into one?
image

4 Likes

Hi all, I'm digging into this and cannot find info on how to change the Z-Index on an icon. I created an emptyattribute device with the background color to create a 'opening in the wall' but it gets overlaid by the adjacent room. The instructions indicate that I can change an icon's index but I cannot find that setting. Where is that? Thanks

The z-index is one of the Effects options for icons.

Does the z-index also affect adjacent room tiles? Or is it only within the 1 room. I'm using this as a hallway/door between 2 rooms. Without touching the z-index It looks fine in one room but is overlaid by the other room. I've used up both icon effects because I needed to rotate the icon 90deg (default effect) and change it's color to match the background (custom effect E31). I've added the z-index element to the E31 class as a test but it didn't make a difference, should that work? It's still obscured by the adjacent room and I need to know if that should work or not so I don't go chasing my tail. :slight_smile:
Thanks!

From my own experimentation the z-index applies for the objects within the room*. To raise or lower the whole tile you must add some CSS. The Classes tab has examples of various useful CSS statement including the z-index.

*Given you are using a user defined class you could try using !important after the z-index statement and that should take precedence.

Gotcha, thanks, I think I'm back on my horse. I'm just getting started, and it's still way under construction but it's taking shape.

3 Likes

I like it. Your table and chairs is very creative. How did you do that?

I’d like to add more icons to the app as I see what people are using and what they request.

That was a little bit of a challenge that I wanted to solve as I plan to add others (couch, island, etc). The table is an image tile pointing to my Google photos (so it works when viewing via cloud but it takes a bit of editing with GiMP to get it exactly right with the correct background color, rotation, etc) but I couldn't get the light to appear above it. No matter what I did with the z-indexes the table always obscured the light. So what I did was make the entire dashboard background the background color of the room and made the room 100% transparent. I then put the table on the lowest z-index and put the room tile over it. I'm sure as I try to add more things I'll find new challenges bit so far there seems to be ways to solve.

Will PM you my specs so you can create my layout. Take your time, I can wait up to a day for a final draft that is perfect. :wink:

3 Likes

This thread has been consolidated with the main Tile Builder thread which can be found here.

Closed per OP's request.