Go Down

Topic: Arduino Web Server + Wi Fi Shield (Read 2179 times) previous topic - next topic



I've been searching for some tutorials on how to write the code for a basic web server in the wi-fi shield, where I can control one LED and simply turn it on/off.

Everything i've found, is with the ethernet shield but as I said, im using the  new wifi shield.

I used the example library from arduino named "wifiwebserver", I created the web server, but now I want to add some content, the buttons, etc, etc.

What should I write?? If you got any tutorial please let me know!


Code: [Select]
 Web  Server

A simple web server that shows the value of the analog input pins.
using a WiFi shield.

This example is written for a network using WPA encryption. For
WEP or WPA, change the Wifi.begin() call accordingly.

* WiFi shield attached
* Analog inputs attached to pins A0 through A5 (optional)

created 13 July 2010
by dlf (Metodo2 srl)
modified 31 May 2012
by Tom Igoe
#include <SPI.h>
#include <WiFi.h>

char ssid[] = "yourNetwork";      //  your network SSID (name)
char pass[] = "secretPassword";   // your network password
int keyIndex = 0;                 // your network key Index number (needed only for WEP)

int status = WL_IDLE_STATUS;

WiFiServer server(80);

void setup() {
 //Initialize serial and wait for port to open:
 while (!Serial) {
   ; // wait for serial port to connect. Needed for Leonardo only
 // check for the presence of the shield:
 if (WiFi.status() == WL_NO_SHIELD) {
   Serial.println("WiFi shield not present");
   // don't continue:
 // attempt to connect to Wifi network:
 while ( status != WL_CONNECTED) {
   Serial.print("Attempting to connect to SSID: ");
   // Connect to WPA/WPA2 network. Change this line if using open or WEP network:    
   status = WiFi.begin(ssid, pass);

   // wait 10 seconds for connection:
 // you're connected now, so print out the status:

void loop() {
 // listen for incoming clients
 WiFiClient 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();
       // 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("Connnection: close");
         client.println("<!DOCTYPE HTML>");
         // add a meta refresh tag, so the browser pulls again every 5 seconds:
         client.println("<meta http-equiv=\"refresh\" content=\"5\">");
         // output the value of each analog input pin
         for (int analogChannel = 0; analogChannel < 6; analogChannel++) {
           int sensorReading = analogRead(analogChannel);
           client.print("analog input ");
           client.print(" is ");
           client.println("<br />");      
       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
     // close the connection:
     Serial.println("client disonnected");

void printWifiStatus() {
 // print the SSID of the network you're attached to:
 Serial.print("SSID: ");

 // print your WiFi shield's IP address:
 IPAddress ip = WiFi.localIP();
 Serial.print("IP Address: ");

 // print the received signal strength:
 long rssi = WiFi.RSSI();
 Serial.print("signal strength (RSSI):");
 Serial.println(" dBm");


What does that code do? What appears in your browser when you connect to the Arduino?

If what appears is:
analog input 0 is xxx
analog input 1 is xxx
etc., then the code is working fine, and your issue is one of sending the proper data (not an Arduino issue) and of parsing the code returned to the Arduino.

Since we don't know how you are going to change the server, we can't offer much help on the parsing end. However, it should be no different from using the ethernet shield. The data stream out is the same; the data stream in is the same. The difference is in how the data gets out and in.

Some inspiration for the non-Arduino parts of your question:
The art of getting good answers lies in asking good questions.


You might use the method below to capture the browser get request as "readstring", and the check readstring for control components like "on" and "off".

Code: [Select]
//zoomkat 4-1-12
//simple button GET for servo and pin 5
//for use with IDE 1.0
//open serial monitor to see what the arduino receives
//use the \ slash to escape the " in the html, or use ' instead of "
//address will look like when submited
//for use with W5100 based ethernet shields

#include <SPI.h>
#include <Ethernet.h>

#include <Servo.h>
Servo myservo;  // create servo object to control a servo

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 102 }; // ip in lan
byte gateway[] = { 192, 168, 1, 1 }; // internet access via router
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
EthernetServer server(84); //server port

String readString;


void setup(){

  pinMode(5, OUTPUT); //pin selected to control
  //start Ethernet
  Ethernet.begin(mac, ip, gateway, gateway, subnet);

  myservo.write(90); //set initial servo position if desired
  myservo.attach(7);  //the pin for the servo control
  //enable serial data print
  Serial.println("server servo/pin 5 test 1.0"); // so I can keep track of what is loaded

void loop(){
  // Create a client connection
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

        //read char by char HTTP request
        if (readString.length() < 100) {

          //store characters to string
          readString += c;

        //if HTTP request has ended
        if (c == '\n') {

          Serial.println(readString); //print to serial monitor for debuging

          client.println("HTTP/1.1 200 OK"); //send new page
          client.println("Content-Type: text/html");

          client.println("<TITLE>Arduino GET test page</TITLE>");

          client.println("<H1>Zoomkat's simple Arduino button</H1>");
          client.println("<a href='/?on'>ON</a>");
          client.println("<a href='/?off'>OFF</a>");


          //stopping client

          ///////////////////// control arduino pin
          if(readString.indexOf("on") >0)//checks for on
            digitalWrite(5, HIGH);    // set pin 4 high
            Serial.println("Led On");
          if(readString.indexOf("off") >0)//checks for off
            digitalWrite(5, LOW);    // set pin 4 low
            Serial.println("Led Off");
          //clearing string for next read


Google forum search: Use Google Search box in upper right side of this page.
Why I like my 2005 Rio Yellow Honda S2000  https://www.youtube.com/watch?v=pWjMvrkUqX0

Go Up