цифровая электроника
вычислительная техника
встраиваемые системы

 

ESP32: веб сервер с помощью Arduino IDE

Автор: Mike(admin) от 1-10-2018, 06:55

Высокоинтегрированный микроконтроллер ESP32 с возможностями беспроводной связи по Wi-Fi и Bluetooth на сегодняшний день является мощным инструментом для реализации концепции Интернета вещей. Чтобы ощутить весь потенциал данного микроконтроллера, нужно научиться с ним правильно работать.


ESP32: веб сервер с помощью Arduino IDE

В этом проекте используя среду программирования Arduino IDE мы создадим автономный веб-сервер на основе ESP32, который будет контролировать выходы (два светодиода). Этот веб-сервер может управляться со смартфона и может быть доступен с любого устройства, которое может предоставить браузер для работы в локальной сети.


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


Во-первых, веб-сервер будет управлять двумя светодиодами, подключенными к линиям GPIO 26 и 27.


Во-вторых, вы сможете получить доступ к веб-серверу ESP32, введя IP-адрес ESP32 в браузере в локальной сети.


И, в-третьих, нажимая кнопки на вашем веб-сервере, вы можете мгновенно изменять состояние каждого светодиода.


Это простой пример, иллюстрирующий создание веб-сервера, который контролирует выходные данные. В перспективе можно заменить эти светодиоды на реле или любые другие электронные компоненты, которыми вы хотите управлять. Данное руководство также предполагает, что поддержка ESP32 уже установлена в вашей Arduino IDE.


Помимо самой платы с ESP32 вам также понадобятся два светодиода 5 мм, два резистора сопротивлением 330 Ом для ограничения тока светодиодов, макетная плата и соединительные провода.


ESP32: веб сервер с помощью Arduino IDE

Подключите два светодиода к ESP32, как показано на следующей принципиальной схеме: один светодиод, подключен к GPIO 26, а другой – к GPIO 27. В данном случае мы используем плату ESP32 DEVKIT DOIT с 36 выводами. Перед сборкой схемы убедитесь, что вы знаете распиновку платы, которую используете.


ESP32: веб сервер с помощью Arduino IDE

Далее показан код программы, который создает веб-сервер ESP32. Скопируйте следующий код в свою среду разработки Arduino, но не загружайте его в плату. Вам нужно внести некоторые изменения, чтобы заставить код работать на ваших условиях.



// Загрузить библиотеку Wi-Fi
#include <WiFi.h>

// Замените сетевые учетные данные
const char* ssid     = "";
const char* password = "";

// Установить номер порта веб-сервера 80
WiFiServer server(80);

// Переменная для хранения HTTP-запроса
String header;

// Вспомогательные переменные для сохранения текущего состояния вывода
String output26State = "off";
String output27State = "off";

// Назначение выходных переменных для контактов GPIO
const int output26 = 26;
const int output27 = 27;

void setup() {
  Serial.begin(115200);
  // Инициализировать выходные переменные в качестве выходов
  pinMode(output26, OUTPUT);
  pinMode(output27, OUTPUT);
  // Установить выходы в низкое логическое состояние
  digitalWrite(output26, LOW);
  digitalWrite(output27, LOW);

  // Подключение к сети Wi-Fi с SSID и паролем
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Печать локального IP-адреса и запуск веб-сервера
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // Слушаем входящих клиентов

  if (client) {                             // Если новый клиент подключился,
    Serial.println("New Client.");          // печатать сообщение в последовательный порт
    String currentLine = "";                // сделать строку (String) для хранения входящих данных от клиента
    while (client.connected()) {            // повторять, пока клиент подключается
      if (client.available()) {             // если есть байты для чтения от клиента,
        char c = client.read();             // прочитать байт, затем
        Serial.write(c);                    // напечатать в послед. монитор
        header += c;
        if (c == '\n') {                    // если байт является символом новой строки
          // если текущая строка пуста, у вас есть два символа новой строки подряд.
          // это конец HTTP-запроса клиента, поэтому отправить ответ:
          if (currentLine.length() == 0) {
            // Заголовки HTTP всегда начинаются с кода ответа (например, HTTP / 1.1 200 OK)
            // и контент-тип (Content-type), чтобы клиент знал, что ждет, а затем пустая строку:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();
            
            // включам и выключаем GPIO
            if (header.indexOf("GET /26/on") >= 0) {
              Serial.println("GPIO 26 on");
              output26State = "on";
              digitalWrite(output26, HIGH);
            } else if (header.indexOf("GET /26/off") >= 0) {
              Serial.println("GPIO 26 off");
              output26State = "off";
              digitalWrite(output26, LOW);
            } else if (header.indexOf("GET /27/on") >= 0) {
              Serial.println("GPIO 27 on");
              output27State = "on";
              digitalWrite(output27, HIGH);
            } else if (header.indexOf("GET /27/off") >= 0) {
              Serial.println("GPIO 27 off");
              output27State = "off";
              digitalWrite(output27, LOW);
            }
            
            //Отображение веб-страницы HTML
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            // CSS для стилизации кнопок включения и выключения
            // Не стесняйтесь изменять атрибуты фона и шрифта в соответствии с вашими предпочтениями
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #555555;}</style></head>");
            
            // Заголовок веб-страницы
            client.println("<body><h1>ESP32 Web Server</h1>");
            
            // Отобразить текущее состояние и кнопки ON / OFF для GPIO 26
            client.println("<p>GPIO 26 - State " + output26State + "</p>");
            // Если output26State выключен, отображаем кнопку ON    
            if (output26State=="off") {
              client.println("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/26/off\"><button class=\"button button2\">OFF</button></a></p>");
            } 
               
            // Отобразить текущее состояние и кнопки ON / OFF для GPIO 27 
            client.println("<p>GPIO 27 - State " + output27State + "</p>");
            // Если output27State выключен, отображаем кнопку ON     
            if (output27State=="off") {
              client.println("<p><a href=\"/27/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/27/off\"><button class=\"button button2\">OFF</button></a></p>");
            }
            client.println("</body></html>");
            
            // Ответ HTTP заканчивается другой пустой строкой
            client.println();
            // Выход из цикла while
            break;
          } else { // если вы получили новую строку, то очистите currentLine
            currentLine = "";
          }
        } else if (c != '\r') {  // если у вас есть что-то еще, кроме символа возврата каретки,
          currentLine += c;      // добавьте это в конец текущей строки
        }
      }
    }
    // Очистить переменную заголовка
    header = "";
    // Закрыть соединение
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

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



const char* ssid     = " ";
const char* password = "";

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


Нажмите кнопку на ESP32 EN (сброс). ESP32 подключается к Wi-Fi и выводит IP-адрес ESP на последовательном мониторе. Скопируйте этот IP-адрес, потому что вам нужно получить доступ к веб-серверу ESP32.


Чтобы получить доступ к веб-серверу, откройте свой браузер, вставьте IP-адрес ESP32, и вы увидите следующую страницу. В нашем случае IP-адрес 192.168.1.135.


ESP32: веб сервер с помощью Arduino IDE

ESP32: веб сервер с помощью Arduino IDE

Если вы посмотрите на экран последовательного монитора, вы увидите, что происходит на заднем плане. ESP получает HTTP-запрос от нового клиента (в данном случае, вашего браузера). Вы также можете увидеть другую информацию о HTTP-запросе.


ESP32: веб сервер с помощью Arduino IDE

Теперь вы можете проверить, работает ли ваш веб-сервер правильно. Нажимайте кнопки для управления светодиодами.


ESP32: веб сервер с помощью Arduino IDE

В то же время вы можете посмотреть на экран последовательного монитора, чтобы узнать, что происходит в фоновом режиме. Например, когда вы нажимаете кнопку, чтобы включить GPIO 26, ESP32 получает запрос по URL-адресу /26/on.


ESP32: веб сервер с помощью Arduino IDE

Когда ESP32 получает этот запрос, он включает светодиод, подключенный к GPIO 26, и обновляет его состояние на веб-странице.


ESP32: веб сервер с помощью Arduino IDE

Аналогичным образом работает кнопка для GPIO 27. Проверьте обязательно, что она работает правильно.




© digitrode.ru


Теги: ESP32, WiFi, Wi-Fi




Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Комментарии:

Оставить комментарий