ESP8266 Tutorial Part II – ESP8266 Hello Web Server with Arduino IDE

Hello everyone! In this tutorial, we are going to show you how to create a simple hello web server with ESP8266 WiFi module using Arduino IDE.

Note**: In this tutorial, we assume you have already learnt how to setup ESP8266 WiFi module. If you don’t know how to, please refer to this tutorial.

A few things to take note before we go on…

How does ESP8266 WiFi module work?

ESP8266 WiFi module have 2 operation modes: working mode and flash mode. Working mode is the mode in which the module will run the firmware within it, whereas flash mode is the mode in which the module waits for the users to install new firmware to it. The state of GPIO0 will determine which mode will ESP8266 operate during its next power up.

GPIO0 stateOperation Mode
LOWflash mode
HIGH or NCworking mode

In general, before we start installing firmware to the module, GPIO0 is pulled LOW and the module is reset to enable flash mode. Once we have uploaded firmware to the module, the module will automatically enter working mode. At this time, it is advisable to leave GPIO0 unconnected (floating) and reset the module. After the reset, the module will straightaway enter working mode.

Why using Arduino IDE?

There are many ways to install firmware to the ESP8266 module. One of them is Arduino IDE. Why using Arduino IDE? Because it provides a platform for you to create and customise your own firmware and upload it to ESP8266 module easily. Of course, there are plenty of libraries and example on the Internet too. All you need to do is just design your firmware!!

What will happen to AT firmware that comes with the module?

All ESP8266 WiFi Module comes with AT command firmware by default, meaning that it requires you to enter proper AT commands and it will execute the tasks according to the command given. When we use Arduino IDE to program the module, we will be erasing the AT firmware and replace it with our own new firmware!! But no worries, if you wish to use AT firmware back after this tutorial, you can still follow this short tutorial at this end of tutorial upload AT firmware in ESP8266.

What do we need for this tutorial?

Hardware

Software

Arduino IDE 1.6.4 or higher (Click this link to download)

Let’s get started…

Step 1:

Modify the ESP8266 WiFi system (refer to tutorial 1) according to the picture below by adding push button for RESET pin and slide switch for GPIO0 pin of ESP8266 module. This will make choosing operation mode and resetting module easier.

Step 2:

Open Arduino IDE and go to File -> Preferences.

Step 3:

Enter http://arduino.esp8266.com/package_esp8266com_index.json into Additional Board Manager URLs field. Click OK when you are done.

Note: Arduino IDE version must be 1.6.4 or higher.

Step 4:

Open Boards Manager from Tools ->Board menu and install esp8266 platform. Restart Arduino IDE once the installation is complete.

Step 5:

From Tools ->Board menu, select Generic ESP8266 Module.

Step 6:

Go to File -> Examples -> ESP8266mDNS -> mDNS_Web_Server.

Step 7:

In the example sketch, please change SSID and password to your preferred network SSID and password.

Step 8:

Enable flash mode of ESP8266 WiFi module by connecting GPIO0 to GND (push the slide switch to left) and reset the module (press push button once). Select the COM Port in which your ESP8266 is connected to, remember it is connected to UC00A, so the COM Port should be UC00A’s com number. Now, hit “Compile and Upload” on Arduino IDE. You should be seeing the messages shown in picture below when the file is being uploaded. The TX and RX LEDs on UC00A will also blink during the uploading process. Wait until the upload is done. It might take a while to compile the sketch, so be patient :D.

Step 9:

After the sketch loading is done, open Serial Monitor on Arduino IDE and change baudrate to 115200. Enable working mode of ESP8266 WiFi module by leaving GPIO0 unconnected (push slide switch to right) and reset the module (press the push button once). You should be able to see some messages including the network your ESP8266 module is connecting to and also IP address assigned to the module on the Serial Monitor. This is the data send by the ESP8266 to UC00A further to Serial Monitor. Be patient, it will take sometime for ESP8266 to search the available network and connect to the preferable network.

Step 10:

Now, open a web browser on a computer that connected to your network ( same as the network your ESP8266 connects to) , and enter the IP address which you get from the Serial Monitor in Step 9. You should be seeing hello message on the webpage.

Where is this greeting message coming from in the example sketch???

For this example sketch, client.print(s) is the function to send your html message to the client from ESP8266, where s will be your html message. In tutorial part III we will be exploring for more 😀

Upload AT firmware in ESP8266

** Follow this part of tutorial only if you want to use reload the AT firmware for this module.

Generally AT firmware is in form of a binary file (.bin). Besides Arduino IDE, there is another software built to upload bin file directly to ESP8266. The software used is esp8266_flasher.exe. Please download esp8266_flasher.exe and AT firmware file to proceed.

Files to download

esp8266_flasher.exe
v0.9.2.2 AT Firmware.bin

First enable flash mode of your ESP8266 module (you can refer to step 8). Next open esp8266_flasher.exe.

Click Bin to browse for the AT firmware binary file you downloaded. Change the COM port to the port your ESP8266 module is currently connecting to. It is the UC00A com port as ESP is connected to UC00A. Click Download to start upload AT firmware to the module.

Upload firmware in progress

If you see the message shown in picture below, no worries! That means you have already uploaded AT firmware to the module successfully.

Now you can try enter AT command using serial software. If you don’t know how to, you can follow this tutorial.

Conclusion

That’s all for this tutorial. This tutorial covers how to use Arduino IDE to create a simple Hello web server and also the method to upload AT firmware to ESP8266 module. If you wish to know how to create or customise your web server using Arduino IDE, follow Part III tutorial!!

Happy learning!!

If you have any inquiry, please post in our technical forum as we seldom check the comments section in tutorial site 🙂

Buy

, , , , ,

Related Post

ESPresso Lite V2 with AT Firmware

Light Dancing with Music

How to Make your Line Following Robot Faster?

Control Mobile Robot through WiFi with ESP-WiFi Shield (Arduino + Andriod)

One thought on “ESP8266 Tutorial Part II – ESP8266 Hello Web Server with Arduino IDE

Leave a Reply

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