Мой web-интерфейс управления умной квартирой. Создание дизайна интерфейса умного дома и его интеграция

28.04.2019

В основе качественного интерфейса «Умного дома» всегда лежит мощная программная платформа. На этой базе интегратор создает визуализацию для конкретного проекта. Первое – инструмент, второе - продукт, который с его помощью создается (так же, как программа Автокад и чертеж, текстовый редактор и текст).

Есть два подхода к выбору платформы: 1. использование «родного» ПО, которое предоставляет производитель комплектующих, и 2. внедрение программного продукта независимого разработчика.

Родное приложение

Как мы упоминали в статье про , существует множество протоколов домашней автоматизации и еще больше производителей оборудования. Такие компании как Crestron, AMX, Vantage, RTI, HDL, ABB, Gira, Jung, Schneider-Electric, Vimar предлагают решения для мобильных устройств в комплекте с сенсорными управляющими панелями или со специализированными серверами визуализации.

  • Лицензия на ПО отдельно не покупается, но сама сенсорная панель или сервер стоит достаточно дорого.
  • Графика и структура такого интерфейса создается разработчиками. Однако это накладывает определенные ограничения: адаптация под конкретный проект возможна только в жестко заданных рамках.
  • Редакторы достаточно просты в использовании, и программисту с ними удобно работать.
  • Доступны интересные фирменные плагины (часы и будильник, предустановленные сценарии).
  • Функционал предопределен и нет возможности решать специфические задачи.
  • Совместимо только с тем стандартом автоматизации, для которого предназначено оборудование.
  • Интеграция с прочим оборудованием возможна только, если это заложено производителем. Так, например, с популярными аудио-системами Sonos совместимы практически все приложения, а вот подключить к ним, например, не получится.

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

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

Если же сенсорные панели покупать не планируется, второй вариант может быть предпочтительным.

Стороннее приложение

Существует несколько программных комплексов, предназначенных для управления «Умным домом» с мобильных устройств. На наш взгляд, наиболее интересными являются iRidium и Evika. Они предоставляют сходные возможности, мы чаще используем iRidium, поэтому расскажем о нем.

Комплекс iRidium позиционируется как операционная система для умного дома, чем фактически и является. Он используется для объектов частного, коммерческого, промышленного назначения.

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

Мы предпочитаем второй вариант, если

  • в качестве настенных сенсорных панелей используется iPad в рамке ;
  • система составная и нужно в один интерфейс включить управление разным оборудованием;
  • хочется персонализированный и подходящий именно для вашего проекта дизайн;
  • необходимо интегрировать автоматизацию со сторонним ПО, к примеру,

Арт-директор Лев Эйдинов поделился с редакцией сайт рассказом о концепте SmartShell - приложения для «умного» дома, в котором задействовал дополненную реальность.

Я давно изучаю сферу интернета вещей и «умной» электроники. На мой взгляд, это будущее, от которого никуда не уйти. «Умные» телефоны и телевизоры, часы и автомобили, - сейчас этим никого не удивишь. И в дальнейшем количество вещей с приставкой «смарт-» будет неуклонно расти. Это тема для отдельной беседы, а сегодня я хочу затронуть тему «умного» дома, а конкретнее - его интерфейса.

Несмотря на то, что системы «умного» дома предназначены для облегчения жизни людей, интерфейсы систем контроля выглядят сложно, перегружено и нелогично. Большинство представляет собой непонятную, графически шумную мешанину.

Я полностью согласен с парадигмой «лучший интерфейс - это отсутствие интерфейса», поэтому попытался максимально упростить взаимодействие пользователя с экосистемой «умного» дома. Хочу представить вашему вниманию концепт SmartShell - интерфейс «умного» дома в дополненной реальности.

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

Наводя камеру смартфона на область помещения, человек сразу видит подключенные устройства. Именно это и делает управление простым и необременительным. Интерфейс построен на стандартных элементах iOS - это позволяет минимизировать время на обучение.

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

Обычно в приложениях «умных» домов используются системы позиционирования смартфона (GPS, ГЛОНАСС, сигнал от вышек связи), которые не дают нужной точности и не всегда корректно работают в помещении. Для решения этой задачи предлагается использовать синергетическое позиционирование, основанное на совместном анализе данных, полученных от разных источников:

Используя взаимодействие вышеописанных систем, можно получить точность позиционирования 20 см, что является приемлемым для данной концепции.

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


В этом режиме интерфейс может работать в альбомной ориентации.


Каждому устройству соответствует выделенная область в дополненной реальности («проекция актуатора»), рядом находится иконка соответствующего раздела. Всего разделов, выводимых на главный экран, пять: «Климат», «Медиа», «Свет», «Безопасность» и «Приборы». Они расположены в нижней части экрана и по умолчанию включены.

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

При нажатии на кнопку раздела в нижней части экрана перестают отображаться соответствующие ему устройства. Повторное нажатие вновь активирует отображение. На экранах ниже включены разделы «Медиа» и «Свет» в режимах «Камера» и «Схема». Устройства остальных разделов не отображаются.

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


Названия устройств можно редактировать. Это помогает пользователю быстрее ориентироваться и запоминать устройства. Кнопка «Питание» расположена в самом верху, чтобы предотвратить случайные нажатия. Доступ к настройкам, наоборот, упрощен.

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

Система различает команды, противоречащие сценарию автоматизации. Например, светильник в центре зала (первый экран выше) можно включить в любое время, хотя таймер включения установлен на определенные часы. Пол на кухне (второй экран выше) установлен на включение при температуре ниже 20 ˚C. Включение при более высокой температуре собьет настройки, и пользователь увидит предупреждение:

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

Структура панели «Управление» включает в себя разделы устройств (с добавленным разделом «Сантехника»), счетчики и статистику, управление компонентами, конфигурацией дома и так далее.

Для простоты навигации первый уровень меню выполнен в виде раздвижного списка. В разделах устройств на этом уровне можно выбрать тип устройства.

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

Третий уровень меню открывает настройки, диагностику и управление определенного устройства.

Выбрав «Управление» мы попадаем на уже знакомую страницу управления конкретным устройством.

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

Виды сервера

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

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

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

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

Сервер и 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

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

Интерфейс – это то, что пользователю «умного дома» приходится видеть и осязать каждый день. Поэтому понятному и отлично продуманному интерфейсу отводится важное место в интеллектуальной системе. Он должен отражать основные задачи и не перегружаться излишними функциями и компонентами. Качественный интерфейс умного дома – это непременная составляющая системы, он является гарантом удобного и эффективного управления интеллектуальным домом, с которым легко и просто управляется пользователь.

Что такое интерфейс

Под этим определением понимается метод взаимных действий между пользователем и системой посредством конкретного устройства, и в данном рассматриваемом случае – это сенсорная панель .

Чтобы получать от взаимодействия с ним комфорт и удовольствие, необходимо разрешить главные вопросы интерфейса: как будет выглядеть дисплей? Какие должны быть на нем отображены кнопки? Легко ли будет поменять функции, которые уже есть? Как упростить поиск нужных параметров?

Что включает интерфейс

Если рассматривать его в более широком толковании, то он представляет собой базу, в которой собраны различные способы контакта пользователя с системой «умный дом». «Общение» с ней, достигается с использованием разных устройств.

Например:

  • сенсорной панелью;
  • пультом дистанционного управления;
  • кнопочными панелями выключателями и панели;
  • мобильным телефоном посредством звонков GSM и СМС-сообщений;
  • устройством управления с помощью Интернета (компьютер, планшет, смартфон);
  • голосовым управлением.

Каким он должен быть

Система «Умный дом» — это сложная структурная композиция. Однако внутренняя сложность не должна являться таковой при ее использовании, а быть как можно проще. Чем нужно руководствоваться при выборе интерфейса.

Вот главные принципы:

  • Простота и удобство . Управление сценариями и функциями не должно отнимать много времени, а делаться разовыми кликами. Интерфейс должен быть понятен и прост как для родственников в возрасте, так и для детей. И только необходимая информация должна поступать на экран, а иконки быть такими, чтобы их легко можно было узнавать. Понятный и логичный алгоритм управления.
  • Безопасность . Интерфейс должен предоставлять возможность блокировки некоторых функций во избежание запуска нежелательной функции посторонним людям или детям. Отдельные страницы должны защищаться паролем.
  • Гармоничный дизайн . Интеллектуальный дом должен быть красив во всем. И интерфейс не исключение, поскольку каждое устройство, будь то контроллер или сенсор, является неотъемлемой частью интерьера и должен быть гармонично вписан в дизайн. Не должны выделяться из него даже встроенные панели, а быть лицом интерьера. Благо существует множество цветовых оттенков, обложечных графических тем и иконок, чтобы создать единый стиль.

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

В заключение

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

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

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

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

Это система управления домом по сценариям. Она позволяет навешивать произвольную логику (сценарии) на различные события в доме (срабатывание датчиков, нажатия кнопок, события от внешних сервисов, например, получнеие 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). За это время проект продвинулся вперед больше, чем за предыдущие пол года. Я очень доволен результатом и планирую продолжать работать в таком режиме, сколько это будет возможно.