当前位置：网站首页>A simple implementation of esp32 graphic web server

A simple implementation of esp32 graphic web server

2022-04-22 07:57:00 【Ki1381】

Accidentally found this article , I think it's interesting , Share it ：
https://randomnerdtutorials.com/display-images-esp32-esp8266-web-server/

The function is very simple , Is to make ESP32 As a graphic Web The server . Words are easy to say , How to store pictures ？ We know that usually Web Server Generally, pictures are stored in available storage in the form of files or binary streams , So in ESP32 How about in ？

The article gives three ways ：
1、 Directly in the code “ Piracy map ”
2、 Pictures and texts are stored in SPIFFS in （ Closer to the traditional way ）
3、 Directly encode the picture to img In the label , Rely on the client browser function to restore （ It's the first time I've noticed that I can still play like this ）. The implementation is simple , But not for big pictures , And you need tools to generate base64 Code .

This paper adopts the third way .

Two additional libraries need to be downloaded ：
https://github.com/me-no-dev/ESPAsyncWebServer
https://github.com/me-no-dev/AsyncTCP

download ZIP Bag can , then Arduino IDE Add in .zip Library is enough .
The image base64 Code tools ... I don't know what to recommend , There is an online upload in the original text . But I'm useless , Because if you use C# Write it yourself , The core code is just one sentence ：

string strBase64 = Convert.ToBase64String(File.ReadAllBytes(@" Absolute path of picture file "));

Arduino Reference code ：

#include <WiFi.h>
#include <ESPAsyncWebServer.h>

const char* ssid     = " Yours WIFI SSID";
const char* password = " Yours WIFI password ";

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="https://img-blog.csdnimg.cn/2022010701021254459.jpeg">
  </body>  
</html>)rawliteral";


void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);
  
  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.println("Connecting to WiFi..");
  }

  // Print ESP32 Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page

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

  // Start server
  server.begin();
}
 
void loop(){
  
}

Before compiling, you can open a serial port monitor , After the network connection is successful, the current... Will be displayed IP Address . Then open this in the browser IP, The effect is as follows ：

版权声明
本文为[Ki1381]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204220624207597.html

边栏推荐

猜你喜欢

随机推荐