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

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

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


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


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

В этой статье я расскажу, как при помощи 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».
ESP32 Arduino IDE 1.png
  • Выберите COM-порт.
  • Чтобы перевести ESP32 в режим загрузки прошивки, зажмите кнопку BOOT и нажмите на кнопку EN. Это перезагрузит ESP32.
ESP32 BOOT EN-Copy-2.jpg
  • Нажмите кнопку «Загрузка» в IDE Arduino и подождите несколько секунд, пока код скомпилируется и загрузится на плату. Если все было сделано правильно, вы должны увидеть примерно следующее:
ESP32 Arduino IDE 3.png
  • Перезапустите ESP32, чтобы запустить новую прошивку.

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

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

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

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

Esp32 web server arduino 4.png

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

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

Ip esp32 5.png

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

Web server esp32 6.png

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

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

Видео

См.также

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