Wi-Fi розетки в настоящее время приобретают все большую популярность по мере того как системы "умного дома" становятся все более востребованными в современном мире. Подобные розетки выпускаются различными производителями (в основном китайскими, конечно же), но их цена в ряде случаев не такая "толерантная" как хотелось бы. К тому же никто не отменял чувство удовольствия от того, когда сделаешь что-либо полезное своими руками.
Поэтому в данной статье мы рассмотрим создание собственной умной Wi-Fi розетки на основе модуле ESP8266. Управлять данной розеткой можно будет со своего смартфона. Нашу Wi-Fi розетку можно будет включать в обычную розетку, а к другому концу нашей розетки можно будет подключать нагрузку переменного тока.
Автор данного проекта (ссылка на оригинал приведена в конце статьи) устал от того, чтобы ему постоянно приходится перезапускать свой Wi-Fi роутер из-за проблем со связью (а живет он в Индии). Поэтому изначально данный проект Wi-Fi розетки рассматривался как устройство, позволяющее ему дистанционно, со своего смартфона, отключать и снова подавать питание на свой роутер, таким образом, перезапуская его.
Вы скажете каким образом будет работать Wi-Fi розетка если у роутера проблемы со связью? Здесь дело в том, что модуль ESP8266 может самостоятельно работать в качестве точки доступа, то есть выполнять функции роутера. Управлять его работой мы будем с помощью специальной веб-страницы, с которой мы сможем включать/выключать нашу Wi-Fi розетку.
Также на нашем сайте вы можете посмотреть другие рассмотренные проекты автоматизации дома.
Необходимые компоненты
- Модуль ESP8266 (купить на AliExpress).
- Link AC to DC Converter (3.3V) (конвертер 220 Вольт в постоянное напряжение 3.3V (купить на AliExpress).
- Реле на 3V.
- NPN транзистор BC547 (купить на AliExpress).
- FTDI плата (купить на AliExpress).
- Соединительные провода.
В данном проекте его автор для программирования модуля ESP8266 использовал специальный Arduino Wi-Fi Shield, который он ранее собрал и схему для его сборки можно посмотреть по следующему адресу. Но если у вас нет такого шилда, то для программирования модуля ESP8266 можно применить стандартный подход с помощью Arduino IDE.
Схема проекта
Схема Wi-Fi розетки на основе модуля ESP8266 представлена на следующем рисунке.
Питание наша схема получает от сети переменного тока через конвертер 220 Вольта в 3,3 Вольта. Учтите, что на контактах GPIO0 и GPIO2 модуля необходимо поддерживать напряжение высокого уровня (while) во время загрузки модуля. Иначе модуль ESP перейдет в режим программирования и тогда код нашей программы работать не будет. Поэтому мы использовали резистор сопротивлением 10 кОм (можно использовать резистор в диапазоне от 3,3 кОм до 10 кОм) чтобы подать на эти контакты напряжение высокого уровня. Для ограничения тока через базу транзистора используется резистор 1 кОм.
Изготовление корпуса для проекта
Чтобы сделать проект Wi-Fi розетки на основе модуля ESP8266 максимально компактным его автор решил напечатать его корпус на 3D принтере. Он использовал дизайн корпуса, представленный на следующем рисунке.
STL файлы для печати на 3D принтере данного корпуса можно скачать по следующей ссылке с thingiverse.
После печати корпуса автор закрепил в нем электронную часть проекта с помощью болтов как показано на следующем рисунке.
Внешний вид собранной конструкции проекта показан на следующем рисунке.
После сборки автор проекта подключил к нему свой роутер, но вы можете подключить к нему любую другую нагрузку переменного тока (лишь бы по мощности реле выдержало).
Объяснение программы для модуля ESP8266
Полный код программы приведен в конце статьи, здесь же мы кратко рассмотрим его основные фрагменты.
Первым делом при написании программы подключим используемые библиотеки и установим DNS сервер.
|
1 2 3 4 5 6 7 8 |
#include <ESP8266WiFi.h> #include "./DNSServer.h" #include <ESP8266WebServer.h> const byte DNS_PORT = 53; // 53 is set as DNS port IPAddress apIP(10, 10, 10, 1); // Network Server DNSServer dnsServer; // DNS server object ESP8266WebServer webServer(80); // Webserver object |
Далее у нас идет достаточно длинный HTML код для нашей веб-страницы. На ней у нас будет 3 экрана, которые мы назвали Home screen (домашний экран), On screen (экран включения) и Off screen (экран выключения).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
String Home_Screen = "" //Page 1 - Home Screen HTML code "<!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 - CircuitDigest</h1>" "</body></html>"; String ON_Screen = "" //Page 2 - If device is turned ON "<!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 = "" //Page 3 - If device is turned OFF "<!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 setup мы сконфигурируем модуль ESP для работы в качестве точки доступа (Access point), которой дадим имя “ESP_Smart_Plug”. Когда какой-нибудь пользователь будет подключаться к этой сети Wi-Fi он будет перебрасываться на нашу веб-страницу, которую мы настроили ранее.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
pinMode(LED_BUILTIN, OUTPUT); //LED pin as output for indication pinMode(GPIO_2, OUTPUT); //GPIO pin as output for Relay control WiFi.mode(WIFI_AP); //Set ESP in AP mode WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0)); WiFi.softAP("ESP_Smart_Plug"); // Name your AP network dnsServer.start(DNS_PORT, "*", apIP); webServer.onNotFound([]() { webServer.sendHeader("Location", String("http://www.circuitdigest-automation.com/home.html"), true); //Open Home screen by default webServer.send ( 302, "text/plain", ""); }); |
Если на домашнем экране нашей веб-страницы пользователь нажмет на кнопку ON (включения), то будет показан экран включения и на контакт GPIO 2 будет подан уровень high.
|
1 2 3 4 5 6 |
//ON_Screen webServer.on("/relay_ON", [](){ //If turn on Button is pressed digitalWrite(LED_BUILTIN, LOW); //Turn off LED digitalWrite(GPIO_2, HIGH); //Turn off Relay webServer.send(200, "text/html", ON_Screen); //Display this screen }); |
Аналогичным образом, если пользователь нажмет на кнопку OFF, то произойдет переход к экрану выключения и на контакт GPIO 2 будет подан уровень LOW.
|
1 2 3 4 5 6 |
//OF_Screen webServer.on("/relay_OFF", [](){ //If turn off Button is pressed digitalWrite(LED_BUILTIN, HIGH); //Turn on LED digitalWrite(GPIO_2, LOW); //Turn on Relay webServer.send(200, "text/html", OFF_Screen); //Display this screen }); |
Полный код программы вместе со всеми необходимыми библиотеками можно скачать по этой ссылке. Также он приведен в конце статьи.
Тестирование работы проекта
Те, кто имеют специальный Wi-Fi шилд (показан на рисунке ниже), могут загрузить программу в модуль ESP8266 с его помощью. Те же, кто такого шилда не имеет, могут использовать стандартный способ с помощью Arduino IDE.
Когда код программы будет загружен в модуль, выполните на своем смартфоне поиск доступных Wi-Fi сетей, среди них вы должны обнаружить сеть с именем “ESP_Smart_Plug”. Подключитесь к ней и вас перебросит на веб-страницу, которую мы настроили в коде нашей программы. На этой веб-странице если вы нажмете кнопку выключения (off), то светодиод на нашей Wi-Fi розетке выключится, а если вы нажмете кнопку включения, то светодиод включится.
Более подробно работу проекта вы можете посмотреть на видео, приведенном в конце статьи.
Исходный код программы (скетча)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
/*Smart Plug - Captive Portal Home Automation * Requires no Wi-Fi to operate * Date:19-8-2019 * Author: B.Aswinth Raj * Website: Circuitdigest.com */ //Download all required header filers from circuitdigest.com #include <ESP8266WiFi.h> #include "./DNSServer.h" #include <ESP8266WebServer.h> const byte DNS_PORT = 53; // 53 is set as DNS port IPAddress apIP(10, 10, 10, 1); // Network Server (сервер сети) DNSServer dnsServer; // DNS server object (объект DNS сервера) ESP8266WebServer webServer(80); // Webserver object (объект веб-сервера) int GPIO_2 = 2; //Pin defanition - Relay will be connected to GPIO-0 /*START OF HMTL CODE*/ String style_detials = //This String defines the style attributes for webpage (эта строка задает атрибуты веб-страницы) "<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 = "" //Page 1 - Home Screen HTML code (код домашнего экрана) "<!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 - CircuitDigest</h1>" "</body></html>"; String ON_Screen = "" //Page 2 - If device is turned ON (код экрана включения) "<!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 = "" //Page 3 - If device is turned OFF (код экрана выключения) "<!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>"; /*END OF HMTL CODE*/ void setup() { pinMode(LED_BUILTIN, OUTPUT); //LED pin as output for indication (управление светодиодом) pinMode(GPIO_2, OUTPUT); //GPIO pin as output for Relay control (управление реле) WiFi.mode(WIFI_AP); //Set ESP in AP mode (устанавливаем модуль ESP в режим точки доступа) WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0)); WiFi.softAP("ESP_Smart_Plug"); // Name your AP network (имя нашей точки доступа) dnsServer.start(DNS_PORT, "*", apIP); webServer.onNotFound([]() { webServer.sendHeader("Location", String("http://www.circuitdigest-automation.com/home.html"), true); //Open Home screen by default webServer.send ( 302, "text/plain", ""); }); webServer.on("/home.html", []() { webServer.send(200, "text/html", Home_Screen); }); //ON_Screen webServer.on("/relay_ON", [](){ //If turn on Button is pressed (если нажата кнопка включения) digitalWrite(LED_BUILTIN, LOW); //Turn off LED (выключаем светодиод) digitalWrite(GPIO_2, HIGH); //Turn off Relay (выключаем реле) webServer.send(200, "text/html", ON_Screen); //Display this screen (отображаем экран) }); //OFF_Screen webServer.on("/relay_OFF", [](){ //If turn off Button is pressed digitalWrite(LED_BUILTIN, HIGH); //Turn on LED digitalWrite(GPIO_2, LOW); //Turn on Relay webServer.send(200, "text/html", OFF_Screen); //Display this screen }); webServer.begin(); } void loop() { dnsServer.processNextRequest(); webServer.handleClient(); } |
Видео, демонстрирующее работу проекта
Похожие статьи
(Проголосуй первым!)
Загрузка...
Нужно бы параллельно реле поставить диод, либо транзистор может выйти из строя.
Хорошо, спасибо за совет