This sounds really similar to my own creation. I have used inkscape to create a multi-layer SVG that I use to control all my smart devices.
Here are some pictures of my “Whole House Remote”'s layers.
Main Floor:
Basement:
Backyard:
Frontyard:
Utility Details:
I have added animations to many items, the ceiling fans rotate when the switch is on, and are stationary when off. Everything is sensitive to touch/click, clicking on the items or fans will send the proper command to the items to make the remote really work like a remote, not just a viewer. Lights obviously change color based on state. The energy meter updates every second, and the pointer on the meter moves to the correct location. Temperature meters change color based on the temperature (blue for cold, red for hot etc…). You can see the color options for temperature within the thermostat selector on the right. The motion Sensors (running man icon) change colors based on last detected motion time. example (If the motion sensor was just activated the color will be red, and after 5 min the color will be black. The color will change based on the gradient pattern displayed on the top left of the main floor layer. I really like this feature as it allows me easily at a glance not only know where the motion is and how long ago it was. It is quite easy to see the path of someone that moves through the house based on the color. I have also integrated some light sensors and I display them with a black background for dark, and light grey background for bright and then vary the level of grey based on the actual value of the sensor (pretty sure I once again just used the alpha channel to produce the varying grey color). I have also been able to get the Circular part of the thermostat to slide up and down (only vertical movement) with touch/clicking&dragging to set the Set Point of my nest to the desired temperature.
Clicking/Touching the SVG on the stairs will switch to the basement view by simply hiding the layer for the main floor and displaying the layer for the basement. In my case I simply change the alpha channel from 100 to 0 (to make invisible) and opposite to make it visible. This gives me the ability to traverse the floor plan in a continuous way, that just feels more natural. then to return to the main floor just click the stairs on the layer for the basement to get back to the main floor.
It is also possible to click/touch the back deck to switch to the backyard view, and then click on the house to get back to main floor. Similar for the front yard.
selecting one of the images at the bottom of the page will display a full size version of the video feed for an easier time actually seeing details in the video.
clicking/touching the Energy Meter will bring up the energy details item that will display the calculated costs of electricity broken down into time periods for comparison and gives me the ability to detect abnormal usage conditions quickly. I display the amp’s used inside the meter itself.
The Irrigation details are still a work in progress. I just recently (Finally) got the Rachio web hook working and now receive updates to my sprinkler items. So now I can (next time I pick up this project again) add details and animations for the irrigation system.
I am using AngularJS as well to make it all work together.
This being an SVG it looks good on all displays, even my iPhone display looks nice. being AngularJS under the hood however does limit iOS devices to versions that have desktop class web browsers (I think its like iOS 13 or newer) but as time goes by that problem is going away.
TODO:
I still have aspirations to intergrate Some sort of water flow meter to get actual water usage numbers (Price is prohibitive still). Think I found a way to grab the data from my gas meter directly the same way my gas company does.
I have also created a custom website to help my children with their chores. I get tired of having to remember everything so this way a website can do it for me. I am seriously considering integrating that into OpenHab in hopes I could then use Siri to interact with my kids chore lists, mark chores as complete, add new chores to their lists etc… via the HomeKit add-on. For some reason I think my kids would listen to Siri more then me, so being able to ask siri what chores are left to be completed for the day and it verbalizing the list announcing over my HomePod would probably get better results then me telling, and telling, and telling, and yelling and … Not to mention the “Cool” factor might help them continue to use it for more then a week.
