Your new topic does not fit any of the above??? Check first. Then post here. Thanks.

Moderator: igrr

User avatar
By mgviolet
#77598 I 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);
}
User avatar
By pedros89
#92060 Hello,

Read this guide i does what you need.
https://www.mischianti.org/it/2020/10/26/web-server-con-esp8266-e-esp32-pagine-gzipped-da-spiffs-e-byte-array-2/

the command to be used is that does all the job is
Code: Select allserver.streamFile(dataFile, dataType);


Hope this help.


Code: Select allvoid handleLogo(){
  loadFromSPIFFS("/logo.png", "image/png");
}


Code: Select allbool loadFromSPIFFS(String path, String dataType) {
  Serial.print("Requested page -> ");
  Serial.println(path);
  if (SPIFFS.exists(path)){
      File dataFile = SPIFFS.open(path, "r");
      if (!dataFile) {
          handleNotFound();
          return false;
      }
 
      if (server.streamFile(dataFile, dataType) != dataFile.size()) {   //this is the actual command that is doing the file streaming
        Serial.println("Sent less data than expected!");
      }else{
          Serial.println("Page served!");
      }
 
      dataFile.close();
  }else{
      handleNotFound();
      return false;
  }
  return true;
}



I'm trying to integrate this in

Code: Select allserver.send(200, "image/png", handleLogo);


but does not work, only works in

Code: Select allserver.on("/logo.png", handleLogo);