Автоматизация дома на Raspberry Pi с управлением с веб-страницы

Плата Raspberry Pi представляет широкие возможности для реализации различных проектов в тематике интернета вещей (Internet of Things, IoT) для управления различными устройствами. В данной статье мы рассмотрим проект автоматизации дома на Raspberry Pi с управлением домашними устройствами с помощью веб-страницы, в связи с чем появляется возможность управления устройствами из любой точки Земли, где есть сеть интернет. Веб-сервер для данного проекта может быть запущен на любом устройстве, поддерживающем HTML: смартфоны, планшеты, ноутбуки и т.д.

Внешний вид проекта автоматизации дома на Raspberry Pi с управлением с веб-страницы

Ранее на нашем сайте мы рассматривали различные проекты автоматизации дома на основе платы Arduino:

Здесь же, на основе платы Raspberry Pi, появляется возможность реализовать более "продвинутый" проект автоматизации дома, чем указанные проекты на основе платы Arduino.

Внешний вид конструкции проекта

Внешний вид веб-страницы для проекта автоматизации дома

Необходимые компоненты

  1. Плата Raspberry Pi (купить на AliExpress).
  2. Реле на 5 В.
  3. Транзисторы 2n222.
  4. Диоды.
  5. Светодиоды (купить на AliExpress).
  6. Резисторы 220 или 100 Ом (купить на AliExpress).
  7. Электрические лампы переменного тока.
  8. Макетная плата.
  9. Соединительные провода.

Для данного проекта не понадобится код программы на python поскольку фреймворк WebIOPi сделает за нас всю работу.

Подготовка платы Raspberry Pi

Для подготовки платы Raspberry Pi к данному проекту необходимо будет установить фреймворк WebIOPi, который упростит взаимодействие между веб-страницей и платой Raspberry Pi. Данный фреймворк легче всего установить с помощью фреймворка Flask на python, но в данном проекте мы сделаем это вручную чтобы посмотреть "изнутри" как это выглядит.

Но вначале необходимо установить самые свежие обновления для платы Raspberry Pi и перезагрузить плату чтобы изменения вступили в силу:

После этого можно будет приступать к установке фреймворка (framework) WebIOPi. Но перед этим убедитесь, что вы находитесь в домашнем каталоге:

Используем wget чтобы загрузить необходимые нам файлы WebIOPi из сети интернет:

Когда скачивание завершится, извлеките файлы из архива и смените каталог на папку с WebIOPi:

Поскольку в данном проекте мы использовали плату Raspberry Pi 3 нам понадобилось установить специальный патч поскольку скачанная нами версия WebIOPi не могла должным образом работать с платой Raspberry Pi 3. Для установки данного патча мы использовали следующие команды:

После этого необходимо запустить процесс установки с помощью WebIOPi:

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

Тестирование WebIOPi

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

Выполните следующую команду:

После выполнения данной команды запустите браузер на вашей Raspberry Pi и откройте в нем страницу по адресу http://raspberrypi.mshome.net:8000 или http://thepi’sIPaddress:8000. После этого система попросит вас ввести имя пользователя и пароль. Используйте следующие имя пользователя и пароль:

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

После авторизации у вас откроется страница, показанная на следующем рисунке. Нажмите на ней на ссылку с GPIO header.

Главное меню WebIOPi

Для тестирования WebIOPi мы подключим к GPIO 17 светодиод и сконфигурируем GPIO 17 в качестве цифрового выхода.

Конфигурирование GPIO 17 в качестве цифрового выхода

Подключите светодиод с помощью токоограничивающего резистора к контакту GPIO 17 как показано на следующей схеме:

Схема для тестирования работы WebIOPi

После сборки этой схемы вернитесь снова на выше показанную страницу и нажимайте на кнопку напротив контакта 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".

После этого создадим также каталоги для хранения скриптов (scripts), CSS и изображений (images) внутри каталога "html".

Создание каталогов для хранения скриптов (scripts), CSS и изображений (images)

После создания всех этих каталогов можно приступать к написанию кодов всех необходимых файлов на вашем персональном компьютере, которые потом можно будет переместить в плату Raspberry Pi с помощью filezilla.

Код JavaScript

Первым кодом, который мы напишем для нашего проекта, будет код JavaScript. Это простой скрипт для взаимодействия с сервисом WebIOPi.

Здесь необходимо заметить, что на нашей веб-станице управления проектом автоматизации дома будет 4 кнопки, с помощью которых мы будем управлять работой 4-х контактов GPIO, но управлять мы будем всего 2-мя реле. Более подробно принцип работы проекта показан на видео, представленном в конце статьи.

Представленный код будет выполняться когда 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 мы запишем таблицу стилей для основного "тела" нашей страницы.

В представленном фрагменте кода мы установили белый цвет фона (#ffffff), затем добавили фоновое изображение, размещенное по адресу /img/smart.png. Затем мы отцентрировали это изображение. После этого мы установили размер, шрифт и цвет текста.

Далее запрограммируем оформление кнопок: тень текста, тень кнопки, небольшой эффект перехода, который будет появляться при нажатии кнопки чтобы добавить реалистичность этому процессу. Также необходимо указать отдельные параметры для браузеров webkit, firefox, opera и т.д. чтобы наш код корректно работал на всех этих платформах.

В следующем фрагменте кода запрограммируем точку входа для фреймворка WebIOPi.

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

Когда кнопка отжата – у нее будет серый фон (gray), а когда нажата – у нее будет красный фон (RED).

Написанный CSS код сохраним под именем smarthome.css и передадим его на Raspberry Pi с помощью filezilla (или другой аналогичной программы) в ранее созданную там папку со стилями (styles folder).

HTML код

HTML код объединяет вместе ранее рассмотренные коды javascript и таблицы стилей.

В теге head данного html кода присутствует строка:

Эта строка кода позволяет веб-приложению сохранять свой контент на экране смартфона (или другого мобильного устройства) с помощью браузеров chrome или mobile safari. Это можно сделать с помощью меню chrome. Также это обеспечивает приложению "легкий" запуск на мобильном устройстве.

Следующая команда позволяет веб-приложению занять весь экран мобильного устройства.

Следующая строка кода задает название для нашей веб-страницы.

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

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

Параметр id=”content” позволяет нам работать с контентом для наших кнопок, описанным ранее в коде JavaScript.

Сохраните представленный html код в виде файла index.html и перенесите его на Raspberry Pi с помощью filezilla в ранее созданную там папку html.

Изменение настроек сервера WebIOPi для проекта автоматизации дома

На этом этапе мы будем проектировать схему для нашего проекта и тестировать наше веб-приложение. Но перед этим необходимо отредактировать конфигурационный файл (config file) сервиса webiopi чтобы он использовал данные с нашей папки html, а не с той папки, которая настроена в нем по умолчанию.

Чтобы получить доступ к настройкам webiopi выполните следующую команду:

В настройках этого сервиса обратите внимание на  http секцию – у вас там должно быть написано что либо подобное: #Use doc-root to change default HTML and resource files location.

Закомментируйте все, что написано ниже этой строчки с помощью символов "#" и если вы создавали папки для проекта так, как мы это описали в статье, то укажите следующий путь к вашему проекту:

Сохраните и выйдите из файла. Также вы можете изменить порт с 8000 на свой, на котором у вас работает сервер на Raspberry Pi.

Вы можете изменить пароль WebIOPi используя следующую команду:

После выполнения этой команды система попросит вас ввести новые имя пользователя (username) и пароль (password). Также вы можете их полностью удалить если не хотите вводить их в дальнейшем – но если вы заботитесь о безопасности вашей системы, то так делать не стоит.

Далее необходимо запустить сервис WebIOPi с помощью команды:

Статус сервера можно проверить с помощью:

Остановить его можно с помощью следующей команды:

Чтобы WebIOPi запускалась при загрузке системы, используйте следующую команду:

Если вы хотите отключить ее запуск при загрузке системы, то используйте:

Схема проекта

Схема автоматизации дома на Raspberry Pi с управлением с веб-страницы представлена на следующем рисунке.

Схема автоматизации дома на Raspberry Pi с управлением с веб-страницы

Поскольку на момент работы над данным проектом у нас не оказалось под рукой готовых модулей реле (с ними работать было бы проще), то мы использовали вместо них одиночные реле на 5v.

При сборке этой схемы учтите, что схема расположения контактов на ваших моделях реле может отличаться от той, которая приведена на нашей схеме. Используйте описание (даташит) вашей модели реле или мультиметр чтобы определить расположение контактов ваших реле.

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

Тестирование работы проекта автоматизации дома

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

По следующей ссылке можно скачать коды HTML, CSS и JAVASCRIPT, которые были использованы в данном проекте.

Видео, демонстрирующее работу проекта

Источник статьи

(Проголосуй первым!)
Загрузка...
769 просмотров

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *