Arduino Basics: ESP-13 WiFi Shield Web Server

17 September 2018

ESP-13 WiFi Shield Web Server

Description

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


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.....


 
 

Social Media

You can find me on various social networks:

Visit my ArduinoBasics Google + page.
Follow me on Twitter by looking for ScottC @ArduinoBasics.
I can also be found on Pinterest and Instagram.
Have a look at my videos on my YouTube channel.


17 comments:

  1. Thank you mister. You helped me a lot...

    ReplyDelete
  2. How do you make it so you just have a blank web server and it no longer searches for the signal strength of nearby wifi Ports

    ReplyDelete
    Replies
    1. You would modify the code within the constructHTMLpage() section.

      Delete
  3. I tried to do what the instruction said, but when I upload the code from arduino IDE, this error message appears:
    warning: espcomm_sync failed
    error: espcomm_open failed
    error: espcomm_upload_mem failed
    error: espcomm_upload_mem failed

    What possible methods can I do?

    ReplyDelete
    Replies
    1. What part of your setup is different from mine ?
      What Arduino are you using? What wifi-shield are you using? Where did you get it?
      Perhaps ask in the Arduino forums. They would have more experience than me with this.
      I can only show you what I did, and so I can only conclude that you are doing something different, or have different hardware.

      Delete
    2. Make sure to follow all instructions provided above (in the same order).
      You may need to cycle the power, or press reset on the Arduino.
      You may need to press the Reset button on the shield again.
      If that fails, then maybe hold the "Reset and Key" buttons down at the same time for about 5 seconds.
      Double check ALL connections, and switches.

      Delete
    3. I´ve got the same problem.

      Delete
  4. Replies
    1. It took me ages to create.
      I am not just going to give it away.
      You can have it for $500

      Delete
  5. Hello, i´ve got the problem, that there is a error message in the arduino ide:

    "warning: espcomm_sync failed
    error: espcomm_open failed
    error: espcomm_upload_mem failed
    error: espcomm_upload_mem failed"

    I´ve done everythinJonasg like the tutorial.

    I hope that you can help me,

    ReplyDelete
    Replies
    1. Prepare the ESP-13 Shield for Code upload:
      Make sure that both of the switches on the ESP-13 WiFi Shield are in the "ON" position.
      Make sure that you have the blue wire connected as per the fritzing sketch.
      Connect the Arduino UNO to the computer via USB
      You should see a Red LED illuminate on the ESP-13 shield.
      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:
      Create a new file: File > New
      Copy and paste the "ESP-13 WiFi Shield code" into the Arduino IDE
      Make sure ESPDuino(ESP-13 Module) has been selected as the Board in the Tools menu.
      Select: Tools > Port > COM4 (Your Arduino may be on a different COM port)
      Select: Sketch > Upload (or Ctrl + U) - or click on right arrow symbol
      Once code has been uploaded, POWER-OFF the Arduino and remove the Blue wire.

      Delete
    2. Also please note that you may need to select a different COM port.

      Delete
    3. ESP-13 Flash Settings
      You will then want to check that you have the following settings in the Tools menu of the Arduino IDE:

      Board: "ESPDuino (ESP-13 Module)"
      Flash Size: "4M (1M SPIFFS)"
      Debug port: "Disabled"
      Debug Level: "None"
      IwIP Variant: "v2 Lower Memory"
      Reset Method: "ESPduino-V2"
      VTables: "Flash"
      CPU Frequency: "80MHz"
      Upload Speed: "115200"
      Erase Flash: Only Sketch

      You may want to reduce the "upload speed", if you are still having issues.

      Delete
  6. Could you upload the sketch, whitch is in the libary?

    I think that in the sketch that is up there a mistake.

    I hope that you can do this, because i need it to the 1th February.

    Jonas

    ReplyDelete
    Replies
    1. I am not sure what you are asking me to do?
      Are you suggesting that there is a mistake in the code that I have written, or that there is a mistake in the library? I am not sure what you want me to do?

      Delete

Feel free to leave a comment about this tutorial below.
Any questions about your particular project should be asked in the Arduino forum.

Comments are moderated due to large amount of spam.