Basic Arduino Web Server Tutorial (Part 2 - Software Setup)

Create the Basic Web Server

The basic webserver will allow you to connect to the Arduino using your favourite browser. If the connection is successful it will display the current temperature as read from the DS28B20 sensor. The browser will refresh every 5 seconds.

We connect to the Arduino using the ip address you assign in the sketch. This would be the private network in your location. You will not be able to access the Arduino from the Internet. To allow access to your Arduino from the internet you would need to enable port forwarding on your router.

We are using the Arduino Ethernet library to communicate with the W5100 Ethernet controller. It communicates with the ethernet controller using the SPI bus. The SD card that is on the board also uses the same SPI bus so we need to disable the SD card so that it does not clash with the ethernet controller.

You can either cut and paste the code below or download the sketch file.

Basic_Webserver_Software_Sketch
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
#include <SPI.h> // used to communicated via the spi bus
#include <Ethernet.h>> // used to communicate with the ethernet controller

#include "cactus_io_DS18B20.h"
int DS18B20_Pin = 2; //DS18B20 Signal pin on digital 2

// Create DS18B20 object
DS18B20 ds(DS18B20_Pin); // on digital pin 2

// Here we setup the webserver. We need to supply a mac address.
// Some ethernet boards have a label attached with a mac address you can use.
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 45); // IP address, may need to change depending on network
EthernetServer server(80); // create a server at port 80


void setup() {

// disable the SD card by switching pin 4 high
pinMode(4, OUTPUT);
digitalWrite(4, HIGH);

Ethernet.begin(mac, ip); // initialize Ethernet device
server.begin(); // start to listen for clients

Serial.begin(9600);
Serial.println("cactus.io | Basic Webserver Tutorial");
Serial.print("server is at ");
Serial.println(Ethernet.localIP());

}

void loop() {
// listen for incoming clients
EthernetClient client = server.available();
if (client) {
Serial.println("new client");
// an http request ends with a blank line
boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
// if you've gotten to the end of the line (received a newline
// character) and the line is blank, the http request has ended,
// so you can send a reply
if (c == '\n' && currentLineIsBlank) {
// send a standard http response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
// the connection will be closed after completion of the response
client.println("Refresh: 5"); // refresh the page automatically every 5 sec
client.println();
client.println("<!DOCTYPE HTML>");
client.println("<html lang="en">");
client.println("<head>");
client.println("<meta charset="utf-8">");
client.println("<title>cactus.io</title>");
client.println("</head>");
client.println("<body>");
// output the value from the DS18B20 temperature sensor
ds.readSensor();
client.print("Temperature is ");
client.print(ds.getTemperature_C()); // use ds.getTemperature_F for fahrenheit
client.println(" &#8451;"); // change #8451 to #8457 for fahrenheit
client.println("</body>");
client.println("</html>");
break;
}
if (c == '\n') {
// you're starting a new line
currentLineIsBlank = true;
} else if (c != '\r') {
// you've gotten a character on the current line
currentLineIsBlank = false;
}
}
}
}
// give the web browser time to receive the data
delay(1);
// close the connection:
client.stop();
// Serial.println("client disconnected");
}

How does it work

For the Arduino to communicate with the ethernet controller we need to include 2 libraries. The first one SPI.h is to enable the SPI interface to talk to the ethernet chip. The second is Ethernet.h which acts as an interface to the ethernet side of things within the controller chip.

In line 8 we include the DS18B20 library before we declare an object of the DS18B20. This will allow us to get the temperature.

The last step is to create the server which is listening on port 80. We need to set the mac address and ip address of the ethernet interface.

In the Setup function we need to disable the SD Card as it also uses SPI and we don't want it clash with the ethernet controller.

The next step in the setup function is to initialize the ethernet controller and then start listening for clients to connect. We also update the console and display the ip address the Arduino is listening on.

All of the action takes place in the loop function. If we detect a client connection we need to process the request looking for a blank line with a newline character at the end. If this is true then we send a response. We use a while loop to process each character received from the client. It checks the character value which is stored in a char variable called c to determine if it's a newline character. If true and there are no characters in the line then we set a variable called currentLineIsBlank to true.

When the while loop detects a newline character and the currentLineIsBlank is true it then generates a response. On completion of the response it breaks the while loop and then closes the connection.

During the process of sending the response we read the temperature sensor using ds.getTemperature_C() function. We could also use ds.getTemperature_F() for Fahrenheit.

The response sent to the client is html code which is shown below. Prior to sending the html we send a response header of HTTP/1.1 200 OK which tells the browser that the browser request was successful. We also tell the browser that the response is text/html using the Content-Type: text/html header. We use Refresh: 5 (line 52) to tell the browser to reconnect to the Arduino every 5 seconds to read the temperature again.


                        !DOCTYPE HTML
                        <html lang="en">
                        <head>
                        <meta charset="utf-8">
                        <title>cactus.io</title>
                        </head>
                        <body>
                            Temperature is 12.3 ℃
                        </body>
                        </html>
                    

Web Results

If all works well this is what you should see in the web browser when you connect to the Arduino.

Sample web output for basic webserver


License