Introduction: The ESP8266 Part 2 - Arduino Web Server

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:

Comments

author
SiliconHowTo (author)2017-09-09

Hi @mjrovai. Great Instructable. I made it and it works great instead on iPhone browser. Any clue?

author
DavidLL (author)2017-01-10

Hi mjrovai, I have searched long and hard to find a solution to connect our Mega to ESP. THANK YOU for making this Instructable!!!!! It has provided missing building blocks needed to take the next step in my development. With this start I can now begin learning how to bring Java into the mix.

ArduFarmBot looks like a great project! :)

author
agupta52 (author)2016-04-24

Can the same module work both as Tx as well as Rx ? In this case is it working in slave (Rx) Mode, but how does it receives data ?

And the page is updated automatically or you have to reload it again-again once you change any input (digital sensor value or analog value)

author
mjrovai (author)agupta522016-08-27

sorry taking so many time to answer you. For some reason I missed you comment. First, the page is automaticatelly reload and the ESP8266 can be used for both Tx/Rx mode. Those tutorials were simple only to pass concepts ( as I learned at that time). I recently returned to a more complete project envolving ESP8266, where I will control a tomato farm via Internet (http://youtu.be/SwgKzfAvWlI). I should post it soon. Thanks

author
Killer Kitties made it! (author)2016-08-25

I made it, i just modify some code line SSID and Password, and then 'debug' variabel so response from ESP to my serial can be readed.

Screenshot_2016-08-25-23-23-12_com.android.chrome.pngIMG_20160825_232322.jpg
author
mjrovai (author)Killer Kitties2016-08-27

Congrats! I am very glad that the instructable could help! ;-)

About This Instructable

6,293views

63favorites

License:

Bio: Engineer, writer and forever student. Passionate to share knowledge of electronics with focus on IoT and robotics.
More by mjrovai:ESP32 and OLED Display: Internet Clock - DHT22 IOT Made Simple: Playing With the ESP32 on Arduino IDEIoT Made Simple: Monitoring Multiple Sensors
Add instructable to: