ESP32:Примеры/Веб-сервер на базе ESP32, настроенный с помощью IDE Arduino

Перевод: Максим Кузьмин (Cubewriter)

Перевел 2686 статей для сайта.

Контакты:

• Skype: cubewriter
• E-mail: cubewriter@gmail.com
• Максим Кузьмин на freelance.ru

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

Черновик

Веб-сервер на базе ESP32, настроенный с помощью IDE Arduino

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

Начнем с видео, в котором демонстрируется, как работает проект:

[Видео]

Подготовка ESP32 при помощи IDE Arduino

Для того, чтобы программировать ESP32 при помощи среды IDE Arduino и языка программирования Arduino, понадобится специальный аддон. О том, как подготовить IDE Arduino для работы с ESP32 на Windows, читайте тут, а на Mac и Linux – тут.

Загрузка кода

В нашем проекте мы подключим два светодиода к ESP32, а затем будем управлять ими из браузера.

Скопируйте текст ниже в рабочую область IDE Arduino:

1. /*
2.  * Автор – Руи Сантос (Rui Santos)
3.  * Более подробно о проекте на: http://randomnerdtutorials.com
4. */
5.  
6. #include <WiFi.h>
7.  
8. // замените значения в этих константах на те,
9. // что соответствуют вашей сети:
10. const char* ssid     = "YOUR_SSID";
11. const char* password = "YOUR_PASSWORD";
12.  
13. WiFiServer server(80);
14.  
15. const int led1 =  16;      // контакт для первого светодиода
16. const int led2 =  17;      // контакт для второго светодиода
17.  
18. // переменные для клиента:
19. char linebuf[80];
20. int charcount=0;
21.  
22. void setup() {
23.   // инициализируем контакты для светодиодов
24.   // и выставляем их в режим OUTPUT:
25.   pinMode(led1, OUTPUT);
26.   pinMode(led2, OUTPUT);
27.  
28.   // инициализируем последовательную коммуникацию
29.   // и ждем открытия порта:
30.   Serial.begin(115200);
31.   while(!Serial) {
32.     ; // ждем подключения последовательного порта
33.       // (нужно только для штатного USB-порта)
34.   }
35.  
36.   // начинаем с подключения к WiFi-сети:
37.   Serial.println();
38.   Serial.println();
39.   Serial.print("Connecting to ");  //  "Подключаемся к "
40.   Serial.println(ssid);
41.  
42.   WiFi.begin(ssid, password);
43.  
44.   // пытаемся подключиться к WiFi-сети:
45.   while(WiFi.status() != WL_CONNECTED) {
46.     // подключаемся к сети WPA/WPA2; поменяйте эту строчку,
47.     // если используете открытую или WEP-сеть:
48.     delay(500);
49.     Serial.print(".");
50.   }
51.   Serial.println("");
52.   Serial.println("WiFi connected");  //  "Подключение
53.                                      //  по WiFi выполнено"
54.   Serial.println("IP address: ");    //  "IP-адрес: "
55.   Serial.println(WiFi.localIP());
56.  
57.   server.begin();
58. }
59.  
60. void loop() {
61.   // анализируем канал связи, высматривая входящих клиентов:
62.   WiFiClient client = server.available();
63.   if (client) {
64.     Serial.println("New client");  //  "Новый клиент"
65.     memset(linebuf,0,sizeof(linebuf));
66.     charcount=0;
67.     // HTTP-запрос заканчивается пустой строкой:
68.     boolean currentLineIsBlank = true;
69.     while (client.connected()) {
70.       if (client.available()) {
71.         char c = client.read();
72.         Serial.write(c);
73.         // считываем HTTP-запрос, символ за символом:
74.         linebuf[charcount]=c;
75.         if (charcount<sizeof(linebuf)-1) charcount++;
76.         // если добрались до конца строки (т.е. получили
77.         // символ новой строки) и строка пуста,
78.         // это значит, что HTTP-запрос закончился;
79.         // следовательно, можно отправлять ответ:
80.         if (c == '\n' && currentLineIsBlank) {
81.           // отправляем стандартный заголовок HTTP-ответа:
82.           client.println("HTTP/1.1 200 OK");
83.           client.println("Content-Type: text/html");  
84.                      //  "Тип контента: text/html"
85.           client.println("Connection: close");
86.                      //  "Соединение: отключено";
87.                      //  после отправки ответа связь будет отключена
88.           client.println();
89.           client.println("<!DOCTYPE HTML><html><head>");
90.           client.println("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"></head>");
91.           client.println("<h1>ESP32 - Web Server</h1>");
92.           client.println("<p>LED #1 <a href=\"on1\"><button>ON</button></a>&nbsp;<a href=\"off1\"><button>OFF</button></a></p>");
93.           client.println("<p>LED #2 <a href=\"on2\"><button>ON</button></a>&nbsp;<a href=\"off2\"><button>OFF</button></a></p>");
94.           client.println("</html>");
95.           break;
96.         }
97.         if (c == '\n') {
98.           // начинаем новую строчку:
99.           currentLineIsBlank = true;
100.           if (strstr(linebuf,"GET /on1") > 0){
101.             Serial.println("LED 1 ON");
102.             digitalWrite(led1, HIGH);
103.           }
104.           else if (strstr(linebuf,"GET /off1") > 0){
105.             Serial.println("LED 1 OFF");
106.             digitalWrite(led1, LOW);
107.           }
108.           else if (strstr(linebuf,"GET /on2") > 0){
109.             Serial.println("LED 2 ON");
110.             digitalWrite(led2, HIGH);
111.           }
112.           else if (strstr(linebuf,"GET /off2") > 0){
113.             Serial.println("LED 2 OFF");
114.             digitalWrite(led2, LOW);
115.           }
116.           // начинаем новую строчку:
117.           currentLineIsBlank = true;
118.           memset(linebuf,0,sizeof(linebuf));
119.           charcount=0;
120.         } else if (c != '\r') {
121.           // в строке попался новый символ:
122.           currentLineIsBlank = false;
123.         }
124.       }
125.     }
126.     // даем веб-браузеру время, чтобы получить данные:
127.     delay(1);
128.  
129.     // закрываем соединение:
130.     client.stop();
131.     Serial.println("client disconnected");  //  "клиент отключен"
132.   }
133. }

Внимание! Не забудьте указать данные, соответствующие вашей сети. Это делается в самом верху скетча в константах ssid и password.

Теперь подключите ESP32 к компьютеру и следуйте инструкциям ниже:

• Выберите свою плату в меню Инструменты > Плата (Tools > Board). В моем случае это «ESP32 Dev Module».

• Выберите COM-порт.
• Чтобы перевести ESP32 в режим загрузки прошивки, зажмите кнопку BOOT и нажмите на кнопку EN. Это перезагрузит ESP32.

• Нажмите кнопку «Загрузка» в IDE Arduino и подождите несколько секунд, пока код скомпилируется и загрузится на плату. Если все было сделано правильно, вы должны увидеть примерно следующее:

• Перезапустите ESP32, чтобы запустить новую прошивку.

Необходимые компоненты и схема

Ниже – список компонентов, необходимых для нашего проекта:

• Один модуль ESP32
• Два светодиода
• Одна макетная плата
• Два резистора на 270 Ом
• Провода-перемычки

Подключите друг к другу все эти компоненты как показано на картинке ниже:

Доступ к веб-серверу

Перезапустившись, ESP32 напечатает в мониторе порта IDE Arduino свой IP-адрес. Скорость передачи данных нужно выставить на 115200 бод.

Теперь, чтобы получить доступ к веб-серверу, вам нужно вбить в адресной строке браузера IP-адрес, который ESP32 напечатала в мониторе порта IDE Arduino. В моем случае это «192.168.1.116».

Демонстрация

Используя кнопки в браузере, попробуйте включить/выключить светодиоды, подключенные к ESP32. Вживую все это должно выглядеть примерно так:

Видео