Дистанционное управление через Интернет с помощью мобильного телефона

В статье обсуждается способ удаленного управления устройством (включение/выключение) через Интернет с помощью мобильного устройства Android и модуля ESP32 Wi-Fi. Предполагается, что ESP32 подключен к маршрутизатору Wi-Fi. Таким образом, доступ к удаленному устройству возможен из любой точки мира. Примеры: разбрызгиватель воды в саду, включение кондиционера, включение камеры наблюдения и подобных устройств.

Здесь модуль Wi-Fi ESP32 подключен к Интернету через маршрутизатор Wi-Fi. Один из контактов ввода/вывода (контакт № 13) подключен к устройству через интерфейс. В этой статье мы подключаем LED последовательно с резистором к выводу № 13 (см. рис. 1). Мобильный телефон Android используется для switch ВКЛ/ВЫКЛ LED. ESP32 — это устройство с напряжением 3,3 В, поэтому сигналы имеют логику 3,3 В.

Необходимые детали

1. Плата ESP32, 2,4 ГГц, двухрежимная Wi-Fi — двухъядерный Bluetooth с кабелем USB: 1 нет.
2. LED: 1 нет
3. 210 Ом: 1 нет

Схема подключения



Модуль ESP32 WiFi

ESP32 работает на логических уровнях 3,3 В. Регулируемое напряжение от 5 до 12 В может быть подключено к выводу Vin во время нормальной работы. Выбирайте напряжение, близкое к 5 В, чтобы уменьшить рассеиваемую мощность в бортовом стабилизаторе напряжения. Во время загрузки программы ESP32 можно подключить к компьютеру с помощью кабеля USB. Следует позаботиться о том, чтобы оба источника питания НЕ подавали одновременно. Самый простой способ подключить ESP32 — использовать блок питания с портом USB.

Установка ESP32

Подключите ESP32 к ноутбуку/компьютеру с помощью кабеля USB. Предполагая, что вы используете компьютер с ОС Windows, перейдите в Диспетчер устройств > Другие устройства. В нем будут указаны CP2102 от USB до UART Bridge Controller. Щелкните его правой кнопкой мыши и выберите «Обновить драйвер». Следуйте онлайн-предложениям. Если это не помогло, вам придется вручную установить драйвер, скачав его из Интернета. После установки диспетчер устройств покажет COM-порт, к которому подключен ESP32. Запишите номер COM-порта.

В Arduino IDE перейдите в раздел «Инструменты» > Boards Manager... и установите ESP32 от Espressif System. Откройте Файл > Настройки… В URL-адресах менеджера дополнительных досок: добавьте это ссылка.

На этом установка ESP32 завершена.

Код ESP32

В нашей настройке ESP32 будет работать как сервер, и наш мобильный телефон попытается подключиться к нему. ESP32 будет в режиме STA, но прослушивает, и нам нужно назначить статический адрес IP. Узнайте адреса IP всех устройств, подключенных к маршрутизатору Wi-Fi, и выберите неиспользуемый адрес IP, изменив последний октет. Это будет адрес IP нашего Сервера (ESP32). Следующим шагом является выбор номера порта. Выберите неиспользуемый номер порта от 32767 до 65535.

Подключите ESP32 к компьютеру и откройте Arduino IDE. В меню «Инструменты» выберите соответствующую плату ESP32 и COM-порт. Введите следующий код, скомпилируйте и загрузите. Иногда для загрузки может потребоваться нажать кнопку ЗАГРУЗКИ while. (Помните, что программы Arduino должны находиться в папке с тем же именем).

// ESP32 в режиме STA //

// но слушает со статическим IP //

// Переадресация портов должна быть выполнена //

#include <WiFi.h>

#define EspPortServ xxxxxx // см. текст //

// Замените учетными данными вашего маршрутизатора

const char* ssid = ".........." ; //

const char* пароль = "........." ;

Сервер WiFiServer(EspPortServ); // Режим STA //

// Статический адрес ESP32 IP // см. текст //

// Октеты разделяются запятой, а не точкой //

IP-адрес локальныйIP( ххх, ххх, ххх, ххх );

IP-адрес шлюза (xxx, xxx, xxx, xxx);

Подсеть IP-адреса ( ххх, ххх, ххх, ххх );

чар ч;

клиент WiFiClient;

// LED на GPIO13

интервал LED = 13;

недействительная настройка() {

// Устанавливаем LED в качестве вывода

pinMode(LED, ВЫХОД);

Serial.begin(115200);

// Настраивает статический адрес IP: режим STA //

if (!WiFi.config(локальныйIP, шлюз, подсеть)) {

Serial.println("Не удалось настроить STA");

}

// Подключение к Wi-Fi //

Serial.println("ESP32 как сервер!");

Serial.print("Подключение к");

Serial.println(ssid);

WiFi.begin(ssid, пароль);

while (WiFi.status() != WL_CONNECTED) {

задержка(500);

Serial.print(".");

}

// Сервер ESP32 IP

Serial.println("");

Serial.println("Wi-Fi подключен.");

Serial.print ("Адрес сервера IP: ");

Serial.println(WiFi.localIP());

сервер.begin();

}

недействительный цикл() {

// ESP32 ожидает клиента for //

клиент = server.available();

if (клиент) { // когда клиент подключается к ESP32 //

while (client.connected()) {

if (client.available()) {

ч = client.read();

Serial.write(ч); // запись в последовательный монитор //

switch (гл) {

case '1':

digitalWrite(LED, ВЫСОКИЙ);

client.print («ВКЛ»);

break;

case '0':

digitalWrite(LED, LOW);

client.print("ВЫКЛ");

break;

}

}

}

}

задержка (500);

На этом программирование платы ESP32 завершено.

Мобильное приложение для Android

Здесь для разработки приложения будет использоваться платформа разработчиков приложений MIT. Создайте учетную запись Google (или учетную запись Gmail) и войдите в систему

https://login.appinventor.mit.edu/login

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



В правом верхнем углу вместо «Анонимно» будет отображаться имя учетной записи Google. При нажатии на нее появится меню «Выход».

Нажмите «Новый проект» и укажите имя проекта Remote_Control. Появившийся экран содержит четыре панели: «Палитра», «Просмотр», «Все компоненты» и «Свойства». На панели «Все компоненты» есть запись Screen1. Его свойства отображаются на панели «Свойства». Измените заголовок на «Пульт дистанционного управления». На панели «Просмотр» заголовок изменится на «Удаленное управление».

На панели «Палитра» нажмите меню «Макет», выберите «Горизонтальное расположение» и перетащите его на экран мобильного устройства, отображаемый на панели «Просмотр». На панели «Свойства» измените AlignHorizontal на Center: 3, AlignVertical на Center: 2, Height на 10 процентов и Width на родительский элемент Fill. Из палитры > Пользовательский интерфейс, перетащите кнопку и поместите ее внутри HorizontalArrangement1 на панели просмотра. На панели «Все компоненты» выберите Button1 и переименуйте его (с помощью кнопки «Переименовать» внизу) в btn_on. На панели «Свойства» btn_on измените FontSize на 16, Height to Fill родительский элемент и Width на 30 процентов. Опять же, на панели «Свойства» измените Text на ON и TextAlignment на center: 1.

Из палитры > Пользовательский интерфейс, перетащите Метку и поместите ее справа от кнопки ВКЛ внутри HorizontalArrangement1. Используется как маркер места. На панели «Свойства» Label1 измените значение «Ширина» на 10 процентов и сделайте свойство «Текст» пустым. Из палитры > Пользовательский интерфейс, перетащите кнопку Button и поместите ее справа от Label1. Переименуйте его в btn_off. На панели «Свойства» btn_off измените FontSize на 16, Height to Fill родительский элемент, Width на 30 процентов и Text на OFF. Панель «Все компоненты» теперь будет выглядеть следующим образом.



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



Опять же, из палитры > Макет перетащите HorizontalArrangement на панель просмотра и поместите его под HorizontalArrangement1. На панели «Свойства» измените AlignHorizontal на Center: 3, AlignVertical на Center: 2, Height на 10 процентов и Width на родительский элемент Fill. Перетащите палитру > Пользовательский интерфейс > Пометьте и поместите его внутри HorizontalArrangement2. На панели «Все компоненты» переименуйте Label2 в lbl_status. На панели «Свойства» lbl_status измените FontSize на 16, Text на Not Connected и TextAlignment на center: 1.

Перетаскивание палитры > Макет > HorizontalArrangement и поместите его ниже HorizontalArrangement2. На панели «Свойства» измените AlignHorizontal на Center: 3, AlignVertical на Center: 2, Height на 10 процентов и Width на родительский элемент Fill. Перетащите палитру > Пользовательский интерфейс > Пометьте и поместите его внутри HorizontalArrangement3. Переименуйте его в lbl_public_ip. На панели «Свойства» измените «Текст» на «Общедоступный IP:», а «Выравнивание текста» — на «0». Перетащите «Палитра» > Пользовательский интерфейс > TextBox и поместите его справа от lbl_public_ip. Переименуйте его в txt_public_ip. На панели «Свойства» измените ширину на 30 процентов. Перетащите палитру > Пользовательский интерфейс > Пометьте и поместите его справа от txt_public_ip. Переименуйте его в lbl_serv_port. На панели «Свойства» измените «Текст» на «Порт сервера»: и «Выравнивание текста» вправо: 2. Перетащите «Палитра» > Пользовательский интерфейс > TextBox и поместите его справа от lbl_serv_port. Переименуйте его в txt_serv_port. На панели «Свойства» измените значение «Ширина» на 20 процентов, а значение «TextAlignment» — вправо: 2.

Панель «Все компоненты» будет выглядеть следующим образом.



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



Теперь перетащите Палитру > Макет > HorizontalArrangement и поместите его ниже HorizontalArrangement3. На панели «Свойства» измените AlignHorizontal на Center: 3, AlignVertical на Center: 2, Height на 10 процентов и Width на родительский элемент Fill. Перетащите палитру > Пользовательский интерфейс > Button и поместите его в HorizontalArrangement4. Переименуйте его в btn_save. На панели «Свойства» измените «Ширину» на 20 процентов, «Текст» — «Сохранить», а «Выравнивание текста» — по центру: 1. Перетащите Palette > Пользовательский интерфейс > Button и поместите его справа от btn_save. Переименуйте его в btn_close. На панели «Свойства» измените «Ширину» на 20 процентов, «Текст» на «Закрыть», а «Выравнивание текста» на центр: 1. Перетащите Palette > Пользовательский интерфейс > Button и поместите его справа от btn_close. Переименуйте его в btn_connect. На панели «Свойства» измените «Ширину» на 20 процентов и «Текст для соединения».

Панель «Все компоненты» будет выглядеть следующим образом.



Панель просмотра будет выглядеть следующим образом.



Для хранения общедоступного адреса IP и номера порта сервера мы будем использовать TinyDB. Это невидимый компонент, который может хранить данные. Перетащите палитру > Хранилище > TinyDB и поместите его на экран средства просмотра. Он останется внизу как TinyDB1.

Нам нужны еще два невидимых компонента. Один — ClientSocketAI2.aix, а другой — com.puravidaapps.TaifunTools.aix. Оба должны быть загружены из NET. Сохраните их в подходящую папку на компьютере. Перейдите в Палитра > Расширение и нажмите «Импортировать расширение». Выберите файлы, которые мы сохранили, и импортируйте их. Перетащите их на экран средства просмотра, и они окажутся внизу как невидимые компоненты. Нижняя часть экрана просмотра будет выглядеть следующим образом.



На этом дизайнерская часть нашего проекта завершена.

Режим блоков

Войдите в App Inventor, if вы уже вышли из системы. В верхнем правом углу экрана, под вашим идентификатором Google, вы можете увидеть две кнопки: «Конструктор» и «Блоки». До сих пор мы работали в режиме дизайнера. Теперь нажмите кнопку «Блокировать».

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

Во-первых, нам нужно создать две переменные: одну for, содержащую общедоступный адрес IP, а другую for, содержащую номер порта сервера.

Нажмите «Блоки» > Встроенный > Переменные и перетащите глобальное имя инициализации для блокировки на панель просмотра. Вы можете видеть, что есть открытый конец, к которому мы можем подключить другие блоки. В данном случае name — это имя переменной. Переименуйте его в public_ip. Нажмите «Блоки» > Встроенный > Введите текст и перетащите пустое поле (самое верхнее) на панель просмотра и соедините его с открытым концом (посмотрите на изображения, приведенные ниже). Снова нажмите «Блоки» > Встроенный > Переменные и перетащите глобальное имя «Инициализировать», чтобы заблокировать, на панель «Просмотр». Переименуйте имя в serv_port. На этот раз нажмите «Блоки» > Встроенный > Math и перетащите блок, содержащий 0 (самый верхний), и соедините его с открытым концом. Удалите 0 из блока. Панель просмотра будет выглядеть следующим образом.



Мы используем TinyDB (небольшую базу данных) для сохранения адреса IP и номера порта, чтобы нам не приходилось вводить его снова при повторном открытии приложения. В этом IP адрес представляет собой строку, а номер порта — числовое значение.

Нажмите «Блоки» > Screen1 и перетащите, когда Screen1. Инициализируйте блок на экране просмотра. Полосу прокрутки можно использовать для просмотра элементов внизу. Нажмите «Блоки» > Экран 1 > TaifunTools1 и перетащите вызов TaifunTools1.KeepScreenOn и свяжите его с if Screen1. Инициализируйте блок, как показано на рисунке (см. ниже). Наведите курсор мыши на имя переменной public_ip в инициализирующем глобальном public_ip для блокировки на экране средства просмотра. Это создаст два блока. Выберите «Задать глобальный public_ip для блокировки» и поместите его под блоком вызова TaifunTools1.KeepScreenOn. Нажмите «Блоки» > Экран 1 > TinyDB1, перетащите блок вызова TinyDB1.GetValue и соедините его с открытым концом. Нажмите «Блоки» > Встроенный > Текст, выберите пустой блок и соедините его с открытым концом. В этом блоке введите имя переменной public_ip. Нажмите «Блоки» > Экран 1 > > txt_public_ip, перетащите set txt_public_ip.Text и поместите его внизу. Поместите курсор мыши на public_ip в инициализации глобального public_ip для блокировки на экране средства просмотра, выберите получить глобальный блок public_ip и соедините его с открытым концом.

Поместите курсор мыши на serv_port в инициализирующем глобальном serv_port для блокировки, выберите set global serv_port для блокировки и поместите его ниже предыдущего блока, как показано на рисунке. Нажмите «Блоки» > Экран 1 > TinyDB1, выберите вызов TinyDB1.GetValue и соедините его с открытым концом. Из блоков > Встроенный > Текст, возьмите пустой блок и соедините его с открытым концом. В пустом блоке введите serv_port. Удалите блок пустой строки рядом с заголовком valueIfTagNot There. Из блоков > Встроенный > Математика, перетащите самый верхний блок (который содержит 0) и соедините его с открытым концом. Удалите 0 из блока. В правом нижнем углу находится корзина для мусора. В него можно поместить любой неиспользуемый блок.

Нажмите «Блоки» > Экран 1 > > txt_serv_port, перетащите set txt_serv_port.Text в блок и поместите его внизу. Поместите курсор мыши на serv_port в инициализируемом глобальном serv_port для блока на экране просмотра, перетащите блок get global serv_port и соедините его с открытым концом. Схема показана ниже.



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

Нажмите «Блоки» > Экран 1 > > btn_save. Перетащите, когда btn_save. Нажмите на экран просмотра. Из блоков > Экран 1 > > TinyDB1, перетащите вызов TinyDB1.StoreValue и соедините его с блоком if btn_save.Click. Из блоков > Встроенный > Текст, перетащите пустой блок и совместите его открытый конец с тегом. Из блоков > Экран 1 > > txt_public_ip перетащите блок txt_public_ip.Text и соедините его с другим открытым концом. Наведите курсор мыши на public_ip в инициализации глобального public_ip для блокировки, перетащите set global public_ip для блокировки и поместите его внизу. См. рисунок. Из блоков > Экран 1 > > txt_public_ip, перетащите txt_public_ip.Text и соедините его с открытым концом.

Повторите описанную выше процедуру for для serv_port, как показано на схеме.



Когда мы нажимаем кнопку «Сохранить», общедоступный адрес IP и номер порта будут сохранены в памяти.

Далее мы увидим, как можно подключиться к Интернету. Из блоков > Экран 1 > > btn_connect, перетаскивать при btn_connect. Нажмите «Блокировать», чтобы перейти на экран «Просмотр». Из блоков > Экран 1 > ClientSocketAI2Ext1, перетащите набор ClientSocketAI2Ext1.ServerAddress, чтобы заблокировать и связать его. Поместите курсор мыши на public_ip в инициализации глобального public_ip для блока, перетащите блок get global public_ip и соедините его с открытым концом. Из блоков > Экран 1 > ClientSocketAI2Ext1, перетащите набор ClientSocketAI2Ext.ServerPort в блокировку и поместите его внизу. Поместите курсор мыши на serv_port в инициализации глобального блока serv_port, перетащите блок get global serv_port и соедините его с открытым концом. Нажмите «Блоки» > Экран 1 > ClientsocketAI2Ext1, перетащите вызов ClientSocketAI2Ext1. Соедините блок и поместите его внизу.

Проверка успешности подключения.

Нажмите «Блоки» > Встроенный > Control, перетащите if, затем блок else и соедините его внизу. Из блоков > Встроенный > Logic, выберите блок, содержащий знак «=» и два заполнителя, и сопоставьте его по открытому концу с if. Здесь есть два заполнителя. Нажмите «Блоки» > Экран 1 > ClientSocketAI2Ext1, перетащите ClientSocketAI2Ext1.ConnectionState, чтобы заполнить первый заполнитель. Из блока > Встроенный > Логика, перетащите настоящий блок и заполните второй заполнитель. Из блоков > Экран 1 > > lbl_status, перетащите набор lbl_status.Text для блокировки и сопоставьте его с ним. Из блоков > Встроенный > Текст, перетащите пустой блок и соедините его с открытого конца. Вставьте слово Connected в пустой блок. Повторите то же самое for для открытого конца else, но измените слово на «Не подключено». Схема приведена ниже.



Остальные блоки очень простые. Нам необходимо реализовать функциональность for кнопок ВКЛ/ВЫКЛ.

Нажмите «Блоки» > Экран 1 > > btn_on и перетащите блок When btn_on.Click на экран просмотра. Из блоков > Экран 1 > ClientSocketAI2Ext1, перетащите вызов ClientSocketAI2Ext1. Блок SendData для сопряжения внутри блока When btn_on.Click. Из блоков > Встроенный > Текст, перетащите пустой блок и соедините его с открытого конца. В пустой блок введите 1.

Нажмите «Блоки» > Экран 1 > > btn_off и перетащите блок btn_off. Нажмите на экран просмотра. Повторите описанную выше процедуру for и для этого блока. Вставьте 0 в пустой блок.



Осталось сделать еще два блока. Из блоков > Экран 1 > ClientSocketAI2Ext1: перетащите ClientSocketAI2Ext1.DataReceived на экран средства просмотра. Вы можете видеть, что есть переменная data, в которой хранятся полученные данные. Нажмите «Блоки» > Экран 1 > > lbl_status, перетащите set lbl_status.Text в блок и поместите его внутрь, как показано. Из блоков > Встроенный > Текст, перетащите блок обрезки и поместите его на открытый конец. Наведите курсор мыши на данные, выберите «Получить блок данных» и поместите его на открытый конец.

Нажмите «Блоки» > Экран 1 > > btn_close и перетащите блок btn_close. Нажмите на экран средства просмотра. На экране просмотра в пустом месте введите «Закрыть приложение» и нажмите «Ввод». Это создаст блок, перетащите его и поместите внутри блока When btn_close.Click.



Полная схема показана ниже в виде двух частей.





Установка приложения на мобильный телефон Android

Следующий метод работает только if: мобильный телефон и ноутбук/компьютер подключены к одному и тому же Wi-Fi. В мобильном устройстве зайдите в Play Store, загрузите и установите MIT AI2 Companion. На ноутбуке войдите в MIT App Inventor. Вверху находится меню «Сборка» с подменю «Приложение Android (.apk). Нажмите на него. Теперь App Inventor начнет компилировать. После компиляции отобразится QR-код. Возьмите свой мобильный телефон и откройте MIT AI2 Companion. С помощью кнопки «Сканировать QR-код» отсканируйте QR-код. Следуйте инструкциям, и приложение будет установлено на ваш мобильный телефон. Откройте приложение, используя значок. Ваш экран будет выглядеть следующим образом.



Заполните порт Serv: номер порта, используемый в программе ESP32. Публичный IP: можно получить, набрав Whatismyip.com в браузере. Заполните IPv4-адрес в столбце Public IP и нажмите «Сохранить». Публичный адрес IP будет меняться каждый раз при перезагрузке маршрутизатора. (Примечание: держите свой IP адрес и номер порта в секрете for из соображений безопасности). Вы можете нажать кнопку «Подключиться», чтобы подключиться к серверу ESP32.

Переадресация портов

Полученный нами общедоступный адрес IP действительно принадлежит маршрутизатору. Итак, когда он получает запрос, он должен знать, куда его перенаправить. Это делается с помощью переадресации портов. Здесь будет обсуждаться, как настроить переадресацию портов в модеме NETLINK HG323DAC. Другие маршрутизаторы будут иметь аналогичную процедуру. Если есть case сомнений, погуглите в Интернете.

Откройте браузер и введите 192.168.1.1. Откроется экран.



Укажите имя пользователя, пароль и код подтверждения. Нажмите «Войти». Нажмите «Приложение» > Продвинутый NAT > Виртуальный сервер > Добавлять. Выберите Пользовательский сервер и укажите имя. В столбце «Адрес сервера IP» укажите локальный адрес IP сервера ESP32. Установите флажок Включить. Не обращайте внимания на столбец внешнего адреса IP и заполните поля «Внешний начальный порт» и «Внешний конечный порт» номером порта ESP32. Протокол — TCP и заполните адрес сервера IP (адрес ESP32 IP). Порт сервера — это номер порта прослушивания ESP32. Нажмите кнопку «Сохранить/Применить». Скриншот приведен ниже.



Теперь нажмите «ДМЗ». Установите переключатель «Включить» и введите локальный адрес IP ESP32 в качестве адреса хоста DMZ IP. Нажмите кнопку «Сохранить/Применить». Выход из экрана.

Наша система готова for к тестированию. Подключите ESP32 (уже запрограммированный) к источнику питания (может быть блок питания). Откройте приложение на своем мобильном телефоне и введите общедоступный адрес IP и номер порта. Нажмите Подключиться. В случае успеха появится сообщение «Подключено». Нажмите кнопку ON, и LED загорится. Нажмите кнопку ВЫКЛ, чтобы switch из LED.

Таким образом, вы можете включать и выключать LED из любой точки мира.

Примечания

Каждый раз при перезагрузке маршрутизатора вам необходимо повторно вводить адрес IP на экране мобильного устройства. Вы можете приобрести статический адрес IP, чтобы избежать этого шага. Мы можем периодически проверять подключение for к Интернету, а сообщение о потере if может отображаться в поле статуса. Для простоты это опущено.

---