- Обязательные компоненты:
- Подготовка Raspberry Pi:
- Протестируйте установку WebIOPi:
- Создание веб-приложения для домашней автоматизации Raspberry Pi:
- Серверные правки WebIOPi для домашней автоматизации:
- Принципиальная схема и пояснения:
Привет, ребята, добро пожаловать в сегодняшнее руководство! Одна из хороших черт Raspberry Pi - это отличная способность и легкость, с которой он дает вам возможность подключать устройства к Интернету, особенно для проектов, связанных с домашней автоматизацией. Сегодня мы собираемся изучить возможность управления приборами переменного тока с помощью нажатия кнопок на веб-странице через Интернет. Используя эту систему домашней автоматизации на основе Интернета вещей, вы можете управлять своей бытовой техникой из любой точки мира. Этот веб-сервер можно запускать с любого устройства, на котором можно запускать HTML-приложения, например смартфона, планшета, компьютера и т. Д.
Обязательные компоненты:
Для этого проекта требования будут разделены на две категории: оборудование и программное обеспечение:
I. Требования к оборудованию:
- Raspberry Pi 3 (подойдет любая другая версия)
- Карта памяти 8 или 16 ГБ под управлением Raspbian Jessie
- Реле 5В
- 2n222 транзисторы
- Диоды
- Перемычки
- Блоки подключения
- Светодиоды для тестирования.
- Лампа переменного тока для проверки
- Макетная плата и соединительные кабели
- Резистор 220 или 100 Ом
II. Требования к программному обеспечению:
Помимо операционной системы Raspbian Jessie, работающей на raspberry pi, мы также будем использовать фреймворк WebIOPi, notepad ++, работающий на вашем ПК, и filezila для копирования файлов с ПК на raspberry pi, особенно файлов веб-приложений.
Также вам не нужно писать код на Python для этого проекта домашней автоматизации, всю работу сделает WebIOPi.
Подготовка Raspberry Pi:
Это своего рода привычка для меня, и я думаю, что она хорошая, первое, что я делаю каждый раз, когда хочу использовать Raspberry Pi, - это обновлять PI. Для этого проекта этот раздел будет включать процедуры обновления Pi и установку фреймворка WebIOPi, который поможет нам обрабатывать связь с веб-страницы на Raspberry Pi. Я должен, вероятно, заявить, что это также можно сделать, возможно, более простым способом, используя работу фрейма Python Flask, но одна из интересных вещей в DIY - это когда вы заглядываете под капот и выполняете сложную работу. Вот где приходит вся радость от DIY.
Чтобы обновить приведенные ниже команды Raspberry Pi, а затем перезагрузить RPi;
sudo apt-get update sudo apt-get upgrade sudo reboot
После этого нам нужно установить фреймворк webIOPi.
Убедитесь, что вы находитесь в домашнем каталоге, используя;
cd ~
Используйте wget, чтобы получить файл со страницы sourceforge;
wget
Когда загрузка будет завершена, извлеките файл и перейдите в каталог;
tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1 /
На этом этапе перед запуском установки нам необходимо установить патч, поскольку эта версия WebIOPi не работает с Raspberry Pi 3, которую я использую, и я не смог найти версию WebIOPi, которая работает непосредственно с Pi 3..
Нижеуказанные команды используются для установки патча, пока он еще находится в каталоге WebIOPi, выполните:
wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch patch -p1 -i webiopi-pi2bplus.patch
Затем мы можем запустить установку для WebIOPi, используя;
sudo./setup.sh
Продолжайте говорить "да", если вас попросят установить какие-либо зависимости во время установки. Когда закончите, перезагрузите свой пи;
перезагрузка sudo
Протестируйте установку WebIOPi:
Прежде чем переходить к схемам и кодам, с возвращением Raspberry Pi нам нужно будет протестировать нашу установку WebIOPi, чтобы убедиться, что все работает нормально, как нужно.
Запустите команду;
sudo webiopi -d -c / etc / webiopi / config
После ввода указанной выше команды на pi, укажите в браузере вашего компьютера, подключенного к raspberry pi, http: // raspberrypi. mshome.net:8000 или http; // IP-адрес thepi: 8000. Система предложит вам ввести имя пользователя и пароль.
Имя пользователя - webiopi. Пароль - raspberry.
Этот логин при желании можно удалить позже, но даже ваша система домашней автоматизации заслуживает некоторого дополнительного уровня безопасности, чтобы не допустить никого, у кого есть управляющие IP-устройства и устройства IOT в вашем доме.
После входа в систему осмотритесь и щелкните ссылку заголовка GPIO.
Для этого теста мы будем подключать светодиод к GPIO 17, так что продолжайте и установите GPIO 17 в качестве выхода.
После этого подключите светодиод к Raspberry Pi, как показано на схемах ниже.
После подключения вернитесь на веб-страницу и нажмите кнопку с выводом 11, чтобы включить или выключить светодиод. Таким образом, мы можем управлять GPIO Raspberry Pi с помощью WebIOPi.
После теста, если все сработало, как описано, мы можем вернуться к терминалу и остановить программу с помощью CTRL + C.Если у вас возникнут проблемы с этой настройкой, свяжитесь со мной через раздел комментариев.
Более подробную информацию о Webiopi можно найти на его странице Wiki (http://webiopi.trouch.com/INSTALL.html)
После завершения теста мы можем начать основной проект.
Создание веб-приложения для домашней автоматизации Raspberry Pi:
Здесь мы будем редактировать конфигурацию службы WebIOPi по умолчанию и добавлять собственный код, который будет запускаться при вызове. Первое, что мы сделаем, это установим на наш компьютер filezilla или любое другое программное обеспечение для копирования FTP / SCP. Вы согласитесь со мной, что кодирование pi через терминал довольно утомительно, поэтому на этом этапе пригодится filezilla или любое другое программное обеспечение SCP. Перед тем, как начать запись HTML, CSS и Java Script кода для этого IoT Home Web автоматизации приложения и перемещение их на Raspberry Pi, позволяет создать папку проекта, где все наши веб - файлы будут.
Убедитесь, что вы находитесь в домашнем каталоге с помощью, затем создайте папку, перейдите в созданную папку и создайте папку html в каталоге:
cd ~ mkdir webapp cd webapp mkdir html
Создайте папку для скриптов, CSS и изображений внутри папки html
mkdir html / css mkdir html / img mkdir html / скрипты
Создав наши файлы, давайте перейдем к написанию кодов на нашем ПК, а затем перейдем к Pi через filezilla.
Код JavaScript:
Первый фрагмент кода, который мы напишем, - это javascript. Это простой сценарий для связи со службой WebIOPi.
Важно отметить, что для этого проекта наше веб-приложение будет состоять из четырех кнопок, что означает, что мы планируем управлять только четырьмя контактами GPIO, хотя в нашей демонстрации мы будем управлять только двумя реле. Посмотрите полное видео в конце.
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 = webiopi (). createGPIOButton (18, «Реле 2»); content.append (кнопка); button = webiopi (). createGPIOButton (22, «Реле 3»); content.append (кнопка); button = webiopi ().createGPIOButton (23, «Реле 4»); content.append (button);});
Приведенный выше код запускается, когда WebIOPi готов.
Ниже мы объяснили код JavaScript:
webiopi (). ready (function (): это просто указывает нашей системе создать эту функцию и запустить ее, когда webiopi будет готов.
webiopi (). setFunction (23, "выход"); Это помогает нам указать службе WebIOPi установить GPIO23 в качестве вывода. У нас здесь четыре кнопки, у вас их может быть больше, если вы реализуете больше кнопок.
var content, button; Эта строка говорит нашей системе создать переменную с именем content и сделать ее кнопкой.
content = $ ("# содержание"); Переменная содержимого по-прежнему будет использоваться в наших HTML и CSS. Поэтому, когда мы говорим о #content, фреймворк WebIOPi создает все, что с ним связано.
button = webiopi (). createGPIOButton (17, «Реле 1»); WebIOPi может создавать разные типы кнопок. Приведенный выше фрагмент кода помогает нам сообщить службе WebIOPi о необходимости создания кнопки GPIO, которая управляет выводом GPIO, в данном случае 17 с пометкой «Relay 1». То же самое и с другими.
content.append (кнопка); Добавьте этот код к любому другому коду для кнопки, созданной либо в html-файле, либо в другом месте. Можно создать больше кнопок, и все они будут иметь те же свойства, что и эта кнопка. Это особенно полезно при написании CSS или скрипта.
После создания файлов JS мы сохраняем их, а затем копируем с помощью filezilla в webapp / html / scripts, если вы создавали свои файлы так же, как я.
После этого мы переходим к созданию CSS. Вы можете полностью скачать код по ссылке, указанной в конце в разделе «Код».
Код CSS:
CSS помогает нам сделать нашу веб-страницу домашней автоматизации IoT Raspberry Pi красивым.
Я хотел, чтобы веб-страница выглядела как на изображении ниже, и поэтому для этого мне пришлось написать таблицу стилей smarthome.css .
Ниже мы объяснили код CSS:
Сценарий CSS кажется слишком громоздким, чтобы включать его сюда, поэтому я просто выберу его часть и использую для анализа. Вы можете скачать полный файл CSS здесь. CSS - это просто, и вы можете понять его, просто просмотрев код CSS. Вы можете легко пропустить эту часть и сразу же использовать наш код CSS.
Первая часть скрипта представляет собой таблицу стилей для тела веб-приложения, показанную ниже;
тело {цвет фона: #ffffff; фоновое изображение: url ('/ img / smart.png'); фон-повтор: без повторения; background-position: center; размер фона: обложка; шрифт: полужирный 18px / 25px Arial, без засечек; цвет: светло-серый; }
Я хочу верить, что приведенный выше код не требует пояснений, мы устанавливаем цвет фона как #ffffff, который является белым, затем мы добавляем фоновое изображение, расположенное в этой папке (помните нашу предыдущую настройку папки?), Мы гарантируем, что изображение не ' t repeat, установив для свойства background-repeat значение no-repeat, затем проинструктируйте CSS централизовать фон. Затем мы переходим к установке размера, шрифта и цвета фона.
Когда тело готово, мы написали CSS, чтобы кнопки выглядели красиво.
кнопка {дисплей: блок; положение: относительное; маржа: 10 пикселей; отступ: 0 10 пикселей; выравнивание текста: центр; текстовое оформление: нет; ширина: 130 пикселей; высота: 40 пикселей; шрифт: жирный 18px / 25px Arial, без засечек; черный цвет; текстовая тень: 1px 1px 1px rgba (255,255,255, 0,22); -webkit-border-radius: 30 пикселей; -moz-border-radius: 30 пикселей; радиус границы: 30 пикселей;
Вкратце, все остальное в коде было сделано так, чтобы он хорошо выглядел. Вы можете изменить их, чтобы увидеть, что происходит, я думаю, это называется обучением методом проб и ошибок, но в CSS есть одна хорошая вещь - это то, что вещи выражаются на простом английском языке, что означает, что их довольно легко понять. Другая часть блока кнопок имеет несколько дополнительных функций для тени текста на кнопке и тени кнопки. Он также имеет небольшой эффект перехода, который помогает ему выглядеть красиво и реалистично при нажатии кнопки. Они определяются отдельно для webkit, firefox, opera и т. Д., Чтобы обеспечить оптимальную работу веб-страницы на всех платформах.
Следующий блок кода предназначен для службы WebIOPi, чтобы сообщить ей, что это входные данные для службы WebIOPi.
i nput {дисплей: блок; ширина: 160 пикселей; высота: 45 пикселей; }
Последнее, что мы хотим сделать, это дать какую-то индикацию, когда кнопка была нажата. Таким образом, вы можете как бы смотреть на экран, и цвет кнопок показывает текущее состояние. Для этого для каждой кнопки была реализована приведенная ниже строка кода.
# gpio17.LOW {цвет фона: серый; черный цвет; } # gpio17.HIGH {цвет фона: красный; цвет: светло-серый; }
Строки кода выше просто меняют цвет кнопки в зависимости от ее текущего состояния. Когда кнопка выключена (НИЗКИЙ), цвет фона кнопок становится серым, чтобы показать, что она неактивна, а когда кнопка включена (ВЫСОКИЙ), цвет фона кнопки становится КРАСНЫМ.
CSS в сумке, давайте сохраним его как smarthome.css, затем переместим его через filezilla (или любое другое программное обеспечение SCP, которое вы хотите использовать) в папку стилей на нашем Raspberry Pi и исправим последний фрагмент, HTML-код. Не забудьте скачать полный CSS отсюда.
HTML-код:
Код html объединяет все вместе, javascript и таблицу стилей.
Нажать кнопку; получить бекон
В теге head есть несколько очень важных функций.
Приведенная выше строка кода позволяет сохранить веб-приложение на мобильном компьютере с использованием Chrome или мобильного сафари. Это можно сделать через хромированное меню. Это позволяет легко запускать приложение с мобильного компьютера или дома.
Следующая строка кода ниже дает некоторую реакцию на веб-приложение. Это позволяет ему занимать экран любого устройства, на котором он запущен.
Следующая строка кода объявляет заголовок, отображаемый в строке заголовка веб-страницы.
Каждая из следующих четырех строк кода выполняет функцию связывания html-кода с несколькими ресурсами, которые необходимы для работы по желанию.
Первая линия выше вызовов основной WebIOPi рамки JavaScript, который жестко закодирован в корневом каталоге сервера. Это необходимо вызывать каждый раз, когда нужно использовать WebIOPi.
Вторая строка указует на странице HTML для нашего JQuery сценария, третий точек его в направлении наших стилей. Наконец, последняя строка помогает настроить значок, который будет использоваться на мобильном рабочем столе, если мы решим использовать его в качестве веб-приложения или значка для веб-страницы.
Раздел body html-кода просто содержит теги разрыва, чтобы кнопки были правильно выровнены со строкой ниже, сообщающей нашему html-коду отображать то, что написано в файле JavaScript. ID =»содержание» должен напомнить вам о декларации контента для нашей кнопки ранее под кодом JavaScript.
Вы знаете, что такое упражнение, HTML-код как index.html и переход в папку html на Pi через filezilla. Вы можете скачать все файлы CSS, JS и HTML отсюда.
Серверные правки WebIOPi для домашней автоматизации:
На этом этапе мы готовы начать создавать наши схемы и тестировать наше веб-приложение, но перед этим нам нужно отредактировать файл конфигурации службы webiopi, чтобы он указывал на использование данных из нашей папки html вместо файлов конфигурации, которые пришли с ним..
Чтобы изменить конфигурацию, выполните следующие действия с правами root;
Судо нано / и т.д. / webiopi / config
Найдите раздел http в файле конфигурации, проверьте раздел, в котором у вас есть что-то вроде: # Используйте doc-root, чтобы изменить расположение HTML и файлов ресурсов по умолчанию.
Закомментируйте что-либо под ним, используя #, затем, если ваша папка настроена как моя, укажите в корневом каталоге документа путь к файлу вашего проекта.
doc-root = / главная / pi / webapp / html
Сохранить и выйти. Вы также можете изменить порт с 8000, если у вас есть другой сервер, работающий на pi, использующий этот порт. Если не сохраните и выйдите, как мы идем дальше.
Важно отметить, что вы можете изменить пароль службы WebIOPi с помощью команды;
sudo webiopi-passwd
Вам будет предложено ввести новое имя пользователя и пароль. Его также можно удалить полностью, но безопасность важна, верно?
Наконец, запустите службу WebIOPi, введя следующую команду:
sudo /etc/init.d/webiopi start
Статус сервера можно проверить с помощью;
sudo /etc/init.d/webiopi статус
Его можно остановить с помощью;
sudo /etc/init.d/webiopi stop
Чтобы настроить WebIOPi для запуска при загрузке, используйте;
sudo update-rc.d webiopi по умолчанию
Если вы хотите изменить направление и остановить его запуск при загрузке, используйте;
sudo update-rc.d webiopi удалить
Принципиальная схема и пояснения:
Когда наше программное обеспечение настроено, мы готовы приступить к созданию схем для этого проекта Home Appliance, управляемого через Интернет.
Пока я не мог достать релейные модули, с которыми, как мне кажется, легче работать любителям. Итак, я рисую здесь схемы обычных автономных одиночных реле на 5 В.
Подключите вашу схему, как показано на схеме выше. Обратите внимание, что COM, NO (нормально открытый) и NC (нормально закрытый) вашего собственного реле могут быть расположены с разных сторон / точек. Пожалуйста, используйте миллиметр, чтобы проверить это. Узнайте больше о реле здесь.
Подключив наши компоненты, запустите свой сервер с веб-страницы, перейдите на IP-адрес вашего Raspberry Pi и укажите порт, как описано ранее, войдите в систему с вашим именем пользователя и паролем, и вы должны увидеть веб-страницу, которая выглядит точно так, как на изображении ниже.
Теперь вы можете легко управлять четырьмя бытовыми приборами переменного тока из любого места по беспроводной сети, просто нажимая на кнопки. Это будет работать с мобильного телефона, планшета и т. Д., И вы можете добавить больше кнопок и реле для управления большим количеством устройств. Посмотрите полное видео ниже.
Вот и все, ребята, спасибо, что остались для этого. Если у вас есть вопросы, оставьте их в поле для комментариев.