Need help for displaying results in local server

#include <ESP8266WiFi.h>
#include <DallasTemperature.h>
#include <OneWire.h>

#define ONE_WIRE_BUS 4                          //D2 pin of nodemcu

OneWire oneWire(ONE_WIRE_BUS);
 
DallasTemperature sensors(&oneWire);            // Pass the oneWire reference to Dallas Temperature.

const char* ssid     = "your_ssid";
const char* password = "your_Password";

WiFiServer server(80);// Set port to 80


String header; // This storees the HTTP request

void setup() {
  
  Serial.begin(115200); 
  sensors.begin();
  
  //connect to access point
  WiFi.begin(ssid, password);
    Serial.print("Connecting to ");
    Serial.println(ssid);
    while (WiFi.status() != WL_CONNECTED) {
      delay(500);
      Serial.print(".");
    }
    // Print local IP address and start web server
    Serial.println("");
    Serial.println("WiFi connected.");
    Serial.println("IP address: ");
    Serial.println(WiFi.localIP());// this will display the Ip address of the Pi which should be entered into your browser
    server.begin();
}

void loop() {
  sensors.requestTemperatures();                // Send the command to get temperatures  
  Serial.println("Temperature is: ");
  float bodyTemp = sensors.getTempCByIndex(0);// Why "byIndex"? You can have more than one IC on the same bus. 0 refers to the first IC on the wire
  Serial.println(bodyTemp);   // want to show this value in the webpage
  delay(500);

  WiFiClient client = server.available();   // Listen for incoming clients
  
    if (client) {                             // If a new client connects,
      String currentLine = "";                // make a String to hold incoming data from the client
      while (client.connected()) {            // loop while the client's connected
        if (client.available()) {             // if there's bytes to read from the client,
          char c = client.read();             // read a byte, then
          Serial.write(c);                    // print it out the serial monitor
          header += c;
          if (c == '\n') {                    // if the byte is a newline character
            // if the current line is blank, you got two newline characters in a row.
            // that's the end of the client HTTP request, so send a response:
            if (currentLine.length() == 0) {
              // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
              // and a content-type so the client knows what's coming, then a 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>");
              client.println("<title>ESP32 Patient Health Monitoring</title>");
              client.println("<meta name='viewport' content='width=device-width, initial-scale=1.0'>");
              client.println("<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>");
              client.println("<style>");
              client.println("html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #444444;}");
              client.println("body{margin: 0px;} ");
              client.println("h1 {margin: 50px auto 30px;} ");
              client.println(".side-by-side{display: table-cell;vertical-align: middle;position: relative;}");
              client.println(".text{font-weight: 600;font-size: 19px;width: 200px;}");
              client.println(".reading{font-weight: 300;font-size: 50px;padding-right: 25px;}");
              client.println(".bodyTemp .reading{color: #F29C1F;}");
              client.println(".superscript{font-size: 17px;font-weight: 600;position: absolute;top: 10px;}");
              client.println(".data{padding: 10px;}");
              client.println(".container{display: table;margin: 0 auto;}");
              client.println(".icon{width:65px}");

              client.println("<div class='data Body Temperature'>");
              client.println("<div class='side-by-side icon'>");
              client.println("<svg enable-background='new 0 0 19.438 54.003'height=54.003px id=Layer_1 version=1.1 viewBox='0 0 19.438 54.003'width=19.438px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M11.976,8.82v-2h4.084V6.063C16.06,2.715,13.345,0,9.996,0H9.313C5.965,0,3.252,2.715,3.252,6.063v30.982");
              client.println("C1.261,38.825,0,41.403,0,44.286c0,5.367,4.351,9.718,9.719,9.718c5.368,0,9.719-4.351,9.719-9.718");
              client.println("c0-2.943-1.312-5.574-3.378-7.355V18.436h-3.914v-2h3.914v-2.808h-4.084v-2h4.084V8.82H11.976z M15.302,44.833");
              client.println("c0,3.083-2.5,5.583-5.583,5.583s-5.583-2.5-5.583-5.583c0-2.279,1.368-4.236,3.326-5.104V24.257C7.462,23.01,8.472,22,9.719,22");
              client.println("s2.257,1.01,2.257,2.257V39.73C13.934,40.597,15.302,42.554,15.302,44.833z'fill=#F29C21 /></g></svg>");
              client.println("</div>");
              client.println("<div class='side-by-side text'>Body Temperature</div>");
              client.println("<div class='side-by-side reading'>");
              client.println((int)bodyTemp);
              client.println("<span class='superscript'>&deg;C</span></div>");
  
              client.println("</style>");
              client.println("</head>");
              client.println("<body>");
              client.println("<h1>ESP8266 Patient Health Monitoring</h1>");
  
            }
            else { // if you got a newline, then clear currentLine
            currentLine = "";
            } 
          }else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
          }
        }
      }
      // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
    }        
}

it's only showing ESP8266 patient Health Monitoring.....
Please help me

a) see the ESP example

webserver / hello server

how to write a webserver on the esp8266.

b) your HTML header fields are wrong. HTTP 1.1 requires a content length but you don't set it. That's one reason more to use the webserver / hello server example as base for your sketch.
Start new from scratch.

c) your HTML is invalid. your body tag is wrongly placed.
switch your browser to "show source" and put your html into a validator like https://validator.w3.org/#validate_by_input and correct your bugs.

Thanks for your advice. It's working. :grinning_face_with_smiling_eyes: :slightly_smiling_face: :smiley:

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

#include <DallasTemperature.h>
#include <OneWire.h>

#define ONE_WIRE_BUS 4                          //D2 pin of nodemcu

#define REPORTING_PERIOD_MS     1000

OneWire oneWire(ONE_WIRE_BUS);
 
DallasTemperature sensors(&oneWire);

const char* ssid = ".........";
const char* password = "........";

uint32_t tsLastReport = 0;

ESP8266WebServer server(80);


 float bodytemperature;
 
void onBeatDetected()
{
  Serial.println("Beat!");
}
 
void setup() {
  Serial.begin(115200);
  pinMode(19, OUTPUT);
  delay(100);   
 
  Serial.println("Connecting to ");
  Serial.println(ssid);
 
  //connect to your local wi-fi network
  WiFi.begin(ssid, password);
 
  //check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());
 
  server.on("/", handle_OnConnect);
  server.onNotFound(handle_NotFound);
 
  server.begin();
  Serial.println("HTTP server started");
 
  Serial.print("Initializing pulse oximeter..");
 
  
 
}
void loop() {
  server.handleClient();

  sensors.requestTemperatures();
  
  bodytemperature = sensors.getTempCByIndex(0);
 
  
  if (millis() - tsLastReport > REPORTING_PERIOD_MS) 
  {
   
 
    Serial.print("Body Temperature: ");
    Serial.print(bodytemperature);
    Serial.println("°C");
    
    Serial.println("*********************************");
    Serial.println();
 
    tsLastReport = millis();
  }
  
}
 
void handle_OnConnect() {
  
  server.send(200, "text/html", SendHTML(bodytemperature)); 
}
 
void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}
 
  String SendHTML(float bodytemperature){
  String ptr = "<!DOCTYPE html>";
  ptr +="<html>";
  ptr +="<head>";
  ptr +="<title>ESP8266 Patient Health Monitoring</title>";
  ptr +="<meta name='viewport' content='width=device-width, initial-scale=1.0'>";
  ptr +="<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>";
  ptr +="<style>";
  ptr +="html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #444444;}";
  ptr +="body{margin: 0px;} ";
  ptr +="h1 {margin: 50px auto 30px;} ";
  ptr +=".side-by-side{display: table-cell;vertical-align: middle;position: relative;}";
  ptr +=".text{font-weight: 600;font-size: 19px;width: 200px;}";
  ptr +=".reading{font-weight: 300;font-size: 50px;padding-right: 25px;}";
  ptr +=".bodytemperature .reading{color: #F29C1F;}";
  ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;top: 10px;}";
  ptr +=".data{padding: 10px;}";
  ptr +=".container{display: table;margin: 0 auto;}";
  ptr +=".icon{width:65px}";
  ptr +="</style>";
  ptr +="</head>";
  ptr +="<body>";
  ptr +="<h1>ESP8266 Patient Health Monitoring</h1>";
  ptr +="<h3>Suraj Narayan</h3>";
  ptr +="<div class='container'>";
  
 
  ptr +="<div class='data Body Temperature'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="<svg enable-background='new 0 0 19.438 54.003'height=54.003px id=Layer_1 version=1.1 viewBox='0 0 19.438 54.003'width=19.438px x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path d='M11.976,8.82v-2h4.084V6.063C16.06,2.715,13.345,0,9.996,0H9.313C5.965,0,3.252,2.715,3.252,6.063v30.982";
  ptr +="C1.261,38.825,0,41.403,0,44.286c0,5.367,4.351,9.718,9.719,9.718c5.368,0,9.719-4.351,9.719-9.718";
  ptr +="c0-2.943-1.312-5.574-3.378-7.355V18.436h-3.914v-2h3.914v-2.808h-4.084v-2h4.084V8.82H11.976z M15.302,44.833";
  ptr +="c0,3.083-2.5,5.583-5.583,5.583s-5.583-2.5-5.583-5.583c0-2.279,1.368-4.236,3.326-5.104V24.257C7.462,23.01,8.472,22,9.719,22";
  ptr +="s2.257,1.01,2.257,2.257V39.73C13.934,40.597,15.302,42.554,15.302,44.833z'fill=#F29C21 /></g></svg>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Body Temperature</div>";
  ptr +="<div class='side-by-side reading'>";
  ptr +=(int)bodytemperature;
  ptr +="<span class='superscript'>&deg;C</span></div>";
  ptr +="</div>";
  
  ptr +="</div>";
  ptr +="</body>";
  ptr +="</html>";
  return ptr;
}

solution :point_up_2:t2:

This topic was automatically closed 120 days after the last reply. New replies are no longer allowed.