Плата Raspberry Pi представляет широкие возможности для реализации различных проектов в тематике интернета вещей (Internet of Things, IoT) для управления различными устройствами. В данной статье мы рассмотрим проект автоматизации дома на Raspberry Pi с управлением домашними устройствами с помощью веб-страницы, в связи с чем появляется возможность управления устройствами из любой точки Земли, где есть сеть интернет. Веб-сервер для данного проекта может быть запущен на любом устройстве, поддерживающем HTML: смартфоны, планшеты, ноутбуки и т.д.
Ранее на нашем сайте мы рассматривали различные проекты автоматизации дома на основе платы Arduino:
- автоматизация дома с помощью Arduino;
- автоматизация дома с использованием инфракрасной связи и Arduino;
- автоматизация дома с использованием GSM и Arduino;
- автоматизация дома с использованием Arduino и MATLAB;
- автоматизация дома на Arduino под управлением смартфона.
Здесь же, на основе платы Raspberry Pi, появляется возможность реализовать более "продвинутый" проект автоматизации дома, чем указанные проекты на основе платы Arduino.
Необходимые компоненты
- Плата Raspberry Pi (купить на AliExpress).
- Реле на 5 В.
- Транзисторы 2n222.
- Диоды.
- Светодиоды (купить на AliExpress).
- Резисторы 220 или 100 Ом (купить на AliExpress).
- Электрические лампы переменного тока.
- Макетная плата.
- Соединительные провода.
Для данного проекта не понадобится код программы на python поскольку фреймворк WebIOPi сделает за нас всю работу.
Подготовка платы Raspberry Pi
Для подготовки платы Raspberry Pi к данному проекту необходимо будет установить фреймворк WebIOPi, который упростит взаимодействие между веб-страницей и платой Raspberry Pi. Данный фреймворк легче всего установить с помощью фреймворка Flask на python, но в данном проекте мы сделаем это вручную чтобы посмотреть "изнутри" как это выглядит.
Но вначале необходимо установить самые свежие обновления для платы Raspberry Pi и перезагрузить плату чтобы изменения вступили в силу:
|
1 2 3 |
sudo apt-get update sudo apt-get upgrade sudo reboot |
После этого можно будет приступать к установке фреймворка (framework) WebIOPi. Но перед этим убедитесь, что вы находитесь в домашнем каталоге:
|
1 |
cd ~ |
Используем wget чтобы загрузить необходимые нам файлы WebIOPi из сети интернет:
|
1 |
wget http://sourceforge.net/projects/webiopi/files/WebIOPi-0.7.1.tar.gz |
Когда скачивание завершится, извлеките файлы из архива и смените каталог на папку с WebIOPi:
|
1 2 |
tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1/ |
Поскольку в данном проекте мы использовали плату Raspberry Pi 3 нам понадобилось установить специальный патч поскольку скачанная нами версия WebIOPi не могла должным образом работать с платой Raspberry Pi 3. Для установки данного патча мы использовали следующие команды:
|
1 2 |
wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch patch -p1 -i webiopi-pi2bplus.patch |
После этого необходимо запустить процесс установки с помощью WebIOPi:
|
1 |
sudo ./setup.sh |
Если во время установки у вас будут появляться различные предупреждения, нажимайте в них на "yes". После завершения процесса установки перезагрузите плату.
|
1 |
sudo reboot |
Тестирование WebIOPi
Перед тем как переходить к написанию программы для проекта, желательно протестировать работу установленного WebIOPi, чтобы убедиться в том, что с этим вопросом у вас все в порядке.
Выполните следующую команду:
|
1 |
sudo webiopi -d -c /etc/webiopi/config |
После выполнения данной команды запустите браузер на вашей Raspberry Pi и откройте в нем страницу по адресу http://raspberrypi.mshome.net:8000 или http://thepi’sIPaddress:8000. После этого система попросит вас ввести имя пользователя и пароль. Используйте следующие имя пользователя и пароль:
|
1 2 |
Username is webiopi Password is raspberry |
Эту авторизацию можно в дальнейшем удалить из проекта, но если вы заботитесь о возможном несанкционированном доступе к вашей системе автоматизации дома, то ее целесообразно оставить.
После авторизации у вас откроется страница, показанная на следующем рисунке. Нажмите на ней на ссылку с GPIO header.
Для тестирования WebIOPi мы подключим к GPIO 17 светодиод и сконфигурируем GPIO 17 в качестве цифрового выхода.
Подключите светодиод с помощью токоограничивающего резистора к контакту GPIO 17 как показано на следующей схеме:
После сборки этой схемы вернитесь снова на выше показанную страницу и нажимайте на кнопку напротив контакта 11 (GPIO 17) чтобы включать и выключать светодиод, подключенный к данному контакту. Таким образом можно проверить как осуществляется управление контактами GPIO платы Raspberry Pi с помощью фреймворка WebIOPi.
Если все работает нормально, вернитесь к терминалу и остановите выполнение программы нажав CTRL + C. После этого можно переходить к основной программе нашего проекта.
Более подробно о возможностях WebIOPi и правилах работы с нею вы можете прочитать на странице - http://webiopi.trouch.com/INSTALL.html.
Разработка веб-приложения для нашего проекта автоматизации дома
В данном разделе мы будем изменять конфигурацию по умолчанию WebIOPi и добавлять в него свой собственный код чтобы он запускался при вызове этой службы. Первое дело, которое нам необходимо сделать, это установить filezilla или другое программное обеспечение, которое способно работать по FTP/SCP. Нам кажется, что вы уже прочувствовали, что программирование Raspberry Pi через терминал является достаточно нелегким делом, поэтому filezilla или другое программное обеспечение работающее через SCP, значительно облегчит нам работу на данном этапе.
Но перед тем, как переходить к написанию html, css и java кодов для нашего проекта автоматизации дома, давайте вначале создадим на компьютере папку, где все это будет храниться. Убедитесь, что вы находитесь в домашнем каталоге, после этого создайте в нем каталог с названием " webapp ", а в нем каталог с названием "html".
|
1 2 3 4 |
cd ~ mkdir webapp cd webapp mkdir html |
После этого создадим также каталоги для хранения скриптов (scripts), CSS и изображений (images) внутри каталога "html".
|
1 2 3 |
mkdir html/css mkdir html/img mkdir html/scripts |
После создания всех этих каталогов можно приступать к написанию кодов всех необходимых файлов на вашем персональном компьютере, которые потом можно будет переместить в плату Raspberry Pi с помощью filezilla.
Код JavaScript
Первым кодом, который мы напишем для нашего проекта, будет код JavaScript. Это простой скрипт для взаимодействия с сервисом WebIOPi.
Здесь необходимо заметить, что на нашей веб-станице управления проектом автоматизации дома будет 4 кнопки, с помощью которых мы будем управлять работой 4-х контактов GPIO, но управлять мы будем всего 2-мя реле. Более подробно принцип работы проекта показан на видео, представленном в конце статьи.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
webiopi().ready(function() { webiopi().setFunction(17,"out"); webiopi().setFunction(18,"out"); webiopi().setFunction(22,"out"); webiopi().setFunction(23,"out"); var content, button; content = $("#content"); button = webiopi().createGPIOButton(17," Relay 1"); content.append(button); button = webiopi().createGPIOButton(18,"Relay 2"); content.append(button); button = webiopi().createGPIOButton(22,"Relay 3"); content.append(button); button = webiopi().createGPIOButton(23,"Relay 4"); content.append(button); }); |
Представленный код будет выполняться когда WebIOPi будет готово к работе.
Рассмотрим назначение элементов этого кода:
- webiopi().ready(function() – инструкция нашей системе создать эту функцию и запустить ее на выполнение когда webiopi готово к работе;
- webiopi().setFunction(23,"out") – функция, которая позволяет фреймворку WebIOPi сконфигурировать GPIO23 в качестве цифрового выхода. Поскольку в нашем проекте 4 кнопки, то подобная операция производится для 4-х контактов ввода/вывода;
- var content, button – создаем две переменные с именами content и button;
- content = $("#content") – эта инструкция указывает на то, что переменная content будет доступна за пределами кода html и css. То есть когда мы будем ссылаться на #content, фреймворк WebIOPi будет создавать объект, ассоциированный с нею;
- button = webiopi().createGPIOButton(17,"Relay 1") – WebIOPi позволяет создавать различные виды кнопок. Представленная команда говорит WebIOPi чтобы она создала GPIO кнопку, с помощью которой будет осуществляться управление контактом GPIO (ввода/вывода). В данном случае мы создаем кнопку для управления GPIO 17 и “Relay 1”. Аналогичным образом поступаем и для остальных контактов;
- content.append(button) – полезно добавлять этот код к любому другому коду для создания кнопки. В этом случае при создании других кнопок они будут наследовать свойства этой кнопки. Это особенно полезно когда пишите CSS или скрипт.
После создания этого файла JavaScript мы сохраняем его и затем копируем его на Raspberry Pi с помощью filezilla в ранее созданную там папку webapp/html/scripts.
Далее мы приступим к написанию кода для CSS (каскадной таблицы стилей). Все коды программ, которые мы рассмотрим в этой статье, можно будет скачать по ссылке, приведенной в конце статьи.
Код CSS
CSS (каскадная таблица стилей) позволяет сделать нашу веб-страницу для управления домашними устройствами более привлекательной.
Внешний вид созданной нами веб-страницы показан на следующем рисунке. Чтобы сделать ее такой, мы запрограммировали файл smarthome.css, фоновую картинку для страницы мы взяли из открытых источников. Вы можете изменить ее на любую другую свою картинку.
Если вы не хотите вникать в коды CSS, то вы можете скачать готовый код CSS для данного проекта по ссылке в конце статьи.
В первой части кода CSS мы запишем таблицу стилей для основного "тела" нашей страницы.
|
1 2 3 4 5 6 7 8 9 |
body { background-color:#ffffff; background-image:url('/img/smart.png'); background-repeat:no-repeat; background-position:center; background-size:cover; font: bold 18px/25px Arial, sans-serif; color:LightGray; } |
В представленном фрагменте кода мы установили белый цвет фона (#ffffff), затем добавили фоновое изображение, размещенное по адресу /img/smart.png. Затем мы отцентрировали это изображение. После этого мы установили размер, шрифт и цвет текста.
Далее запрограммируем оформление кнопок: тень текста, тень кнопки, небольшой эффект перехода, который будет появляться при нажатии кнопки чтобы добавить реалистичность этому процессу. Также необходимо указать отдельные параметры для браузеров webkit, firefox, opera и т.д. чтобы наш код корректно работал на всех этих платформах.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
button { display: block; position: relative; margin: 10px; padding: 0 10px; text-align: center; text-decoration: none; width: 130px; height: 40px; font: bold 18px/25px Arial, sans-serif; color: black; text-shadow: 1px 1px 1px rgba(255,255,255, .22); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; |
В следующем фрагменте кода запрограммируем точку входа для фреймворка WebIOPi.
|
1 2 3 4 5 |
input[type="range"] { display: block; width: 160px; height: 45px; } |
Последнее, что нам необходимо сделать в этом разделе – это добавить некоторую индикацию события нажатия кнопки. Для этого мы использовали изменение цвета фона кнопки при ее нажатии.
|
1 2 3 4 5 6 7 8 |
#gpio17.LOW { background-color: Gray; color: Black; } #gpio17.HIGH { background-color: Red; color: LightGray; } |
Когда кнопка отжата – у нее будет серый фон (gray), а когда нажата – у нее будет красный фон (RED).
Написанный CSS код сохраним под именем smarthome.css и передадим его на Raspberry Pi с помощью filezilla (или другой аналогичной программы) в ранее созданную там папку со стилями (styles folder).
HTML код
HTML код объединяет вместе ранее рассмотренные коды javascript и таблицы стилей.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="mobile-web-app-capable" content="yes"> <meta name="viewport" content = "height = device-height, width = device-width, user-scalable = no" /> <title>Smart Home</title> <script type="text/javascript" src="/webiopi.js"></script> <script type="text/javascript" src="/scripts/smarthome.js"></script> <link rel="stylesheet" type="text/css" href="/styles/smarthome.css"> <link rel="shortcut icon" sizes="196x196" href="/img/smart.png" /> </head> <body> </br> </br> <div id="content" align="center"></div> </br> </br> </br> <p align="center">Push button; receive bacon</p> </br> </br> </body> </html> |
В теге head данного html кода присутствует строка:
|
1 |
<meta name="mobile-web-app-capable" content="yes"> |
Эта строка кода позволяет веб-приложению сохранять свой контент на экране смартфона (или другого мобильного устройства) с помощью браузеров chrome или mobile safari. Это можно сделать с помощью меню chrome. Также это обеспечивает приложению "легкий" запуск на мобильном устройстве.
Следующая команда позволяет веб-приложению занять весь экран мобильного устройства.
|
1 |
<meta name="viewport" content = "height = device-height, width = device-width, user-scalable = no" /> |
Следующая строка кода задает название для нашей веб-страницы.
|
1 |
<title>Smart Home</title> |
Следующие 4 строчки кода выполняют функцию объединения необходимых нам кодов с нескольких ресурсов.
|
1 2 3 4 |
<script type="text/javascript" src="/webiopi.js"></script> <script type="text/javascript" src="/scripts/smarthome.js"></script> <link rel="stylesheet" type="text/css" href="/styles/smarthome.css"> <link rel="shortcut icon" sizes="196x196" href="/img/smart.png" /> |
С помощью первой из этих строк вызывается фреймворк WebIOPi. Это необходимо делать каждый раз, когда мы собираемся использовать WebIOPi. Во второй строке вызывается написанный нами jQuery скрипт, а в третьей строке указан путь к написанной нами каскадной таблице стилей. А в четвертой строке кода указан путь к иконке для нашего приложения.
Параметр id=”content” позволяет нам работать с контентом для наших кнопок, описанным ранее в коде JavaScript.
|
1 |
<div id="content" align="center"></div> |
Сохраните представленный html код в виде файла index.html и перенесите его на Raspberry Pi с помощью filezilla в ранее созданную там папку html.
Изменение настроек сервера WebIOPi для проекта автоматизации дома
На этом этапе мы будем проектировать схему для нашего проекта и тестировать наше веб-приложение. Но перед этим необходимо отредактировать конфигурационный файл (config file) сервиса webiopi чтобы он использовал данные с нашей папки html, а не с той папки, которая настроена в нем по умолчанию.
Чтобы получить доступ к настройкам webiopi выполните следующую команду:
|
1 |
sudo nano /etc/webiopi/config |
В настройках этого сервиса обратите внимание на http секцию – у вас там должно быть написано что либо подобное: #Use doc-root to change default HTML and resource files location.
Закомментируйте все, что написано ниже этой строчки с помощью символов "#" и если вы создавали папки для проекта так, как мы это описали в статье, то укажите следующий путь к вашему проекту:
|
1 |
doc-root = /home/pi/webapp/html |
Сохраните и выйдите из файла. Также вы можете изменить порт с 8000 на свой, на котором у вас работает сервер на Raspberry Pi.
Вы можете изменить пароль WebIOPi используя следующую команду:
|
1 |
sudo webiopi-passwd |
После выполнения этой команды система попросит вас ввести новые имя пользователя (username) и пароль (password). Также вы можете их полностью удалить если не хотите вводить их в дальнейшем – но если вы заботитесь о безопасности вашей системы, то так делать не стоит.
Далее необходимо запустить сервис WebIOPi с помощью команды:
|
1 |
sudo /etc/init.d/webiopi start |
Статус сервера можно проверить с помощью:
|
1 |
sudo /etc/init.d/webiopi status |
Остановить его можно с помощью следующей команды:
|
1 |
sudo /etc/init.d/webiopi stop |
Чтобы WebIOPi запускалась при загрузке системы, используйте следующую команду:
|
1 |
sudo update-rc.d webiopi defaults |
Если вы хотите отключить ее запуск при загрузке системы, то используйте:
|
1 |
sudo update-rc.d webiopi remove |
Схема проекта
Схема автоматизации дома на Raspberry Pi с управлением с веб-страницы представлена на следующем рисунке.
Поскольку на момент работы над данным проектом у нас не оказалось под рукой готовых модулей реле (с ними работать было бы проще), то мы использовали вместо них одиночные реле на 5v.
При сборке этой схемы учтите, что схема расположения контактов на ваших моделях реле может отличаться от той, которая приведена на нашей схеме. Используйте описание (даташит) вашей модели реле или мультиметр чтобы определить расположение контактов ваших реле.
Когда все компоненты схемы будут соединены, запустите сервер, введите IP адрес и порт вашей Raspberry Pi, введите имя пользователя и пароль, после чего вы должны увидеть веб-страницу нашего проекта, с помощью которой вы сможете управлять домашними устройствами.
С помощью рассмотренного проекта вы можете управлять домашними устройствами из любой точки Земли, где есть сеть Интернет. Причем управлять проектом можно будет практически с любых устройств – смартфонов, планшетов, ноутбуков и т.д. Также вы можете добавить в проект дополнительные кнопки и реле чтобы управлять большим количеством устройств.
По следующей ссылке можно скачать коды HTML, CSS и JAVASCRIPT, которые были использованы в данном проекте.
Видео, демонстрирующее работу проекта
Похожие статьи
(1 голосов, оценка: 5,00 из 5)
Загрузка...
Добрый день!
Подскажите, пожалуйста, а есть ли на Вашем сайте или где либо ещё, которая помогла бы вникнуть в тему: хочу попробовать освоить системы умного дома с помощью Pi, но задался вопросом: все руководства сведены к тому, что есть понимание как управлять удаленно самой платой PI, но непонятно как дальше передавать сигнал с неё на приёмник. Условный пример: удаленно передаю сигнал на плату, которая передаёт этот сигнал диоду/шаговому двигателю и тд, и тот уже начинает какую-то работу. Если есть возможность подсказать, где стоит искать такую информацию, я буду очень благодарен! Заранее спасибо