top of page

ESP 8266 Interface with arduino - Data Receiving on Web page

Post by - Sudhanshu Singh

Data receiving on Webpage from Arduino:  In today’s tutorial we will learn how to receive data on webpage which is being sent from Arduino board using Wi-Fi module. We will send some strings of data from arduino to Wi-Fi module and which will sent these strings to webpage using Local server through an IP Address. This server will be a webpage. I have already posted a article on how to interface esp8266 wifi module with arduino and how to control servo motor from web.  This tutorial will be consisting of following sections:

  • Introduction to Wi-Fi

  • Working Principle

  • Required Components

  • Wi-Fi module

  • Circuit Diagram

  • Explanation of Process

  • Explanation of Code

Introduction to esp8266 Wi-Fi

Wireless Fidelity is a term used for products which uses any type of 802.11 technologies. Wi-Fi network operate with 11 Mbps or 54 Mbps data rate in the unlicensed 2.4 GHz and 5GHz radio frequency band. Devices which have Wi-Fi enabled can sent and receive data wirelessly from locations which are equipped with wireless access. Access points which are located in a Wi-Fi location transmit RF signal for the Wi-Fi enabled devices. These Wi-Fi enabled devices can receive the signal if they are located within access point range. The speed of data transmission depends upon the speed of pipeline fed into the access point.

Working Principle:

Radio signal is the base of operation of Wi-Fi. It is made up of three elements which are essential for its working.

  • Signal

  • Antenna

​

The radio signals are transmitted by antenna and routers and they are received by Wi-Fi receiver such as computers.

Internet connections to devices

Required Components:

  • Arduino UNO Board

  • Wi-Fi module ESP8266

  • Connecting Wires

Wi-Fi module:

​

Wi-Fi module has 8 pin outs which are arranged in 2 rows. Keeping the integrated side facing you and pins closer to your end. Lower row from left to right is

  1. Tx ­- Transmitting pin

  2. CH-DO – Channel Down pin

  3. RST – Reset

  4. Vcc – 3.3V power supply

Upper row from left to right has

  1. GND – Power supply ground

  2. GPIO_2 – Not Used

  3. GPIO_0 – Not Used

  4. Rx – Receiver pin

Circuit Diagram:

Connections of ESP8266 Wi-Fi module with Arduino are as follows

  1. ESP8266 Wi-Fi module Tx Pin with     D2 of Arduino

  2. ESP8266 Wi-Fi module CH-EN Pin with     3V of Arduino

  3. ESP8266 Wi-Fi module Vcc Pin with     3V of Arduino

  4. ESP8266 Wi-Fi module GND Pin with     GND of Arduino

  5. ESP8266 Wi-Fi module Rx Pin with     middle point (Junction point of series 1k and 2k resistor) of Voltage divider.

  6. Second end of 1k resistor with     D3 of Arduino.

  7. Second end of 2k resistor with     GND of Arduino.

Explanation of Process:

General procedure for receiving data consists of following steps

  • Connect Wi-Fi module to Wi-Fi router for network connectivity

  • Configure the local server

  • Send the data to Webpage

  • Close the connection

This is done by following commands

AT To test Wi-Fi Module whether it is working properly or not, whether its connections are fine or not send this command to Wi-Fi module. Wi-Fi module should reply OK against this command.

AT+CWMODE=mode_id This command is used to select mode of operation of Wi-Fi module. Mode-id can carry following values.

Mode ids

1 = Station mode (client)
2 = AP mode (host)
3 = AP + Station mode

AT+CWQAP This command is used to disconnect Wi-Fi module from previously connected network. Wi-Fi module is configured to automatically connect with any previous network.

AT+RST This command is used to reset the module. The use of this command is optional which means we don’t need to reset the module every time. However in case you think there is some problem you can use this command.

AT+CWJAP=”wifi_username”,”wifi_password” This command is used to connect the Wi-Fi module with the Wi-Fi router. Replace wifi_username with the name of your Wi-Fi router and wifi_password with the password of your Wi-Fi router.

AT+CIFSR This command is used to get IP address of Wi-Fi module. In replay of this command module returns IP Address. We will use this IP Address to communicate with webpage i.e. this IP Address will be used in Address bar of browser for communication.

AT+CIPMUX=1 This command is used to enable multiplexing mode. 1 is used for multiple connections and 0 is used for single connection.

AT+CIPSERVER=1, port_no This command is used to configure the module as server. Here ‘1’ is used to create the server and ‘0’ to delete the server. Default port number is 80. However, if your internet service provider has blocked it. You need to provide your respective port number by consulting him.

AT+CIPSEND =id, length of data This command is used to send data to locally created server.

Id = ID no. of transmit connection

Length = Max length of data is 2 kb

Serial.println(“Statement”) After sending ID and Length to the server, we need to send data by using this command which will be displayed on webpage and serial monitor. After sending data AT+CIPCLOSE=0 This command is used to close the connection at the end. It is necessary to close connection after sending data to locally created server i.e. webpage.

Now data has been transmitted to local server i.e. webpage. Type IP Address in Address Bar of web browser and hit enter. Now you can view the transmitted data on webpage.

Explanation of Code:

Click to download the code below

#include <SoftwareSerial.h> Include the software serial library which enables us to use other pins as Tx and Rx pins. This saves us from plugging out the wires from pin0 and pin1 of board each time we upload our program. If you use D0 and D1 as Tx and Rx pins then you will have to unplug these pins each time you upload program to Arduino board.

void setup() Initializes serial UART communication for Wi-Fi module and also initializes the serial monitor using 9600 baud rate.

void loop() This function asks the user to refresh the webpage. It also checks for the connectivity of server. When data is available it is automatically send to webpage using void sendToServer () function.

findIp() This function is used to check for availability of IP Address. It does not display the IP Address. If IP Address is available it changes the state of Boolean variable.

showIp() This function is used to get IP address of Wi-Fi module. This IP Address is used for communication between webpage and Wi-Fi module

wifi_init() It initializes the Wi-Fi connection by sending the commands which has been elaborated in Process section.

establishConnection()This function defines the process of sending AT commands to Wi-Fi connection and then reads back the response of Wi-Fi module.

sendData( ) This function is used to send data strings to sendToServer() function. These data string will be further send to webpage.

void sendToServer()This function is used to send data to locally created webserver i.e. in our case is a webpage.

bottom of page