Cat hungry.png
Здравствуйте! Собираем деньги на перевод материалов по электронике(https://www.allaboutcircuits.com/education/). Реквизиты указаны здесь.

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

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

Проверка/Оформление/Редактирование: Мякишев Е.А.


Ambox content.png Черновик


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

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

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

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

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

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

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

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

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

Схема

Ambox content.png На данной схеме используется плата 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.     }

См.также

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