Introduction: The ESP8266 Part 2 - Arduino Web Server

About: Engineer, writer and forever student. Passionate to share knowledge of electronics with focus on IoT and robotics.

In my previous instructable The ESP8266 Part 1 - Serial WIFI Module for Arduino,I tried to describe what is, how to connect, test, and configure the ESP8266 (let's call it ESP for short). Here we will do an overview about how the ESP to can help interaction with Arduino GPIOs remotely via internet. When you turn on a LED from a signal generated in one of the Arduino outputs, or you read the status of a switch or sensor, what is really happening is the interaction of the “electronics world” with the “physical world” ! Achieving this interaction via an internet page is in fact the essence of the IoT.

The first configuration that will be tested, is the ES8266 working as a local Web Server, connected to an Arduino. We will install push-buttons at two digital GPIOs of the Arduino (Pins 8, 9) simulating the status of digital sensors and a potentiometer at analog port A0, simulating the data provided by an analog sensor such as temperature or humidity (the “System Inputs" of the above diagram ). The Arduino/ESP8266 will read those signals, generating a simple HTML page and publish in real time at the web! Cool !!!!!!!!

Step 1: The Circuit

Note that the circuit is basically the same as the previous post, I just added two push-buttons (normally open) connected to the Arduino's inputs and VCC (via a resistor of 10K to not generate a short circuit, of course). By pressing the button, what we are doing is putting a HIGH signal on the digital input of the Arduino. The potentiometer (also 10K) will be mounted between VCC (5V) and Ground, with its center pin connected to analog input A0 of the MEGA. The potentiometer will control the voltage level on the analog input A0, which will range from "0V to 5V." MEGA will read the voltage at the AO pin and its internal ADC (Analog Digital Converter), converting it to a value that will range "0 to 1023".

Step 2: The Code

First of all, after the general settings and set-up, it is important to start the ESP as a server. For this, the InitWifiModule () function is used (see code attached)

When connecting the serial monitor displays the information as shown at the figure. Very important is the second IP address that appears on the screen: 10.0.1.2 (of course yours will be another IP address).

Looking the code in more details:

  • In the main loop, first thing is look to see if the ESP is sending something and if the string "+ IPD" is found. If happens, means that the page has been identified (see copy of the serial monitor below).
  • We should wait 300 milliseconds to ensure that the serial buffer has read all the data.
  • As the read () function returns ASCII, it is important that when loading the connection ID, the value "48" is been subtracted from of the data read. “48” is the ASC code of the first character "0". Thus if for example, the data 49 (ASCII code for "1") is received by subtracting 48, the result will be a pure digit ( "1").
  • The HTML code is constructed at Arduino Code and sent to the browser for the page’s construction.

Step 3: The Page

To enter the IP up in a browser, the ESP mount the HTML page that was scheduled and will start sending the information captured in MEGA entries.

In the Serial monitor Print screen above, you can notice the data that is continuously updated, during the running program.

In the video, you can see the WebServer working: