How can I pass a value from Arduino C To HTML?

herbie
Posts: 15
Joined: Sun Jul 01, 2018 9:54 am

How can I pass a value from Arduino C To HTML?

Postby herbie » Sun Aug 05, 2018 11:58 am

Hello everybody,
I ´ve built a simple WIFi - thermometer with an esp8266 and a DS18B20 sensor. The software produces a simple webpage that can be viewed with a computer, cell phone and so on. I like that much better than using just the "server.send(200, "text/plain"" command but there´s one catch!! I need to display the "temperature_string" variable which contains the actual temperature and don´t no how? Is there a possibillity? I would really appreciate your expert advice!!!!!

Thanks in advance


Code: Select all

/*
  ESP8266 Temperatur WiFi-Sensor -19.07.2018 - pb -
*/

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

//Actual webpage - I need the "temperature_string" variable in here
const char index_html[] PROGMEM={"<!DOCTYPE html>\n<html>\n<head>\n<meta http-equiv=\"refresh\" content=\"5\"/>\n<style>\nh1 {\n    color: blue;\n    font-family: verdana;\n    font-size: 300%;\n\n}\np  {\n    color: red;\n    font-family: courier;\n    font-size: 160%;\n}\n</style>\n</head>\n<body>\n\n<h1>This should show the temperature</h1>\n\n\n</body>\n</html>\n"};

#define ONE_WIRE_BUS 2 // GPIO of ESP8266 = GPIO2
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire); // Pass our oneWire reference to Dallas Temperature.
String temperature_string = "";
float temperature;

EspClass ESPm;

const char* ssid = "DLINK";
const char* password = "C63SxIpdTT";

//byte mac[] = {  0xDE, 0x13, 0x02, 0x58, 0xFF, 0x03 };// MAC Adress of Arduino Board
//byte ip[] = {  192, 168, 1, 20 };                // IP Adresse of Arduino Board
//byte gateway[] = { 192, 168, 1, 1  };               // Gateway (optional)

ESP8266WebServer server(80);

//const int led = 13;

void handleRoot() {
  //digitalWrite(led, 1);
  temperature_string = "Temperature: " + String((float)temperature,1) + " C"; //This is the value that I need to display in the webpage
  server.send_P(200, "text/html", index_html);//temperature_string

  //digitalWrite(led, 0);
}

void handleNotFound() {
//  digitalWrite(led, 1);
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i = 0; i < server.args(); i++) {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
//  digitalWrite(led, 0);
}

void setup(void) {

  sensors.begin(); /* Initialize Dallas temperature library */

//  pinMode(led, OUTPUT);
//  digitalWrite(led, 0);
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

//if (MDNS.begin("esp8266")) {
//Serial.println("MDNS responder started");
// }

  server.on("/", handleRoot);

  server.on("/inline", []() {
    server.send(200, "text/plain", "this works as well");
  });

  server.onNotFound(handleNotFound);

  server.begin();
  Serial.println("HTTP server started");
}

void get_temperature() {

  // Get temperature

  sensors.requestTemperatures();
  temperature = sensors.getTempCByIndex(0);

  Serial.println();
  Serial.print(temperature,1);
  Serial.print(" Grad Celsius");
  Serial.println();
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
  delay(2000);
}



void loop() {
  server.handleClient();
  get_temperature();
}

User avatar
kolban
Posts: 1683
Joined: Mon Nov 16, 2015 4:43 pm
Location: Texas, USA

Re: How can I pass a value from Arduino C To HTML?

Postby kolban » Sun Aug 05, 2018 3:04 pm

When the ESP32 is acting as an HTTP server and a browser request arrives, the ESP32 should send back an HTTP response. If you want the browser to interpret the response as HTML and render the result, the content type of the HTTP response should be "text/html". The payload body of the response should then contain the HTML you wish to transmit to the browser. Describing the format of HTML is too much for this post and there are many excellent references on HTML on the Internet and in books.

Whatever content is in the HTML should be honored by the browser. Thus if you wish to render some useful information, the responsibility becomes yours to build the appropriate response. For example, if you have an int that contains a temp, at a high level you could code:

sprintf(payload, "<p>The temperature is: <span>%doF</span>.</p>", temp);

which would produce the string:

<p>The temperature is: <span>75oF</span>.</p>

Should you need dynamic update and get much more advanced, you can load a static HTML page and then make REST requests back to the ESP32 to retrieve just the new value and then update just the value within the existing model of the page (however this is much more advanced).
Free book on ESP32 available here: https://leanpub.com/kolban-ESP32

Archibald
Posts: 110
Joined: Mon Mar 05, 2018 12:44 am

Re: How can I pass a value from Arduino C To HTML?

Postby Archibald » Sun Aug 05, 2018 6:48 pm

Within index_html[] you need to replace the text "This should show the termperature" with what's in the temperature_string variable before sending the HTML. (I assume you are seeing that text on your computer's browser.)

I suggest you split index_html[] before and after "This should show the temperature", then concatenate with temperature_string. Something like this:

Code: Select all

const char before[] PROGMEM={"<!DOCTYPE html>\n<html>\n<head>\n<meta http-equiv=\"refresh\" content=\"5\"/>\n<style>\nh1 {\n    color: blue;\n    font-family: verdana;\n    font-size: 300%;\n\n}\np  {\n    color: red;\n    font-family: courier;\n    font-size: 160%;\n}\n</style>\n</head>\n<body>\n\n<h1>"};
 
const char after[] PROGMEM={"</h1>\n\n\n</body>\n</html>\n"};

String temperature_string = "21.5";		// initialisation will not be needed

void setup() {
}

void loop() {
  html_index = before + temperature_string + after;
}

Deouss
Posts: 425
Joined: Tue Mar 20, 2018 11:36 am

Re: How can I pass a value from Arduino C To HTML?

Postby Deouss » Sun Aug 05, 2018 10:05 pm

What exactly esp http server supports and what version is it?
Does ajax call work? Websockets?

herbie
Posts: 15
Joined: Sun Jul 01, 2018 9:54 am

Re: How can I pass a value from Arduino C To HTML?

Postby herbie » Sun Aug 05, 2018 10:51 pm

First of all thanks to everybody for your answers!!
@Archibald
I tried your solution but I get an errormessage "assignment of read-only variable 'index_html'" Here´s the code so far!!!

Code: Select all

/*
  ESP8266 Temperatur WiFi-Sensor -19.07.2018 - pb -
*/

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

const char index_html[]PROGMEM={};
const char before[] PROGMEM={"<!DOCTYPE html>\n<html>\n<head>\n<meta http-equiv=\"refresh\" content=\"5\"/>\n<style>\nh1 {\n    color: blue;\n    font-family: verdana;\n    font-size: 300%;\n\n}\np  {\n    color: red;\n    font-family: courier;\n    font-size: 160%;\n}\n</style>\n</head>\n<body>\n\n<h1>"};
const char after[] PROGMEM={"</h1>\n\n\n</body>\n</html>\n"};

#define ONE_WIRE_BUS 2 // GPIO of ESP8266 = GPIO2
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire); // Pass our oneWire reference to Dallas Temperature.
String temperature_string = "";
float temperature;

EspClass ESPm;

const char* ssid = "DLINK";
const char* password = "C63SxIpdTT";



ESP8266WebServer server(80);



void handleRoot() {

  temperature_string = "Temperature: " + String((float)temperature,1) + " C";
  server.send_P(200, "text/html", index_html);

}

void handleNotFound() {

  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i = 0; i < server.args(); i++) {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);

}

void setup(void) {

  sensors.begin(); /* Initialize Dallas temperature library */


  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());



  server.on("/", handleRoot);

  server.on("/inline", []() {
    server.send(200, "text/plain", "this works as well");
  });

  server.onNotFound(handleNotFound);

  server.begin();
  Serial.println("HTTP server started");
}

void get_temperature() {

  // Get temperature

  sensors.requestTemperatures();
  temperature = sensors.getTempCByIndex(0);

  Serial.println();
  Serial.print(temperature,1);
  Serial.print(" Grad Celsius");
  Serial.println();
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
  delay(2000);
}



void loop() {
  server.handleClient();
  get_temperature();
index_html = before + temperature_string + after;
}

Archibald
Posts: 110
Joined: Mon Mar 05, 2018 12:44 am

Re: How can I pass a value from Arduino C To HTML?

Postby Archibald » Mon Aug 06, 2018 12:06 am

As index_html needs to be modifiable, it should not be declared using the 'const' keyword. It's therefore also inappropriate to use PROGMEM.

You could even avoid using index_html at all:

Code: Select all

server.send_P(200, "text/html", before+temperature_string+after);
Were you seeing "This should show the temperature" in your computer's browser before you made the last edit?

@Deouss: it's currently using a <meta> tag to refresh the web page every 5 seconds.

herbie
Posts: 15
Joined: Sun Jul 01, 2018 9:54 am

Re: How can I pass a value from Arduino C To HTML?

Postby herbie » Mon Aug 06, 2018 12:47 am

Dear Archibald,
Were you seeing "This should show the temperature" in your computer's browser before you made the last edit
?

Yes - because I was the one who made that statement - it was meant to be an example but all it did was making a mess :( Sorry!!
This time it compiles - but I can´t see a thing in my browser althoug the connection is there. I deleted the "index_html stuff and did everything as you recommended it!!!

herbie
Posts: 15
Joined: Sun Jul 01, 2018 9:54 am

I can pass a value from Arduino C To HTML now!!!

Postby herbie » Mon Aug 06, 2018 1:29 am

Finally it works - I had to get rid of the PROGMEM[] stuff - here´s the code and thanks a 1000 times for your help!!!!!

Code: Select all

/*
  ESP8266 Temperatur WiFi-Sensor -19.07.2018 - pb -
*/

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

const char before[]{"<!DOCTYPE html>\n<html>\n<head>\n<meta http-equiv=\"refresh\" content=\"5\"/>\n<style>\nh1 {\n    color: blue;\n    font-family: verdana;\n    font-size: 300%;\n\n}\np  {\n    color: red;\n    font-family: courier;\n    font-size: 160%;\n}\n</style>\n</head>\n<body>\n\n<h1>"};
const char after[]{"</h1>\n\n\n</body>\n</html>\n"};

#define ONE_WIRE_BUS 2 // GPIO of ESP8266 = GPIO2
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire); // Pass our oneWire reference to Dallas Temperature.
String temperature_string = "";
float temperature;

EspClass ESPm;

const char* ssid = "DLINK";
const char* password = "C63SxIpdTT";

//byte mac[] = {  0xDE, 0x13, 0x02, 0x58, 0xFF, 0x03 };// MAC Adress of Arduino Board
//byte ip[] = {  192, 168, 1, 20 };                // IP Adresse of Arduino Board
//byte gateway[] = { 192, 168, 1, 1  };               // Gateway (optional)

ESP8266WebServer server(80);



void handleRoot() {
 
  temperature_string = "Temperature: " + String((float)temperature,1) + " C";
  server.send(200, "text/html", before+temperature_string+after);

 
}

void handleNotFound() {

  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i = 0; i < server.args(); i++) {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);

}

void setup(void) {

  sensors.begin(); /* Initialize Dallas temperature library */


  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

if (MDNS.begin("esp8266")) {
Serial.println("MDNS responder started");
 }

  server.on("/", handleRoot);

  server.on("/inline", []() {
    server.send(200, "text/plain", "this works as well");
  });

  server.onNotFound(handleNotFound);

  server.begin();
  Serial.println("HTTP server started");
}

void get_temperature() {

  // Get temperature

  sensors.requestTemperatures();
  temperature = sensors.getTempCByIndex(0);

  Serial.println();
  Serial.print(temperature,1);
  Serial.print(" Grad Celsius");
  Serial.println();
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
  delay(2000);
}



void loop() {
  server.handleClient();
  get_temperature();
}

Archibald
Posts: 110
Joined: Mon Mar 05, 2018 12:44 am

Re: How can I pass a value from Arduino C To HTML?

Postby Archibald » Mon Aug 06, 2018 2:03 am

I'm not familiar with the server library and have not looked at all your code in detail, but I think you need to use server.send, not server.send_P. Does that work?

herbie
Posts: 15
Joined: Sun Jul 01, 2018 9:54 am

Re: How can I pass a value from Arduino C To HTML?

Postby herbie » Mon Aug 06, 2018 10:14 am

Hello Archibald,

Yes - you´re right. One has to use "server.send"!! With server.send_P I got errormessages. Using "server.send" and omitting "PROGMEM[]" did the trick. I don´t have to save memory so I shouldn´t have used it to begin with.
There´s one last question:
If you look at the code you might see that I wanted to assign a static IP-Adress to the device by commenting

Code: Select all

//#include <ESP8266mDNS.h>
and adding

Code: Select all

byte mac[] = {  0xDE, 0x13, 0x02, 0x58, 0xFF, 0x03 };// MAC Adress of Arduino Board
byte ip[] = {  192, 168, 1, 20 };                // IP Adresse of Arduino Board
byte gateway[] = { 192, 168, 1, 1  };               // Gateway (optional)
But that doesn´t work and I can´t understand why - it always worked for me. I find it impractical to use an IP-Adress that can change for a device like that. Any ideas maybe??

Who is online

Users browsing this forum: No registered users and 61 guests