Сетевой выключатель на основе ESP8266
Те, кто начинает работать с модулями ESP Wi-Fi, зачастую хотят создать умную розетку Wi-Fi, которая позволяла бы управлять нагрузками переменного тока по беспроводной сети через смартфон. Хотя подобные продукты уже доступны на рынке, такие как популярный Moko WiFi Smart Plug или Sonoff, они немного дороги и, к тому же, они не дают вам радости в создании своих собственных изобретений.

Итак, в этом проекте будет показано, как вы можете создать свой собственный умный сетевой выключатель, используя Wi-Fi модуль ESP8266. Это устройство может быть легко подключено к любой выходной розетке переменного тока, а затем на другом конце вы можете подключить фактическую нагрузку. После этого просто оставляйте основной выключатель вашей розетки всегда включенным, и вы сможете контролировать свою нагрузку прямо со своего смартфона.
Цель состоит в том, чтобы включить/выключить нагрузку (например, в данном случае маршрутизатор Wi-Fi), просто используя смартфон. Но если мы выключим маршрутизатор , у нас больше не будет доступа к интернету. Так как мы снова включим его? К счастью, наш ESP8266 можно использовать в качестве точки доступа, что означает, что он также может действовать как маршрутизатор, отправляя собственный сигнал Wi-Fi. Этот сигнал Wi-Fi будет всегда доступен, пока ESP8266 включен. Следовательно, мы запрограммируем наш ESP8266 в качестве портала. Таким образом, как только мы подключимся к сигналу Wi-Fi ESP, мы попадем на веб-страницу, откуда мы можем включить/выключить нашу нагрузку.
Прежде чем мы продолжим, давайте углубимся в программу, чтобы понять, как будет работать наш умный самодельный WiFi-штекер. Как вы можете видеть здесь, мы начинаем программу с включения нескольких заголовочных файлов и настройки сетевого сервера DNS.
#include <ESP8266WiFi.h>
#include "./DNSServer.h"
#include <ESP8266WebServer.h>
const byte DNS_PORT = 53;
IPAddress apIP(10, 10, 10, 1);
DNSServer dnsServer;
ESP8266WebServer webServer(80);
Затем мы инициализируем вывод GPIO 2 ESP как выход, который будет использоваться для управления нашей нагрузкой. После чего у нас есть длинный HTML-код для нашей веб-страницы. Здесь у нас есть три экрана на нашей веб-странице, а именно главный экран, экран включения и экран выключения.
String Home_Screen = ""
"<!DOCTYPE html><html>"
"<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"
+ style_detials +
"<div id=\"buttons\">"
"<a style=\"text-decoration:none;\" href=\"relay_ON\"> <button id=\"switchLight1\" class=\"controllButtons\">Turn ON</button> </a>"
"<a style=\"text-decoration:none;\" href=\"relay_OFF\"><button id=\"switchLight2\" class=\"controllButtons\">Turn OFF</button> </a>"
"</div>"
"<body><h1>Welcome</h1>"
"</body></html>";
String ON_Screen = ""
"<!DOCTYPE html><html>"
"<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"
+ style_detials +
"<div id=\"buttons\">"
"<a style=\"text-decoration:none;\" href=\"relay_ON\"> <button id=\"switchLight1\" class=\"controllButtons\">Turn ON</button> </a>"
"<a style=\"text-decoration:none;\" href=\"relay_OFF\"><button id=\"switchLight2\" class=\"controllButtons\">Turn OFF</button> </a>"
"</div>"
"<body><h1>Smart Plug - Turned ON</h1>"
"</body></html>";
String OFF_Screen = ""
"<!DOCTYPE html><html>"
"<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"
+ style_detials +
"<div id=\"buttons\">"
"<a style=\"text-decoration:none;\" href=\"relay_ON\"> <button id=\"switchLight1\" class=\"controllButtons\">Turn ON</button> </a>"
"<a style=\"text-decoration:none;\" href=\"relay_OFF\"><button id=\"switchLight2\" class=\"controllButtons\">Turn OFF</button> </a>"
"</div>"
"<body><h1>Smart Plug - Turned OFF</h1>"
"</body></html>";
Эти три веб-страницы при открытии будут выглядеть примерно так. Вы можете настроить свою веб-страницу так, чтобы она вам понравилась.

Затем у нас есть функция установки void, внутри которой мы определяем наш ESP для работы в качестве точки доступа, а также предоставляем имя для нее, в данном случае «ESP_Smart_Plug». Когда любой пользователь подключится к этому Wi-Fi, он будет перенаправлен на домашнюю страницу, которую мы определили ранее.
pinMode(LED_BUILTIN, OUTPUT);
pinMode(GPIO_2, OUTPUT);
WiFi.mode(WIFI_AP);
WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
WiFi.softAP("ESP_Smart_Plug");
dnsServer.start(DNS_PORT, "*", apIP);
webServer.onNotFound([]() {
webServer.sendHeader("Location", String("http://www.your-test-site.com/home.html"), true);
webServer.send ( 302, "text/plain", "");
});
На домашней странице, если пользователь нажимает кнопку ON, будет отображаться экранная страница включения, и вывод GPIO 2 будет установлен в высокий логический уровень.
webServer.on("/relay_ON", [](){
digitalWrite(LED_BUILTIN, LOW);
digitalWrite(GPIO_2, HIGH);
webServer.send(200, "text/html", ON_Screen);
});
Аналогичным образом, если пользователь нажимает кнопку выключения, отображается страница выключенного экрана, и вывод GPIO 2 будет установлен в низкий уровень.
webServer.on("/relay_OFF", [](){
digitalWrite(LED_BUILTIN, HIGH);
digitalWrite(GPIO_2, LOW);
webServer.send(200, "text/html", OFF_Screen);
});
Полный код приведен в конце данного руководства. Теперь, когда наш код готов, мы можем загрузить его в наш модуль ESP, просто нажав кнопку загрузки, а затем дождаться загрузки кода.

После загрузки кода выполните поиск сетей Wi-Fi на своем телефоне, и вы должны найти сигнал с именем «ESP_Smart_Plug». Подключитесь к нему, и вы попадете на веб-страницу, которую мы только что разработали. Здесь, когда вы нажимаете кнопку выключения, вы должны заметить, что светодиод на нашей плате ESP выключается, а когда вы нажимаете кнопку включения, светодиод должен снова включиться.

После проверки кода еще несколько раз нам больше не понадобится программатор для этого проекта. Теперь нам нужно построить схему для питания нашего модуля ESP напрямую от сетевого напряжения и использовать его вывод GPIO для переключения реле. Для создания этой схемы использовался модуль преобразователя переменного тока в постоянный ток от Hi-Link, который преобразует напряжение переменного тока в постоянное напряжение 3,3 В с выходным током 900 мА, достаточным для питания модуля ESP через сеть. Реле выходной стороны представляет собой реле 3,3 В, которым можно управлять с помощью вывода GPIO ESP через такой транзистор, как BC547. Нам также понадобится резистор 1 кОм, чтобы ограничить базовый ток нашего транзистора. В итоге схема подключения выглядит следующим образом:

Напряжение переменного тока для питания нашего проекта будет получено через розетку. Еще одна важная вещь, которую нужно учитывать – это поддерживать GPIO-0 и GPIO-2 на высоком логическом уровне при загрузке. В противном случае модуль ESP перейдет в режим программирования, и внешний код не будет работать. Поэтому используется резистор 10 кОм (можно использовать значения от 3,3 кОм до 10 кОм), чтобы по умолчанию подтянуть вывод GPIO. В качестве альтернативы вы можете также использовать транзистор PNP вместо BC547 и переключать реле с верхней стороны.
Само устройство можно разместить в корпусе для подключения к розетке переменного тока. Пример такого корпуса можно найти на thingiverse (https://www.thingiverse.com/thing:3852528) и распечатать его на 3D принтере.


Полный код проекта умной розетки на ESP8266.
#include <ESP8266WiFi.h>
#include "./DNSServer.h"
#include <ESP8266WebServer.h>
const byte DNS_PORT = 53; // 53 установлен как порт DNS
IPAddress apIP(10, 10, 10, 1); // Сетевой сервер
DNSServer dnsServer; // Объект DNS-сервера
ESP8266WebServer webServer(80); // Объект веб-сервера
int GPIO_2 = 2; // Определение контакта - реле будет подключено к GPIO-0
/*НАЧАЛО HMTL-КОДА*/
String style_detials = // Эта строка определяет атрибуты стиля для веб-страницы
"<style type=\"text/css\">"
" body{"
" background-color: #a69695;"
"}"
"button{"
" display: inline-block;"
"}"
"#buttons{"
" text-align: center;"
"}"
".controllButtons{"
" margin-top: 15px;"
"margin-left: 5px;"
"background-color: white;"
"padding: 10px;"
"border:1px solid black;"
"border-radius: 10px;"
"cursor: pointer;"
"font-size: 14px;"
"}"
".controllButtons:hover{"
" background-color: orange;"
"padding: 10px;"
"border:1px solid black;"
"border-radius: 10px;"
"cursor: pointer;"
"font-size: 14px;"
"}"
"@media only screen and (max-width: 700px) {"
" button{"
" display: block;"
"}"
"#buttons{"
" margin-top: 10%;"
"margin-left: 35%;"
"}"
" .controllButtons{"
" margin-top: 15px;"
"margin-left: 5px;"
"background-color: white;"
"padding: 15px;"
"border:1px solid black;"
"border-radius: 10px;"
"cursor: pointer;"
"font-size: 16px;"
"}"
".controllButtons:hover{"
" background-color: orange;"
"padding: 15px;"
"border:1px solid black;"
"border-radius: 10px;"
"cursor: pointer;"
"font-size: 16px;"
"}"
"}"
"</style>";
String Home_Screen = "" // Страница 1 - HTML-код главного экрана
"<!DOCTYPE html><html>"
"<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"
+ style_detials +
"<div id=\"buttons\">"
"<a style=\"text-decoration:none;\" href=\"relay_ON\"> <button id=\"switchLight1\" class=\"controllButtons\">Turn ON</button> </a>"
"<a style=\"text-decoration:none;\" href=\"relay_OFF\"><button id=\"switchLight2\" class=\"controllButtons\">Turn OFF</button> </a>"
"</div>"
"<body><h1>Welcome</h1>"
"</body></html>";
String ON_Screen = "" // Страница 2 - Если устройство включено
"<!DOCTYPE html><html>"
"<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"
+ style_detials +
"<div id=\"buttons\">"
"<a style=\"text-decoration:none;\" href=\"relay_ON\"> <button id=\"switchLight1\" class=\"controllButtons\">Turn ON</button> </a>"
"<a style=\"text-decoration:none;\" href=\"relay_OFF\"><button id=\"switchLight2\" class=\"controllButtons\">Turn OFF</button> </a>"
"</div>"
"<body><h1>Smart Plug - Turned ON</h1>"
"</body></html>";
String OFF_Screen = "" // Страница 3 - Если устройство выключено
"<!DOCTYPE html><html>"
"<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"
+ style_detials +
"<div id=\"buttons\">"
"<a style=\"text-decoration:none;\" href=\"relay_ON\"> <button id=\"switchLight1\" class=\"controllButtons\">Turn ON</button> </a>"
"<a style=\"text-decoration:none;\" href=\"relay_OFF\"><button id=\"switchLight2\" class=\"controllButtons\">Turn OFF</button> </a>"
"</div>"
"<body><h1>Smart Plug - Turned OFF</h1>"
"</body></html>";
/* КОНЕЦ HTML-КОДА */
void setup() {
pinMode(LED_BUILTIN, OUTPUT); // Светодиодный вывод в качестве выхода для индикации
pinMode(GPIO_2, OUTPUT); // Вывод GPIO в качестве выхода для управления реле
WiFi.mode(WIFI_AP); // Установить ESP в режиме AP
WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
WiFi.softAP("ESP_Smart_Plug"); // Назовите свою сеть AP
dnsServer.start(DNS_PORT, "*", apIP);
webServer.onNotFound([]() {
webServer.sendHeader("Location", String("http://www.your-test-site/home.html"), true); // Открыть главный экран по умолчанию
webServer.send ( 302, "text/plain", "");
});
webServer.on("/home.html", []() {
webServer.send(200, "text/html", Home_Screen);
});
// Экран включения
webServer.on("/relay_ON", [](){ // Если кнопка включения нажата
digitalWrite(LED_BUILTIN, LOW); // Выключить светодиод
digitalWrite(GPIO_2, HIGH); // Выключить реле
webServer.send(200, "text/html", ON_Screen); // Показать этот экран
});
// Экран выключения
webServer.on("/relay_OFF", [](){ // Если кнопка выключения нажата
digitalWrite(LED_BUILTIN, HIGH); // Включить светодиод
digitalWrite(GPIO_2, LOW); // Включить реле
webServer.send(200, "text/html", OFF_Screen); // Показать этот экран
});
webServer.begin();
}
void loop() {
dnsServer.processNextRequest();
webServer.handleClient();
}
Таким же образом вы можете контролировать любую нагрузку переменного тока с низким энергопотреблением в вашем доме и получать удовольствие.
© digitrode.ru