Управление сервомотором по Wi-Fi с помощью Arduino и веб-браузера

В этой статье мы рассмотрим управление сервомотором из веб-браузера с помощью Arduino и Wi-Fi модуля ESP8266. Модуль ESP8266 будет устанавливать соединение между сервомотором и веб-браузером с использованием IP адреса и затем при перемещении слайдера в веб-браузере ось сервомотора будет поворачиваться на соответствующий угол. Настроив перенаправление соединения (Port Forwarding) в своем роутере вы сможете управлять сервомотором из любой точки мира по сети интернет.

Управление сервомотором по Wi-Fi с помощью Arduino и веб-браузера: внешний вид конструкции

Ранее на нашем сайте мы уже рассматривали управление сервомотором с помощью Arduino, с помощью MATLAB и Arduino, с помощью микроконтроллера AVR. Также по этой ссылке вы можете посмотреть все проекты на нашем сайте, связанные с управлением сервомотором.

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

Плата Arduino Uno
Сервомотор sg90
Wi-Fi модуль ESP8266
Резистор 1 кОм (3 шт.)
Соединительные провода

Работа схемы

Схема устройства представлена на следующем рисунке.

Схема управления сервомотором по Wi-Fi с помощью ArduinoПервым делом необходимо соединить модуль ESP8266 с платой Arduino. Модуль ESP8266 работает с напряжением 3.3V, поэтому его нежелательно подсоединять к 5V платы Arduino поскольку это может повредить его. Соедините контакты VCC и CH_PD модуля с контактом 3.3V платы Arduino. Контакт RX модуля ESP8266 работает с напряжением 3.3V, поэтому он не будет работать правильно, если мы подсоединим его непосредственно к плате Arduino. Поэтому нам необходимо сделать делитель напряжения, который будет конвертировать 5V в 3.3V. Это можно сделать с помощью последовательного соединения трех резисторов как показано на схеме. Соедините контакт TX модуля ESP8266 с контактом 4 платы Arduino, а контакт RX модуля ESP8266 — с контактом 5 платы Arduino при помощи резисторов.

Wi-Fi модуль ESP8266 обеспечивает нашему проекту доступ в сеть интернет. Он является весьма дешевым, но в тоже время достаточно «мощным» устройством и может подсоединяться к большинству известных микроконтроллеров, поэтому он так часто используется в проектах, связанных с интернетом вещей (IOT).

Затем соединим сервомотор с платой Arduino. Соедините контакты VCC и землю сервомотора к контактам 5V и земле платы Arduino, а сигнальный контакт сервомотора – к контакту 9 платы Arduino.

Внешний вид используемого нами сервомотора показан на следующем рисунке.

Назначение контактов сервомотора

Как будет работать наш проект

Чтобы запустить наш проект вам необходимо сделать HTML файл, который будет открывать веб-страницу. Для этого вам необходимо будет скопировать HTML код, приведенный ниже в данной статье и сохранить его в блокнот. Расширение у созданного файла должно быть ‘.html’. То есть, к примеру, если вы хотите назвать файл ‘servo’, то полностью имя файла будет ‘servo.html’, чтобы его легко можно было открыть в веб-браузере.

После этого вы должны поместить jQuery файл в ту же самую папку куда вы поместили html файл. Скачать необходимые файлы вы можете по следующей ссылке – скачать HTML файл и jQuery файл. После скачивания файлы необходимо извлечь из архива. jQuery представляет собой библиотеку Java Script, которая содержит JS функции для осуществления DOM операций (DOM — Document Object Model — объектная модель документов) и обеспечивает стандартный интерфейс для доступа и управления HTML-объектами.

Теперь откройте скачанный html файл в веб-браузере, вы должны увидеть примерно следующую картинку:

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

После этого вставьте код программы для Arduino (приведен в конце статьи) в Arduino IDE, измените в этом коде имя пользователя и пароль для сети Wi-Fi на свои данные и загрузите программу в плату Arduino. В последовательном мониторе (Serial Monitor) вы можете увидеть IP адрес. Напечатайте этот IP адрес в поле на веб-странице. Теперь если вы будете двигать слайдер на представленной веб-странице, то сервомотор будет двигаться в соответствии с положением ползунка слайдера. Таким образом, вы можете управлять сервомотором с веб-страницы.

Код программы для HTML файла

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

Тег <!DOCTYPE html > сообщает веб-браузеру какую версию html мы использовали для написания нашего кода. Этот тэг должен быть записан в самом верху документа, все остальные строки файла должны быть записаны после него.

Код, записанный между тегами <html> </html>, считывается браузером. То есть эти теги обозначают начало и конец html-документа. Код, записанный вне этих тегов, не будет отображаться на веб-странице. Теги <head> </head> используются для задания названия документа, ссылок, jQuery и стилей. Мы в нашем коде указали название веб-страницы и скрипт jQuery. Данные, записанные между тегами <title></title>, будут обозначать название вкладки в браузере. В нашем коде мы дали ей имя “Web Controlled Servo”.

Теги <script></script> используются чтобы подключить jQuery, который представляет собой библиотеку JavaScript и значительно упрощает наш код.

Теги body используются чтобы определить такие элементы на веб-странице как текстовые поля, слайдеры, кнопки и т.д. Также мы можем определить размеры этих элементов. Теги заголовков h1, h2, h3, h4, h5 и h6 используются для задания размера шрифта этих заголовков. В нашем коде мы использовали заголовки h1, h3 и h4.

Затем мы создали текстовое поле (textbox) чтобы записать в нем IP адрес. Он будет соответствовать IP адресу ESP8266, который будет передавать данные на этот IP адрес. После этого в коде файла мы создаем слайдер (input type=»range») который будет передавать значение функции “servo1”, которое будет соответствовать углу поворота оси сервомотора от 20 до 170 градусов.

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

Исходный код программы для платы Arduino

Полный код программы приведен в конце статьи. Здесь же обсудим наиболее важные участки кода.

Для начала нам необходимо подключить библиотеку последовательной связи (Software Serial) и библиотеку для работы с сервомотором. Если у вас нет этих библиотек, то вам необходимо их установить перед загрузкой кода в плату Arduino. Затем необходимо инициализировать контакты, к которым мы подключили модуль ESP8266. Сообщение ‘DEBUG true’ будет показано в сообщениях от ESP8266 в окне монитора последовательной связи (Serial Monitor). Затем инициализируем контакт servo и объявим переменную для сервомотора.

Затем сообщим плате Arduino к какому ее контакту мы подключили сервомотор и повернем ось серводвигателя на максимальную позицию. Затем установим скорость последовательной связи для модуля ESP8266 – 115200 бод/с.

Следующий участок кода соединяет модуль ESP8266 с вашим Wi-Fi роутером и сообщает вам IP адрес по которому вы будете соединяться с веб-страницей и получать от нее данные.

В функции void loop() модуль ESP8266 будет проверять получены ли данные или нет. Если данные получены, то они будут считываться и отображаться в окне монитора последовательной связи, также будет производиться поворот оси сервомотора в соответствии с этими данными.

Наконец, функция sendData используется для передачи команд модулю ESP8266 и проверяет его ответ.

Для демонстрации работы нашего проекта (смотрите видео в конце статьи) мы использовали локальный сервер. Но чтобы подобным образом управлять серводвигателем из любой точки мира, вам необходимо перенаправить порт 80 (используется для HTTP или интернета) на ваш локальный или частный IP адрес (192.168*) вашего устройства. После перенаправления порта все входящие соединения будут перенаправляться на этот локальный адрес, после этого вам будет необходимо открыть HTML файл, который вы скачали ранее в этой статье, и там в текстовом поле ввести публичный IP адрес вашего интернета. Вы можете настроить перенаправление порта залогинившись в своем роутере (192.168.1.1) и найти в настройках роутера опцию для перенаправления порта.

Далее приведен полный текст программы.

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

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

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

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