HTML clashes with Arduino syntax

sabishaw · December 18, 2018, 9:12pm

hello amazing people…
i m tryna use tag in HTML commands to be sent to client where esp8266 acts as server
heres code:

Serial.println(WiFi.localIP());
   server.on( "/", [] () {

    page = "<h1>DATA FROM SENSORS</h1><h3><a href= www.google.com >Google</a> </h3><h5>"  "</h5><h3>Temperature sensor  </h3><h5>"" celcius</h5><h3>LUX sensor  </h3><h5>"" LUX</h5>";

    server.send(200, "text/html", page);
    delay(100);
    yield();
    

  });

now at
href= www.google.com
you have to put www.google.com in “” but compiler takes it for termination of page = "

please suggest how could i tackle this problem…
also I studied HTML before industralisation …so almost forgot it

evanmars · December 18, 2018, 9:44pm

If you need quotes, use the escape character \

"www.google.com" I think is how it's done.

Deva_Rishi · December 18, 2018, 11:18pm

That is how it’s done ! keep in mind if you are sending html these sort of things should be a part of your code

const char 
  *pageheader = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">",
  *htmlhead = "<html><head><title>Your Title</title><meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\" /></head>",
  *bodystyle = "<body style=\"color: wheat; background-color: teal; font-size: 12pt; font-family: sans-serif;\">",

  *htmlclose = "</body></html>";

and make sure that you close any tag that you open.

gfvalvo · December 18, 2018, 11:42pm

Deva_Rishi:
That is how it’s done ! keep in mind if you are sending html these sort of things should be a part of your code
const char 

*pageheader = “”,
*htmlhead = “Your Title<meta http-equiv=“Content-Type” content=“text/html;charset=utf-8” />”,
*bodystyle = “<body style=“color: wheat; background-color: teal; font-size: 12pt; font-family: sans-serif;”>”,

*htmlclose = “”;

I you’re going to use that syntax, then it should be:

const char * const ptr = "String Literal";

That way the compiler will prevent you from changing the pointer and stranding the string literal in memory never to be heard from again.

If you use:

const char string[] = "String Literal";

then, the problem goes away because you can’t change where the array name is pointing.

Deva_Rishi · December 19, 2018, 9:28am

That is all not really relevant, since for every webpage the syntax to add these lines of htnl is:

String s;
s+=pageheader;
s+=htmlhead;
s+=bodystyle;
s+=htmlclose;

just don't change the pointer ! The issue here is not the C++ syntax, but the html syntax.

gfvalvo · December 19, 2018, 11:53am

Deva_Rishi:
just don't change the pointer !

Sure, nobody has ever done that accidently and ended up in a world of hurt. You should take every opportunity in your code to prevent nasty surprises. Following best practices helps and also shows that you have some idea of what you're doing.

sabishaw · December 19, 2018, 1:07pm

I thank ya’ll for gettin so prompting into my problem,…and its secondary element that I hardly understood anything…

Dear Deva_Rishi

That is how it’s done ! keep in mind if you are sending html these sort of things should be a part of your code
Code: [Select]
const char
*pageheader = “”,
*htmlhead = “Your Title<meta http-equiv=“Content-Type” content=“text/html;charset=utf-8” />”,
*bodystyle = “<body style=“color: wheat; background-color: teal; font-size: 12pt; font-family: sans-serif;”>”,

*htmlclose = “”;
and make sure that you close any tag that you open.

I just tried this code of yours,nevertheless didnt understand what its about…
It didnt work tho…
heres how I used it

  server.send(1000, "text/html", "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
     server.send(1000, "text/html", "<html><head><title>Your Title</title><meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\" /></head>");
      server.send(1000,"text/html", "<body style=\"color: wheat; background-color: teal; font-size: 12pt; font-family: sans-serif;\">");
       server.send(1000,"text/html", "</body></html>");

I want ya’ll to learn that i ma moronic slump head…so I dont understand easily…a lil explination would help
Thanks

sabishaw · December 19, 2018, 4:55pm

Dear Deva_rishi
I just managed to send the HTML command to client but when i browse it via its IP all i get is Aqua marine color background......

Deva_Rishi · December 19, 2018, 5:55pm

No big surprise here, i’ve made the same mistake once as well.

what you need to do is send all the code in one go.First collect it all in a String.

String s;
s+=pageheader;
s+=htmlhead;
s+=bodystyle;
s+= "" // your part of the page, header, links, forms, paragraphs & other info
s+=htmlclose;

and then send it.server.send(200, "text/html", s);
within this bit you can define colors, textfonts etc.
*bodystyle = "<body style=\"color: wheat; background-color: teal; font-size: 12pt; font-family: sans-serif;\">",hope you figure this out.

sabishaw · December 19, 2018, 6:01pm

haha just did that..
error message : s not captured
what does that mean?

Deva_Rishi · December 19, 2018, 6:38pm

sabishaw:
haha

post the whole code from server.on( "/", [] () {onwards

sabishaw · December 19, 2018, 7:08pm

ya thats what I did…please have this

 #include <ESP8266WiFi.h>          //https://github.com/esp8266/Arduino
//needed for library
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiClient.h>

char  *username = "corph", *password = "corph@786";

ESP8266WebServer server(80);

String page;
void setup() {

  Serial.begin(115200);
  WiFi.begin(username, password);
   while (WiFi.status() != WL_CONNECTED) {

    delay(500);

    Serial.print("->");

  }
  const char 
  *pageheader = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">",
  *htmlhead = "<html><head><title>Your Title</title><meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\" /></head>",
  *bodystyle = "<body style=\"color: wheat; background-color: teal; font-size: 12pt; font-family: sans-serif;\">",

  *htmlclose = "</body></html>";
  String s;
  s+=pageheader;
s+=htmlhead;
s+=bodystyle;
s+=htmlclose;
Serial.println(WiFi.localIP());
   server.on( "/", [] () {

//    page = "<h1>DATA FROM SENSORS</h1><h3><a>Google</a> </h3><h5>"  "</h5><h3>Temperature sensor  </h3><h5>"" celcius</h5><h3>LUX sensor  </h3><h5>"" LUX</h5>";
     
   
    server.send(1000, "text/html", s);

      
    delay(100);
    yield();             
  });
  
    server.begin();
}

void loop() {

  server.handleClient();
  server.handleClient();
}

and heres the error message

Arduino: 1.8.8 (Windows Store 1.8.19.0) (Windows 10), Board: "NodeMCU 0.9 (ESP-12 Module), 80 MHz, Flash, 4M (1M SPIFFS), v2 Lower Memory, Disabled, None, Only Sketch, 115200"

C:\Users\MEHARR\Desktop\tetee\tetee.ino: In lambda function:

tetee:40:36: error: 's' is not captured

     server.send(1000, "text/html", s);

                                    ^

Multiple libraries were found for "ESP8266WebServer.h"
 Used: C:\Users\MEHARR\Documents\ArduinoData\packages\esp8266\hardware\esp8266\2.4.2\libraries\ESP8266WebServer
 Not used: C:\Users\MEHARR\Documents\Arduino\libraries\ESPWebServer-master
exit status 1
's' is not captured

This report would have more information with
"Show verbose output during compilation"
option enabled in File -> Preferences.

thanks Deva_rishi

Deva_Rishi · December 19, 2018, 7:26pm

i’m a little disappointed, ah well… this is what i meant :

#include <ESP8266WiFi.h>          //https://github.com/esp8266/Arduino
//needed for library
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiClient.h>

const char 
  *pageheader = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">",
  *htmlhead = "<html><head><title>Your Title</title><meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\" /></head>",
  *bodystyle = "<body style=\"color: wheat; background-color: teal; font-size: 12pt; font-family: sans-serif;\">",

  *htmlclose = "</body></html>";

char  *username = "corph", *password = "corph@786";

ESP8266WebServer server(80);

String page;
void setup() {
  Serial.begin(115200);
  WiFi.begin(username, password);
   while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print("->");
  }  

Serial.println(WiFi.localIP());
  server.on( "/", [] () {
    String s;
    s+=pageheader;
    s+=htmlhead;
    s+=bodystyle;
    s+= "<h1>DATA FROM SENSORS</h1><h3><a>Google</a> </h3><h5>"  "</h5><h3>Temperature sensor  </h3>";
    s+= "<h5>"" celcius</h5><h3>LUX sensor  </h3><h5>"" LUX</h5>";
    s+=htmlclose; 
   
    server.send(200, "text/html", s);  // send 200 == OK see https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html      
    // delay(100); no need for  a delay()
    yield();  // a good idea to call yield() every once in a while, but here it almost serves no purpose, 
              //since yield() is called automatically every time loop() restarts          
    }
  );
  server.begin();
}

void loop() {

  server.handleClient();
  // server.handleClient(); // call this once withon loop
}

i normally put the whole page response in a function and reference that in the callback as such:

#include <ESP8266WiFi.h>          //https://github.com/esp8266/Arduino
//needed for library
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiClient.h>

const char 
  *pageheader = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">",
  *htmlhead = "<html><head><title>Your Title</title><meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\" /></head>",
  *bodystyle = "<body style=\"color: wheat; background-color: teal; font-size: 12pt; font-family: sans-serif;\">",

  *htmlclose = "</body></html>";

char  *username = "corph", *password = "corph@786";

ESP8266WebServer server(80);

String page;
void setup() {
  Serial.begin(115200);
  WiFi.begin(username, password);
   while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print("->");
  }  

Serial.println(WiFi.localIP());
  server.on( "/",handleRoot);
  server.begin();
}

void loop() {

  server.handleClient();
}

void handleRoot() {
  String s;
  s+=pageheader;
  s+=htmlhead;
  s+=bodystyle;
  s+= "<h1>DATA FROM SENSORS</h1><h3><a>Google</a> </h3><h5>"  "</h5><h3>Temperature sensor  </h3>";
  s+= "<h5>"" celcius</h5><h3>LUX sensor  </h3><h5>"" LUX</h5>";
  s+=htmlclose; 
 
  server.send(200, "text/html", s);  // send 200 == OK see https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html      
}

sabishaw · December 20, 2018, 7:12am

Thanks Deva rishi
…you’ve gone through my code wholly…damn thanks for that
now since i m a moron, i still cant understand a few things
I assume in your *pageheader you are tryna put some http link i.e. www.w3.org, so that it would be accessible on the web page…But I dont get any link to follow on the web page…
I actually was tryna send related syntax so that I would get to collect data from client…as the syntax of form has a number " 's in between,so complier confuses 'em with termination of command…I dont even know under what heading should i search it on google…
i hope You got me right with being disappointed…Thanks man for being there

sabishaw · December 20, 2018, 7:37am

yeeee haaaaa
Eureka Eurekaaaaaaaaaaaa
i just did it
this is what i sent in tag
<a href=“https://www.google.com/search?rlz=1C1CHZL_enIN780IN780&q=send+data+from+webpage+to+esp8266&sa=X&ved=2ahUKEwi7vvu0zKzfAhUZTI8KHVs1BjgQ1QIoBHoECAYQBQ&biw=1366&bih=577”>Google
i used " instead of "
so why didnt it work before…for i used my link right from www.yadyada.com
now i used it from http//sdjkhbvdfjhb
so it means" is not just for the sake of printing on screen the way we used in c
but can be used to deliver all the meanings of " other than that of termination or initiation of command…
now i shall go for tag…
see ya

Deva_Rishi · December 20, 2018, 9:13am

sabishaw:
I assume in your *pageheader you are tryna put some http link i.e. www.w3.org, so that it would be accessible on the web page....But I dont get any link to follow on the web page......

To it is not a link to a webpage it is a definition of what the webpage complies with. the guys at w3.org decide the html rules.
the '"' is similar to '\r' & '\n' and since html uses the " a lot you'll use '"' a lot, which doesn't improve readability..

system · May 5, 2021, 11:31pm

HTML clashes with Arduino syntax

please suggest how could i tackle this problem… also I studied HTML before industralisation …so almost forgot it

please suggest how could i tackle this problem…
also I studied HTML before industralisation …so almost forgot it