Arduino Web Server Tutorial (Part 3 - Software)

Create the Basic Web Server

The basic webserver will allow you to connect to the Arduino using your preferred browser. If the connection is successful it will display the current barometric pressure, temperature and humidity as read from the BME280 sensor. The browser will refresh every 5 seconds.

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

Sample web output for webserver

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. Later on in this tutorial we will be using the SD card so we will be modifying the code then to allow access to the SD card.

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

Webserver_Tutorial
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
86
87
88
89
#include <Wire.h>// used to couumicate via the I2C bus
#include <SPI.h>// used to communicated via the spi bus
#include <Ethernet.h>// used to communicate with the ethernet controller
#include "cactus_io_BME280_I2C.h"

// Create BME280_I2C object
BME280_I2C bme;

// 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 | 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 BME280 sensor
bme.readSensor(); // read the data from the sensor
client.print("Temperature is ");
client.print(bme.getTemperature_C());
client.println("&nbsp;&#8451;<br><br>");
client.print("Humidity is ");
client.print(bme.getHumidity());
client.println(" %<br><br>");
client.print("Pressure is ");
client.print(bme.getPressure_MB());
client.println(" mb");
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 3 libraries. The first library is Wire.h, which is used for I2C communications. The second one SPI.h is to enable the SPI interface to talk to the ethernet chip. The third is Ethernet.h which acts as an interface to the ethernet side of things within the controller chip.

Next we include the BME280_I2C library before we declare an object of the BME280_I2C. We use this with the Wire.h library as this provides support for the I2C communications with the BME280. This will allow us to get the barometric pressure temperature and humidity.

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 clashing with the ethernet controller.

In line 45 we start the web response that is sent to the web browser. The 200 OK is a HTTP response code and in this case is 200 which means the request is OK. In line 46 we tell the browser that the response content type is text/html.

We have used several html codes in the sketch. On line 57 you can see &nbsp;. This is the html code for a whitespace. We use this to place a whitespace between the temperature and the degrees celsius html code. next code is &#8451; which is the html code for ℃.

The <br> is used to generate a line feed (carriage return ) so that there is a line between each output.

To show the temperature in fahrenheit we need to change the bme280_I2C method getTemperature_C() to getTemperature_F(). We will aslo need to change the html code &#8451; to &#8457; which will display ℉.

For more details on html codes go to the resources toolbox and check out the code tables.

Web HTML Output

The web page should appear as above. The html code is shown below. You can view the html code in your browser by right mouse clicking on the web page and selecting the View page source (Chrome, Firefox, Safari) or View source (Internet Explorer)

Sample web html output for webserver

What's next

In the next section we are going to improve on the look of the web page using css and implement this using the SD card.



License