House Layout Dashboard Request

There are a few examples...

It's definitely possible to set this up with Hubitat but it is quite a lot of work if you want something really custom/cool.

The simplest way is just to use your 2D or 3D plans as a background image to your dashboard and then lay your devices over the top using a fine grid layout.

I went for a custom solution that allows full flexibility by creating an html page running on a Pi which is running Apache2 webserver so that tablets (wall mounted or otherwise) can display the dashboard.

My dashboard is now more or less complete although I'm still waiting to add the proper 3D plans for my property. But I have lights, motion sensors, banner image changing on mode, contact sensors, AC's, lux sensors, Temp/Pressure/Humidity sensors, Google Mini and hub/displays, webcams (hosted via tinyCam) and chime/siren all active on the dashboard where the graphics update dynamically according to device status. I've implemented pop-up menus for lights, AC's etc so that I can control them directly from the dashboard. It's really cool and perfect for a wall mounted display to wow visitors :smiley: All achieved with the eventsocket and a stack of html/javascript/css. You will find various posts under my name on the subject.

I've also added a menu system and additional "pages" (actually divs in the one html page) for more detailed control over some devices just using standard HE dashboards running inside iFrames. It's really easy to set up and gives the best of both world - nice layout but not much coding necessary. I've added divs for things like weather, news (BBC, fox, sky etc), Spotify (which is really cool because you just click, up pops Spotify, and you can send the music wherever you want), a sketchpad (so you can leave a message for someone), local info, property info, emergency info, "contact your host" info (we plan to rent the place out after our renovation so the dashboard becomes a central control/info hub to the house for visitors), and some settings for preferences. By using a single html page and organising the content into divs, it all loads at one time at page load and you can switch across the content instantaneously.

1 Like