» » Мой web-интерфейс управления умной квартирой

 

Мой web-интерфейс управления умной квартирой

Автор: admin от 9-07-2014, 11:00, посмотрело: 396

Привет!

Последние 1.5 года я работаю над очень интересным проектом — это система управления домом по сценариям. Она позволяет навешивать произвольную логику (сценарии) на различные события в доме (срабатывание датчиков, нажатия кнопок, события от внешних сервисов, например, получнеие email или сообщения в twitter). Система имеет модульную архитектуру, весь функционал находится в плагинах. Если нужно добавить новый тип события или новые команды «домашнего API», нужно просто добавить плагин для этого.

В феврале у нас был первый релиз. Первая версия включала фреймворк для домашней автоматизации: систему плагинов и инфраструктуру для них (чтобы плагины могли описывать свой API и события, а также использовать API и подписываться на события друг друга). Сейчас близится релиз второй версии, основная фича которого — новый веб-интерфейс.

Мой web-интерфейс управления умной квартирой

UI теперь — модульное одностраничное приложение. Плагины могут описывать свой UI в виде html/js/css файлов, расположенных в ресурсах DLL. Клиентская часть UI основана на backbone.js и marionette.js, модули загружаются через require.js. В целом получилось довольно удобно для авторов плагинов — даже не имея глубоких знаний java script, можно, смотря в примеры, описать полноценный UI, который будет автоматически подключен в интерфейс управления домом.


Интерфейс управления домом состоит из «разделов», каждый плагин может содержать несколько разделов (а может содержать только один или может вообще не иметь интерфейса). Разделы поделены на 2 группы: системные (различные настройки, например, раздел домашних сценариев) и пользовательские (разделы, с которыми пользователи работают в повседневной жизни, например, «прогноз погоды» и «будильники»).

Также есть специальная страничка — «рабочий стол» (он же «стартовая страничка»). Там находятся «элементы стартовой страницы» — небольшие панели, которые отображают полезную информацию, а при клике на них открывается какая-нибудь страница или выполняется какое-либо действие.

стартовая страничка
Мой web-интерфейс управления умной квартирой

раздел с будильниками (в нужное время проиграет музыку или запускает выполнение сценария)
Мой web-интерфейс управления умной квартирой

раздел с прогнозом погоды (загружается из интернета)
Мой web-интерфейс управления умной квартирой

редактор сценариев (на скриншоте сценарий, который фотографирует посетителей, нажавших кнопку дверного звонка)
Мой web-интерфейс управления умной квартирой

страничка подписки на события: первый выпадающий список — события в системе (они описаны в плагинах), второй список — сценарии
Мой web-интерфейс управления умной квартирой

Интерфейс адаптируется под маленькие экраны мобильных устройств.

стартовая страничка на маленьком экране
Мой web-интерфейс управления умной квартирой

страничка с погодой на маленьком экране
Мой web-интерфейс управления умной квартирой

Сейчас, как я уже писал, система быстро приближается к релизу 2-й версии, исходный код лежит на github. Пока еще есть возможность что-то поменять. Очень хотелось бы получить конструктивную критику и предложения по улучшению (а если кто-то пришлет pull request, я буду просто счастлив).

Если кто-то захочет попробовать вживую, как все работает, напишите мне личное сообщение — соберу для вас свежий дистрибутив.

PS.
Кстати, я пробовал работать над этим проектом каждый день и это дало удивительные результаты. Сейчас идет 8-ая неделя работы в таком режиме (Longest streak 49 days). За это время проект продвинулся вперед больше, чем за предыдущие пол года. Я очень доволен результатом и планирую продолжать работать в таком режиме, сколько это будет возможно.

Источник: Хабрахабр

Категория: Программирование, Веб-разработка

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите два слова, показанных на изображении: *