As @wecoyote5 said you can layer on control elements. It might looks like this.
Clicking on it just brings up the UI for whichever template you have assigned. In this case it's a color bulb so it brings up this.
1 Like
One thing I just tried which seemed to work. I changed the CSS for the control tile to use opacity:0 and now it looks like you can just click on the light and it will turn on/off or bring up the UI. Obviously personal preference but when I have the layout completely done I plan to 'hide' all the blue boxes so I can just click/touch on the device, this bulb was turned on by the dashboard. @garyjmilne, this is really cool what you can do with this! Great work!
#tile-6 {opacity: 0 !important;}
1 Like
Excellent idea. I used the blue boxes to tell me/others what is clickable but I like your idea too. Im working on my layout right now and will post a doc when I’m done to help people get through it as it’s a bit tricky to get everything aligned.
Might be too late to benefit you Mark but I’m sure you are learning a lot and having fun!
Makes me wonder if I could do this though a switch placed on the dashboard. I can think of a few things it would be nice to quickly turn off and on. Something for the noodle list.
2 Likes
I've been designing HMIs for over 2 decades and, it's a completely personal preference, I've always strived for a clean/minimalistic look. Otherwise it can spiral and become a bit cluttered and confusing (what you've done here is amazing so please don't take this a criticism, just my preference). I've gotten way too many support calls over the years because there's too many things the user has to look at and comprehend. So when it comes to wifey using the dashboard it needs to be clear and concise 
.
I don't have your experience, (had to google HMI) but I've been looking at UI's for 40 years and know a good one from a bad one. Hubitat is a pretty tech savvy bunch so the design UI can be fairly dense IMO if its well organized. What the wife sees is up to you.
But what I'm referring to dovetails into your situation. Imagine a button somewhere on your dash that said "Design View". Clicking that would show all the edges of all the devices and the three dot menu. Another might be Zigbee Details and the Zigbee details for each repeater would show, click again and they disappear.
Just a thought at the moment.
P.S. This might be useful re your question yesterday that I can't find.
I'm going to be visiting the same topic soon.
1 Like
Ooh, that sounds cool, and yea, I'm not worried about the Hubitat members having issues but that's all who use them. Gotta keep the WAF high otherwise it's harder to justify buying more goodies .
And thanks I'll take a look at that thread, too; for the moment I bailed and am just using the HE file manager for now and keeping it local.
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 above image I've removed the walls entirely and set the room opacity to 0.2 so that the drawing comes through.
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.
Hell yeah!
I think I can up with a pretty good compromise for this. Will be posting it in a few minutes.
3 Likes
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.
1 Like
In brief so you can get started:
- Layout your rooms on the grid to get the right proportions.
- Take a screenshot of your dash layout.
- Paste layout into your drawing program.
- Draw the rooms over the top (tracing if you will)
- Export your drawing to PNG and put it onto your files.
- Add an image tile and set the image to your new drawing.
- Set the image tile size to match the outline of your combined room tiles.
- 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
- Fixed bug with Multi Value Text Match not being processed.
- Added a few Icons.
- 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.
Like so:
Then you can layout anything you want on your background image and status and controls on the foreground.
3 Likes
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 .
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
