How to control Arduino projects from online webpages - Wi-fi Client

We would all love to be able to switch on and off our living room lights or control our home air conditioning system from the office. Well, this is possible, thanks to Arduino and the IOT platform. To successfully control Arduino projects from online webpages, one has to understand what a [link http://www.arduino-hacks.com/arduino-redback-simple-client/]Wi-Fi web client[/link] is and how to implement it.

Types of Data
There are two types of online data that you can get using your Arduino and wifi module. They include:
• Data displayed on a webpage
• Data stored in an online database

Therefore, if you want to control an Arduino project via the internet, either display the data on a webpage or store it in a database. Storing data in a database is better if your project is to be used by more than one person or to control more than one device.
For instance, if you want your project to only control your living room lights, you can easily accomplish that using a central webpage that displays the control command you enter. The Arduino can then read the control command from the webpage.

However, if your project is used by several people (A, B, C) to control their living room lights, it would be better to have a database that stores each person’s details and state of his or her lights as shown below. This way each Arduino device in the different homes can get the right commands that have been set by the home owners.


ID Name State
1 Timothy ON
2 Brian OFF
3 Peter ON

Unlike using the Arduino as a webserver, where you send data directly to the wifi module, here you have to fetch the data from the online server. To demonstrate how you can get this data onto your Arduino and use it to control your projects I am going to light and dim an [link http://www.arduino-hacks.com/connecting-an-led-to-arduino/]LED[/link] from a webpage and database hosted online.

Requirements
For this project you will need the following things:
• Arduino board ([link http://www.arduino.cc/en/Main/arduinoBoardUno]Arduino Uno[/link])
• Arduino compatible wifi module ([link http://www.sparkfun.com/products/9954]wifly shield[/link])
• 1 LED
• 1 220? resistor


Hardware connection
[link http://www.arduino-hacks.com/arduino-wifly-shield/]Mount the wifly shield onto the Arduino Uno[/link] and connect the LED to pin number 3. I already did this on a previous post on [link http://www.tek-tips.com/faqs.cfm?fid=7776]controlling an Arduino project using a Wi-Fi webserver[/link], so please check it out and follow the instructions from there. Here is how the final setup should look like.

[img https://s-media-cache-ak0.pinimg.com/originals/9b/c4/18/9bc418fdf5b016ade7c117520b0c2022.jpg]

[img https://s-media-cache-ak0.pinimg.com/originals/30/4c/37/304c37ef3c0d125a0b0db9d4ec37029a.jpg]

Using the Get Request
Before you start coding it is important for you to understand what the get request is. GET is a HTTP method that retrieves the information that is identified by the Request-URI. In layman’s language it is a HTTP method that one uses to get information from an online resource. It is considered safe for retrieval of data but unsafe for updating and adding data to online databases and resources. Therefore, use it only when you are retrieving online data. If you want to add data to an online database, it is advisable to use the POST method. All this is explained in the [link http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9]methods definition[/link] article.

So, to retrieve online data using an Arduino-compatible Wi-Fi module, we use the GET method.
NB: The wifly shield must be set to connect to a wifi hotspot that has internet connection. So, make sure you [link http://www.tek-tips.com/faqs.cfm?fid=7776]change the hotspot ssid and password[/link] in the code to match those of your wifi hotspot.

Reading Data Displayed on a Webpage
You can use your wifly module to read the contents of any kind of webpage. For this example I asked a friend of mine who is a web programmer (Brian Kisese) to create for me a simple page (www.kisese.byethost7.com/ar_test/test_a.php) where I could enter data and display the submitted data onto another URL (www.kisese.byethost7.com/ar_test/process.php).
The data entry page looks like this

[img https://s-media-cache-ak0.pinimg.com/originals/f9/64/fa/f964fa54190febd9fb00f327663e0b72.jpg]

You enter the data which in this case is LED and the value which in this case is either ON or OFF then click on submit. Once you click on submit the display page loads. It looks as shown below.

[img https://s-media-cache-ak0.pinimg.com/originals/d6/6a/e0/d66ae061b956d9c1f1604b0a0d6e4a84.jpg]

You will notice that there are dollar signs before LED and after ON. The reason is to enable me to differentiate the control data from the rest of the page data when I retrieve the page contents on my Arduino.

The wifly module will be retrieving the contents i.e. “welcome to the test page $LED=ON$” plus the code header and other php code that makes up the page. So, it is your job to sift the control data from all the rubble. I will show you how to do that when I explain how to parse the received data.

Code
Here is the code that will enable you to read the page data

[code arduino]#include <SPI.h>
#include <WiFly.h>

WiFlyClient client("kisese.byethost7.com", 80); // declaring the client

void setup() {

Serial.begin(9600);
WiFly.begin();

if (!WiFly.join("yhtomit", "12345678")) {
Serial.println("Association failed.");
while (1) {
// Hang on failure.
}
}

Serial.println("connecting...");

}

void loop() {
if (client.connect()) {
Serial.println("connected");
client.println("GET http://www.kisese.byethost7.com/ar_test/process.php HTTP/1.0"); // get request
client.print("Host: www.kisese.byethost7.com");
client.println("Connection: close");
client.println();

while (client.connected()) {
if (client.available()){
char c = client.read(); // read incoming page data
Serial.print(c);
}
}
delay(100); // give time for all page data to be displayed
client.flush();
client.stop(); // stop client after all data has been recieved
} else {
Serial.println("connection failed");// connection to client has failed
}
}[/code]

Once you upload the code run the serial monitor. The contents of the page should appear as shown below

[img https://s-media-cache-ak0.pinimg.com/originals/2e/b0/85/2eb085e9518146e06db413469625db9d.jpg]

Reading Data From an Online Database
The wifly module can also retrieve data directly from a database. My friend (Brian Kisese) also created a simple test database (http://kisese.byethost7.com/ar_test/test_b.php) that I could use to demonstrate this. This database contains the name of people and the state of their bulb/LED. At least that is how I used it. I used the previous submission form (www.kisese.byethost7.com/ar_test/test_a.php) to enter the database records. I entered the names in the data field and the state in the value field.

The database looks like this:

[img https://s-media-cache-ak0.pinimg.com/originals/f0/e1/c3/f0e1c32da7725d5882b1eefa09e26153.jpg]

The Arduino code uses the get method to access the state of the LED for a specific person, when his or her unique ID provided.

Code

[code arduino]#include <SPI.h>
#include <WiFly.h>

WiFlyClient client("kisese.byethost7.com", 80); // declaring the client

void setup() {

Serial.begin(9600);
WiFly.begin();

if (!WiFly.join("yhtomit", "12345678")) {
Serial.println("Association failed.");
while (1) {
// Hang on failure.
}
}

Serial.println("connecting...");

}

void loop() {
if (client.connect()) {
Serial.println("connected");
client.println("GET http://www.kisese.byethost7.com/ar_test/viewer.php?id=6 HTTP/1.0"); // get request
client.print("Host: www.kisese.byethost7.com");
client.println("Connection: close");
client.println();

while (client.connected()) {
if (client.available()){
char c = client.read(); // read incoming page data
Serial.print(c);
}
}
delay(100); // give time for all page data to be displayed
client.flush();
client.stop(); // stop client after all data has been recieved
} else {
Serial.println("connection failed");// connection to client has failed
}
}[/code]

This is what will be displayed on the serial monitor.

[img https://s-media-cache-ak0.pinimg.com/originals/d2/f9/e9/d2f9e9b85fa34f29c28290a4dc3d6119.jpg]

Parsing the received data
Once you receive the data you have to sift out the control parameters from the rest of the page code and content. That is why I used a dollar signs before and after the data I need. This way you can retrieve the data that is between the $ signs and save it as a string variable that you can manipulate.

I have added the parsing code onto both codes to demonstrate how you can get the control parameters from the incoming page data and use it to switch on and off an LED.

Code

[code arduino]#include <SPI.h>
#include <WiFly.h>

WiFlyClient client("kisese.byethost7.com", 80); // declaring the client

String parsedParameters = ""; // stores incoming control parameters
String command = ""; // holds the incoming command
int ledPin = 3;

void setup() {

Serial.begin(9600);
pinMode(ledPin,OUTPUT);
WiFly.begin();

if (!WiFly.join("yhtomit", "12345678")) {
Serial.println("Association failed.");
while (1) {
// Hang on failure.
}
}

Serial.println("connecting...");

}

void loop() {
uint8_t counter = 0;
if (client.connect()) {
Serial.println("connected");
client.println("GET http://www.kisese.byethost7.com/ar_test/process.php HTTP/1.0"); // get request
client.print("Host: www.kisese.byethost7.com");
client.println("Connection: close");
client.println();

while (client.connected()) {
if (client.available()){
char c = client.read(); // read incoming page data
Serial.print(c);
if (c == '$')counter++; // increase counter by 1 if c = $
if (counter == 1 && c != '$') parsedParameters += c; // get control parameters
}
}
delay(100); // give time for all page data to be displayed
client.flush();
client.stop(); // stop client after all data has been recieved

retrieveCommand(); //get the command

//display the parsed parameters and command
Serial.println("");
Serial.print("Control Parameters: ");Serial.println(parsedParameters);
Serial.print("Command: ");Serial.println(command);
parsedParameters = ""; // clear parameters and wait for others
} else {
Serial.println("connection failed");// connection to client has failed
}
controlLED();
delay(100);
}

void retrieveCommand(){
parsedParameters.trim(); // removes any spaces
Serial.println(parsedParameters);
int startIndex = parsedParameters.indexOf("=");
Serial.println(startIndex);
int endIndex = parsedParameters.indexOf("/n", startIndex);
Serial.println(endIndex);
command = parsedParameters.substring(startIndex+1, endIndex);
}

void controlLED(){
if (command == " ON") digitalWrite(ledPin, HIGH);
else digitalWrite(ledPin, LOW);
}
[/code]


[code arduino]#include <SPI.h>
#include <WiFly.h>

WiFlyClient client("kisese.byethost7.com", 80); // declaring the client

String parsedParameters = ""; // stores incoming control parameters
int ledPin = 3;

void setup() {

Serial.begin(9600);
pinMode(ledPin,OUTPUT);
WiFly.begin();

if (!WiFly.join("yhtomit", "12345678")) {
Serial.println("Association failed.");
while (1) {
// Hang on failure.
}
}

Serial.println("connecting...");

}

void loop() {
uint8_t counter = 0;
if (client.connect()) {
Serial.println("connected");
client.println("GET http://www.kisese.byethost7.com/ar_test/viewer.php?id=6 HTTP/1.0"); // get request
client.print("Host: www.kisese.byethost7.com");
client.println("Connection: close");
client.println();

while (client.connected()) {
if (client.available()){
char c = client.read(); // read incoming page data
Serial.print(c);
if (c == '$')counter++; // increase counter by 1 if c = $
if (counter == 1 && c != '$') parsedParameters += c; // get control parameters
}
}
delay(100); // give time for all page data to be displayed
client.flush();
client.stop(); // stop client after all data has been recieved

//display the parsed parameters and command
Serial.println("");
Serial.print("Control Parameters: ");Serial.println(parsedParameters);
} else {
Serial.println("connection failed");// connection to client has failed
}
controlLED(); // control LED
parsedParameters = ""; // clear parameters and wait for others
delay(100);
}
void controlLED(){
if (parsedParameters == "ON") digitalWrite(ledPin, HIGH);
else digitalWrite(ledPin, LOW);
}
[/code]

In the first code all characters between the two $ signs are stored in the string parsedParameters. The control command is the retrieved from the parsedParameters variable and stored on the string command. If the command is ON the LED goes on otherwise it goes off.
In the second code the characters between the two $ signs are stored in the parsedParameters string. Since the string between the two $ signs is the control command, we use the string parsedParameters to control the LED. If the value is ON the LED goes on, otherwise it stays off.

Explanation
Here is a summary of how the project operates. The wifi module sends a get request to the online server. It then receives the requested page data and the Arduino retrieves the control parameters from the received page data. The control parameters are then used to cause the desired action.

Application
You can manipulate this tutorial to do many things in the corporate world. For instance you can use it in home automation, to control field parameters such as opening valves in a pipeline etc. I once used it to get the results of an online poll and display the winner of the poll on an LED screen. Therefore, the applications are numerous. In fact most IOT projects use the methods described in this tutorial.

Recommendations
There are many other wifi modules that you can use to control Arduino projects from online webpages. I have had experience using the [link http://www.arduino-hacks.com/arduino-wifi-redback-yellowjacket-compatible/]arduino redback[/link] and I must admit it is better than the wifly shield when doing this kind of project. However, its code is not that flexible and therefore not a good board to use for tutorials. You can check it out if you want.