ESP32:Примеры/Веб-сервер на базе ESP32: управление нагрузкой с помощью реле

Материал из Онлайн справочника
Перейти к навигации Перейти к поиску

Перевод: Максим Кузьмин (Cubewriter) Контакты:</br>* Skype: cubewriter</br>* E-mail: cubewriter@gmail.com</br>* Максим Кузьмин на freelance.ru
Проверка/Оформление/Редактирование: Мякишев Е.А.


Pixel Art Mini Meow Animated.gif Черновик


Веб-сервер на базе ESP32: управление нагрузкой с помощью реле

Это простой пример, призванный проиллюстрировать, как построить веб-сервер, управляющий нагрузкой с помощью реле.

Что будет делать наш веб-сервер:

  • Наш веб-сервер будет управлять реле, подключенное к контакту GPIO26 на плате ESP32;
  • Чтобы получить доступ к веб-серверу на базе ESP32, в браузере устройства, подключенного к локальной сети, нужно будет написать IP-адрес этой ESP32;
  • Кликая на кнопку на веб-странице, мы будем включать/выключать реле;

Что нужно сделать перед загрузкой кода

Задаем учетные данные сети

Строчки кода ниже нужно отредактировать, вписав в них данные своей сети: SSID и пароль. Найти эти строчки можно по соответствующему комментарию:

// здесь пишем учетные данные своей сети:
const char* ssid     = "";
const char* password = "";

Необходимое оборудование

Схема

Pixel Art Mini Meow Animated.gif На данной схеме используется плата ESP32S-HiLetgo, если вы используете другую, сверьтесь с вашей распиновкой.


Esp32 relay switch state web server 1.png

Код

  1     // подключаем библиотеку для WiFi-связи:
  2     #include <WiFi.h>
  3      
  4     // здесь пишем учетные данные своей сети:
  5     const char* ssid     = "";
  6     const char* password = "";
  7      
  8     // задаем номер порта для веб-сервера («80»):
  9     WiFiServer server(80);
 10      
 11     // переменная для хранения HTTP-запроса:
 12     String header;
 13      
 14     // вспомогательные переменные
 15     // для хранения текущего состояния выходных контактов:
 16     String output26State = "off";
 17      
 18     // задаем номера для выходных GPIO-контактов:
 19     const int output26 = 26;
 20      
 21     void setup() {
 22       Serial.begin(115200);
 23       // делаем эти GPIO-контакты выходными:
 24       pinMode(output26, OUTPUT);
 25       // присваиваем им значение «LOW»:
 26       digitalWrite(output26, LOW);
 27      
 28       // подключаемся к WiFi-сети при помощи заданных выше SSID и пароля:
 29       Serial.print("Connecting to ");
 30                //  "Подключаемся к "
 31       Serial.println(ssid);
 32       WiFi.begin(ssid, password);
 33       while (WiFi.status() != WL_CONNECTED) {
 34         delay(500);
 35         Serial.print(".");
 36       }
 37       // печатаем в мониторе порта локальный IP-адрес
 38       // и запускаем веб-сервер:
 39       Serial.println("");
 40       Serial.println("WiFi connected.");  //  "WiFi подключен."
 41       Serial.println("IP address: ");  //  "IP-адрес: "
 42       Serial.println(WiFi.localIP());
 43       server.begin();
 44     }
 45      
 46     void loop(){
 47       // начинаем прослушивать входящих клиентов:
 48       WiFiClient client = server.available();
 49      
 50       if (client) {                     // если подключился новый клиент,    
 51         Serial.println("New Client.");  // печатаем сообщение
 52                                         // «Новый клиент.»
 53                                         // в мониторе порта;
 54         String currentLine = "";        // создаем строку для хранения
 55                                         // входящих данных от клиента;
 56         while (client.connected()) {    // цикл while() будет работать
 57                                         // все то время, пока клиент
 58                                         // будет подключен к серверу;
 59           if (client.available()) {     // если у клиента есть данные,
 60                                         // которые можно прочесть,
 61             char c = client.read();     // считываем байт, а затем    
 62             Serial.write(c);            // печатаем его в мониторе порта
 63             header += c;
 64             if (c == '\n') {            // если этим байтом является
 65                                         // символ новой строки
 66               // если мы получим два символа новой строки подряд
 67               // то это значит, что текущая строчка пуста;
 68               // это конец HTTP-запроса клиента,
 69               // а значит – пора отправлять ответ:
 70               if (currentLine.length() == 0) {
 71                 // HTTP-заголовки всегда начинаются
 72                 // с кода ответа (например, «HTTP/1.1 200 OK»)
 73                 // и информации о типе контента
 74                 // (чтобы клиент понимал, что получает);
 75                 // в конце пишем пустую строчку:
 76                 client.println("HTTP/1.1 200 OK");
 77                 client.println("Content-type:text/html");
 78                 client.println("Connection: close");
 79                            //  "Соединение: отключено"
 80                 client.println();
 81                
 82                 // с помощью этого кода
 83                 // включаем и выключаем GPIO-контакты:
 84                 if (header.indexOf("GET /26/on") >= 0) {
 85                   Serial.println("GPIO 26 on");  //  "GPIO26 включен"
 86                   output26State = "on";
 87                   digitalWrite(output26, HIGH);
 88                 } else if (header.indexOf("GET /26/off") >= 0) {
 89                   Serial.println("GPIO 26 off");  //  "GPIO26 выключен"
 90                   output26State = "off";
 91                   digitalWrite(output26, LOW);
 92                 } 
 93                 
 94                 // показываем веб-страницу с помощью этого HTML-кода:
 95                 client.println("<!DOCTYPE html><html>");
 96                 client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
 97                 client.println("<link rel=\"icon\" href=\"data:,\">");
 98                 // с помощью CSS задаем стиль кнопок «ON» и «OFF»;
 99                 // если есть желание, можно поэкспериментировать
100                 // с фоновым цветом и атрибутами размера шрифта:
101                 client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
102                 client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
103                 client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
104                 client.println(".button2 {background-color: #555555;}</style></head>");
105                
106                 // заголовок веб-страницы:
107                 client.println("<body><h1>ESP32 Web Server</h1>");
108                
109                 // рисуем кнопку для контакта GPIO26
110                 // и показываем его текущее состояние (ON/OFF):
111                 client.println("<p>Relay - State " + output26State + "</p>");
112                 // если на контакте «output26State» значение «off»,
113                 // показываем кнопку «ON»:
114                 if (output26State=="off") {
115                   client.println("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");
116                 } else {
117                   client.println("<p><a href=\"/26/off\"><button class=\"button button2\">OFF</button></a></p>");
118                 }
119                 client.println("</body></html>");
120                
121                 // конец HTTP-ответа задается
122                 // с помощью дополнительной пустой строки:
123                 client.println();
124                 // выходим из цикла while:
125                 break;
126               } else {  // если получили символ новой строки,
127                         // очищаем текущую строку «currentLine»:
128                 currentLine = "";
129               }
130             } else if (c != '\r') {  // если получили любые данные,
131                                      // кроме символа возврата каретки,
132               currentLine += c;      // добавляем эти данные
133                                      // в конец строки «currentLine»
134             }
135           }
136         }
137         // очищаем переменную «header»:
138         header = "";
139         // отключаем соединение:
140         client.stop();
141         Serial.println("Client disconnected.");
142                    //  "Клиент отключен."
143         Serial.println("");
144       }
145     }

См.также

Внешние ссылки