Веб интерфейс для умного дома

Сервер умного дома – это «мозг» системы управления. Он реализует и поддерживает работу всей сети. Генерирует и посылает необходимые сигналы на контроллеры, которые отвечают за управление датчиками, сигнализацией, климат-контролем, прочими функциями и режимами, заложенными в программное обеспечение.

Виды сервера

Управление умного дома осуществляется с сервера. Он может быть централизованным (стационарным) и децентрализованным (может работать удаленно).

Серверная стойка умного дома класса De Luxe

Основные требования к серверу:

• Стабильная работа.
• Обязательное резервирования данных.
• Контроль версий ПО.
• Возможность обновления и доработки функционала.
• Быстрая наладка в случае сбоя.

Стационарный сервер, который поставляется в комплекте для умного дома, стабилен и имеет широкий функционал, но также имеет некоторые недостатки. Это и стоимость, и необходимость установки дублирующего устройства, на случай выхода из строя основного прибора. Главным недостатком можно считать невозможность управления системой на расстоянии.

Сервер и web-сервер умного дома среднего объекта

С появлением планшетных ПК и смартфонов, стало возможным управление различными приборами дистанционно, что значительно упрощает жизнь. Если установить управление умным домом на базе сервера с удаленным доступом, то взаимодействие с системой станет на порядок более эффективным.

Платформа Raspberry Pi 2 для построения веб-сервера умного дома

Web сервер для умного дома — это микро, планшетный компьютер или смартфон. Платформой для него может быть любое устройство с большим объёмом оперативной памяти (Raspberry Pi 2 или Raspberry Pi 3, AC500-eco, Arduino), мощным процессором и возможностью выхода в сеть Интернет. Web сервер в составе системы умный дом обеспечивает визуализацию управления через браузер.

Веб сервер для умного дома работает по простому принципу. Мобильное устройство выступает в качестве основного ядра, дистанционно отправляющего командные сигналы. Программное обеспечение, которое можно купить или прописать самостоятельно, превращает Android, Linux или Windows устройства в диспетчерскую станцию, взаимодействующую с контроллерами по wifi. Преимущества блока web умный дом в том, что можно не только управлять системами в доме, но и производить любые операции извне. Также возможна настройка на расстоянии и хранение данных на облаке.

Интерфейс управления умным домом

Функционирование системы невозможно без интерфейса (универсального средства управления). Принцип его работы базируется на возможности выхода в интернет, то есть это программная платформа, позволяющая комплексно управлять всеми домашними автоматизированными системами. Также интерфейс умного дома обеспечивает информационное взаимодействие и поддержку рабочего состояния. Такая система совместима с любым ПК или смартфоном с различными платформами.

Интерфейс умного дома создается для каждого пользователя индивидуально

В современной системе умный дом web интерфейс делают модульной архитектуры, построен на PHP, CSS и JavaScript. ПО прописано в плагинах UI как html или css, расположенных в ресурсах DLL. Их можно добавлять или менять по своему усмотрению. Примерная структура интерфейса выглядит так:

• Стартовая страница на рабочем столе. На ней в виде значков отображаются все элементы управления.
• Плагины содержат разделы, подразделяющиеся на системные (для работы с настройками) и пользовательские (для непосредственного управления функциями).

Самостоятельное создание веб интерфейса для управления умным домом осуществляется с помощью специальных онлайн конструкторов с готовым пакетом данных.

Как сделать сервер для умного дома

Самостоятельно сделать сервер достаточно просто. В корпус неиспользуемого компьютера (желательно брать модель от 2006 года выпуска) монтируется в порядке очередности:

• блок электропитания;
• кулер с пониженным производством шума;
• материнская плата с современным процессором;
• оперативная память, соответствующая требованиям процессора;
• несколько жестких дисков (желательно NAS-систему) и контроллер sata;
• сетевая карта с поддержкой host режима;
• модуль wifi.

Комплектация может видоизменяться в зависимости от требований. Далее следует настройка сервера с использованием полнофункциональных сервисов (подойдет система Linux) и установка программного обеспечения.

Самостоятельная сборка сервера для умного дома под названием AVRobot

Для того, чтобы сделать веб сервер для умного дома, достаточно установить в ПК или смартфон соответствующее программное обеспечение, взаимодействующее с управляемыми системами (датчиками, отвечающими за работу климат контроля, включения света и т. д.).

Онлайн конструктор создающий web-интерфейс для управления «умным домом» и скетч для ардуино.

Поскольку основные трудности у строителей «умных домов» вызывает создание web-интерфейса, то я решил написать онлайн конструктор, который всё сделает сам, включая скетч для ардуины и сервер Home stD для обмена данными. Подключение переферии к ардуине остаётся на совести хозяина, однако в скетче написано, что и куда.

Пользователю останется только скачать архив с файлами, рапаковать его на целевом устройстве и загрузить в ардуину готовый скетч. Установка каких-либо дополнительных пакетов и серверов не требуется.

Home stD можно использовать на любом компьютере работающем под управлением или на роутере с прошивкой OpenWrt .

Общий размер файлов составляет около 200кБ, так что для работы на роутере не потребуются дополнительные накопители (флешка, sd-карта). Ресурсоёмкость составляет 3-5% CPU (роутер mr3020).

Несмотря на, может быть, покажущуюся сложность, все очень просто и займёт минут 10-15.

Далее обо всём подробно.

Подключение ардуины

… к компьютеру (или RPi по USB) не должно вызвать затруднений , а о том, как подключить ардуину к роутеру (по USB или UARTу) можно прочесть вот здесь (ссылка описывает процесс для роутера TL-MR3020).
При подключении к UARTу (я предпочитаю именно этот вариант) никаких пакетов устанавливать не нужно , только подпаяться к контактам и отредактировать файл /etc/inittab как описано по ссылке.

Про подключение к UARTу на RaspberryPi, читайте в конце этой статьи, в главе UART.

Внешний вид

Идея web-интерфейса достаточно проста и в чём-то даже аскетична. Связано это с тем, что мне разонравились нарисованные комнаты с лампочками и прочие полумеры, поэтому выбран стиль «пульта от телевизора».

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

Работает на любом устройстве (компьютере, ноутбуке, планшете, мобильнике) имеющем браузер.

Главный экран интерфейса. Помещений может быть до десяти.

На основном экране расположены кнопки с названиями помещений, нажатие на которые открывает панель с органами управления соответствующим помещением.

Здесь могут располагаться несколько кнопок ( D2 , D3 и т.д.) для включения чего-либо с возвратом статуса. То есть если это что-то (например верхний свет) включено, то надпись подсветится.

Несколько кнопок для отправки сигнала (SENTSIG1 и т.д) не требующего подтверждения. Например пульнуть сигнал с ИК-передатчика (если таковой имеется) или увеличить/уменьшить значение диммера.

И несколько полей (INDATA1 и т.д) для приёма каких-либо данных/сигналов. Например информация с сенсора температуры или датчика движения. Ну или можно вывести значение того же диммера.

рестик справа-сверху — закрытие панели.

Разумеется названия кнопок можно изменять по своему усмотрению и менять местами.

Под кнопкой Info скрывается панель с информацией о статусе системы.

Надпись Connect! говорит о том, что всё хорошо, а Count update: — это просто счётчик запросов (браузер с интервалом в

700мс запрашивает у ардуины данные). Интервал можно менять.

Если произойдёт какая-то неполадка, тогда на экране появится сообщение ERROR, а в Info будет описана причина ошибки.

На мобильном устройстве:

Весь алгоритм работы системы описан в конце статьи.

Конец ознакомительной части.

Конструктор

Записал коротенькое видео по работе с конструктором, посмотреть его можно вот по этой ссылке.

«Умный дом» будет работать на любом устройстве, а вот конструировать надо на обычном компе или ноуте .

В браузере должны быть включены cookie. Впрочем они и так почти у всех включены.

Конструктор предельно прост и интуитивно понятен . Открыв в соседней вкладке вот эту ссылку, вы окажитесь на первой странице (всего их четыре):

Чтоб понять и потренироваться, проделайте всё как написано ниже.

Здесь нужно выбрать количество помещений (максимум 10). Предположим, что у нас будет два помещения (прихожая и кухня), тогда выберите 2 и нажмите «Далее».

В «названии вашего умного дома» и «названиях помещений», можно использовать только буквы, цифры, пробел и нижнее_подчёркивание.

В дальнейшем Вы можете это исправить в файле index.html.

На следующей странице нужно придумать название вашего «умного дома» (это то, что будет написано на вкладке браузера) и вписать его в поле Название страницы.

В поля Адрес сервера и Порт сервера ничего писать не нужно (сделано на будущее).

Названия помещений у нас уже придуманы (прихожая и кухня), вписываем их и нажимаем кнопку «Далее»…

Здесь Вы увидите главный экран своего будущего интерфейса:

Нажмите на кнопку «Прихожая»…

Выберите, сколько вы хотите кнопок для включения чего-либо с возвратом статуса (Количество кнопок вкл/откл), кнопок для отправки сигнала не требующего подтверждения (Количество кнопок отправки сигнала) и полей для приёма каких-либо данных (Количество полей для приёма информации).

Для примера выбрано по одной кнопке (максимум по пять).

Теперь закройте панель кнопкой , проделайте то же самое с «Кухней» и нажмите кнопку «Далее»…

Появится главный экран с кнопкой «Скачать архив».

Можно открыть «Прихожую» или «Кухню» и посмотреть что получилось…

Поля для приёма данных заполнятся как только появится сигнал.

На этом работа с конструктором закончена, нажмите и переходите к следующей части.

HomestD

Распаковав архив, у Вас появится папка — mydomXXXXXXXXXX, переименуйте её так, чтоб получилось mydom и перейдите в неё.

Переименуйте файл indexXXXXXXXXX.html в index.html, а файл domXXXXXXXXX.ino переместите в папку со скетчами.

В папке mydom останутся файлы index.html, jquery.js и style.css.

Откройте файл index.html и в двенадцатой строчке — var flagobnov = 0, переправьте нолик на единичку — var flagobnov = 1 (отключено в конструкторе). Сохраните файл.

Дополнительные пояснения к скетчу и файлу index.html, можно с лёгкостью найти в конце статьи.

Скачайте и установите библиотеку CyberLib (инфа о CyberLib), а затем загрузите скетч (domXXXXXXXXX.ino) в ардуину.

У Вас получится вот такая программа:

Далее идёт пример с подключением лампочек и датчиков, если сейчас возится с этим лень, то можно пропустить эту часть и перейти сразу к запуску интерфейса. Позже вернётесь и прочтёте.

Программа предполагает две лампочки с возвратом статуса, два сигнала и два поля приёма информации.

В примере будет использованы: четыре LED-диода (два для прихожей и два для кухни) и два датчика DHT22.

Прихожая — первый лед подключаем к пину D2 (это свет с возвратом статуса), второй лед поключаем к любому цифровому пину (кроме D3, он у нас зарезервирован для кухни), например к D4, а DHT22 подключаем к D5.

Кухня — первый лед подключаем к пину D3 (это свет с возвратом статуса), второй лед поключаем, опять же, к любому цифровому пину (кроме D2, D4 и D5, они у нас уже заняты), например к D6, а DHT22 подключаем к D7.

Схема подключения будет такова:

Вместо лед-диодов и датчиков DHT может быть что угодно.

Теперь скачайте и установите библиотеку stDHT для использования нескольких датчиков DHT (здесь про неё можно почитать) и отредактируйте сформированный скетч вот так (пояснения ниже):

•В самом начале скетча добавили счётчик, он понадобится для работы с датчиками DHT (об этом ниже) и две переменные, в которые будет записываться температура:

•Для включения, отключения D2 и D3 всё уже сделано.

•Для отсылки сигналов SENTSIG1 и SENTSIG2, в функцию void setup(), добавили инициализацию пинов на выход и подтянули их к «земле» внутренним резистором:

А для выполнения действия (будут кратковременно вспыхивать лед-диоды D4 и D6), в функции switch(cod_comand), в case 102: и case 105:, добавили соответствующий код:

•Считывание показаний датчиков DHT (считываться будет только тепература), помещено в функцию if((millis()-timme) > 440).

Интервал между чтением датчиков, должен быть не меньше двух секунд, поэтому применён следующий код:

Первый датчик будет считываться каждые 2200мс, а второй каждые 4400мс.

•Данные (t и t2) с датчиков помещены в функцию void trans(), в соответствующие строки (INDATA3 и INDATA5) :

И наконец остаётся последний шаг — скачать программу homestd для вашего устройства, переименовать (для удобства) homestdXXX в homestd и скопировать в папку mydom.

В итоге содержимое папки mydom будет выглядеть так: homestd, index.html, jquery.js и style.css.

Home stD — это web-сервер и сервер для ардуины в одном лице. Его назначение — это обмен данными между web-клиентом (браузер) и ардуиной. Иными словами, homestd принимает запросы от клиента по протоколу TCP (протокол UDP будет добавлен в следующей версии) и передаёт их ардуине, и одновременно принимает данные от ардуины, которые забирает web-клиент.

Вернёмся к делу. Подключаем ардуину, копируем папку mydom в любое удобное место на целевом устройстве, например в корень, — /mydom, делаем файл homestd исполняемым…

… и запускаем командой с пятью параметрами:

На роутере без sudo.

Позже, для автоматизации запуска, добавите эту команду в файл rc.local

Вписать надо до строчки exit 0, вот так:

Первый параметр — /dev/ttyUSB0, путь к ардуине. Узнать можно так:

Второй параметр — 57600, скорость «сом»-порта. (4800, 9600, 19200, 38400, 57600, 115200)

Третий параметр — TCP порт. Порт можно указать любой, однако если у Вас больше нет никаких серверов занимающих стандартный (80) порт, то укажите его. Если система ставится на роутер, то скорее всего там есть «web-морда» и 80-ый порт будет занят. Тогда укажите что-нибудь другое, например 82 (заходить в «умный дом» будете так — адрес:82). Либо можно перекинуть на другой порт «web-морду».

Четвёртый параметр — путь к папке /mydom/ (с обязательным слешом / в конце).

Пятый параметр — может быть или 1. Если указать 1, тогда в папке /tmp/ будет создаваться текстовый файл file.db, в который будут записываться данные полученые от ардуины. Это сделано для того, чтоб можно было забирать эти данные и заносить их куда-либо, например в базу.

Все действия homestd, сопровождаются записью в файл Access_Warning.log, и туда же пишутся не критиченые ошибки. Так что если прога робит некорректно, то глядите в него (лежит в папке /var/log/Warning_Access.log) .

О скверных ошибках сообщается в файл Errorhomestd.log (появляется в папке /var/log/Errorhomestd.log) и программа самоликвидируется из процессов.

Если всё заработало, то переходите в браузер и пользуйтесь, ну а ежели что-то не так, то, крепко выругавшись , приступайте к поиску ошибок и пишите в комментах.

Пояснения

К скетчу…

Задача ардуины — принимать команды от сервера, выполнять действие и через каждые 440мс отправлять статус/информацию обратно. Для наглядности откройте скетч сформированный конструктором.

Для кнопок для включения чего-либо формируются флаги (d2, d3. ) принимающие значения 1 или 0, эти значения присваиваются им в функции «switch(cod_comand)», во время включения/отключения чего-либо.

Функция «void trans()» отправляет эти значения (вместе с другими данными) серверу.

Команды от кнопок для отправки сигнала не требующего подтверждения просто обрабатываются в функции «switch(cod_comand)».

Данные, которые будут выводится в полях для приёма каких-либо данных нужно поместить в функцию «void trans()». Например нужно отправить показания температуры, тогда пишем:

temp — это какая-то переменная, в которую вы записываете показания датчика.

В интерфейсе, в поле «INDATA3» будет Ваша температура. Так же можно посылать какую-то строку неразделённуюпробелами , например так:

К файлу index.html…

Для наглядности откройте файл сформированный конструктором.

Браузер с интервалом 680мс запрашивает данные у ардуины…

… получает ответ в текстовом виде (данные разделены пробелами) и раскладывает их по переменным.

Если Вы устанавливаете систему там, где качество связи оставляет желать лучшего (например на даче), то есть пинги туда очень большие, то будут появлятся ошибки «timeout». Во избежание этого, нужно увеличить таймаут запроса:

По умолчанию стоит 560мс, увеличивайте её с шагом в 100 мс и пробуйте. Соответственно нужно увеличивать и setInterval(show,680), так же на 100 мс.

Изменять названия кнопок (D2, D3, SENTSIG1 и т.д.) можно здесь:

Изменять названия полей для приёма данных (INDATA3, INDATA5 и т.д.) можно здесь:

Браузер постоянно запрашивает данные и тем самым создаёт трафик. Чтобы этого избежать, можно либо закрыть страницу, либо раскомментировать этот блок:

минуту, страница будет закрываться полупрозрачной панелью и обновления остановятся. Клик на панель, уберёт её и обновления возобновяться.

После внесения изменений в index.html обязательно обновите страничку в браузере.

Все вопросы и гневные послания пишите в комментах!

На этом пока всё, в следующей части будет сделан конструктор для работы с GPIO на RaspberryPi .

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

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

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

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

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

стартовая страничка

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

раздел с прогнозом погоды (загружается из интернета)

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

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

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

стартовая страничка на маленьком экране

страничка с погодой на маленьком экране

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

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

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