Upload Image (PNG, JPEG) To ESP8266 Web Page and Display It

Upload image (PNG, JPEG) to ESP8266 Web Page and Display it | Circu... https://circuits4you.com/2018/01/31/upload-image-png-jpeg-to-esp8266...
1 const char MAIN_page[] PROGMEM = R"=====(

2 <HTML>
3 <HEAD>
4 <TITLE>My first web page</TITLE>
5 </HEAD>
6 <BODY>
7 <CENTER>
8 <B>Circuits4You.com</B>
9 <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAgAElEQVR4nMzdV
10 </CENTER>
11 </BODY>
12 </HTML>
13 )=====";
1 of 7 3/12/2019, 9:35 PM
1 /*
2 * Display Image in web server demo
3 * circuits4you.com
4 */
5 #include <ESP8266WiFi.h>
6 #include <WiFiClient.h>
7 #include <ESP8266WebServer.h>
8
9 #include "index.h" //Our HTML webpage contents
10
11 //SSID and Password of your WiFi router
12 const char* ssid = "your_ssid";
13 const char* password = "your_password";
14
15 ESP8266WebServer server(80); //Server on port 80
16
17 //===============================================================
18 // This routine is executed when you open its IP in browser
19 //===============================================================
20 void handleRoot() {
21 String s = MAIN_page; //Read HTML contents
22 server.send(200, "text/html", s); //Send web page
23 }
24 //==============================================================
25 // SETUP
26 //==============================================================
27 void setup(void){
28 Serial.begin(9600);
29
30 WiFi.begin(ssid, password); //Connect to your WiFi router
31 Serial.println("");
32
33 // Wait for connection
34 while (WiFi.status() != WL_CONNECTED) {
35 delay(500);
36 Serial.print(".");
37 }
38
39 //If connection successful show IP address in serial monitor
40 Serial.println("");
41 Serial.print("Connected to ");
42 Serial.println(ssid);
43 Serial.print("IP address: ");
44 Serial.println(WiFi.localIP()); //IP address assigned to your ESP
45
46 server.on("/", handleRoot); //Which routine to handle at root location
47
2 of 7 3/12/2019, 9:35 PM
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <p>This example shows image loading from ESP8266 Web server, Image and HTML
6 web page files are uploaded in ESP Flash using SPIFFS tool:</p>
7
8 <img src="\image.png" alt="Image from ESP8266" width="200" height="200">
9
10 </body>
11 </html>
3 of 7 3/12/2019, 9:35 PM
1 /*
2 * ESP8266 SPIFFS HTML Web Page with JPEG, PNG Image
3 *
4 */
5
6 #include <ESP8266WiFi.h>
7 #include <ESP8266WebServer.h>
8 #include <FS.h> //Include File System Headers
9
10 const char* imagefile = "/image.png";
11 const char* htmlfile = "/index.html";
12
13 //ESP AP Mode configuration
14 const char *ssid = "image-demo-circuits4you.com";
15 const char *password = "password";
16
17
18 ESP8266WebServer server(80);
19
20 void handleRoot(){
21 server.sendHeader("Location", "/index.html",true); //Redirect to our html web page
22 server.send(302, "text/plane","");
23 }
24
25 void handleWebRequests(){
26 if(loadFromSpiffs(server.uri())) return;
27 String message = "File Not Detected\n\n";
28 message += "URI: ";
29 message += server.uri();
30 message += "\nMethod: ";
31 message += (server.method() == HTTP_GET)?"GET":"POST";
32 message += "\nArguments: ";
33 message += server.args();
34 message += "\n";
35 for (uint8_t i=0; i<server.args(); i++){
36 message += " NAME:"+server.argName(i) + "\n VALUE:" + server.arg(i) + "\n"
37 }
38 server.send(404, "text/plain", message);
39 Serial.println(message);
40 }
41
42 void setup() {
43 delay(1000);
44 Serial.begin(115200);
45 Serial.println();
46
47 //Initialize File System
48 SPIFFS.begin();
49 Serial.println("File System Initialized");
50
51 //Initialize AP Mode
52 WiFi.softAP(ssid); //Password not used
53 IPAddress myIP = WiFi.softAPIP();
54 Serial.print("Web Server IP:");
55 Serial.println(myIP);
56
57 //Initialize Webserver
58 server.on("/",handleRoot);
59 server.onNotFound(handleWebRequests); //Set setver all paths are not found so we can handle
60 server.begin();
61 }
62
63 void loop() {
64 server.handleClient();
4 of 7 3/12/2019, 9:35 PM
65 }
66
67 bool loadFromSpiffs(String path){
68 String dataType = "text/plain";
69 if(path.endsWith("/")) path += "index.htm";
70
71 if(path.endsWith(".src")) path = path.substring(0, path.lastIndexOf("."))
72 else if(path.endsWith(".html")) dataType = "text/html";
73 else if(path.endsWith(".htm")) dataType = "text/html";
74 else if(path.endsWith(".css")) dataType = "text/css";
75 else if(path.endsWith(".js")) dataType = "application/javascript";
76 else if(path.endsWith(".png")) dataType = "image/png";
77 else if(path.endsWith(".gif")) dataType = "image/gif";
78 else if(path.endsWith(".jpg")) dataType = "image/jpeg";
79 else if(path.endsWith(".ico")) dataType = "image/x-icon";
80 else if(path.endsWith(".xml")) dataType = "text/xml";
81 else if(path.endsWith(".pdf")) dataType = "application/pdf";
82 else if(path.endsWith(".zip")) dataType = "application/zip";
83 File dataFile = SPIFFS.open(path.c_str(), "r");
84 if (server.hasArg("download")) dataType = "application/octet-stream";
85 if (server.streamFile(dataFile, dataType) != dataFile.size()) {
86 }
87
88 dataFile.close();
89 return true;
90 }
5 of 7 3/12/2019, 9:35 PM
6 of 7 3/12/2019, 9:35 PM

Upload Image (PNG, JPEG) To ESP8266 Web Page and Display It

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Upload Image (PNG, JPEG) To ESP8266 Web Page and Display It

Diunggah oleh

Hak Cipta:

Format Tersedia

Upload image (PNG, JPEG) to ESP8266 Web Page and Display it | Circu... https://circuits4you.com/2018/01/31/upload-image-png-jpeg-to-esp8266...

1 const char MAIN_page[] PROGMEM = R"=====(

Anda mungkin juga menyukai