webserver with image and data
Posted: Mon Aug 06, 2018 6:48 amI am new in esp8266 and writing webserver with it.
i have already used web server examples that show simple data in web server ,i want to add a picture to the page, that should be on the top of page ,i have loaded the picture in SPIFFS of node mcu and i have merge two webserver code ,one of them show data and one of them only show image ,i have merge them,but
"url/":show data page and "url/img" show just image,i don't know how create a page that show both of them?
this is my code:
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <FS.h> //Include File System Headers
const char* ssid = "xxx";
const char* password = "xxxxxxxx";
const char* imagefile = "/image.png";
#define LEDPIN D3 // Led
float t = 0 ;
float h = 0 ;
float p = 0;
String etatLed = "OFF";
// Création des objets / create Objects
ESP8266WebServer server ( 80 );
String getPage(){
String page = "<html lang=fr-FR><head><meta http-equiv='refresh' content='10'/>";
page += "<title>ESP8266 Demo - www.projetsdiy.fr</title>";
page += "<style> body { background-color: #fffff; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }</style>";
page += "</head><body><h1>ESP8266 Demo</h1>";
page += "<h3>DHT22</h3>";
page += "<ul><li>Temperature : ";
page += t;
page += "°C</li>";
page += "<li>Humidite : ";
page += h;
page += "%</li></ul><h3>BMP180</h3>";
page += "<ul><li>Pression atmospherique : ";
page += p;
page += " mbar</li></ul>";
page += "<h3>GPIO</h3>";
page += "<form action='/' method='POST'>";
page += "<ul><li>D3 (etat: ";
page += etatLed;
page += ")";
page += "<INPUT type='radio' name='LED' value='1'>ON";
page += "<INPUT type='radio' name='LED' value='0'>OFF</li></ul>";
page += "<INPUT type='submit' value='Actualiser'>";
page += "<br><br><p><a hrf='https://diyprojects.io'>diyprojects.io</p>";
page += "</body></html>";
return page;
}
void handleRoot(){
server.send ( 200, "text/html", getPage() );
}
void handleSubmit() {
// Actualise le GPIO / Update GPIO
String LEDValue;
LEDValue = server.arg("LED");
Serial.println("Set GPIO "); Serial.print(LEDValue);
if ( LEDValue == "1" ) {
digitalWrite(LEDPIN, 1);
etatLed = "On";
server.send ( 200, "text/html", getPage() );
} else if ( LEDValue == "0" ) {
digitalWrite(LEDPIN, 0);
etatLed = "Off";
server.send ( 200, "text/html", getPage() );
} else {
Serial.println("Err Led Value");
}
}
void setup() {
Serial.begin ( 115200 );
SPIFFS.begin();
Serial.println("File System Initialized");
WiFi.mode(WIFI_AP);
WiFi.softAP ( ssid, password );
// Attente de la connexion au réseau WiFi / Wait for connection
// Connexion WiFi établie / WiFi connexion is OK
Serial.println ( "" );
Serial.print ( "Connected to " ); Serial.println ( ssid );
Serial.print ( "IP address: " ); Serial.println ( WiFi.softAPIP() );
// On branche la fonction qui gère la premiere page / link to the function that manage launch page
server.on ( "/", handleRoot );
///////////////////////////////////////////
server.on("/img", []() {
File f = SPIFFS.open("/image.png", "r");
server.streamFile(f, "image/png");
int filesize = f.size();
String WebString = "";
WebString += "HTTP/1.1 200 OK\r\n";
WebString += "Content-Type: image/jpeg\r\n";
WebString += "Content-Length: " + String(filesize) + "\r\n";
WebString += "\r\n";
//server.sendContent(WebString);
server.send(200, "text/html", WebString);
char buf[1024];
int siz = f.size();
while(siz > 0) {
size_t len = std::min((int)(sizeof(buf) - 1), siz);
f.read((uint8_t *)buf, len);
//server.client().write((const char*)buf, len);
server.sendContent((const char*)buf);
siz -= len;
f.close();
}
});
////////////////////////////////////////////
server.begin();
Serial.println ( "HTTP server started" );
}
void loop() {
server.handleClient();
t = 1;
h = 2;
p = 3;
delay(1000);
}
i have already used web server examples that show simple data in web server ,i want to add a picture to the page, that should be on the top of page ,i have loaded the picture in SPIFFS of node mcu and i have merge two webserver code ,one of them show data and one of them only show image ,i have merge them,but
"url/":show data page and "url/img" show just image,i don't know how create a page that show both of them?
this is my code:
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <FS.h> //Include File System Headers
const char* ssid = "xxx";
const char* password = "xxxxxxxx";
const char* imagefile = "/image.png";
#define LEDPIN D3 // Led
float t = 0 ;
float h = 0 ;
float p = 0;
String etatLed = "OFF";
// Création des objets / create Objects
ESP8266WebServer server ( 80 );
String getPage(){
String page = "<html lang=fr-FR><head><meta http-equiv='refresh' content='10'/>";
page += "<title>ESP8266 Demo - www.projetsdiy.fr</title>";
page += "<style> body { background-color: #fffff; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }</style>";
page += "</head><body><h1>ESP8266 Demo</h1>";
page += "<h3>DHT22</h3>";
page += "<ul><li>Temperature : ";
page += t;
page += "°C</li>";
page += "<li>Humidite : ";
page += h;
page += "%</li></ul><h3>BMP180</h3>";
page += "<ul><li>Pression atmospherique : ";
page += p;
page += " mbar</li></ul>";
page += "<h3>GPIO</h3>";
page += "<form action='/' method='POST'>";
page += "<ul><li>D3 (etat: ";
page += etatLed;
page += ")";
page += "<INPUT type='radio' name='LED' value='1'>ON";
page += "<INPUT type='radio' name='LED' value='0'>OFF</li></ul>";
page += "<INPUT type='submit' value='Actualiser'>";
page += "<br><br><p><a hrf='https://diyprojects.io'>diyprojects.io</p>";
page += "</body></html>";
return page;
}
void handleRoot(){
server.send ( 200, "text/html", getPage() );
}
void handleSubmit() {
// Actualise le GPIO / Update GPIO
String LEDValue;
LEDValue = server.arg("LED");
Serial.println("Set GPIO "); Serial.print(LEDValue);
if ( LEDValue == "1" ) {
digitalWrite(LEDPIN, 1);
etatLed = "On";
server.send ( 200, "text/html", getPage() );
} else if ( LEDValue == "0" ) {
digitalWrite(LEDPIN, 0);
etatLed = "Off";
server.send ( 200, "text/html", getPage() );
} else {
Serial.println("Err Led Value");
}
}
void setup() {
Serial.begin ( 115200 );
SPIFFS.begin();
Serial.println("File System Initialized");
WiFi.mode(WIFI_AP);
WiFi.softAP ( ssid, password );
// Attente de la connexion au réseau WiFi / Wait for connection
// Connexion WiFi établie / WiFi connexion is OK
Serial.println ( "" );
Serial.print ( "Connected to " ); Serial.println ( ssid );
Serial.print ( "IP address: " ); Serial.println ( WiFi.softAPIP() );
// On branche la fonction qui gère la premiere page / link to the function that manage launch page
server.on ( "/", handleRoot );
///////////////////////////////////////////
server.on("/img", []() {
File f = SPIFFS.open("/image.png", "r");
server.streamFile(f, "image/png");
int filesize = f.size();
String WebString = "";
WebString += "HTTP/1.1 200 OK\r\n";
WebString += "Content-Type: image/jpeg\r\n";
WebString += "Content-Length: " + String(filesize) + "\r\n";
WebString += "\r\n";
//server.sendContent(WebString);
server.send(200, "text/html", WebString);
char buf[1024];
int siz = f.size();
while(siz > 0) {
size_t len = std::min((int)(sizeof(buf) - 1), siz);
f.read((uint8_t *)buf, len);
//server.client().write((const char*)buf, len);
server.sendContent((const char*)buf);
siz -= len;
f.close();
}
});
////////////////////////////////////////////
server.begin();
Serial.println ( "HTTP server started" );
}
void loop() {
server.handleClient();
t = 1;
h = 2;
p = 3;
delay(1000);
}