How to Build a ESP8266 Web Server

This tutorial is going to teach you some basics on using ESP8266 to build a simple server which can control the LED and display the sensor data when detect the flame occurs.

Description:

ESP8266 is a highly integrated chip designed for the needs of a new connected world. It offers a complete and self-contained Wi-Fi networking solution, allowing it to either host the application or to offload all Wi-Fi networking functions from another application processor.
ESP8266 has powerful on-board processing and storage capabilities that allow it to be integrated with the sensors and other application specific devices through its GPIOs with minimal development up-front and minimal loading during runtime. Its high degree of on-chip integration allows for minimal external circuitry, and the entire solution, including front-end module, is designed to occupy minimal PCB area.

*Note: This is SMD version, please consider take this ESP8266 Wifi Serial Transceiver Module with header pins.

Features:

• Extra six I/O serial and six SPI serial
• Support wireless 802.11 b/g/n standard
• Support the STA/AP/STA + AP three work modesBuilt-in TCP/IP protocol stack, and support multiple TCP Client connection
• Support rich Socket the AT command
• Support UART/GPIO data communication interface
• Support Smart Link intelligent networking
• Support remote firmware update (OTA)Built-in 32-bit MCU and can be applied as processor
• Low power consumption, suitable for battery-powered applicationsSingle 3.3V power supply

Specifications;

• Model: ESP8266-12
• Wireless Standard: IEEE 802.11b/g/n
• Frequency Range: 2.412GHz - 2.484GHz
• Hardware Interface: UART, I2C, PWM, GPIO, ADC, SPI
• Operating voltage: 3.3VDC
• Wireless Network Type: STA/AP/STA+AP
• Security: WEP/WPA-PSK/WPA2-PSK
• Encryption: WEP64/WEP128/TKIP/AES
• Firmware Upgrade: UART or OTA Remote Upgrade
• Network Protocol: IPv4, TCP/UDP/FTP/HTTP

1. Open the arduino IDE
2. Go to files and click on the preference in the Arduino IDE
3. Copy the code (http://arduino.esp8266.com/stable/package_esp8266com_index.json)in the Additional boards Manager
4. Click OK to close the preference tab
5. After completing the above steps , go to Tools and board, and then select board Manager
6. Go to the serach box and search esp8266 by esp8266 community and install the software for Arduino
7. After install the software for Arduino , select the board Generic ESP8266 Module

1. 4 x LED
2. Jumper Wires
3. 1 x ESP8266 (model 12)
4. 1 x Flame Sensor Mudule
5. 1 x Push Button
6. 1 x Slide Button(SPST)
7. 4 x 10 Kohm resistors
8. 1 x 1 Kohm resistor
9. 1 x 2 Kohm resistor

Set up the all the materials refering to the figure above.

( *Note: The 5V output voltage can kill the ESP8266. So, using the 1Kohms and 2Kohms resistor and connect these two in series with TX pin of the communicator FTDI to 1k resistor and GND to the 2k resistor. The junction between the resistor is connected to the RX of the ESP8266 to get 3.3V signal from the communicator FTDI )

Copy the source code to Arduino IDE and upload the coding to ESP8266. Connect your Esp8266 to Arduino IDE and select the correct COM Port and board type and upload the program.

*Note:The coding below must be configured in order to connect the wifi .Change the SSID to your WiFi Name and password to your Wifi password.

1. led0 is use to indicate the connection of the ESP8266 and the wifi. If the connection between the wifi and ESP8266 lost, the ESP8266 will turn off the led0 on GPIO13. led0 will light up again when the ESP8266 is reconnecting to wifi successfully.

2. ledSensor is the output LED that connect to GPIO16. The ledSensor will light up when the flame is detected by flame sensor module.(I am using flame sensor module in this project, you can use other sensor to replace the variable resistor in the figure above)

3. led1 and led2 is the led that controlled by GPIO4 and GPIO5 respectively through our webserver.

The Serial Monitor will print :

Connected to xxxxxxxxxxx

IP address: xxx.xxx.x.x

MDNS responder started

HTTP server started

The IP address shown in the serial monitor screen is the address of your ESP8266 webserver.

led0 which connect to GPIO13 should light up when the ESP8266 is connected to the wifi. Now , you can try to control the led1 and led2 by pressing the ON/OFF button on the webserver and see whether led1 and led2 is light up or not. ledSensor will light up when the flame is detected by flame sensor module.

After the flame is detected , ESP8266 will update and send information " Flame is detected!!! " to the webserver.

Some Basic Modification about HTML Coding

<meta http-equiv='refresh' content='3'>

This is the html code that used to refresh the webpage every 3 seconds.You can set your own time by just edit the "3" to any time that you want

(*Note : Don't delete this coding or set the value to "0" because this HTML coding is important to refresh and update webpage when flame is detected by flame sensor module. )

<title>ESP8266 Demo</title>

This is the title of the webpage.You can rename for your own ESP8266 webserver.

<h2 dir=\"rtl\" style=\"text-align: left;\">

<img alt=\"\" src=\"http://www.mybotic.com.my/webshaper/pcm/pictures/Mybotic-Logo-(5).jpg\"

style=\"float: left; height: 103px; width: 999px; border-width: 15px; border-style: solid;\" />

You can and customize your own header pictures by deleting or editing the html coding above in the sample source code of ESP8266 webserver. Go to the website https://html-online.com/editor/.Click "insert/edit images button" .Insert the link of the image that you want .Now , you can see the HTML source code is shown beside the HTML editor window.Copy and replace the HTML source code that you want to edit in the sample source code of ESP8266.