×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Internet of Things (IoT) General Discussion FAQ

Arduino & IoT

How to control an Arduino project from a Wi-Fi webserver by yhtomitsy
Posted: 12 Mar 15 (Edited 16 Mar 15)

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 (Arduino uno)
• Arduino Wi-Fi shield (wifly shield)
• 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 wifly shield onto the Arduino Uno as show in the photos below.





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 SPI. 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 LED to pin 3 as shown in the fritzing diagram below.



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> 

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.



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 wifly shield library 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 serial monitor 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="";
} 

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){
    }
  } 

“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
Set the wifly shield as a hotspot 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="";
} 

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 wifly shield to an Arduino mega.




Back to Internet of Things (IoT) General Discussion FAQ Index
Back to Internet of Things (IoT) General Discussion Forum

My Archive

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close