[RELEASE] Tile Builder - Build Beautiful Dashboards (Grid 2.0 Released)

That's not a bad idea, pretty much have a static layout and overlay the rooms, good idea. I might try that before I go too far done my current path.

Sorry folks, somehow I posted this twice but this one has some additional information so I'll leave it in.

Just wanted to show people what's possible with Rooms, a drawing app and a some time which was mostly fun.


FYI Blue dotted devices are controllable switches.

I'll write up how to get your devices to layout perfectly onto your floorplan in the next few days. In the above image I've reduced the walls to 1px and made them black, but most of what you are seeing is the drawing coming through as the opacity is set to 0.2.

The reason I left the walls in place (minimally at least) is than when you connect over the cloud you do not have access to the background image and having these other walls in place gives the image a decently finished look. Here s a screenshot from my phone.

Personally speaking that is good enough for me and I won't bother trying to get my full floorplan to load when I'm away from home.

The drawing itself is done in Visio which is well suited to this task, but all you need is a drawing tool that can output .png files.

4 Likes

That looks like a great plan (pun intended), I think I will pursue the route. I've already located a potential visio replacement for Ubuntu so I can whip up my floor plan. :slight_smile:

1 Like

In brief so you can get started:

  1. Layout your rooms on the grid to get the right proportions.
  2. Take a screenshot of your dash layout.
  3. Paste layout into your drawing program.
  4. Draw the rooms over the top (tracing if you will)
  5. Export your drawing to PNG and put it onto your files.
  6. Add an image tile and set the image to your new drawing.
  7. Set the image tile size to match the outline of your combined room tiles.
  8. There is a CSS setting needed to make the content of the image file fill the image tile. I'll append that later. Have to dash right now.
1 Like

Rooms has been updated to version 1.0.9

  1. Fixed bug with Multi Value Text Match not being processed.
  2. Added a few Icons.
  3. Added a second Publish button for ease of access to reduce scrolling.
3 Likes

As promised, here is the easy way to layout your floor plan on a background image with everything perfectly aligned.

https://github.com/GaryMilne/Hubitat-TileBuilder/blob/main/How%20to%20Layout%20a%20Floor%20Plan%20with%20Tile%20Builder%20Rooms.pdf

Like so:

Then you can layout anything you want on your background image and status and controls on the foreground.

3 Likes

Worked like a champ! Still under construction but taking shape. Great idea @garyjmilne!

1 Like

You are right, title, background, walls could all be placed on the background. In my own experience I've found I'm not hitting the 1,024 limit very often so it's not been an issue for me. The only time I ran into a size constraint was the basement. There I created a separate container (room) for my washer and dryer and just overlaid it onto the main basement room.

If I have room I'll keep things in the Tile because it's so much easier to update the tile than edit and replace the background.

Looking really good @wecoyote5. What are you using for your drawing program?

I like that you can open and close your garage doors by touch. I have MyQ whose integration is broken at the moment so I'm monitoring only.

Did you apply the update today. The extra Publish button doesn't seem like much but it's really helpful when doing precise positioning. Also, I added "Bottle" to list of Icons in todays release when I saw how you had used it. Does the bottle glow red above a certain temperature?

Looks like you are having fun.

2 Likes

I've been playing around, too. It would have been terribly helpful if I had any rooms that were square or had all right angles. It won't be usable remotely because it just doesn't look good if the walls are visible. But I have the stylized version I did earlier that works just fine for remote viewing.

BTW I think the second publish button is a wonderful addition!

2 Likes

Get rid of it, use a zen 16 or 17, or if you prefer zigbee an mhcozy 2 channel. You'll be much happier my friend. Also your prog is lookinig good.

3 Likes

Thanks. I'm on ubuntu so I used SweetHome3D to overlay the walls then GiMP to do the conversion from SVG to PNG and to add the furniture and such. That's what takes the longest as I end up being too picky on the images available :slight_smile: .

I hacked apart a MyQ remote and converted to local relay control a year or so ago when MyQ changed their API the last time. I would recommend that when you have a chance. I have extra monitoring via NodeRed's MyQ interface just as a backup.

1 Like

I think those are the two approaches most people will take, "stylized" and "realist". Just a matter of personal preference.

As to the WAF you just need to add some data that your wife would find useful. I'm in the same boat so I was looking today at these:

Seems pretty affordable!

I'm noodling the idea of being able to show\hide groups of information. So you could have a switch that said Show\Hide Plant Info and toggling it would turn that info on and off. It would have a couple of benefits.

  1. Less crowded rooms.
  2. The room could be "overbooked". Maybe you define 15 devices\data but as long as you are only showing 10 at a time it doesn't matter.

Not sure how to implement it but it will come to me.

2 Likes

EcoWitt and TileBuilder... What a combination... We could conquer the world.... :wink:

2 Likes

Looks great. I like your choice for the openings, the black bar with the green background. I might have to switch. Garage door looks especially good.

What drawing app did you use? Let me know if you are aware of any emoji characters that you would like included in future releases.

You must have embedded the names in the image as you have a different font and it looks good. Makes me wonder if I should add font selection back into Rooms. I pulled it because I thought there were so few words it wouldn't matter and using the default is always smaller.

Do you have controls layered over the lights and switches?

One of the great things is that we are so intimately familiar with our houses that even if you took away everything but the Icons, you would still know what's what.

Unfortunately there is some wasted space around the preview that I can't get rid of and it pushes the original publish button way down the page. The second one does speed things up.

So true, but I accept no blame for those choices. :laughing:

Are you aware of any instructions for this. Sounds like an interesting option as I have a couple extra remotes sitting around. I also have a second garage for our gardening stuff and it could operate both.

FYI I changed the name of this thread if something looks funny.
from:
[RELEASE] Tile Builder - Build Beautiful tiles for your Dashboard

to:
[RELEASE] Tile Builder - Build Beautiful Dashboards

More succinct and on message with the addition of rooms IMO.

2 Likes

Thank you! I used an app I had on my Mac called Home Design 3D, with a lot of post-processing in Photoshop.

The names are embedded in the image. The font is one called "Veggieburger" that I purchased years ago for a different project. IMO I don't think you need to add fonts back. The problem with font selection is that it's really subjective, and to some extent dependent on what people already have installed. You are never going to please everyone. Having one, simple, standard font works well. Again, just IMO.

No, I don't. And I probably won't go there. Again this is just me, but I've never seen the difference between turning a switch off on the wall and turning one off on a dashboard. I prefer that things just happen in my house. If I'm remote and need to do something, my "Main Panel" has been tweaked over the years to give me exactly the info and control that I need.

That's just a personal preference and not to take anything away from Tile Builder or those who like dashboard control. Tile Builder has been really, really fun to play with! And several of the original tiles have a prominent place on the Main Panel.

Also: +1 here for Ecowitt and @sburke781's integration. The snowflake over the freezer in my garage is an Ecowitt temperature sensor that's been out there inside the freezer for a couple of years, reliably letting me know that my freezer is, actually, freezing. I also have an indoor air quality sensor and a couple of the moisture sensors. I hadn't thought to add the moisture sensors to the outdoor area of my house plan, but that's a great idea!

2 Likes

I got rid of MyQ and have had local and 100% reliable control ever since. Followed the general plan in the following linked thread. Used a sacrificial GDO remote, the Zigbee relay mentioned and the Zooz garage app (even though there is no Zooz equipment involved) and it's been perfect. See: Local Control Options for MyQ Garage Door Openers

2 Likes

It's built right into the GDO. Garage door died unexpectedly and had to be replaced in a hurry with whatever they had a Home Depot.

Do you just add the MHCozy to the GDO as though it were a regular opener and then activate it over Zigbee?