Getting sensor data from an Arduino and sending it over the Internet to display the data in a graph can be a rather challenging task. This task is made extremely easy when using a IoT (Internet of Things) web service instead of setting up the Arduino to host a web page that contains the sensor data graph. Any Arduino board that has Ethernet on it or any Arduino board with an Ethernet shield can be used to make an Arduino Internet graph.
Arduino Internet Graph
An Arduino Internet graph can easily be made by using the ThingSpeak platform to do all the hard work like capturing the sensor data and plotting it to a graph. The image below shows Arduino analog pin A0 voltage plotted on a graph that is displayed in an account on the ThingSpeak website.
Arduino Internet Graph
How it Works
A ThingSpeak library is installed in the Arduino IDE using the Arduino library manager. The library provides functions that can be used to communicate with the ThingSpeak web server.
A free account can be opened on the ThingSpeak website which allows channels to be created. Data from the Arduino, which can be sensor data, voltage, or any other data, can then be sent to the channel and plotted on a graph at the website. Each channel can have up to eight fields, enabling data from up to eight sensors to be sent over one channel.
When using ThingSpeak, no SD card is needed and the Arduino and Ethernet shield or other Arduino board that has Internet capabilities is set up as a client rather than a server. No special Internet router settings need to be made when the Arduino is used as an Internet client, making setup and use very easy.
The tutorial on how to send text from a web page to an Arduino LCD sets the Arduino, Ethernet shield and micro SD card up as a web server with LCD attached. Two HTML text inputs allow text to be sent to each line of the LCD from the web page hosted by the Arduino.
The image below shows the web page in a web browser that has sent text to the LCD.
Sending Text from a Web Page to Arduino LCD
Text is sent to the Arduino from the web browser over the network with an HTTP GET request when the button on the web page is clicked.
An Arduino and Ethernet shield are used as a web server to host a web page that contains a text box. Text can be typed into the web page text box using a web browser and sent to the Arduino by clicking a button on the web page.
An HTML textarea is used in an HTML form to create the text box. JavaScript is used to send the text to the Arduino using a HTTP GET request when the button on the web page is clicked. This is useful for any Arduino project that needs to receive text from a web page using a text box.
The Arduino code for this project follows the format of the Ajax I/O web server from the Arduino Ethernet shield web server tutorial, except that it calls the JavaScript function that sends the GET request when the button on the web page is clicked rather than periodically sending the GET request to the Arduino web server.
The video below shows the Arduino web page being accessed by a web browser and text being sent to the Arduino.
Arduino Hardware, Software and HTML Page Setup
Hardware
An Arduino Uno and Arduino Ethernet shield with 2GB micro SD card were used to test the project. Most Arduino boards that are compatible with the Ethernet shield should work.
Setup
Copy the HTML from below to a file called index.htm on the micro SD card and insert it into the Ethernet shield micro SD card socket. Load the Arduino sketch from below to the Arduino — first change the MAC and IP address in the sketch to suit your own network. In the Arduino IDE Serial Monitor window, set the baud rate at the bottom of the window to 115200.
Running the Project
With the Arduino connected to the Ethernet network, first open the Serial Monitor window, then open a web browser and surf to the IP address set in the sketch. Text can be typed into the text box on the web page and sent to the Arduino. The Arduino will display the text in the Serial Monitor window if the line of text is not too long (the length is set by buffer arrays in the Arduino code).
Arduino Text Box Sketch
The Arduino text box sketch listing called text_area is shown below. Copy and paste it to the Arduino IDE.
/*-------------------------------------------------------------- Program: text_area Description: Arduino web server that gets text from an HTML textarea text box on the hosted web page. The web page is stored on the micro SD card. Date: 23 June 2015 Author: W.A. Smith, http://startingelectronics.org--------------------------------------------------------------*/
#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
// size of buffer used to capture HTTP requests
#define REQ_BUF_SZ 90
// size of buffer that stores the incoming string
#define TXT_BUF_SZ 50
// MAC address from Ethernet shield sticker under boardbyte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 0, 20); // IP address, may need to change depending on networkEthernetServer server(80); // create a server at port 80File webFile; // the web page file on the SD cardchar HTTP_req[REQ_BUF_SZ] = {0}; // buffered HTTP request stored as null terminated stringchar req_index = 0; // index into HTTP_req bufferchar txt_buf[TXT_BUF_SZ] = {0}; // buffer to save text tovoidsetup()
{
// disable Ethernet chippinMode(10, OUTPUT);
digitalWrite(10, HIGH);
Serial.begin(115200); // for debugging// initialize SD cardSerial.println("Initializing SD card...");
if (!SD.begin(4)) {
Serial.println("ERROR - SD card initialization failed!");
return; // init failed
}
Serial.println("SUCCESS - SD card initialized.");
// check for index.htm fileif (!SD.exists("index.htm")) {
Serial.println("ERROR - Can't find index.htm file!");
return; // can't find index file
}
Serial.println("SUCCESS - Found index.htm file.");
Ethernet.begin(mac, ip); // initialize Ethernet device
server.begin(); // start to listen for clients
}
voidloop()
{
EthernetClient client = server.available(); // try to get clientif (client) { // got client?boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) { // client data available to readchar c = client.read(); // read 1 byte (character) from client// limit the size of the stored received HTTP request// buffer first part of HTTP request in HTTP_req array (string)// leave last element in array as 0 to null terminate string (REQ_BUF_SZ - 1)if (req_index < (REQ_BUF_SZ - 1)) {
HTTP_req[req_index] = c; // save HTTP request character
req_index++;
}
// last line of client request is blank and ends with \n// respond to client only after last line receivedif (c == '\n' && currentLineIsBlank) {
// send a standard http response header
client.println("HTTP/1.1 200 OK");
// remainder of header follows below, depending on if// web page or XML page is requested// Ajax request - send XML fileif (StrContains(HTTP_req, "ajax_inputs")) {
// send rest of HTTP header
client.println("Content-Type: text/xml");
client.println("Connection: keep-alive");
client.println();
// print the received text to the Serial Monitor window// if received with the incoming HTTP GET stringif (GetText(txt_buf, TXT_BUF_SZ)) {
Serial.println("\r\nReceived Text:");
Serial.println(txt_buf);
}
}
else { // web page request// send rest of HTTP header
client.println("Content-Type: text/html");
client.println("Connection: keep-alive");
client.println();
// send web page
webFile = SD.open("index.htm"); // open web page fileif (webFile) {
while(webFile.available()) {
client.write(webFile.read()); // send web page to client
}
webFile.close();
}
}
// reset buffer index and all buffer elements to 0
req_index = 0;
StrClear(HTTP_req, REQ_BUF_SZ);
break;
}
// every line of text received from the client ends with \r\nif (c == '\n') {
// last character on line of received text// starting new line with next character read
currentLineIsBlank = true;
}
elseif (c != '\r') {
// a text character was received from client
currentLineIsBlank = false;
}
} // end if (client.available())
} // end while (client.connected())delay(1); // give the web browser time to receive the data
client.stop(); // close the connection
} // end if (client)
}
// extract text from the incoming HTTP GET data string// returns true only if text was received// the string must start with "&txt=" and end with "&end"// if the string is too long for the HTTP_req buffer and// "&end" is cut off, then the function returns falseboolean GetText(char *txt, int len)
{
boolean got_text = false; // text received flagchar *str_begin; // pointer to start of textchar *str_end; // pointer to end of textint str_len = 0;
int txt_index = 0;
// get pointer to the beginning of the text
str_begin = strstr(HTTP_req, "&txt=");
if (str_begin != NULL) {
str_begin = strstr(str_begin, "="); // skip to the =
str_begin += 1; // skip over the =
str_end = strstr(str_begin, "&end");
if (str_end != NULL) {
str_end[0] = 0; // terminate the string
str_len = strlen(str_begin);
// copy the string to the txt buffer and replace %20 with space ' 'for (int i = 0; i < str_len; i++) {
if (str_begin[i] != '%') {
if (str_begin[i] == 0) {
// end of stringbreak;
}
else {
txt[txt_index++] = str_begin[i];
if (txt_index >= (len - 1)) {
// keep the output string within boundsbreak;
}
}
}
else {
// replace %20 with a spaceif ((str_begin[i + 1] == '2') && (str_begin[i + 2] == '0')) {
txt[txt_index++] = ' ';
i += 2;
if (txt_index >= (len - 1)) {
// keep the output string within boundsbreak;
}
}
}
}
// terminate the string
txt[txt_index] = 0;
got_text = true;
}
}
return got_text;
}
// sets every element of str to 0 (clears array)void StrClear(char *str, charlength)
{
for (int i = 0; i < length; i++) {
str[i] = 0;
}
}
// searches for the string sfind in the string str// returns 1 if string found// returns 0 if string not foundchar StrContains(char *str, char *sfind)
{
char found = 0;
char index = 0;
char len;
len = strlen(str);
if (strlen(sfind) > len) {
return 0;
}
while (index < len) {
if (str[index] == sfind[found]) {
found++;
if (strlen(sfind) == found) {
return 1;
}
}
else {
found = 0;
}
index++;
}
return 0;
}
Text Box HTML Page
Copy the HTML below and save it to a file called index.htm on the SD card.
JavaScript embedded in the web page sends the text from the text box to the Arduino as part of a HTTP GET request when the button on the web page is clicked.
Format of the String
This image shows what the string looks like before it is sent to the Arduino.
HTML Text Box and Text String
The text from the text box is put between &txt= and &end=end before being sent. The Arduino uses this text to find the string in the incoming HTTP GET request.
When the text reaches the Arduino, it has been altered with the spaces in the text changed to %20 as shown in the image below.
String from the Text Box Received by Arduino
The Arduino sketch must change %20 in the text back to spaces.
Processing the String in the Arduino Sketch
The function GetText() is used to get the text box string from the incoming HTTP GET request. The HTTP_req array holds the beginning of the incoming GET request as shown in the above image — starting with GET /ajax_inputs&txt…
The GetText() function first gets a pointer to the beginning of the text box string by searching for &txt= and then terminating the string when it finds &end. A for loop is used to copy the string to the txt array (which is a pointer to the global txt_buf array). While the copying is taking place, the code looks for spaces that are encoded as %20 and changes them into spaces.
Limitations of the Arduino Text Box Sketch
The sketch is limited by the size of the buffer that saves the incoming HTTP GET request as well as the size of the array that stores the string from the text box. These two array buffers have been kept small so that the code will be able to run on an Arduino Uno.
If the string from the text box is too big for the HTTP buffer on the Arduino so that the string is truncated before the terminating &end, then the text will not be displayed in the Serial Monitor window because the GetText() function will return false.
This is just a simple demonstration that uses GET to send text. It would be better to send the text using POST instead and this will be added as a tutorial at a later stage.
An Arduino and Ethernet shield with SD card are used as a web server to host a page that allows a user to select hour and minute values from two HTML drop-down select boxes. The time sent to the Arduino can be used to set a real-time clock from a web page or for other time related purposes.
To demonstrate that the Arduino is getting the time values from the web page, they are displayed in the Serial Monitor window of the Arduino IDE. JavaScript in the hosted HTML web page is used to send the hour and minute time values to the Arduino periodically. This allows the code to easily be integrated with the Arduino Ajax web server code. The code could also be adapted to send the time only when a button is clicked.
This video shows the sketch running and the selected time values from the web page being sent to the Serial Monitor window:
Web Server Hardware
An Arduino Uno, Ethernet shield and 2GB micro SD card were used for testing the code. Any Arduino board that is compatible with the Ethernet shield should work.
Setting up the Web Server
The Arduino sketch below must be loaded to the Arduino with Ethernet shield. The HTML web page from below must be copied to a file called index.htm on the micro SD card. Insert the micro SD card into the socket on the Ethernet shield.
Arduino Web Server Sketch
Copy this code and paste it to the Arduino IDE for loading to the Arduino board with Ethernet shield and SD card. Change the MAC and IP address to suit your own system.
/*-------------------------------------------------------------- Program: drop_down_select Description: Arduino web server that gets hour and minute from two drop-down select boxes on an HTML page. The web page is stored on the micro SD card. Date: 22 June 2015 Author: W.A. Smith, http://startingelectronics.org--------------------------------------------------------------*/
#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
// size of buffer used to capture HTTP requests
#define REQ_BUF_SZ 60
// MAC address from Ethernet shield sticker under boardbyte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 0, 20); // IP address, may need to change depending on networkEthernetServer server(80); // create a server at port 80File webFile; // the web page file on the SD cardchar HTTP_req[REQ_BUF_SZ] = {0}; // buffered HTTP request stored as null terminated stringchar req_index = 0; // index into HTTP_req buffervoidsetup()
{
// disable Ethernet chippinMode(10, OUTPUT);
digitalWrite(10, HIGH);
Serial.begin(115200); // for debugging// initialize SD cardSerial.println("Initializing SD card...");
if (!SD.begin(4)) {
Serial.println("ERROR - SD card initialization failed!");
return; // init failed
}
Serial.println("SUCCESS - SD card initialized.");
// check for index.htm fileif (!SD.exists("index.htm")) {
Serial.println("ERROR - Can't find index.htm file!");
return; // can't find index file
}
Serial.println("SUCCESS - Found index.htm file.");
Ethernet.begin(mac, ip); // initialize Ethernet device
server.begin(); // start to listen for clients
}
voidloop()
{
byte hour;
byte minute;
EthernetClient client = server.available(); // try to get clientif (client) { // got client?boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) { // client data available to readchar c = client.read(); // read 1 byte (character) from client// limit the size of the stored received HTTP request// buffer first part of HTTP request in HTTP_req array (string)// leave last element in array as 0 to null terminate string (REQ_BUF_SZ - 1)if (req_index < (REQ_BUF_SZ - 1)) {
HTTP_req[req_index] = c; // save HTTP request character
req_index++;
}
// last line of client request is blank and ends with \n// respond to client only after last line receivedif (c == '\n' && currentLineIsBlank) {
// send a standard http response header
client.println("HTTP/1.1 200 OK");
// remainder of header follows below, depending on if// web page or XML page is requested// Ajax request - send XML fileif (StrContains(HTTP_req, "ajax_inputs")) {
// send rest of HTTP header
client.println("Content-Type: text/xml");
client.println("Connection: keep-alive");
client.println();
// print the received hour and minute to the Serial Monitor window// if received with the incoming HTTP GET stringif (GetTime(&hour, &minute)) {
Serial.print("Hour: ");
Serial.println(hour);
Serial.print("Minute: ");
Serial.println(minute);
}
}
else { // web page request// send rest of HTTP header
client.println("Content-Type: text/html");
client.println("Connection: keep-alive");
client.println();
// send web page
webFile = SD.open("index.htm"); // open web page fileif (webFile) {
while(webFile.available()) {
client.write(webFile.read()); // send web page to client
}
webFile.close();
}
}
// reset buffer index and all buffer elements to 0
req_index = 0;
StrClear(HTTP_req, REQ_BUF_SZ);
break;
}
// every line of text received from the client ends with \r\nif (c == '\n') {
// last character on line of received text// starting new line with next character read
currentLineIsBlank = true;
}
elseif (c != '\r') {
// a text character was received from client
currentLineIsBlank = false;
}
} // end if (client.available())
} // end while (client.connected())delay(1); // give the web browser time to receive the data
client.stop(); // close the connection
} // end if (client)
}
// extract hour and minute from the incoming HTTP GET data string// returns true only if both the hour and minute have been receivedboolean GetTime(byte *hr, byte *mn)
{
boolean valid_time = false; // hour and minute received flagchar *str_part; // pointer to part of the HTTP_req stringchar str_time[3] = {0}; // used to extract the times from HTTP_req string// get pointer to the beginning of hour data in string
str_part = strstr(HTTP_req, "&h=");
if (str_part != NULL) {
// get the hour from the string
str_time[0] = str_part[3];
str_time[1] = str_part[4];
*hr = atoi(str_time);
// get pointer to the beginning of minute data in string
str_part = strstr(HTTP_req, "&m=");
if (str_part != NULL) {
// get the minute from the string
str_time[0] = str_part[3];
str_time[1] = str_part[4];
*mn = atoi(str_time);
// got the hour and the minute
valid_time = true;
}
}
return valid_time;
}
// sets every element of str to 0 (clears array)void StrClear(char *str, charlength)
{
for (int i = 0; i < length; i++) {
str[i] = 0;
}
}
// searches for the string sfind in the string str// returns 1 if string found// returns 0 if string not foundchar StrContains(char *str, char *sfind)
{
char found = 0;
char index = 0;
char len;
len = strlen(str);
if (strlen(sfind) > len) {
return 0;
}
while (index < len) {
if (str[index] == sfind[found]) {
found++;
if (strlen(sfind) == found) {
return 1;
}
}
else {
found = 0;
}
index++;
}
return 0;
}
Arduino Hosted HTML Page
This code gets copied to the index.htm file on the micro SD card.
Running the Web Server Drop-down Select Box Project
With the index.htm file on the SD card and the sketch loaded to the Arduino, open the Serial Monitor window and then use a web browser to surf to the IP address that is set in the sketch.
Change the hour and minute values in the drop-down boxes to valid time values to see the hour and minute displayed in the Serial Monitor window. Both the hour and minute must be set to valid values before anything is displayed.
The new Arduino live cricket score ticker code improves on the previous version of the ticker by saving the XML live cricket results to a file on an SD card. This allows the cricket score data to be randomly accessed for the desired data. A micro SD card inserted into the micro SD card socket on the Arduino Ethernet shield is used for saving the XML file.
Parsing XML using Arduino
XML parsing functions used in this project can be used with similar Arduino projects that need to parse XML files. The functions are used to search for specified tags in the XML file and if found can then be used to find child tags in the parent tags. The functions are used to drill down to the desired child tag in order to extract the required data from these tags.
With the XML file saved to SD card, it is possible for a sketch to reliably parse the file even if the order of the tag attributes is changed. The previous ticker code tried to parse the XML file on the fly as it gets sent to the Arduino and therefore relies on the tags and attributes being in a specific order.
Memory Limitations
An Arduino MEGA is needed for the new ticker because the Arduino Uno does not have enough memory to run the sketch. The blog post that compares the amount of memory used by various sketches shows some example sketches and how much of the Arduino Uno memory they use. From this comparison, it can be seen that the Arduino Uno memory can get used up fairly quickly as sketches start to use more libraries and get slightly more complex than some of the example sketches.
