Электротехника: Заготовка асинхронный сервер на ESP8266, ESP32

WIFI модуль ESP8266 может использоваться во множестве различных проектов. При написании кода для загрузки в данный модуль, можно заметить что некоторые его части пишутся повторно а также то что их приходиться вспоминать или искать какой нибудь пример. Поскольку основной и наиболее интересной функцией у данного модуля является WIFI то чаще всего он будет использоваться именно из за наличия этой функции для её использования поэтому наиболее полезным примером программы, для данного модуля, будет программа использующая WIFI. В качестве примера можно реализовать например устройство пропорционального управления двумя светодиодами и получения от модуля двух значений в асинхронном режиме т.е. без перезагрузки страницы с клиентской частью приложения для управления этим устройством. Асинхронный способ будет более быстрый и удобный чем синхронный и поэтому он более предпочтителен а также для его реализации существует специальная библиотека. Светодиоды к модулю можно припаять например к пинам GPIO4 и GPIO5 (которые скорее всего будут указаны на плате) через резисторы с сопротивлением 560 Ом.

Меньше, сопротивление этих резисторов, делать не надо т.к. нагрузочная способность пинов низка и они могут перегореть если, в достаточной мере, не ограничить ток.

  
#include <ESPAsyncWebServer.h>

#ifdef ESP32
  #include <WiFi.h>
  #include <AsyncTCP.h>
#else
  #include <ESP8266WiFi.h>
  #include <ESPAsyncTCP.h>
#endif

#define LED_PIN1 4 // пин первый выхода
#define LED_PIN2 5 // пин второй выхода

const char* ssid     = "id";
const char *password = "987654321"; // пароль обязательно должен быть длиннее 8ми символов

// Настройки IP адреса 
IPAddress local_IP(192,168,4,22);
IPAddress gateway(192,168,4,9);
IPAddress subnet(255,255,255,0);

// Создаем объект AsyncWebServer на порту 80
AsyncWebServer server(80);
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
</head>
<body>
<input id="led1"><br>
<input id="led2"><br>
<button id="btn">btn</button><br>
<div id="report1">report1</div>
<div id="report2">report2</div>
<script>
var btn = document.getElementById('btn');
var led1 = document.getElementById('led1');
var led2 = document.getElementById('led2');
var report1 = document.getElementById('report1');
var report2 = document.getElementById('report2');

btn.addEventListener('click',function(){
  var req = '/update?led1='+led1.value+'&led2='+led2.value;
  fetch(req)
      .then(function(response){return response.json();})
      .then(function(result){
        report1.innerHTML = 'report1='+result.report1;
        report2.innerHTML = 'report2='+result.report2;
      });
});
</script>
</body>
</html>
)rawliteral";

void setup()
{
  Serial.begin(115200);
  // настройка пинов на выход
  pinMode(LED_PIN1, OUTPUT);
  pinMode(LED_PIN2, OUTPUT);

 // для точки доступа
  WiFi.softAPConfig(local_IP, gateway, subnet);
  WiFi.softAP(ssid, password);
  //WiFi.softAP(ssid);
  delay(100);

  // для обычного Wi-Fi
  //WiFi.begin(ssid, password);
  //while (WiFi.status() != WL_CONNECTED) 
  //{
  //  delay(1000);
  //  Serial.println("Connecting to WiFi..");
  //}

  IPAddress IP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(IP);
  
  // Распечатать локальный IP-адрес 
  //Serial.println(WiFi.localIP());
  // Маршрут для корневой / веб-страницы
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    request->send(200, "text/html", index_html);
  });
  server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) 
  {
  String led1;
  int led1_val=0;
  String led2;
  int led2_val=0;
  String response = ""; // ответ клиенту
  int report1 = 10; // выдать клиенту значение 1
  int report2 = 20; // выдать клиенту значение 2

  if(request->hasParam("led1"))
  {
    led1 = request->getParam("led1")->value();
    led1_val = led1.toInt();
    analogWrite(LED_PIN1,led1_val);
  }
  if(request->hasParam("led2"))
  {
    led2 = request->getParam("led2")->value();
    led2_val = led2.toInt();
    analogWrite(LED_PIN2,led2_val);
  }

  response += "{ \"report1\": "+String(report1);
  response += ",\"report2\": "+String(report2)+" }";

    request->send(200, "application/json", response);
  });
  // Запустить сервер
  server.begin();

}
void loop(){}

В начале скетча подключаются необходимые заголовочные файлы с конструкцией, для препроцессора, которая выберет файлы в зависимости от того какой модуль программируется ESP8266 или ESP32:

  
#include <ESPAsyncWebServer.h>

#ifdef ESP32
  #include <WiFi.h>
  #include <AsyncTCP.h>
#else
  #include <ESP8266WiFi.h>
  #include <ESPAsyncTCP.h>
#endif

#define LED_PIN1 4 // пин первый выхода
#define LED_PIN2 5 // пин второй выхода

Ниже нужно ввести иденитификатор, пароль и настройки WIFI сети. Если модуль будет работать в режиме точки доступа то можно придумать любой идентификатор (который будет отображаться как название WIFI сети при поиске её на смартфоне) и пароль который должен быть не короче 8ми символов, иначе идентификатор и пароль установяться по умолчанию. После того как сеть была найдена и к ней успешно произведено подключение по паролю, можно зайти в браузер и ввести IP адрес такой же какой установлен в скетче и попасть на страницу управления модулем. IP адрес указан в переменной local_IP. Чтобы помимо IP адреса, не было необходимости вводить ещё и номер порта, можно создать объект AsyncWebServer на порту 80:

  
const char* ssid     = "id";
const char *password = "987654321"; // пароль обязательно должен быть длиннее 8ми символов

// Настройки IP адреса 
IPAddress local_IP(192,168,4,22);
IPAddress gateway(192,168,4,9);
IPAddress subnet(255,255,255,0);

// Создаем объект AsyncWebServer на порту 80
AsyncWebServer server(80);

В следующей конструкции вводиться html код web страницы:

  
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
</head>
<body>
<input id="led1"><br>
<input id="led2"><br>
<button id="btn">btn</button><br>
<div id="report1">report1</div>
<div id="report2">report2</div>
<script>
var btn = document.getElementById('btn');
var led1 = document.getElementById('led1');
var led2 = document.getElementById('led2');
var report1 = document.getElementById('report1');
var report2 = document.getElementById('report2');

btn.addEventListener('click',function(){
  var req = '/update?led1='+led1.value+'&led2='+led2.value;
  fetch(req)
      .then(function(response){return response.json();})
      .then(function(result){
        report1.innerHTML = 'report1='+result.report1;
        report2.innerHTML = 'report2='+result.report2;
      });
});
</script>
</body>
</html>
)rawliteral";

Данная конструкция является самым удобным способом вставить html код в ардуино скетч. В тэге body есть два поля ввода яркостей светодиодов. Яркости имеют диапазон от 0 до 255 т.е. диапазон ШИМа. Можно сделать ограничение на стороне клиента т.е. в html коде или на стороне сервера. Для простого шаблона это не принципиально важно поэтому тут его просто нет. Также есть кнопка для передачи и приема данных от модуля + два блока для вывода информации полученной от модуля. В тэге script происходит получение доступа к данным элементам интерфейса по их идентификаторам указанным в атрибутах id. На кнопку добавлен обработчик клика в котором создается GET запрос с яркостями светодиодов, полученных из текстовых полей. Данный GET запрос передается в функцию fetch которая также принимает ответ от сервера в формате json. Принятый json ответ является обычным javascript объектом (как и любой другой json ответ) поэтому получать данные из него можно через точку. Данный способ взаимодействия с сервером происходит асинхронно т.е. без перезагрузки web страницы что удобно т.к. происходит быстрее, чем в синхронном режиме, и данные текстовых полей (и любого другого прогресса на странице (если он, конечно же, есть)) не потеряются, в результате перезагрузки.

В начале функции setup настраиваются: последовательный порт, пины вывода, точка доступа:

  
Serial.begin(115200);
  // настройка пинов на выход
  pinMode(LED_PIN1, OUTPUT);
  pinMode(LED_PIN2, OUTPUT);

 // для точки доступа
  WiFi.softAPConfig(local_IP, gateway, subnet);
  WiFi.softAP(ssid, password);
  //WiFi.softAP(ssid);
  delay(100);

  // для обычного Wi-Fi
  //WiFi.begin(ssid, password);
  //while (WiFi.status() != WL_CONNECTED) 
  //{
  //  delay(1000);
  //  Serial.println("Connecting to WiFi..");
  //}

  IPAddress IP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(IP);
  
  // Распечатать локальный IP-адрес 
  //Serial.println(WiFi.localIP());

Далее имеется обработчик выдающий основную web страницу при первом заходе на неё или её перезагрузке:

  
// Маршрут для корневой / веб-страницы
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
  {
    request->send(200, "text/html", index_html);
  });

После есть обработчик срабатывающий после нажатия на кнопку отправки данных на сервер и получения от него ответа:

  
server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) 
  {
  String led1;
  int led1_val=0;
  String led2;
  int led2_val=0;
  String response = ""; // ответ клиенту
  int report1 = 10; // выдать клиенту значение 1
  int report2 = 20; // выдать клиенту значение 2

  if(request->hasParam("led1"))
  {
    led1 = request->getParam("led1")->value();
    led1_val = led1.toInt();
    analogWrite(LED_PIN1,led1_val);
  }
  if(request->hasParam("led2"))
  {
    led2 = request->getParam("led2")->value();
    led2_val = led2.toInt();
    analogWrite(LED_PIN2,led2_val);
  }

  response += "{ \"report1\": "+String(report1);
  response += ",\"report2\": "+String(report2)+" }";

    request->send(200, "application/json", response);
  });

Данный обработчик срабатывает в ответ на запрос страницы /update. В нем есть проверка на наличие параметра led1 а также проверка на наличие параметра led2 (т.е. параметров содержащих ШИМы светодиодов) в GET запросе. Есть также получение значений параметров, преобразование их в тип int (приходят они в виде строки) и вывод принятых ШИМов (через функцию analogWrite) на пины к которым подключены светодиоды. После формируется ответ серверу в виде строки содержащей информацию в формате json с двумя параметрами с простыми цифрами которые можно, в последствии, заменить какой либо другой полезной информацией. В конце данная строка передается в фомате json на клиентскую часть, клиентская часть выводит цифры на экран.

В конце функции setup() запускается сервер. В основном цикле т.е. функции loop() пусто.

 
  // Запустить сервер
  server.begin();

}
void loop(){}

Посмотреть тест модуля с данным скетчем + данную статью в видеоформате можно на видео:

КАРТА БЛОГА (содержание)

Электротехника

воскресенье, 20 августа 2023 г.

Заготовка асинхронный сервер на ESP8266, ESP32

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

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

воскресенье, 20 августа 2023 г.

Заготовка асинхронный сервер на ESP8266, ESP32

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

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

воскресенье, 20 августа 2023 г.