📜 ⬆️ ⬇️

My web-interface management smart apartment

Hello!

For the last 1.5 years I have been working on a very interesting project - this is a home control system for scenarios. It allows you to hang arbitrary logic (scenarios) on various events in the house (triggering sensors, pressing buttons, events from external services, for example, receiving email or messages in twitter). The system has a modular architecture, all the functionality is in the plugins. If you need to add a new event type or new “home API” commands, you just need to add a plugin for this.

In February we had the first release . The first version included a framework for home automation: a plug-in system and infrastructure for them (so that plug-ins could describe their API and events, as well as use the API and subscribe to each other’s events). Now the release of the second version is coming, the main feature of which is the new web interface.
')


The UI is now a modular one-page application . Plug-ins can describe their UI in the form of html / js / css files located in DLL resources. The client part of the UI is based on backbone.js and marionette.js , the modules are loaded via require.js . In general, it turned out quite convenient for plugin authors - even without having deep knowledge of the java script, you can, looking at the examples, describe a full-fledged UI that will be automatically connected to the home control interface.


The home control interface consists of "sections", each plug-in can contain several sections (and can contain only one or may not have an interface at all). Sections are divided into 2 groups: system (various settings, for example, home scenarios) and user (sections with which users work in everyday life, for example, "weather forecast" and "alarms").

There is also a special page - “desktop” (aka “starting page”). There are “elements of the start page” - small panels that display useful information, and when you click on them, a page opens or an action is performed.

home page
image

section with alarms (at the right time will play music or run the script)
image

section with weather forecast (downloaded from the Internet)
image

Script Editor (in the screenshot, a script that photographs visitors pressing the doorbell button)
image

event subscription page: the first drop-down list - events in the system (they are described in plug-ins), the second list - scenarios
image

The interface adapts to the small screens of mobile devices.

start page on a small screen
image

weather page on a small screen
image

Now, as I wrote, the system is rapidly approaching the release of version 2, the source code is on github . There is still an opportunity to change something. I would very much like to receive constructive criticism and suggestions for improvement (and if someone sends a pull request, I will be just happy).

If someone wants to try live, how it works, write me a personal message - I will collect a fresh distribution for you.

Ps.
By the way, I tried to work on this project every day and it gave amazing results. Now is the 8th week of work in this mode ( Longest streak 49 days ). During this time, the project has advanced more than in the previous half of the year. I am very pleased with the result and plan to continue working in such a mode as possible.

Source: https://habr.com/ru/post/229235/


All Articles