09Feb

ESP-13 WiFi Shield Web Server

If you are just getting started with the ESP-13 Wifi Shield from Jaycar, I would encourage you to have a look at my “getting started with the ESP-13 WiFi shield” tutorial. It explains in great detail how to configure your Arduino, the IDE and the WiFi shield, and is a good pre-cursor for any of my ESP-13 WiFi shield tutorials (including this one).

This tutorial will show you how to setup a simple webserver on your ESP-13 WiFi Shield and display a table of all of the WiFi Access Points within it’s range (and refreshed every 5 seconds).
The ESP-13 shield will create it’s own WiFi access point, which means that you can take this project anywhere you want to. You do not have to be connected to your home/work WiFi network to see the webpage. The limitation however, is that your device must be within WiFi range of the ESP-13 WiFi shield in order to see the results of the WiFi scan.

Let me show you how to put this project together:

Parts Required

  1. Arduino UNO (or compatible board)
  2. KEYES ESP-13 WiFi Shield – from Jaycar (Cat. No: XC4614)
  3. USB cable – to connect Arduino to Computer
  4. 5 wires: 4 x Male to Male connectors and 1 x Female to Female Connector

Arduino IDE

While there are many Arduino IDE alternatives out there, I would recommend that you use the official Arduino IDE for this project. I used the official Arduino IDE app (v1.8.5) for Windows 10.
Make sure to get the most up-to-date version for your operating system here.

Arduino and IDE Setup

Make sure that your Arduino UNO has the BareMinimum sketch on it, and that you have configured your Arduino IDE as per this tutorial.

Use the following as a checklist:

  1. BareMinimum sketch loaded onto Arduino UNO
  2. Additional Boards Manager URL list contains:
    http://arduino.esp8266.com/stable/package_esp8266com_index.json
  3. Latest version of esp8266 board installed into Arduino IDE Boards Manager
  4. ESPDuino(ESP-13 Module) has been selected as the Board in the Tools menu.
  5. Make sure your ESP-13 Flash settings are correct
  6. Set your Arduino IDE Serial Monitor to a Baud rate of 115200

Once again – please make sure you have completed all of the tasks in the list above.
Please look at this tutorial for further information.

Wiring up the ESP-13 WiFi Shield

You will need to wire up your WiFi Shield in the following configuration to upload sketches to it:

Wire Connections

  1. Make sure that the Arduino UNO is OFF (i.e. not connected to power or USB port)
  2. Place the ESP-13 WiFi shield NEXT TO the Arduino UNO
  3. Connect a Red wire between 5V on Arduino UNO, and 5V (Arduino side) of the ESP-13 shield
  4. Connect a Black wire between GND on Arduino, and G (Arduino side) of the ESP-13 shield
  5. Connect a Green wire between D0(RX) on Arduino, and TX (UART – Arduino side) of ESP-13
  6. Connect a Yellow wire between D1(TX) on Arduino, and RX (UART – Arduino side) of ESP-13
  7. Connect a Blue wire between D0 (ESP-13 side) of the Shield, and G (ESP-13 side) of the Shield.
  8. Make sure that both of the switches on the ESP-13 WiFi Shield are in the “ON” position.

Uploading code to the ESP-13

Prepare the ESP-13 Shield for Code upload

  1. Make sure that both of the switches on the ESP-13 WiFi Shield are in the “ON” position.
  2. Connect the Arduino UNO to the computer via USB
  3. You should see a Red LED illuminate on the ESP-13 shield.
  4. Press the RESET (RST) BUTTON on the bottom left of the ESP-13 Shield

Uploading Code to the ESP-13

In your Arduino IDE – do the following:

  1. Create a new file: File > New
  2. Copy and paste the “ESP-13 WiFi Shield code” (see below) into the Arduino IDE
  3. Make sure ESPDuino(ESP-13 Module) has been selected as the Board in the Tools menu.
  4. Select: Tools > Port > COM4 (Your Arduino may be on a different COM port)
  5. Select: Sketch > Upload (or Ctrl + U) – or click on right arrow symbol
  6. Once code has been uploaded, POWER-OFF the Arduino and remove the Blue wire.
  7. Power-up the Arduino and watch the magic happen

ESP-13 WiFi Shield CODE

/*==========================================================================
* Project: ArduinoBasics WiFi Scanner
* Author: Scott C
* Date created: 16 September 2018
* Arduino IDE version: 1.8.5
* Operating System: Windows 10 Pro
*
* Description:
* The ESP-13 WiFi shield will create an Access Point that you can connect to
* using your phone/tablet/PC. Once connected via WiFi, navigate your browser
* to the IP address displayed in the Serial monitor to see the list of Access Points in your area.
*
* Acknowledgements:
* Some of the code used within this sketch was inspired by or adapted from other notable sources.
* Webserver code: adapted from https://arduino-esp8266.readthedocs.io/en/latest/esp8266wifi/server-examples.html
* WiFi scanner code adapted from tablatronix : https://gist.github.com/tablatronix/497f3b299e0f212fc171ac5662fa7b42
* HTTP/1.1 protocols: https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html
*
* ————————————————————————-
* LIBRARIES:
* Libraries used: ESP8266WiFi.h – installed with Boards Manager : https://github.com/esp8266/Arduino
* More information about ESP8266WiFi.h library :
* https://arduino-esp8266.readthedocs.io/en/latest/esp8266wifi/readme.html
* https://arduino-esp8266.readthedocs.io/en/2.4.2/libraries.html#wifi-esp8266wifi-library
*
*
* GLOBAL VARIABLES:
* The SSID and Password for the Access point (AP) that will be created by the ESP-13 WiFi shield
* The WiFi server which will listen for Clients on Port 80 (eg. Web Browsers)
============================================================================ */
#include <ESP8266WiFi.h>
const char* ssid = “PinkFluffyUnicorn”;
const char* password = “12345678”;
WiFiServer server(80);
/* ==========================================================================
* SETUP:
* Begin Serial Communication using a Baud Rate of 115200
* Configure the ESP-13 WiFi shield into Access Point Mode
* Create an Access Point for devices to connect to.
* Display the Access Point (AP) IP address in the Serial monitor.
* Start the server if the Access Point has been created successfully
============================================================================ */
void setup() {
// put your setup code here, to run once:
Serial.begin(115200);
WiFi.mode(WIFI_AP);
boolean r = WiFi.softAP(ssid, password);
if (r) {
server.begin();
Serial.println(“”);
Serial.print(“Please connect to the Access Point: “);
Serial.println(ssid);
Serial.printf(“then open %s in a web browser\n”, WiFi.softAPIP().toString().c_str());
Serial.println(“”);
} else {
Serial.println(“FAILED to create Access Point”);
while(1){}
}
}
/* ==========================================================================
* LOOP:
* Start listening for Clients
* Notify when a Client connects to the server using the Serial Monitor
* Then write any request messages from the client to the Serial Monitor
* Wait for the client to send through an empty line, then
* Serve the constructed HTML page to the client
* The delay gives the browser some time to receive the HTML page, before
* the server dicsonnects from the client.
* Notify when the client has been disconnected.
============================================================================ */
void loop() {
WiFiClient client = server.available();
if(client){
Serial.println(“\n A Client just connected to the server”);
while(client.connected()) {
if(client.available()){
String clientMessage = client.readStringUntil(‘\r’);
Serial.print(clientMessage);
if(clientMessage.length() == 1 && clientMessage[0] ==’\n’) {
client.println(constructHTMLpage());
break;
}
}
}
delay(1000);
client.stop();
Serial.println(“\n The server has disconnected the Client”);
}
}
/* ==========================================================================
*constructHTMLpage:
*SCAN for available WiFi networks within range of the ESP-13 WiFi Shield
*Construct the necessary HTTP response and HTML to
* – display the SCAN results within a web browser (client).
* – automatically refresh the HTML page every 5 seconds.
*
*The HTML page will display the following information in a table:
* – SSID,
* – Signal Strength and
* – Encryption type.
============================================================================ */
String constructHTMLpage(){
int numSSID = WiFi.scanNetworks();
String HTMLpage = String(“HTTP/1.1 200 OK\r\n”) +
“Content-Type: text/html\r\n” +
“Connection: close\r\n” +
“Refresh: 5\r\n” +
“\r\n” +
“<!DOCTYPE HTML>” +
“<html><body>\r\n” +
“<h2>WIFI NETWORKS</h2>\r\n” +
“<table><tr><th>SSID</th><th>Signal Strength</th><th>Encryption type</th></tr>\r\n”;
for(int i=0; i<numSSID; i++){
HTMLpage = HTMLpage + String(“<tr><td>”);
HTMLpage = HTMLpage + String(WiFi.SSID(i));
HTMLpage = HTMLpage + String(“</td><td>”);
HTMLpage = HTMLpage + String(WiFi.RSSI(i));
HTMLpage = HTMLpage + String(“</td><td>”);
HTMLpage = HTMLpage + String(encryptionTypeStr(WiFi.encryptionType(i)));
HTMLpage = HTMLpage + String(” [“);
HTMLpage = HTMLpage + String(WiFi.encryptionType(i));
HTMLpage = HTMLpage + String(“]”);
HTMLpage = HTMLpage + String(“</td></tr>”);
}
HTMLpage = HTMLpage + String(“</table></body></html>\r\n”);
return HTMLpage;
}
/* ==========================================================================
*encryptionTypeStr:
*Will accept a WiFi.encryptionType() integer and convert it into a more
*meaningful string.
============================================================================ */
String encryptionTypeStr(uint8_t authmode) {
switch(authmode) {
case ENC_TYPE_NONE:
return “OPEN”;
case ENC_TYPE_WEP:
return “WEP”;
case ENC_TYPE_TKIP:
return “WPA_PSK”;
case ENC_TYPE_CCMP:
return “WPA2_PSK”;
case ENC_TYPE_AUTO:
return “WPA_WPA2_PSK”;
default:
return “UNKOWN”;
}
}

view rawArduinoBasics_WiFi_Scanner_Code.ino hosted with ❤ by GitHub

Interacting with the ESP-13 Shield

When the ESP-13 WiFi shield regains power, it will create an Access Point called “PinkFluffyUnicorn”. Use the following steps to interact with the shield:

  1. Open the Serial Monitor in the Arduino IDE.
  2. Press the RESET (RST) Button on the ESP-13 WiFi Shield
  3. You should see some instructions inside of the Serial Monitor Window
  4. Using your phone, Connect to the WiFi Access Point: PinkFluffyUnicorn
  5. Use password: 12345678
  6. Open a Browser on your Phone and Navigate to: 192.168.4.1
  7. You should now see a list of Access Points in your Area (excluding PinkFluffyUnicorn)
  8. The list should automatically refresh every 5 seconds
  9. You can also see the “GET” requests sent by the browser in the Serial Monitor.

Using the ESP-13 Shield

Now that we know everything is working. We can now use the Shield as a Shield.

  1. POWER-OFF the Arduino UNO
  2. Remove ALL of the connection wires between the Arduino and the ESP-13 Shield.
  3. Place the ESP-13 WiFi Shield onto the Arduino UNO by lining up the respective header pins
  4. The ESP-13 side of the shield lines up with the Power and Analog pins of the Arduino
  5. The Arduino side of the Shield lines up with the Digital pins of the Arduino
  6. When the shield is installed, the WiFi chip should be on the opposite side from the power jack
  7. Double check that ALL of the male headers on the underside of ESP-13 shield are sitting in the appropriate female header on the Arduino UNO
  8. POWER-UP the Arduino UNO, and reconnect to the WiFi Access point as before, and navigate the browser to 192.168.4.1 as before.
  9. ***PLEASE NOTE: You will no longer see any further communication in the Serial Monitor window. If you want to use the serial monitor, then you will have to take the shield off and connect the wires again (but not the blue one).
  10. The blue wire is only needed when you UPLOAD CODE to the ESP-13 Shield.

You can now disconnect it from the computer completely and power your project with an appropriate battery. You can take this project around your house and find the WiFi blind-spots in your home.

Summary

In this tutorial I showed how to upload a sketch to the ESP-13 WiFi shield. The code set the ESP-13 WiFi shield as an Access Point, and created a web server. The Webpage created was a bit primitive, but I did not want to get overly complicated at this stage. I hope to provide another tutorial in future which will show you how to create a more interesting yet more complicated web page using AJAX requests and XML. I plan to serve a webpage stored on the ESP-13’s flash chip.

Please let me know if this tutorial helped you in any way.
Until next time…..

Leave a Reply

Your email address will not be published. Required fields are marked *