New Hubitat User - Creating floor plan based security panel

Hi,
I've just started out with home automation and got a Hubitat last week. I'm creating a floor plan based dashboard which will show contact sensors, lights and a host of other stuff visually on a floor plan of my house and gardens.
It's early days but IU have a working dashboard (was going to include picture but won't let me add link or picture :slight_smile: ) which.-

  • Shows red dots on doors etc when they are open.
  • Lights on (yellow glow).
  • Screen grabs from front CCTV cams when triggered by motion detector on drive(to catch trigger event in the act).
  • Log of recent drive sensor events.
  • Highlighted zone on drive way indicating recent trigger which fades out over time as seconds counter counts up from time of event.
    Idea is to ultimately mount a tablet or similar on wall and for this to act as an alarm panel once I have more sensors. Then move onto similar concept for heating where rooms are shaded according to temp etc.

Just wondering if this is something people are interested in, if it is then I'll maybe make some videos and documentation along the journey.

Thanks
Dave

7 Likes

Yeah sounds good!

Cool. Will post some sample screenshots once I work out how to get this forum to let me :joy:

2 Likes

Just keep posting, at some point you hit the magic number...

2 Likes

At last able to upload a picture of the dashboard !!

4 Likes

Wow that puts my dashboards to shame!

Thanks, it's still a work in progress but is coming along quicker than I expected. I only have three sensors at the moment and a couple of bulbs. I expect the plastic will get a workout on Prime day next week :rofl:
The plan is to concentrate on sensors first on the basis that it can replace (or supplement) the existing alarm system and then start controlling devices based on those.
I also want to include links to historic CCTV clips in notifications when some kind of alarm event is triggered but that will be another project.

2 Likes

If you have not already done so take a look at these two documents... I made the mistake of reading them only after I started having issues.

https://docs.hubitat.com/index.php?title=How_to_Build_a_Solid_Zigbee_Mesh

https://docs.hubitat.com/index.php?title=How_to_Build_a_Solid_Z-Wave_Mesh

1 Like

Thanks for the pointer Brad, I actually read the Zigbee doc last night, not planning on getting any Z-Wave stuff but will read that one first if I do. I suspect my Zigbee bulbs may at some point cause an issue if they get ideas above their station and try to be routers but I have a basic Zigbee hub that I can attach them to if need be (which I think) will isolate the mesh's.

It will. Also a good practice to put them on different zigbee channels.

Hi I just thought I'd add an update to this project as I've made a lot of progress over the past couple of weeks.


Physically I now have .-

  • Dashboard running on a tablet mounted using a simple home made mount on the wall at the end of my desk. (photo 2)
  • Contact sensors on all house and outbuilding doors
  • PIR sensors on driveway and two rooms.
  • Temperature sensor in conservatory.
  • Four REOLink IP cameras
  • Five external smart lights.
    Functionality wise.-
  • When something triggers the drive the JS code on the dashboard requests snapshots from each camera. (You can see me sneaking back in after triggering it). A red bar shows on the driveway as an indicator (gradually fades with timeout). And a log entry appears in the log box (lower right corner) showing time of last ten events.
  • When a door is open a red lock indicator shows on the relevant door.
  • When a light is on a yellow glow appears (see just below lower left room)
  • When an internal room PIR is tripped the room is shaded red (dots at the moment but will change to solid).
  • The conseratory (top right of lower floor) is colour coded according to the current temp. (Planning on moving temperature to another similar dashboard once I have more sensors).

CCTV Functionality.-

  • Clicking / touching one of the images enlarges the image.
  • Clicking / touching again plays the most recent clip from that camera. (this was what took most of the time to work out trying to get correct API information.)
  • Plan is to have a list of camera clips and relate based on time with the driveway trigger events.

Other than that I'm using Javascript (from the javascript injector big shout out to mbarone) to do all the functionality and also restyle standard dashboard items to be resized smaller.)
I've hit an issue with the cheap Android tablet I bought not playing H264 video so will need to change that sometime. Also to resolve CORS security issues of the tablet talking to the cameras I've had to build a hubitat driver in Groovy to handle that (which was interesting).

If anyone's interested in the details of what I've done / found so far then feel free to ask.

4 Likes

This is awesome! Did you ever finish? I want to do something like this but i don't know where to start.

@DTsquared , beautifully done with a clean looking, simple appearance. Would like to hear more details on how it was set up (e.g., was a lot of CSS code manipulation done, or was this done using the basic tools of the Hubitat Dashboard by just overlaying tiles etc.). Is this being maintained solely on the hub, or are you hosting it external to the HE hub, and if so, details please. Anyway, very nicely done!

1 Like

Hi @moh Thankyou I’m glad you liked the design. This is pretty much all done with CSS manipulation using javascript and mbarone’s “Dashboard JavaScript Injector” (IMO this should be standard Hubitat functionality).
From a Hubitat dashboard perspective I started by laying out a grid with the smallest squares I could get away with (18x15) being careful to match this with the screen ratio of the tablet I was going to use. I then use Javascript code to tweak the appearance of the various tiles where they don’t like to be shrunk so small. Tiles that I need on the dashboard for functionality but don’t actually want to see I also hide using Javascript to modify the CSS.
The floor plan is an SVG file which I created in Adobe Illustrator but there are plenty of other SVG editors around. You have to be careful about how you layer and group the SVG objects as each item that you want to control needs to have a unique ID in the SVG code. (Also different export options from Illustrator can screw up the format). The final SVG is loaded into the Hubitat itself using the Settings\File Manager option then referenced using an image dashboard tile with a direct URL to the hub such as http://hubip/local/FullHousePlans_v10.svg
There’s a 2 second Javascript delay which checks the content of each of the device tile’s states. For example for a door contact tile starting at the tile element it checks
Tile.childNodes[1].childNodes[1].className=='tile-primary closed'
Detects if the contact is closed (otherwise it is open).
The CCTV was the biggest hassle, getting the snapshots whenever the driveway sensor was triggered was simple Javascript. But to get the historical video clips I couldn’t get a direct connection from the javascript running on the tablet because the ReoLink cameras I’m using don’t adhere to CORS standards that the browser requires. The answer was to write a Hubitat device driver in Groovy to talk to the cameras and pick up the history.
I’ve been busy with work, decorating and other projects recently so this has taken a backseat. I’m about to start looking at controlling my heating system on a room by room basis (what with the current gas prices) so I suspect the next step may be to add temperature sensors to each room and then create a thermal overlay to shade each room based on temperature.
I’ll post once that is done. Hope this information helps in the meantime though.
Dave

1 Like

Hi @user2674 thankyou. It's in daily use but still a work in progress. I've posted above more details about how I went about this. (It's worth pointing out that I am a professional developer).

@DTsquared that is a very impressive dashboard. I love that you've managed to integrate the camera event clips and notifications - I've not seen that before in a custom dashboard.

As a CCTV installer I have one small criticism....Camera 4 is driving me nuts. Wide angle cameras always have some image distortion, so it's preferable to set a vertical line dead centre of the view to balance it (even at the expense the garage door not appearing perpendicular). I had to nitpick and find something I didn't like but that's about it! :wink:

Wow @DTsquared , thanks for the detailed how to. Amazing results. Thanks for taking the time to describe how you did this.

I've always dreamed of seeing a dashboard with your home's floorplan overlaid by the Z-Wave (and/or ZigBee) mesh. Might become a handy way to isolate the cause of signal strength issues or unresponsive devices, etc.

People underestimate the power of water heaters, large aquariums, steel trusses, etc. to attenuate high-frequency RF signals. But visually it would kinda stand out.

Nice work!!

Sounds like a great idea. I still haven't got my head around where to get the mesh data but if time allows it would be a fun addition.

Just thought I'd add an update to the progress on this.
With winter coming and energy bills going up I decided to invest in a Tado system with smart TRV (radiator valves). I work from home and have been complaining for years that I have to heat the entire house whenever I get cold in my office.
But to keep this thread on topic I've now purchased six additional Zigbee temperature sensors and also written a driver to connect to the Tado TRV's to READ their temperature (not their target heating setting). This now means that the entire floor plan (apart from downstairs loo) can be colour shaded according to the temperature of each room. I'm still working on the best colour scale so that it is intuitive to read and also i think the Tado TRVs need calibrating so they are closer to the Zigbee sensors but other than that it is working.
I'm hoping when time allows to get all the code up onto GitHub repos for others to use if they would find it useful. And possibly making some videos to explain the entire process.

1 Like