Further reading HTML and CSS

official

#1

Discussion of Further reading HTML and CSS block from the Weather Station 2 module.


#2
<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Your Weather Station</h1>
<br>
Requests received: 3<p id="date"></p><script>document.getElementById("date").innerHTML = 'Date: ' + Date();</script><p><br>
Temperature: 78.75F<br>
Humidity: 30.00%<br>
Air Pressure: 100090.00Pa<br>
UV Index: 0.02<br>
</body>
</html>

So using the html code in the project as pasted above , I get a error message : As follows :

Arduino: 1.8.5 (Mac OS X), Board: “Arduino/Genuino Uno”

/Users/amanyshalabi/Documents/Arduino/fur_cod_1_/fur_cod_1_.ino:10:90: warning: character constant too long for its type
Requests received: 3



^
fur_cod_1_:1: error: expected unqualified-id before ‘<’ token

^
fur_cod_1_:10: error: expected unqualified-id before ‘<’ token
Requests received: 3



^
exit status 1
expected unqualified-id before ‘<’ token

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

I can’t seem to find the issue with the code , I copied and pasted the code and keep getting the same the message, what else can I do ?

Thank you,
Omar S.


#3

Hi Omar,

The Further Reading section is meant to be an explanation of the code - not code that you copy/paste into the Arduino. The specific code example you have quoted there is an HTML document. The Arduino IDE expects C++ code. Because these code examples are different languages, that’s why they aren’t interchangeable and is why you received the error message you received.

No worries though, I can see how it is an easy mistake to make. I’ll further explain the code and am happy to answer any questions you have.

“Web pages” as we know them today are rendered in our web browser from three main languages: HTML, CSS, and Javascript. HTML (Hypertext Markup Language) provides the document structure and content. CSS (Cascading Style Sheets) has references to the HTML elements that are used to apply style and layout instructions to the browser on how to render the HTML. Javascript is a dynamic runtime language that allows interactivity. Javascript can modify the HTML document object model (DOM) - modifying the HTML and CSS in response to user actions, timers, etc to make the web page document interactive.

This particular HTML document is actually generated by the Arduino code and served from the Arduino/Wifi Module to the browser, which is why we wanted to show it to you and explain how it works.

The code we use in the Arduino IDE is written in the C++ language (technically, it is Wiring - a set of functions and libraries written in C++ to make electronics prototyping easier). If you look at the code example here you can see starting at line 123 there is the code to generate the HTML document we are talking about. I’ve copied that section of the code below:

void sendHttpResponse(WiFiEspClient client)
{
  client.print(
    "HTTP/1.1 200 OK\r\n"
    "Content-Type: text/html\r\n"
    // the connection will be closed after completion of the response
    "Connection: close\r\n"
     // refresh the page automatically every 20 sec
    "Refresh: 20\r\n"
    "\r\n");

  client.print(
    "<!DOCTYPE HTML>\r\n"
    "<html>\r\n"
    "<head>\r\n"
    "<style>\r\n"
    "</style>\r\n"
    "</head>\r\n"
    "<body>\r\n"
    "<h1>" + title + "</h1>\r\n"
    "<br>\r\n");

  // Print # of requests received
  client.print("Requests received: ");
  client.print(++reqCount);

  client.print("<p id=\"date\"></p>"
    "<script>"
    "document.getElementById(\"date\").innerHTML = 'Date: ' + Date();"
    "</script>"
    "<p><br>\r\n");

  // Print temperature
  client.print("Temperature: ");
  client.print(temperature);
  client.print("F"
    "<br>\r\n"
    "Humidity: ");

  client.print(humidity);
  client.print("%"
    "<br>\r\n"
    "Air Pressure: ");
  client.print(pressure);

  client.print("Pa"
    "<br>\r\n"
    "UV Index: ");
  client.print(uv);
  client.print("<br>\r\n"
    "</body>\r\n"
    "</html>\r\n");
}

What is actually happening here? The function sendHttpResponse(WiFiEspClient client) communicates from the Arduino to the Wifi Module (ESP8266) an HTML document through the client.print() function. The HTML document is created dynamically, so that it can include the title, the request count, the temperature, the humidity, air pressure, and UV index.

Hopefully that explains what’s happening. If you have further questions, I’m happy to answer them.


#4

Thank you so much.