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

 
» » » Как выводить изображения на веб-сервере на основе 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



   Благодарим Вас за интерес к информационному проекту digitrode.ru.
   Если Вы хотите, чтобы интересные и полезные материалы выходили чаще, и было меньше рекламы,
   Вы можее поддержать наш проект, пожертвовав любую сумму на его развитие.


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

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

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