HTML

Using Arduino Networking, Protocols, and Devices
1

Hi everyone, I've already asked for help for an HTML page but I haven't had a lot of luck, I've been doing some checking around and I came back with some solutions. :slight_smile:

I found a site that allows me to convert HTML code into a language to program Arduino. Here's the link:

http://davidjwatts.com/youtube/esp8266/esp-convertHTM.html#

I tried a simple HTML command:

html { 
  background: url(file:///C:/Users/lucam/Pictures/foto-baita-luca.jpg) no-repeat center fixed;
  background-size: cover;
}

After the conversion, I get this:

String html ="html { background: url(file:///C:/Users/lucam/Pictures/foto-baita-luca.jpg) no-repeat center fixed; background-size: cover; }";

The question is, in my code, I have to enter the following?

client.println("<html { background: url(file:///C:/Users/lucam/Pictures/foto-baita-luca.jpg) no-repeat center fixed; background-size: cover; }>");

Because then looking for my HTML page comes out a blank screen, maybe I don't know.
Can somebody help me? :frowning: :frowning:

2

The snippet you posted contains CSS, not HTML.

Pieter

3

This is my basic page, but it doesn't work...

#include <SPI.h>

#include <Ethernet.h>

void HTML (void);

int led = 13;

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };   //physical mac address

byte ip[] = { xxx, xxx, xxx, xxx };                      // ip in lan (that's what you need to use in your browser. ("192.168.1.178")

byte gateway[] = { 192, 168, 1, 1 };                   // internet access via router

byte subnet[] = { 255, 255, 255, 0 };                  //subnet mask

EthernetServer server(80); //server port
EthernetClient client;

String readString;

void setup() {
  Serial.begin(9600);
  pinMode(led, OUTPUT);
  // start the Ethernet connection and the server:
  Ethernet.begin(mac, ip, gateway, subnet);
  server.begin();
  Serial.println(Ethernet.localIP());
}
void loop() {
  // Create a client connection
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {   
      if (client.available()) {
        char c = client.read();
        //read char by char HTTP request
        if (readString.length() < 100) {
          //store characters to string
          readString += c;
          //Serial.print(c);
         }
         //if HTTP request has ended
         if (c == '\n') { 
           Serial.println(readString);         
            client.println("HTTP/1.1 200 OK"); //send new page
            client.println("Content-Type: text/html");
            client.println();     
            client.println("<HTML>");
            client.println("<BODY>");
            client.println("<TITLE>Cascina</TITLE>");
            client.println("<center>");
            client.println("<H1>Cascina</H1>");
            client.println("</BODY>");
            client.println("</HTML>");
            client.stop();
         }
       }
    }
}
}

I realized that the part to edit to customize the page and this one:

 Serial.println(readString);         
            client.println("HTTP/1.1 200 OK"); //send new page
            client.println("Content-Type: text/html");
            client.println();     
            client.println("<HTML>");
            client.println("<BODY>");
            client.println("<TITLE>Cascina</TITLE>");
            client.println("<center>");
            client.println("<H1>Cascina</H1>");
            client.println("</BODY>");
            client.println("</HTML>");
            client.stop();

But I don't know how to translate the commands I've done for my HTML page in arduino language...

This is the page that I want to make (it worked by me on the notepad)...

<!DOCTYPE html>
<html>
<head>
<style>
html { 
  background: url(file:///C:/Users/lucam/Pictures/foto-baita-luca.jpg) no-repeat center fixed;
  background-size: cover;
}         
div.ON {
  position: fixed;
  top: 70%;
  left: 20%;
}
div.OFF {
  position: fixed;
  top: 70%;
  right:20%;
}

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: Black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 200%;
}
.button1 {padding: 20% 24%;}
.button2 {padding: 15% 5%;}
</style>
</head>
<body>

<center>
<h1 style="font-size:300%;background-color:DodgerBlue;">Cascina Mozzini</h1>
</center>
<div class="ON">
<button class="button button1">ON</button>
</div>

<div class="OFF">
<button class="button button2">OFF</button>
</div>


</body>
</html>

Can someone give me an example of how to start then I'll go on, at least the basic commands... isn't there a guide that explains how to do HTML on Arduino?

Everyone tells me it's the same thing to write HTML commands on Arduino but they don't work...

and even visually they don't look the same to me :frowning: :confused: :confused:

4

Arduino doesn't care if it's HTML or not, it just handles it as a string.

const char *html = R"====(
<!DOCTYPE html>
<html>
<head>
<style>
html {
  background: url(file:///C:/Users/lucam/Pictures/foto-baita-luca.jpg) no-repeat center fixed;
  background-size: cover;
}         
div.ON {
  position: fixed;
  top: 70%;
  left: 20%;
}
div.OFF {
  position: fixed;
  top: 70%;
  right:20%;
}

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: Black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 200%;
}
.button1 {padding: 20% 24%;}
.button2 {padding: 15% 5%;}
</style>
</head>
<body>

<center>
<h1 style="font-size:300%;background-color:DodgerBlue;">Cascina Mozzini</h1>
</center>
<div class="ON">
<button class="button button1">ON</button>
</div>

<div class="OFF">
<button class="button button2">OFF</button>
</div>


</body>
</html>
)====";

client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println();
client.print(html);
5

What it means:

const char *html = R"====(

I can pretty much replace this whole part:

 if (c == '\n') {
           Serial.println(readString);         
            client.println("HTTP/1.1 200 OK"); //send new page
            client.println("Content-Type: text/html");
            client.println();     
            client.println("<HTML>");
            client.println("<BODY>");
            client.println("<TITLE>Cascina</TITLE>");
            client.println("<center>");
            client.println("<H1>Cascina</H1>");
            client.println("</BODY>");
            client.println("</HTML>");
            client.stop();

With my HTML code I just start with:

const char *html = R"====(

And I end up with:

)====";

Am I getting this right? Tell me if I'm wrong...

it would be like this:

#include <SPI.h>

#include <Ethernet.h>

void HTML (void);

int led = 13;

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };   //physical mac address

byte ip[] = { xxx, xxx, xxx, xxx };                      // ip in lan (that's what you need to use in your browser. ("192.168.1.178")

byte gateway[] = { 192, 168, 1, 1 };                   // internet access via router

byte subnet[] = { 255, 255, 255, 0 };                  //subnet mask

EthernetServer server(80); //server port
EthernetClient client;

String readString;

void setup() {
  Serial.begin(9600);
  pinMode(led, OUTPUT);
  // start the Ethernet connection and the server:
  Ethernet.begin(mac, ip, gateway, subnet);
  server.begin();
  Serial.println(Ethernet.localIP());
}
void loop() {
  // Create a client connection
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {   
      if (client.available()) {
        char c = client.read();
        //read char by char HTTP request
        if (readString.length() < 100) {
          //store characters to string
          readString += c;
          //Serial.print(c);
         }
const char *html = R"====(

my HTML code

)====";
       }
    }
}
}

I hope I got this right... pending an answer, thank you for your concern :slight_smile:

6

It's just a string literal. You store a pointer to the string in the "html" variable, you still have to send it to the client using client.print(...), like the second snippet in my previous post.

If the string is static, it's probably a good idea to store it in progmem.

7

As good as you are at explaining, I don't understand what I have to do... I apologize, but I'm just getting started...
Could you modify my code leaving me the free space where I have to insert my HTML code?
So I can create the page as I want on the notepad and I just copy everything in the Arduino code where you leave me the space and I'm fine...
I'm stuck and I can't move forward...

Thank you very much :slight_smile:

8 
#include <SPI.h>
#include <Ethernet.h>

const uint8_t led = 13;

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };   //physical mac address
byte ip[] = { 192, 168, 1, 2 };                      // ip in lan (that's what you need to use in your browser. ("192.168.1.178")
byte gateway[] = { 192, 168, 1, 1 };                   // internet access via router
byte subnet[] = { 255, 255, 255, 0 };                  //subnet mask

EthernetServer server(80); //server port
EthernetClient client;

#define FLASH_STR(x) [] { \
    const static char html[] PROGMEM = (x); \
    return reinterpret_cast<const __FlashStringHelper *>(html); }()

const auto html = FLASH_STR(R"====(
<!-- Your HTML here -->
)====");

void setup() {
  Serial.begin(9600);
  pinMode(led, OUTPUT);
  // start the Ethernet connection and the server:
  Ethernet.begin(mac, ip, gateway, subnet);
  server.begin();
  Serial.println(Ethernet.localIP());
}

void loop() {
  // Create a client connection
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        if (c == '\n') { // This is wrong, you have to wait for "\r\n\r\n"
          client.println("HTTP/1.1 200 OK"); //send new page
          client.println("Content-Type: text/html");
          client.println();
          client.print(html);
          client.stop();
        }
      }
    }
  }
}

Also note that your HTTP "parser" is wrong, you have to wait for the first empty line, i.e. a sequence of "\r\n\r\n", you can't just stop after receiving the first line.

9

"Also note that your HTTP "parser" is wrong, you have to wait for the first empty line, i.e. a sequence of "\r\n\r\n", you can't just stop after receiving the first line."

Back in the day identifying the first '\n' was sufficient to capture the first line of the request packet sent by the client. Things may have changed. I think the rest of the packet was just ignored as the important part of the client request is usually in the first line.

10

Your HTML is wrong.. follow the w3school