Создание дизайна интерфейса умного дома и его интеграция. Как все начиналось. Что я задумал

27 марта 2015 в 15:18

Мой «Умный дом» на ПЛК и с веб-интерфейсом. Часть 1. Введение

  • HTML ,
  • SCADA

Введение

На Хабре много статей про проекты умных домов, но почти все они были на самодельном оборудовании и китайских примочках. В своей статье я хотел рассказать о другом подходе, который показывает, насколько легче выполнять проекты, используя готовые решения мировых производителей (и выглядит солидней ), а так же демонстрирует возможность использования оборудования не только в промышленных объектах, но в частной сфере. Получился симбиоз технологий и направлений автоматики. С одной стороны, используя ПЛК, который в основном разработан для нужд промышленности, позволяющий выполнять задачи любой сложности без ограничений жестких алгоритмов готовых устройств умных домов (например, по технологии KNX) с увязкой веб-технологией html/javascript дает неограниченный полет фантазий для расширения проектов.

Текущие затраты - 170 тысяч рублей (по старому курсу евро).

Начнем.

Что я задумал

Управляем освещением и электроснабжением
- В основном управление будет производиться сигналом включить/выключить, диммирование не хочу и не надо;
- Хочу управление с разных мест, например, зашел в спальню - включил люстру, лег на кровать - нажал выключить люстру. Если забыл выключить свет в зале (или в туалете …) нажал кнопку «выключить свет везде». Удобно;
- При выходе из квартиры нажимаю одну кнопку – выключается во всей квартире свет и т.д.;
- Считывать показание с электросчетчика;
- Бесперебойное питание систем управления и безопасности квартиры;
- Без исключений, все группы освещения должны управляться с ПЛК. В случае пожара розеточные группы должны отключаться с ПЛК в автомате - отключать электроснабжения в квартире в экстренных случаях;
- Каждая группа освещения должна приходить в щит и проходить через ближайший выключатель для возможности переделки управления освещения в обычную схему (если продам квартиру, буду все забирать);
- В коридоре предусмотреть датчик движения человека для управления освещением + завязывается в охранную сигнализацию;
- Теплый пол на балконе, в туалете, ванной, в прихожей - с возможностью управления в зависимости от уличной температуры, по времени.

Управляем отоплением и вентиляцией
- Управление отоплением - на каждую батарею устанавливается клапан с приводом (для регулирования температуры покомнатно, для измерения температуры комнаты, необходимо предусмотреть датчики температуры);
- Предусмотреть управление кондиционерами по ИК каналу (текущие решение задачи пока не найдено, выводим витую пару на внутренний блок кондея дальше придумаю);
- Температурные датчики уличной температуры (солнечная и не солнечная сторона);
- В зимний период достаточно часто встречаются две проблемы – это холодно и нечем дышать. Решение установить приточную систему. Далее обеспечить управление приточной системой (температура в канале, уличный датчик температуры, три ступени нагрева, вентилятор);
- Управление вытяжными вентиляторами (сан узел, ванная).

Охрана сигнализация
Сигнализация состояния входной двери (архивация состояния двери – время открытие/ закрытие);
Постановка на охрану через Web интерфейс или через выключатель управления светом.

Видеонаблюдение
Запись с камеры входной двери, уличная место парковки;
Архивация записей на удаленном сервере.

Оборудование

- Так как я привык уже к ПЛК от фирмы ABB, то в качестве мозгов для системы управления квартирой был выбран ПЛК модели AC500-eco (ЦПУ PM554-ETH с поддержкой Ethernet);
- Дальше я уже начал считать деньги и … нужно было выбрать среду отображения информации, с возможностью веб-отображения информации о доме. Существует много вариантов, но в основном все базируется на не кроссплатформенных решениях, что не подходит для меня. Все, что со словами SCADA и WEB, были с запредельным ценником. Пришлось немного попуглить, в результате решено использовать не SCADA систему, а framework с большим функционалом для HTML5. Пришел к CSWorks. Этот фримворк дает возможность бесплатно использовать с ограничением 999 переменных, 1 клиент. Что меня полностью устраивало.
- в качестве выключателей и розеток (орган управления светом) была выбрана фирма JUNG, Serie A . Из плюсов - они могут нести до 4-х кнопок на один кнопочный пост (выключатель без фиксации), так же в них присутствует светодиоды индикации с напряжением 24В (данное напряжение является стандартным промышленное напряжением питания систем автоматики). Данные функции не видел ни у одного из производителей электроустановок (не считая Китая);

Начало работ

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

Сам контактор с ручным управлением:

Собран и смонтирован шкаф:

Как я писал выше, выключатели выбрал без фиксаций с led индикаторами. Максимально 4 кнопки, возможно расключение этих кнопок на 8 групп (см. документацию на выключатель

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

Технологии

Как вы помните, ПО для управления нашим «умным домом» мы пишем на языке perl . Современная информационная система практически немыслима без БД. Мы тоже не останемся в стороне и для хранения наших данных будем использовать СУБД MySQL . Для реализации веб-сервера я решил воспользоваться не сторонним софтом, а модулем для perl - HTTP::Server::Simple , в частности - HTTP::Server::Simple::CGI . Для чего я это сделал? В большой части, ради интереса;) Но в теории, можно получить доступ к низкоуровневой обработке HTTP-запросов/ответов без нагромождения комплекса Apache/mod_perl. В целом, ничего не мешает перевести проект на рельсы Apache, если у вас будет желание и достаточно времени.

База данных

Первым делом установим СУБД MySQL и создадим базу с таблицами из db.sql. Вот листинг:

CREATE DATABASE ion; USE ion; # # Table structure for table "calendar" # DROP TABLE IF EXISTS calendar; CREATE TABLE `calendar` (`id` int(15) NOT NULL AUTO_INCREMENT, `date` datetime NOT NULL, `message` text, `nexttimeplay` datetime NOT NULL, `expired` datetime NOT NULL, `type` int(1) DEFAULT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=latin1; # # Table structure for table "commandslog" # DROP TABLE IF EXISTS commandslog; CREATE TABLE `commandslog` (`id` int(15) NOT NULL AUTO_INCREMENT, `date` datetime NOT NULL, `cmd` varchar(255) NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=latin1; # # Table structure for table "log" # DROP TABLE IF EXISTS log; CREATE TABLE `log` (`id` int(15) NOT NULL AUTO_INCREMENT, `date` datetime NOT NULL, `message` varchar(255) NOT NULL, `level` int(1) DEFAULT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=latin1;

Выполним необходимые действия:

Nix@nix-boss:~$ sudo apt-get install mysql-server
nix@nix-boss:~$ mysql -uroot -ppassword < db.sql

Модифицируем код

Теперь нам необходимо создать папки lib , html и config (рядом с папкой data ). В папку lib мы положим модуль, отвечающий за реализацию веб-сервера и обработку наших HTTP-запросов.

Нам нужно немного подправить скрипт srv.pl . Добавим к блоку инциализации:

Our %cfg = readCfg("common.cfg"); our $dbh = dbConnect($cfg{"dbName"}, $cfg{"dbUser"}, $cfg{"dbPass"});
Добавим строки, отвечающие за запуск HTTP-сервера ниже блока инициализации:

## Запуск HTTP-сервера ################################ my $pid = lib::HTTP->new($cfg{"httpPort"})->background(); print "HTTP PID: $pid\n"; logSystem("Сервис HTTP - PID: $pid, порт: $cfg{"httpPort"}, хост: $cfg{"httpHost"}", 0); ################################
А теперь добавим недостающие функции в конец файла:

Sub readCfg { my $file = shift; my %cfg; open(CFG, "; foreach my $line (@cfg) { next if $line =~ /^\#/; if ($line =~ /(.*?) \= \"(.*?)\"\;/) { chomp $2; $cfg{$1} = $2; } } close(CFG); return %cfg; } ######################################## sub dbConnect { my ($db, $user, $pass) = @_; return $dbh = DBI->connect("DBI:mysql:$db", $user, $pass) || die "Could not connect to database: $DBI::errstr"; } ######################################## sub logSystem { my ($text, $level) = @_; my %cfg = readCfg("common.cfg"); dbConnect($cfg{"dbName"}, $cfg{"dbUser"}, $cfg{"dbPass"}); $dbh->do("INSERT INTO log (date, message, level) VALUES (NOW(), "$text", $level)"); }

Как можно понять по названиям функций, dbConnect() - отвечает за соединение с нашей СУБД, logSystem() - за логгирование, readCfg() - за загрузку конфигурации. Остановимся на ней подробнее. Конфигурация представляет собой простой текстовый файл в директории config. В нашем случае, он называется common.cfg . Выглядит примерно так:

## Настройки daemonMode = "undef"; logSystem = "1"; logUser = "1"; dbName = "ion"; dbUser = "root"; dbPass = "password"; camNumber = "4"; camMotionDetect = "1"; httpPort = "16100"; httpHost = "localhost"; telnetPort = "16000"; telnetHost = "localhost"; micThreads = "5";

Некоторые строки в нем будут использованы позже. Нас же пока интересуют только строки, начинающиеся с префикса db . Как мы видим - это настройки для соединения с нашей БД.

Теперь расскажу о том, как побороть многократное выполнение команды. Подредактируем функцию checkcmd() :

Sub checkcmd { my $text = shift; chomp $text; $text =~ s/ $//g; print "+OK - Got command \"$text\" (Length: ".length($text).")\n"; if($text =~ /система/) { ################################################# my $sth = $dbh->prepare("SELECT cmd FROM commandslog WHERE DATE_SUB(NOW(),INTERVAL 4 SECOND) <= date LIMIT 0, 1"); $sth->execute(); my $result = $sth->fetchrow_hashref(); if($result->{cmd} ne "") { return; } $dbh->do("INSERT INTO commandslog (date, cmd) VALUES (NOW(), "$text")"); ################################################# if($text =~ /провер/) { my $up = `uptime`; $up =~ /up (.*?),/; sayText("Время работы сервера - $1. Номер главного процесса - $parent."); } if($text =~ /врем/) { my $up = `uptime`; $up =~ /(.*?) up/; sayText("Сейчас $1"); } if($text =~ /законч/ || $text =~ /заверш/) { sayText("Завершаю работу. Всего доброго!"); system("killall motion"); system("rm ./data/*.flac && rm ./data/*.wav"); system("killall perl"); exit(0); } if($text =~ /погод/) { my ($addit, $mod); my %wh = lib::HTTP::checkWeather(); $wh{"condition"} = Encode::decode_utf8($wh{"condition"}, $Encode::FB_DEFAULT); $wh{"hum"} = Encode::decode_utf8($wh{"hum"}, $Encode::FB_DEFAULT); $wh{"wind"} = Encode::decode_utf8($wh{"wind"}, $Encode::FB_DEFAULT); if($wh{"temp"} < 0) { $mod = "ниже нуля"; } if($wh{"temp"} > 0) { $mod = "выше нуля"; } $wh{"wind"} =~ s/: В,/восточный/; $wh{"wind"} =~ s/: З,/западный/; $wh{"wind"} =~ s/: Ю,/южный/; $wh{"wind"} =~ s/: С,/северный/; $wh{"wind"} =~ s/: СВ,/северо-восточный/; $wh{"wind"} =~ s/: СЗ,/северо-западный/; $wh{"wind"} =~ s/: ЮВ,/юго-восточный/; $wh{"wind"} =~ s/: ЮЗ,/юго-западный/; sayText("Сейчас $wh{"condition"}, $wh{"temp"} градусов $mod. $wh{"hum"}. $wh{"wind"}"); if ($wh{"temp"} <= 18) { $addit = sayText("Одевайтесь теплее, на улице холодно!"); } if ($wh{"temp"} >= 28) { $addit = sayText("Переносной кондиционер не помешает!"); } } } #sayText("Ваша команда - $text"); return; }
Мы выбираем последнюю выполненную команду в интервале четырех секунд и если она совпадает с текущей - выходим из функции. Как вы можете заметить, я добавил некоторые команды, по сравнению с описанной функцией в прошлой статье. Наиболее интересная - это погода. Реализация получения данных для нее - чуть ниже.

Модуль HTTP.pm

Вернемся к реализации встроенного HTTP-сервера. Создадим файл HTTP.pm в директории lib . Запишем туда следующий код:

Package lib::HTTP; use HTTP::Server::Simple::CGI; use LWP::UserAgent; use URI::Escape; use base qw(HTTP::Server::Simple::CGI); use Template; ######################################### ######################################### our %dispatch = ("/" => \&goIndex, "/index" => \&goIndex, "/camers" => \&goCamers,); our $tt = Template->new(); ######################################### ######################################### sub handle_request { my $self = shift; my $cgi = shift; my $path = $cgi->path_info(); my $handler = $dispatch{$path}; if ($path =~ qr{^/(.*\.(?:png|gif|jpg|css|xml|swf))}) { my $url = $1; print "HTTP/1.0 200 OK\n"; print "Content-Type: text/css\r\n\n" if $url =~ /css/; print "Content-Type: image/jpeg\r\n\n" if $url =~ /jpg/; print "Content-Type: image/png\r\n\n" if $url =~ /png/; print "Content-Type: image/gif\r\n\n" if $url =~ /gif/; print "Content-Type: text/xml\r\n\n" if $url =~ /xml/; print "Content-Type: application/x-shockwave-flash\r\n\n" if $url =~ /swf/; open(DTA, "<$url") || die "ERROR: $! - $url"; binmode DTA if $url =~ /jpg|gif|png|swf/; my @dtast = ; foreach my $line (@dtast) { print $line; } close(DTA); return; } if (ref($handler) eq "CODE") { print "HTTP/1.0 200 OK\r\n"; $handler->($cgi); } else { print "HTTP/1.0 404 Not found\r\n"; print $cgi->header, $cgi->start_html("Not found"), $cgi->h1("Not found"), $cgi->h2($cgi->path_info()); $cgi->end_html; } } ## Обработка запроса / ######################################## sub goIndex { my $cgi = shift; # CGI.pm object return if !ref $cgi; my %w = checkWeather(); my $cmd; my $dbh = iON::dbConnect($iON::cfg{"dbName"}, $iON::cfg{"dbUser"}, $iON::cfg{"dbPass"}); my $sth = $dbh->prepare("SELECT cmd FROM commandslog WHERE id > 0 ORDER BY id DESC LIMIT 0, 1"); $sth->execute(); my $result = $sth->fetchrow_hashref(); if($result->{cmd} ne "") { $cmd = $result->{cmd}; } else { $cmd = "Нет комманд..."; } print "Content-Type: text/html; charset=UTF-8\n\n"; my $uptime = `uptime`; $uptime =~ /up (.*?),/; $uptime = $1; my $videosys = `ps aux | grep motion`; if ($videosys =~ /motion -c/) { $videosys = "работает"; } else { $videosys = "не работает"; } my $micsys = `ps aux | grep mic`; if ($micsys =~ /perl mic\.pl/) { $micsys = "работает"; } else { $micsys = "не работает"; } my $vars = { whIcon => $w{"icon"}, whCond => $w{"condition"}, whTemp => $w{"temp"}, whHum => $w{"hum"}, whWind => $w{"wind"}, cmd => $cmd, uptime => $uptime, video => $videosys, mic => $micsys, threads => $iON::cfg{"micThreads"}, }; my $output; $tt->process("html/index", $vars, $output) || print $tt->error(), "\n"; } ## Обработка запроса /camers ######################################## sub goCamers { my $cgi = shift; # CGI.pm object return if !ref $cgi; my %w = checkWeather(); my $cmd; my $dbh = iON::dbConnect($iON::cfg{"dbName"}, $iON::cfg{"dbUser"}, $iON::cfg{"dbPass"}); my $sth = $dbh->prepare("SELECT cmd FROM commandslog WHERE id > 0 ORDER BY id DESC LIMIT 0, 1"); $sth->execute(); my $result = $sth->fetchrow_hashref(); if($result->{cmd} ne "") { $cmd = $result->{cmd}; } else { $cmd = "Нет комманд..."; } if($cgi->param("text") ne "") { my $txt = $cgi->param("text"); require Encode; $txt = Encode::decode_utf8($txt, $Encode::FB_DEFAULT); iON::sayText($txt); } print "Content-Type: text/html; charset=UTF-8\n\n"; my $vars = { camera1 => "video-0/camera.jpg", camera2 => "video-1/camera.jpg", camera3 => "video-2/camera.jpg", camera4 => "video-3/camera.jpg", whIcon => $w{"icon"}, whCond => $w{"condition"}, whTemp => $w{"temp"}, whHum => $w{"hum"}, whWind => $w{"wind"}, cmd => $cmd, }; my $output; $tt->process("html/camers", $vars, $output) || print $tt->error(), "\n"; } ## Погода ######################################## sub checkWeather { my %wh; my $ua = LWP::UserAgent->new(agent => "Mozilla/5.0 (Windows NT 5.1; ru-RU) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.872.0 Safari/535.2"); my $content = $ua->get("http://www.google.com/ig/api?hl=ru&weather=".uri_escape("Санкт-Петербург")); $content->content =~ /(.*?)<\/current_conditions>/g; my $cond = $1; $cond =~ /

Разберем содержимое подробнее. В хэше %dispatch мы определяем соответствие URL-адреса и вызываемой функции. Все прочие URL, не описанные в этом хэше, будут выдавать страницу 404 .
Шаблонизатором у нас будет выступать мощная и гибкая библиотека Template Toolkit . Её мы инициализируем строкой:

Our $tt = Template->new();
Перегружая функцию handle_request() родительского класса, мы получаем управление обработкой запросов к HTTP-серверу. Для отдачи браузеру статического контента (png, gif, jpg, css, xml, swf) используется блок:

If ($path =~ qr{^/(.*\.(?:png|gif|jpg|css|xml|swf))}) { my $url = $1; print "HTTP/1.0 200 OK\n"; print "Content-Type: text/css\r\n\n" if $url =~ /css/; print "Content-Type: image/jpeg\r\n\n" if $url =~ /jpg/; print "Content-Type: image/png\r\n\n" if $url =~ /png/; print "Content-Type: image/gif\r\n\n" if $url =~ /gif/; print "Content-Type: text/xml\r\n\n" if $url =~ /xml/; print "Content-Type: application/x-shockwave-flash\r\n\n" if $url =~ /swf/; open(DTA, "<$url") || die "ERROR: $! - $url"; binmode DTA if $url =~ /jpg|gif|png|swf/; my @dtast = ; foreach my $line (@dtast) { print $line; } close(DTA); return; }
Так как MIME-типов у меня получилось немного, я записал их чуть по-индусски;)
Дальше начинаются функции, отвечающие за генерацию контента определенного URL. Пока их всего две - индекс и страница с камерами.
На индексе мы сможем увидеть, работают ли такие подсистемы, как видео- и аудио-захват. Отдельной строкой идет:

My %w = checkWeather();
Эта функция возвращает хэш с текущими данными о погоде в городе, которые будут отображаться на нашей странице. Такая мелкая приятная плюшка;)
Там же рядом мы будем выводить последнюю полученную и распознанную команду для «умного дома».

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

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

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

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

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

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

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

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

Например:

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

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

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

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

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

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

В заключение

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

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

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


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

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

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

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

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

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

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

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

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

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



Есть вопросы?

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: