Very Cheap/Simple WiFi Shield for Arduino and Microprocessors

Update: 23rd Sept 2016

Do Not use the Arduino ESP board library V2.3.0 for this project. V2.2.0 works

Update: 17th December 2015

Rev 11 of this project cleans up other attempted connections if it is already connected. Also uses the timeout set by the web config. Rev 10 ignored the timeout setting.

Update: 11th November 2015

This is Rev 10 of the this project. Rev 10 uses a non-blocking WiFi library, pfodESP8266WiFi, that lows for higher through put particularly for Windows Clients. It also allows for web page configuration of the Serial baud rate

Update: 23rd October 2015

This is Rev 8 of the this project. Rev 8 has improved ESP8266 code that is more reliable.NOTE: Each packet sent halts this code until the receiver (client) acknowledges the packet. This can take between 10mS and 200mS. During that time the incoming Serial data from the UART is not being handled. The incoming serial buffer can buffer 256 bytes. At 9600 baud it takes about 270mS to fill the buffer so as long as you keep the Serial baud rate to 9600 or less you should not loose any outgoing data while the ESP8266 is sending the previous packet. This is providing you have a good WiFi connection. If the WiFi connection is poor, a packet can be lost and have to be re-transmitted by the ESP826, then the Serial incoming buffer may fill up if you are trying to send a lot of data and some of your data my be lost.

Update 20th September 2015

This is Rev 3 of the this project. Rev 3 adds a connection time out setting to the web page configuration. If there is not send or receive of data in that time the WiFi Shield closes the connection and waits for a new one. This ensures the WiFi Shield recovers from 'half closed' connections which happen went the client just disappears due to bad wifi connection, power loss at the router or forced shut down of the client. See Detection of Half-Open (Dropped) TCP/IP Socket Connections for more details.

This connection time out defaults to 15 sec. but can be changed as needed. Setting it to 0 means never time out. When using pfodDesigner, set a menu refresh that is less than the connection time out.

Introduction

This WiFi Shield makes DIY home automation much more affordable. Nothing else on the market is this cheap and this simple to use and configure.

The WiFi Shield described here is very cheap (<$12) and very simple to build, just 2 parts and 4 wires, and very simple to securely configure, via push button web page, and very simple to use, no libraries needed.

This Shield is for use with any 5V or 3.3V micro that has a serial connection. As constructed here it is plug compatible with the standard Arduino boards. These instructions are also available at www.pfod.com.au

This project uses Adafruit's HUZZAH ESP8266 module. If you are looking for an ESP8266-01 WiFi Shield that is just as simple to use at this, but which requires more components and wiring up, one then check out this page instead. (For a comparison with SparkFun WiFi Shield – ESP8266 see below under Parts List.)

This is Rev 11 of this project. Rev 11 uses GPIO0 and GPIO2 as the ConfigLink, as described on this page, ESP8266-01 Pin Magic. Also the code sketches used in Rev11 are now exactly the same at those used in ESP8266-01 Wifi Shield

Features

Cheap :- Less than US$12 in parts per shield, plus shipping. A USB to Serial cable (< US$10) is needed for programming.
Simple to build :- Just two parts and 4 wires needed.
Simple to use :- The 5V and 3.3V compatible shield acts as UART to WiFi bridge. It sets up a server on the IP and port you configure and once connected just passes data to and from the Serial connection. No libraries are need in the connecting micro, just a Serial (UART) connection, so it can be used for any micro-processor that has a serial port. It can also be modified to be configured to make a client connection (with optional login) to a remote server.
Simple to configure :- Shorting out a link and powering up the shield, puts it into configuration mode. In this mode it creates a secure Access Point that you can connect to via your mobile or computer. Then opening http://10.1.1.1 presents a web page where you can configure your network's name and password and the IP and port number the shield should listen on for connections. The configuration web page uses HTML5 validation to check the user's settings.

For another (simpler) method for setting your WiFi network settings see ESP-01 Timer Switch TZ/DST Updatable Without Reprogramming which automatically goes into setup mode if it cannot connect to the
network and has a QR code for easy connection to the setup access point.

Step 1: Parts List

The WiFi Shield needs just two parts, 4 bits of wire and some soldering equipment. Parts List:-

Adafruit HUZZAH ESP8266 Breakout US$9.95 + shipping
Uno Protoshield US$1.88 + shipping

Total US$11.83 (as of June 2015)

To program the shield with the push button configuration and UART to WiFi bridge program, you also need a USB to Serial cable. Here a SparkFun's USB to TTL Serial Cable (US$9.95) is used because it has nicely labelled ends and has driver support for wide range of OS's, but you can also use Adafruit's USB to TTL Serial Cable - Debug / Console Cable for Raspberry Pi which is the same price and might save you extra shipping costs.

Including the programming cable, the cost for just one WiFi Shield is US$21.78. A quick search finds Arduino WiFi Shields costing a minimum of US$30 up to over US$70. So even including the once off cost of the programming cable this shield is significantly cheaper than the other available shields, as well as being much easier to configure and use.

SparkFun as recently brought out the SparkFun WiFi Shield – ESP8266. Here is a quick comparison.

Cost – The SparkFun WiFi Shield – ESP8266 does not come with headers. Cost with headers is US$16.49 i.e. 40% more then this project. Also SparkFun's recommended programming accessories cost US$32.90 or more then 3 times the USB to TLL Serial cable used in this project. So a one off shield + programming accessories cost for SparkFun WiFi Shield – ESP8266 US$49.43 versus US$21.78 for this project. That is the SparkFun shield is twice as expensive.
Construction – You still need to solder the headers on the SparkFun WiFi Shield – ESP8266 so this project only adds 4 wires to the construction.
Program – You still need to re-program the SparkFun WiFi Shield – ESP8266 to get push button configuration and a transparent Serial-To-WiFi bridge.
Installation – The SparkFun WiFi Shield – ESP8266's WiFi antenna is interfered with by the Arduino ISP header pins, so the SparkFun WiFi Shield – ESP8266 cannot be property plugged into the Arduino board. See https://learn.sparkfun.com/tutorials/esp8266-wifi-shield-hookup-guide for the details.

By all means check out SparkFun's shield, but if you just want a very cheap/simple wifi shield for your Arduino, this project is still the best choice.

Step 2: Construction

The Adafruit HUZZAH ESP8266 board comes two lengths of header pins, 19 and 17 pins long. Fortunately, they are not soldered into the ESP8266 board and so can use for the Uno Protoshield which does NOT come with pins.

From the 19 pin length, break off two lots of 8 pins leaving 3pins. From the 17 pin length, break off two lots of 6 pins leaving 5 pins. Solder the two lots of 8 pins and the two lots of 6 pins into the protoshield, as shown in the picture. For the ESP8266 board use the left over 3 pin length for the TX, RX and V+ connection and break off one pin from the 5 remaining pins for the GND connection. Break the remaining 4 pins in half and use two for the Configuration link, in locations #0 and #2 on the ESP8266 board. Note in the photo the two configuration link pins go up while the other ESP8266 pins go down.

Now solder the ESP8266 board to the protoshield as shown and add the 5V, GND and RX, TX wiring to complete the construction.

The ESP8266's V+ and GND go to the protoshield's 5V and GND buses using short wires. The ESP2866 TX is connected to protoshield D0 (orange wire). The ESP8266 RX is connected to the protoshield D1 (white wire).

That's all there is to the construction!!

Step 3: Programming the WiFi Shield

The WiFi Shield needs to be programmed once, only, and never again, with the web page configuration and the Serial to WiFi Bridge code.

To program the shield, follow the steps given on https://github.com/esp8266/arduino under Installing With Boards Manager. When opening the Boards Manager from the Tools → Board menu and select Type Contributed and install the esp8266 platform. This project was compiled using the ESP8266 version 1.6.4-673-g8cd3697. Later versions well be better but may have their own bugs as the platform is evolving rapidly.

NOTE: DO NOT use the Adafruit Board install as the sketch used here will not compile under that code.

Close and re-open the Arduino IDE and you can now select “Generic ESP8266 Module” from Tools → Board menu.

You also need to install the latest version of pfodESP2866BufferedClient.zip This library works with ESP8266.com IDE plug-in V2.2. If you have previously installed the pfodESP2866WiFi library, delete that library directory completely.

Download this pfodESP2866BufferedClient.zip file to your computer, move it to your desktop or some other folder you can easily find
Then use Arduino 1.6.5 IDE menu option Sketch → Import Library → Add Library to install it. (If Arduino does not let you install it because the library already exists then find and delete the older pfodESP8266BufferedClient folder and then import this one)
Stop and restart the Arduino IDE and under File->Examples you should now see pfodESP2866BufferedClient.

Setting the Configuration Access Point password

After you have installed the pfodESP8266BufferedClient library, open the Arduino IDE and copy this sketch, ESP8266_WifiShield.ino, into the IDE. Before you program the shield, you need to set your own password for the configuration access point.

In configuration mode, the WiFi Shield sets up a secure Access Point called pfodWifiWebConfig with a password contained in a QR code attached to the shield. This secure connection prevents any one listening in on your connection while you are setting your real networks ssid and password. You should generate your own password for your shields. A SecretKeyGenerator java program is available here which generates random 128bit keys and writes out QR.png files. Another alternative is to use QR Droid Private (from Google Play) to create a QR Code for you own chosen password.

In either case you need to update the #define near the top of the sketch with your own password.

// =============== start of pfodWifiWebConfig settings ==============<br>// update this define with the password from your QR code
//http://www.forward.com.au/pfod/secureChallengeResponse/keyGenerator/index.html
#define pfodWifiWebConfigPASSWORD "b0Ux9akSiwKkwCtcnjTnpWp"

You can also set your own configuration Access Point name, if you wish.

Programming the Shield

To program the shield, connect the USB to Serial cable as shown in the photo. Check the photo and your wiring.

Carefully check the VCC and GND connections as it is easy to short out the USB power supply if you are one pin off.

This photo is for the SparkFun USB to Serial cable. If you are using the Adafruit cable, it does not have the terminals marked but is colour coded, red is power, black is ground, green is TX and white is RX.

Plug in the USB to Serial cable into your computer and select it COM port in the Tools → Port menu. Leave the CPU Frequency, Flash Size and Upload Speed at their default settings.

Then put the Adafruit HUZZAH ESP2866 module into programming mode by holding down the GPIO0 push button and clicking the Reset push button and then releasing the GPIO0 pushbutton. The GPIO0 led should remain dimly lit. Then select File → Upload or use the Right Arrow button to compile and upload the program. Two files are uploaded. If you get an error message uploading check your cable connections are plugged in the correct pins and try again.

Step 4: Configuring the WiFi Shield

Attaching the Configuration QR code

You will need your unique configuration access point password each time you need to configure the shield, so it is convenient to attach it as a QR code to the shield (or its case). Here is the Open Office presentation file that was used to print out the QR code and connection details for this project. Replace the QR code and password text with your own unique one. Attach the QR code to your shield (or the box it is mounted in) to complete the shield.

Configuration

This WiFi Shield uses an open source web page method to configure both the network name and password, and the IP address and port No.

All other available WiFi shields have to have the IP and port no hard coded in the sketch and either hard code the network name and password or use a proprietary method with proprietary apps to connect to the local network. This is very restrictive when you have multiple devices in an evolving environment.

This WiFi Shield completely avoids this restriction. You never need to re-program it to connect it to a network or change its configured IP and Port No.

Putting the WiFi Shield into Configuration Mode

To put the WiFi shield into configuration mode, turn the power off, short out the header pins #4 and #5 you soldered to the ESP8266 module and then turn the power back on

The GPIO0 led will be brightly lit indicating you are in configuration mode. In this mode the ESP8266 module sets up a secure access point with the name pfodWifiWebConfig.

This access point will show up on your mobile and on your computer. To connect to this access point you will need to enter the unique password for your shield. You can type the password in by hand but it is easier and more reliable to scan the QR code you previously attached to your shield, using a QR scanner app, such as QR Droid Private.

Then copy and paste the password into your mobile's WiFi setting screen to connect your mobile to the configuration access point.

Then open a web browser and type in the URL http://10.1.1.1 This will return the configuration web page shown above.

Filling in the Setup Web Page

The WiFi Shield automatically fills in the Network SSID with the local network with the best signal strength. Which will usually be the one you want. If not just overwrite that entry. You must enter a Network SSID and password and portNo. The IP address field is optional. If you leave it blank, the WiFi Shield will use DHCP to get its IP address on your local network. It is often easier to specify a specific IP address so you can easily connect to this shield.

If your browser is HTML5 compliant then the web page will validate the input before sending it.

Rev 10+ also allows you to configure the Serial baud rate for this shield. Default is 19200, but the examples here use 9600 so change the baud rate to 9600.

When you click the Configure button, the WiFi Shield will process the results and store them in EEPROM and then display a web page as shown above, telling you to power cycle the shield to connect to your network.

Step 5: Using the WiFi Shield

As mentioned above, using this shield with a micro-processor is simple, just connect 3.3V to 5V supply and connect to a UART's TX RX pins running at 9600 baud. This shield plugs into a Uno or Mega2560 board directly.

The only point to note is that when the shield powers up it sends a short string of debugging data to it serial connection, so any connected micro-processor should ignore the serial data for 1 second after power up.

Note: The WiFi Shield draws up to 250mA (average 80mA) so be sure the power supply can deliver this much current or the shield will reboot at odd times.

The Arduino UNO and Mega2560 can supply this much current from their USB connection.

Any Serial connection can be used to test the Shield. For example you can use the USB to Serial cable and the Arduino IDE Serial Monitor to send and receive data to a remote client.

Rev 10 also allows you to configure the Serial baud rate for this shield. Default is 19200, but the examples here use 9600 so change the baud rate to 9600 on the config webpage, above.

However to test this shield, pfodApp was used to turn the Uno's LED on and off via WiFi. First the pfodDesigner was used to design a simple menu.

NOTE: You must set a Menu Refresh time that is less than the connection time out set for the WiFi Shield, otherwise the connection will close.

Then the code was generated for the Serial connection at 9600 baud and transferred the file to the PC, using wifi file transfer.

The sketch's setup() did not need to have the delay(1000) added because the pfod parser ignores any characters outside { }, but it was include because it is recommended for this WiFi board.

The complete sketch, UnoLedControl.ino, is here. Note there is no special WiFi code, the sketch just reads and writes to the Serial output. A 1sec delay has been added at the top of the setup() to skip the ESP8266 debug output on power up.

Remove the WiFi Shield, select Tools → Board → Uno in the Arduino IDE and program this sketch into the UNO.

NOTE: you must remove the WiFi shield to program the UNO because the USB is connected to the UNO's TX/RX pins.

Plug the WiFi Shield back in, it will automatically connect to your local network and start a server on the port you configured. In pfodApp you can set up a connection for this device. See pfodAppForAndroidGettingStarted.pdf for the details.

Then connect to turn the Uno's LED on and off from your Android mobile via wifi.

That's it finished!!

Step 6: Extensions for the WiFi Shield and Conclusions

Here are some possible extensions to this instructable.

Adding Client Support

As presented here the WiFi shield can be configured to run as a server listening on a specified IP and port No. However the pfodWifiConfig also provides support for storing and retrieving Client settings as well as Server settings. So by adding these fields to the configuration web page and saving/loading the Client values, you can also use this WiFi Shield to connect to a remote server, with a client username and password, and upload data to there.

Adding an external Configuration Push Button and Led

If you are mounting your device in a box you will want to wire the config pin to an externally accessiable push button and perhaps also add a LED and 330ohm resistor between the ESP8266 boards 3v pin and #0 (GPIO0). When in configuration mode the #0 output is driven low so you can use this to turn on an external indicating led.

Conclusions

This WiFi Shield is both cheap and simple to build and simple and easy to use and configure.

Once programmed you never need to program it again to set or change the network settings. They can all be set via a web page on a secure temporary WiFi network.

It is simple to interface to any micro that has a UART and runs on either 5V or 3.3V.

No libraries are required to connect to this shield. It runs as a simple Serial to WiFi bridge.

Using the Cheap WiFi Shield makes Home Automation and other IoT (Internet of Things) much more affordable.