Высокоинтегрированный микроконтроллер ESP32 с возможностями беспроводной связи по Wi-Fi и Bluetooth на сегодняшний день является мощным инструментом для реализации концепции Интернета вещей. Чтобы ощутить весь потенциал данного микроконтроллера, нужно научиться с ним правильно работать.
В этом проекте используя среду программирования Arduino IDE мы создадим автономный веб-сервер на основе ESP32, который будет контролировать выходы (два светодиода). Этот веб-сервер может управляться со смартфона и может быть доступен с любого устройства, которое может предоставить браузер для работы в локальной сети.
Прежде чем перейти к проекту, важно указать, что будет делать наш веб-сервер, так что вам будет легче выполнить последующие действия.
Во-первых, веб-сервер будет управлять двумя светодиодами, подключенными к линиям GPIO 26 и 27.
Во-вторых, вы сможете получить доступ к веб-серверу ESP32, введя IP-адрес ESP32 в браузере в локальной сети.
И, в-третьих, нажимая кнопки на вашем веб-сервере, вы можете мгновенно изменять состояние каждого светодиода.
Это простой пример, иллюстрирующий создание веб-сервера, который контролирует выходные данные. В перспективе можно заменить эти светодиоды на реле или любые другие электронные компоненты, которыми вы хотите управлять. Данное руководство также предполагает, что поддержка ESP32 уже установлена в вашей Arduino IDE.
Помимо самой платы с ESP32 вам также понадобятся два светодиода 5 мм, два резистора сопротивлением 330 Ом для ограничения тока светодиодов, макетная плата и соединительные провода.
Подключите два светодиода к ESP32, как показано на следующей принципиальной схеме: один светодиод, подключен к GPIO 26, а другой – к GPIO 27. В данном случае мы используем плату ESP32 DEVKIT DOIT с 36 выводами. Перед сборкой схемы убедитесь, что вы знаете распиновку платы, которую используете.
Далее показан код программы, который создает веб-сервер 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.
Если вы посмотрите на экран последовательного монитора, вы увидите, что происходит на заднем плане. ESP получает HTTP-запрос от нового клиента (в данном случае, вашего браузера). Вы также можете увидеть другую информацию о HTTP-запросе.
Теперь вы можете проверить, работает ли ваш веб-сервер правильно. Нажимайте кнопки для управления светодиодами.
В то же время вы можете посмотреть на экран последовательного монитора, чтобы узнать, что происходит в фоновом режиме. Например, когда вы нажимаете кнопку, чтобы включить GPIO 26, ESP32 получает запрос по URL-адресу /26/on.
Когда ESP32 получает этот запрос, он включает светодиод, подключенный к GPIO 26, и обновляет его состояние на веб-странице.
Аналогичным образом работает кнопка для GPIO 27. Проверьте обязательно, что она работает правильно.
© digitrode.ru