Navigation
Install the app
How to install the app on iOS
Follow along with the video below to see how to install our site as a web app on your home screen.
Note: This feature may not be available in some browsers.
More options
-
Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.
You should upgrade or use an alternative browser.
How to control an Arduino project from a Wi-Fi webserver
Arduino & IoT
How to control an Arduino project from a Wi-Fi webserver
by
yhtomitsy
Posted
(Edited
)
There are several ways though which you can control your Arduino project via wifi. They include:
• Using webpage hosted on the Arduino (Arduino acts as a webserver)
• By sending control parameters directly to the Arduino IP address via a web browser
• Via a webpage hosted online (the Arduino acts as a web client)
Here we are going to look at how to control an Arduino project from a Wi-Fi webserver.
Requirements
To successfully control your Arduino project from a webserver you will need the following hardware:
• Arduino board ([link http://www.arduino.cc/en/Main/arduinoBoardUno]Arduino uno[/link])
• Arduino Wi-Fi shield ([link http://www.sparkfun.com/products/9954]wifly shield[/link])
• 1 LED
• 1 220? resistor
I decided to use an LED for demonstration. The same concept can be used to control a relay to switch on and off a device such as electricity bulb or pump.
Moreover, I am using a wifly shield in this project. There are many other Arduino compatible wifi shields available in the market. They use different libraries and the code might differ to some extent, however the concept is still the same. The same applies to Ethernet shields.
Connection instructions
First mount the [link http://www.arduino-hacks.com/arduino-wifly-shield/]wifly shield onto the Arduino Uno[/link] as show in the photos below.
[img https://s-media-cache-ak0.pinimg.com/originals/2e/4f/2f/2e4f2f180fddfd0cfd44160ba0ce27ea.jpg]
[img https://s-media-cache-ak0.pinimg.com/originals/0d/67/83/0d6783164707252c055586efa6617dce.jpg]
You can do it as I have done above by soldering header pins onto the tx, rx, 10, 11, 12, 13, vin and gnd pins or just solder header pins onto all the pins and mount the wifly shield onto the Arduino uno.
The RN-131C wireless module communicates with the Arduino via [link http://www.arduino.cc/en/Reference/SPI]SPI[/link]. That’s why we need to connect the pins 10, 11, 12 and 13 of the wifly shield to the corresponding Arduino pins.
Once you have successfully mounted the Wifly shield connect the [link http://www.arduino-hacks.com/connecting-an-led-to-arduino/]LED[/link] to pin 3 as shown in the fritzing diagram below.
[img https://s-media-cache-ak0.pinimg.com/originals/30/4c/37/304c37ef3c0d125a0b0db9d4ec37029a.jpg]
Code
Now that the hardware connection is done it is time to tackle the software part. This includes writing the HTML code, writing the Arduino code and configuring the wifly shield. We will start with writing the HTML code.
Html code
Create a simple webpage using HTML. I chose HTML since it is simple to understand. Here is the code I used
[code HTML]<!DOCTYPE html>
<html>
<body>
<h1>Arduino Webserver Example</h1>
<hr>
<form name="input" action="" method="get">
<input type="radio" name="$" value="on">on
<input type="radio" name="$" value="off">off
<input type="submit" value="Submit">
</form>
<hr>
</body>
</html>
[/code]
What the code does is create a page that allows the user to click on an ON or OFF radio button and click on submit to send the on/off command to the Arduino. The on command is “on” and the off command is “off”, obviously. This is how the webpage looks like once it’s done.
[img https://s-media-cache-ak0.pinimg.com/originals/c6/c0/3c/c6c03cb20e1845e37508b1454db29c0d.jpg]
Before including the HTML code to your Arduino sketch you have to get rid of all speech marks (“”) in the HTML code. This is because they will interfere with the Arduino code. You can do this in two ways. Either:
• Replace all the speech marks with apostrophes (‘)
• Place a backslash (\) before each speech mark (\”)
Once that is done. The HTML code is ready to be inserted into the Arduino code.
Arduino code
The Arduino code you use will differ slightly in the setup area, depending on the wifly shield configuration you are using. There are two ways we can configure the wifly shield. The first one would be to use the wifly shield as a hotspot and the second one is using the wifly shield to connect to another wifi hotspot. The Arduino code will differ a little bit depending on the method you use.
Remember to add the [link http://github.com/jmr13031/WiFly-Shield]wifly shield library[/link] to your Arduino IDE.
1. Using the wifly shield to connect to another network
Connecting to another wifi hotspot can be done through Arduino code. So there is no need for you to use the [link http://www.arduino-hacks.com/join-a-wifi-hotspot-with-arduino-wifly/]serial monitor[/link] to configure the wifly shield. Also make sure you change the ssid and passphrase on the code to match those of the hotspot you are connecting to. Here is the code you need.
[code arduino]#include <WiFly.h>
#include <SPI.h>
#define ledPin 3 //led pin
String httpRequest; //holds data parsed from the web browser
boolean msgAvailable=false;
WiFlyServer server(80);
void setup()
{
Serial.begin(9600);
pinMode(ledPin,OUTPUT); //set led pin as output
WiFly.begin();
if(!WiFly.join("yhtomit","12345678")) // change these parameters to match those of your hotspot
{
Serial.println("Association failed");
while(1){
}
}
server.begin();
Serial.println(WiFly.ip());//Display wifly shield ip address
}
void loop()
{
WiFlyClient client = server.available();
if(client)
{
while(client.connected())
{ //while client is connected
if (client.available())
{ //if client is available
char c=client.read();//read data from client
if (msgAvailable)
{
if(c!='\n'&&c!='\r')
httpRequest+=c;//parse data to string if condition is true
}
if (c=='=')
{
msgAvailable=true; //if data sent is '=' intiate data parsing
}
if (c=='\n')
{ //send html code to browser once the client is not available
//header
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(F("Connnection: close"));
client.println();
//body
client.println(F("<!DOCTYPE html>"));
client.println(F("<html>"));
client.println(F("<body>"));
client.println(F("<h1>Arduino Webserver Example</h1>"));
client.println(F("<hr>"));
client.println(F("<form name=\"input\" action=\"\" method=\"get\">"));
client.println(F(" <input type=\"radio\" name=\"$\" value=\"on\">on"));
client.println(F(" <input type=\"radio\" name=\"$\" value=\"off\">off"));
client.println(F(" <input type=\"submit\" value=\"Submit\">"));
client.println(F("</form> "));
client.println(F("<hr>"));
client.println(F("</body>"));
client.println(F("</html>"));
delay(100);
ledControl(); //light or switch off LED
msgAvailable=false;
break;
}
}
}
// give the web browser time to receive the data
delay(100);//delay is very important
client.flush();
client.stop();
}
}
void ledControl()
{
Serial.println(httpRequest);
if(httpRequest[0]=='o'&&httpRequest[1]=='n')
digitalWrite(ledPin,HIGH); //set led on if client sends on
else if(httpRequest[0]=='o'&& httpRequest[1]=='f' && httpRequest[2]=='f')
digitalWrite(ledPin,LOW); //set led off if client sends of
httpRequest="";
}
[/code]
The passphrase and ssid of are on this section of the code:
[code arduino]WiFly.begin();
if(!WiFly.join("yhtomit","12345678"))
{
Serial.println("Association failed");
while(1){
}
}
[/code]
“yhtomit” is the ssid and “12345678” is the password of the hotspot I am connecting to. So change them to match yours.
2. Using the wifly shield as a hotspot
[link http://www.arduino-hacks.com/arduino-wifly-hotspot-setup/]Set the wifly shield as a hotspot[/link] using the serial monitor. You can set your preferred hotspot parameters such as name, IP address and subnet mask.
NB: When you use the wifly shield as a hotspot, the devices you use to access the webpage will have to connect to the wifly shield.
Once you are done, upload the code below to your Arduino.
[code arduino]#include <WiFly.h>
#include <SPI.h>
#define ledPin 3 //led pin
String httpRequest; //holds data parsed from the web browser
boolean msgAvailable=false;
WiFlyServer server(80);
void setup()
{
Serial.begin(9600);
pinMode(ledPin,OUTPUT); //set led pin as output
Serial.println("connecting...");
WiFly.begin();
Serial.println("Done!");
server.begin();
Serial.println(WiFly.ip());//Display wifly shield ip address
}
void loop()
{
WiFlyClient client = server.available();
if(client)
{
while(client.connected())
{ //while client is connected
if (client.available())
{ //if client is available
char c=client.read();//read data from client
if (msgAvailable)
{
if(c != '\n' && c != '\r')
httpRequest+=c;//parse data to string if condition is true
}
if (c=='=')
{
msgAvailable=true; //if data sent is '=' intiate data parsing
}
if (c == '\n')
{ //send html code to browser once the client is not available
//header
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(F("Connnection: close"));
client.println();
//body
client.println(F("<!DOCTYPE html>"));
client.println(F("<html>"));
client.println(F("<body>"));
client.println(F("<h1>Arduino Webserver Example</h1>"));
client.println(F("<hr>"));
client.println(F("<form name=\"input\" action=\"\" method=\"get\">"));
client.println(F(" <input type=\"radio\" name=\"$\" value=\"on\">on"));
client.println(F(" <input type=\"radio\" name=\"$\" value=\"off\">off"));
client.println(F(" <input type=\"submit\" value=\"Submit\">"));
client.println(F("</form> "));
client.println(F("<hr>"));
client.println(F("</body>"));
client.println(F("</html>"));
delay(100);
ledControl(); //light or switch off LED
msgAvailable=false;
break;
}
}
}
// give the web browser time to receive the data
delay(100);//delay is very important
client.flush();
client.stop();
}
}
void ledControl()
{
Serial.println(httpRequest);
if(httpRequest[0]=='o'&&httpRequest[1]=='n')
digitalWrite(ledPin,HIGH); //set led on if client sends on
else if(httpRequest[0]=='o'&& httpRequest[1]=='f' && httpRequest[2]=='f')
digitalWrite(ledPin,LOW); //set led off if client sends of
httpRequest="";
}
[/code]
Basic Operation
When you upload the code, open the serial monitor and wait for a several seconds while the wifly module connects to the hotspot/ initializes the wifi hotspot. The IP address of the wifi shield will then be displayed on the serial monitor.
Type the IP address onto the web browser of your phone or computer that is connected to the same wifi hotspot/connected to the wifly shield hotspot. The HTML webpage will appear. You can then click on the on or off radio buttons and click on submit to switch the LED on or off respectively.
What the Arduino code does is check if there is any client that is trying to connect to its IP address. If there is, it prints out the HTML code onto the client which in this case is the web browser. The Arduino then listens for any activity on the client side, and if there is it starts reading all incoming characters from the client and stores all the characters that come after “=” on the httprequest string variable.
The httprequest string is then checked to see if there is the word “on” or “off” are at the beginning of the httprequest string. If “on” is available, the LED is lit and if “off” is available the LED goes off. So, that is basically how the setup works.
Issues you may come across
If you are using google chrome browser you might notice that the browser gives you a “page not found” error if you change the state of the LED quickly. It does this because the google chrome browser tries to find the fav.ico file from your HTML code every time you access the page. So the best advice would be to wait for the green light P104 on the wifly shield to blink steadily, before sending another command. I did not experience that problem with other browsers like Mozilla and opera.
Moreover, hardware connection above does not work with the Arduino mega because its SPI pins are not 10,11,12,13. Instead they are 50,51,52,53. Here is how you should connect the [link http://www.arduino-hacks.com/connecting-wifly-shield-arduino-mega/]wifly shield to an Arduino mega[/link].
• Using webpage hosted on the Arduino (Arduino acts as a webserver)
• By sending control parameters directly to the Arduino IP address via a web browser
• Via a webpage hosted online (the Arduino acts as a web client)
Here we are going to look at how to control an Arduino project from a Wi-Fi webserver.
Requirements
To successfully control your Arduino project from a webserver you will need the following hardware:
• Arduino board ([link http://www.arduino.cc/en/Main/arduinoBoardUno]Arduino uno[/link])
• Arduino Wi-Fi shield ([link http://www.sparkfun.com/products/9954]wifly shield[/link])
• 1 LED
• 1 220? resistor
I decided to use an LED for demonstration. The same concept can be used to control a relay to switch on and off a device such as electricity bulb or pump.
Moreover, I am using a wifly shield in this project. There are many other Arduino compatible wifi shields available in the market. They use different libraries and the code might differ to some extent, however the concept is still the same. The same applies to Ethernet shields.
Connection instructions
First mount the [link http://www.arduino-hacks.com/arduino-wifly-shield/]wifly shield onto the Arduino Uno[/link] as show in the photos below.
[img https://s-media-cache-ak0.pinimg.com/originals/2e/4f/2f/2e4f2f180fddfd0cfd44160ba0ce27ea.jpg]
[img https://s-media-cache-ak0.pinimg.com/originals/0d/67/83/0d6783164707252c055586efa6617dce.jpg]
You can do it as I have done above by soldering header pins onto the tx, rx, 10, 11, 12, 13, vin and gnd pins or just solder header pins onto all the pins and mount the wifly shield onto the Arduino uno.
The RN-131C wireless module communicates with the Arduino via [link http://www.arduino.cc/en/Reference/SPI]SPI[/link]. That’s why we need to connect the pins 10, 11, 12 and 13 of the wifly shield to the corresponding Arduino pins.
Once you have successfully mounted the Wifly shield connect the [link http://www.arduino-hacks.com/connecting-an-led-to-arduino/]LED[/link] to pin 3 as shown in the fritzing diagram below.
[img https://s-media-cache-ak0.pinimg.com/originals/30/4c/37/304c37ef3c0d125a0b0db9d4ec37029a.jpg]
Code
Now that the hardware connection is done it is time to tackle the software part. This includes writing the HTML code, writing the Arduino code and configuring the wifly shield. We will start with writing the HTML code.
Html code
Create a simple webpage using HTML. I chose HTML since it is simple to understand. Here is the code I used
[code HTML]<!DOCTYPE html>
<html>
<body>
<h1>Arduino Webserver Example</h1>
<hr>
<form name="input" action="" method="get">
<input type="radio" name="$" value="on">on
<input type="radio" name="$" value="off">off
<input type="submit" value="Submit">
</form>
<hr>
</body>
</html>
[/code]
What the code does is create a page that allows the user to click on an ON or OFF radio button and click on submit to send the on/off command to the Arduino. The on command is “on” and the off command is “off”, obviously. This is how the webpage looks like once it’s done.
[img https://s-media-cache-ak0.pinimg.com/originals/c6/c0/3c/c6c03cb20e1845e37508b1454db29c0d.jpg]
Before including the HTML code to your Arduino sketch you have to get rid of all speech marks (“”) in the HTML code. This is because they will interfere with the Arduino code. You can do this in two ways. Either:
• Replace all the speech marks with apostrophes (‘)
• Place a backslash (\) before each speech mark (\”)
Once that is done. The HTML code is ready to be inserted into the Arduino code.
Arduino code
The Arduino code you use will differ slightly in the setup area, depending on the wifly shield configuration you are using. There are two ways we can configure the wifly shield. The first one would be to use the wifly shield as a hotspot and the second one is using the wifly shield to connect to another wifi hotspot. The Arduino code will differ a little bit depending on the method you use.
Remember to add the [link http://github.com/jmr13031/WiFly-Shield]wifly shield library[/link] to your Arduino IDE.
1. Using the wifly shield to connect to another network
Connecting to another wifi hotspot can be done through Arduino code. So there is no need for you to use the [link http://www.arduino-hacks.com/join-a-wifi-hotspot-with-arduino-wifly/]serial monitor[/link] to configure the wifly shield. Also make sure you change the ssid and passphrase on the code to match those of the hotspot you are connecting to. Here is the code you need.
[code arduino]#include <WiFly.h>
#include <SPI.h>
#define ledPin 3 //led pin
String httpRequest; //holds data parsed from the web browser
boolean msgAvailable=false;
WiFlyServer server(80);
void setup()
{
Serial.begin(9600);
pinMode(ledPin,OUTPUT); //set led pin as output
WiFly.begin();
if(!WiFly.join("yhtomit","12345678")) // change these parameters to match those of your hotspot
{
Serial.println("Association failed");
while(1){
}
}
server.begin();
Serial.println(WiFly.ip());//Display wifly shield ip address
}
void loop()
{
WiFlyClient client = server.available();
if(client)
{
while(client.connected())
{ //while client is connected
if (client.available())
{ //if client is available
char c=client.read();//read data from client
if (msgAvailable)
{
if(c!='\n'&&c!='\r')
httpRequest+=c;//parse data to string if condition is true
}
if (c=='=')
{
msgAvailable=true; //if data sent is '=' intiate data parsing
}
if (c=='\n')
{ //send html code to browser once the client is not available
//header
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(F("Connnection: close"));
client.println();
//body
client.println(F("<!DOCTYPE html>"));
client.println(F("<html>"));
client.println(F("<body>"));
client.println(F("<h1>Arduino Webserver Example</h1>"));
client.println(F("<hr>"));
client.println(F("<form name=\"input\" action=\"\" method=\"get\">"));
client.println(F(" <input type=\"radio\" name=\"$\" value=\"on\">on"));
client.println(F(" <input type=\"radio\" name=\"$\" value=\"off\">off"));
client.println(F(" <input type=\"submit\" value=\"Submit\">"));
client.println(F("</form> "));
client.println(F("<hr>"));
client.println(F("</body>"));
client.println(F("</html>"));
delay(100);
ledControl(); //light or switch off LED
msgAvailable=false;
break;
}
}
}
// give the web browser time to receive the data
delay(100);//delay is very important
client.flush();
client.stop();
}
}
void ledControl()
{
Serial.println(httpRequest);
if(httpRequest[0]=='o'&&httpRequest[1]=='n')
digitalWrite(ledPin,HIGH); //set led on if client sends on
else if(httpRequest[0]=='o'&& httpRequest[1]=='f' && httpRequest[2]=='f')
digitalWrite(ledPin,LOW); //set led off if client sends of
httpRequest="";
}
[/code]
The passphrase and ssid of are on this section of the code:
[code arduino]WiFly.begin();
if(!WiFly.join("yhtomit","12345678"))
{
Serial.println("Association failed");
while(1){
}
}
[/code]
“yhtomit” is the ssid and “12345678” is the password of the hotspot I am connecting to. So change them to match yours.
2. Using the wifly shield as a hotspot
[link http://www.arduino-hacks.com/arduino-wifly-hotspot-setup/]Set the wifly shield as a hotspot[/link] using the serial monitor. You can set your preferred hotspot parameters such as name, IP address and subnet mask.
NB: When you use the wifly shield as a hotspot, the devices you use to access the webpage will have to connect to the wifly shield.
Once you are done, upload the code below to your Arduino.
[code arduino]#include <WiFly.h>
#include <SPI.h>
#define ledPin 3 //led pin
String httpRequest; //holds data parsed from the web browser
boolean msgAvailable=false;
WiFlyServer server(80);
void setup()
{
Serial.begin(9600);
pinMode(ledPin,OUTPUT); //set led pin as output
Serial.println("connecting...");
WiFly.begin();
Serial.println("Done!");
server.begin();
Serial.println(WiFly.ip());//Display wifly shield ip address
}
void loop()
{
WiFlyClient client = server.available();
if(client)
{
while(client.connected())
{ //while client is connected
if (client.available())
{ //if client is available
char c=client.read();//read data from client
if (msgAvailable)
{
if(c != '\n' && c != '\r')
httpRequest+=c;//parse data to string if condition is true
}
if (c=='=')
{
msgAvailable=true; //if data sent is '=' intiate data parsing
}
if (c == '\n')
{ //send html code to browser once the client is not available
//header
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(F("Connnection: close"));
client.println();
//body
client.println(F("<!DOCTYPE html>"));
client.println(F("<html>"));
client.println(F("<body>"));
client.println(F("<h1>Arduino Webserver Example</h1>"));
client.println(F("<hr>"));
client.println(F("<form name=\"input\" action=\"\" method=\"get\">"));
client.println(F(" <input type=\"radio\" name=\"$\" value=\"on\">on"));
client.println(F(" <input type=\"radio\" name=\"$\" value=\"off\">off"));
client.println(F(" <input type=\"submit\" value=\"Submit\">"));
client.println(F("</form> "));
client.println(F("<hr>"));
client.println(F("</body>"));
client.println(F("</html>"));
delay(100);
ledControl(); //light or switch off LED
msgAvailable=false;
break;
}
}
}
// give the web browser time to receive the data
delay(100);//delay is very important
client.flush();
client.stop();
}
}
void ledControl()
{
Serial.println(httpRequest);
if(httpRequest[0]=='o'&&httpRequest[1]=='n')
digitalWrite(ledPin,HIGH); //set led on if client sends on
else if(httpRequest[0]=='o'&& httpRequest[1]=='f' && httpRequest[2]=='f')
digitalWrite(ledPin,LOW); //set led off if client sends of
httpRequest="";
}
[/code]
Basic Operation
When you upload the code, open the serial monitor and wait for a several seconds while the wifly module connects to the hotspot/ initializes the wifi hotspot. The IP address of the wifi shield will then be displayed on the serial monitor.
Type the IP address onto the web browser of your phone or computer that is connected to the same wifi hotspot/connected to the wifly shield hotspot. The HTML webpage will appear. You can then click on the on or off radio buttons and click on submit to switch the LED on or off respectively.
What the Arduino code does is check if there is any client that is trying to connect to its IP address. If there is, it prints out the HTML code onto the client which in this case is the web browser. The Arduino then listens for any activity on the client side, and if there is it starts reading all incoming characters from the client and stores all the characters that come after “=” on the httprequest string variable.
The httprequest string is then checked to see if there is the word “on” or “off” are at the beginning of the httprequest string. If “on” is available, the LED is lit and if “off” is available the LED goes off. So, that is basically how the setup works.
Issues you may come across
If you are using google chrome browser you might notice that the browser gives you a “page not found” error if you change the state of the LED quickly. It does this because the google chrome browser tries to find the fav.ico file from your HTML code every time you access the page. So the best advice would be to wait for the green light P104 on the wifly shield to blink steadily, before sending another command. I did not experience that problem with other browsers like Mozilla and opera.
Moreover, hardware connection above does not work with the Arduino mega because its SPI pins are not 10,11,12,13. Instead they are 50,51,52,53. Here is how you should connect the [link http://www.arduino-hacks.com/connecting-wifly-shield-arduino-mega/]wifly shield to an Arduino mega[/link].
Please Note: 1 is Bad, 10 is Good :-)
Part and Inventory Search
-
This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.