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

 
» » » Как выводить изображения на веб-сервере на основе ESP32 или ESP8266


Как выводить изображения на веб-сервере на основе ESP32 или ESP8266

Автор: Mike(admin) от 28-06-2019, 05:55

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


Как выводить изображения на веб-сервере на основе ESP32 или ESP8266

Для создания этого веб-сервера вам необходимо установить следующие библиотеки:


  • Если вы используете ESP32: вам необходимо установить библиотеки ESPAsyncWebServer (https://github.com/me-no-dev/ESPAsyncWebServer) и AsyncTCP (https://github.com/me-no-dev/AsyncTCP).
  • Если вы используете ESP8266: вам необходимо установить библиотеки ESPAsyncWebServer и ESPAsyncTCP (https://github.com/me-no-dev/ESPAsyncTCP).

Существует несколько способов включить изображение в веб-серверы ESP32 или ESP8266:


  • Вы можете использовать гиперссылку, где хранится изображение
  • Преобразовать изображение в base64
  • Сохраните изображение в ESP8266 или ESP32 SPIFFS (файловая система SPI Flash) – не рассматривается в этом руководстве

Для того, чтобы конвертировать ваши изображения в кодировку base64, перейдите на сайт www.base64-image.de.


Как выводить изображения на веб-сервере на основе ESP32 или ESP8266


Перетащите ваши изображения. Вы можете загрузить до 20 изображений одновременно. Для этого примера мы будем использовать следующие шесть изображений.


Как выводить изображения на веб-сервере на основе ESP32 или ESP8266

Нажмите кнопку «show code» (Показать код) для каждого загруженного вами файла изображения.


Как выводить изображения на веб-сервере на основе ESP32 или ESP8266

Затем скопируйте данные из первого поля. Вот что вам нужно использовать такой тег:


<img src=””>

И в качестве источника в этом теге:


Как выводить изображения на веб-сервере на основе ESP32 или ESP8266

Следующий код создает веб-сервер, который отображает любые изображения на вашей веб-странице. Код работает с ESP32 и ESP8266. В теге img замените своими данными.



#ifdef ESP32
  #include <WiFi.h>
  #include <ESPAsyncWebServer.h>
#else
  #include <Arduino.h>
  #include <ESP8266WiFi.h>
  #include <Hash.h>
  #include <ESPAsyncTCP.h>
  #include <ESPAsyncWebServer.h>
#endif

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

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

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <h2>ESP Image Web Server</h2>
  <img src="data:image/png;base64,iVBORw0KGgoAAA">
  <img src="data:image/png;base64,iVBORw0KGgoAAB ">
  <img src="data:image/png;base64,iVBORw0KGgoAAC">
  <img src="data:image/png;base64,iVBORw0KGgoAAD ">
  <img src="data:image/png;base64,iVBORw0KGgoAAE ">
  <img src="data:image/png;base64,iVBORw0KGgoAAF ">
</body>  
</html>)rawliteral";


void setup(){
  Serial.begin(115200);
  
  // Подключиться к Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Вывести локальный IP-адрес
  Serial.println(WiFi.localIP());

  // Маршрут для корня / веб-страницы

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html);
  });

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

Загрузите код d ESP32 или ESP8266. Не забудьте выбрать правильную плату и COM-порт в меню «Инструменты». После загрузки кода откройте последовательный монитор со скоростью 115200 бод и нажмите сброса кнопку ESP. Тогда IP-адрес будет отображен (например, http://192.168.1.71).


Загрузите код d ESP32 или ESP8266. Не забудьте выбрать правильную плату и COM-порт в меню «Инструменты». После загрузки кода откройте последовательный монитор со скоростью 115200 бод и нажмите сброса кнопку ESP. Тогда IP-адрес будет отображен (например, http://192.168.1.71).

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


Загрузите код d ESP32 или ESP8266. Не забудьте выбрать правильную плату и COM-порт в меню «Инструменты». После загрузки кода откройте последовательный монитор со скоростью 115200 бод и нажмите сброса кнопку ESP. Тогда IP-адрес будет отображен (например, http://192.168.1.71).

Теперь мы покажем вам, как отобразить изображение на простом веб-сервере http. Следует учесть, что для отображения изображений лучше использовать метод с асинхронным веб-сервером (предыдущий пример). У вас могут возникнуть проблемы с этим методом, если вы попытаетесь отобразить много изображений или использовать большие файлы. Тем не менее, этот метод хорошо работает, если вы просто хотите отобразить маленькое изображение или значок.


В следующем коде показано, как отобразить изображение, если вы используете простой веб-сервер HTTP (без библиотеки ESPAsyncWebServer).



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

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

WiFiServer server(80);

void setup() {
  Serial.begin(115200);
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  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");
    boolean blank_line = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        if (c == '\n' && blank_line) {
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println("Connection: close");
          client.println();
          client.println("<!DOCTYPE HTML>");
          client.println("<html>");
          client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"></head><body><h2>ESP Image Web Server</h2>");
          client.println("<img src=\"data:image/png;base64,iVBORw0KGgoAAA");
          client.println("</body></html>");     
          break;
        }
        if (c == '\n') {
          blank_line = true;
        }
        else if (c != '\r') {
          blank_line = false;
        }
      }
    }  
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}  

Этот код работает как с ESP32, так и с ESP8266. Код использует правильную библиотеку Wi-Fi в зависимости от используемой платы. Процесс отображения изображения все похожи: вам нужно включить кодировку base64 изображения в атрибут src тега img. Затем отправьте текст HTML клиенту, используя метод client.println().После загрузки кода, вы должны видеть изображения, отображаемые на вашем веб-сервере.


Как выводить изображения на веб-сервере на основе ESP32 или ESP8266



© digitrode.ru


Теги: ESP32, ESP8266




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

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

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