ESP8266 ADC Gauge

Main Objective Of Repository

Provide an example that uses AJAX communication between an ESP8266 and an HTML website to:

• Display the following data on an HTML website using Google Charts:
  • Varying voltage from a potentiometer that's being sampled by the ESP8266 Analog to Digital converter
  • A random number generated from the ESP8266
• Provide two buttons on the same website that's displaying the mentioned information to allow the user to control a Digital I/O port on the ESP8266

Items Needed

• (1) ESP8266
• (1) OPTIONAL OLED Display with the SH1106 Driver
• (1) Resistor of any value
• (1) Potentiometer

Setup

1. Copy include/secrets.example.h to include/secrets.h and fill in your WiFi credentials. secrets.h is git-ignored so your credentials are never committed.
2. Upload the firmware: pio run -t upload.
3. Upload the web page to flash: pio run -t uploadfs. This builds a LittleFS image from the data/ folder (which contains index.html) and writes it to the ESP8266. The board serves this file at /, so this step is required for the website to load.

Circuit Diagram Overview

Generated in Autodesk EAGLE.

Table Summarization of the Circuit Diagram Above

Component	Connection on ESP
Potentiometer (Pin1/Left-most Pin)	3.3 Volts
Potentiometer (Pin2/Middle Pin)	AD0
Potentiometer (Pin3/Right-most Pin)	GND
OLED (SDA)	D2
OLED (SCL)	D1
OLED (VCC)	3.3 Volts
OLED (GND)	GND
LED	D5

High Level Overview Of What's Going On

What's Asynchronous JavaScript And XML (AJAX)

Using AJAX allows the user to send and receive the following data formats below asynchronously, without having to refresh the entire website, by using XMLHttpRequest:

• JSON
• XML
• HTML
• Text files

AJAX vs HTTP

Most basic IoT examples that use Espressif-based boards like the ESP8266/32 use HyperText Transfer Protocol (HTTP) to display data on a website.

It gets the job done, but it falls short on the points below when used for most IoT applications.

1) HTTP only allows 1-1 communication

HTTP was designed to communicate between two systems at one time. In IoT applications, this is far from ideal.

For example:

• Large industries/manufacturing units that have numerous sensors taking/pushing data to a server MUST wait for a request from the client (the user) to be made if HTTP was being used.
• Once the request is received, the client must wait for the server to respond.
• This process eats up valuable time and is overall an extremely slow way to transmit data.

2) HTTP wasn't made for event-based communication

Most IoT applications have sensors that measure things like:

• Temperature
• Air quality
• Etc.

Such parameters can be used to trigger a relay or some other peripheral.

Since HTTP was made for REQUEST-RESPONSE based communication rather than EVENT-DRIVEN communication, the ESP must wait for the client (you, the user) to make a request for the server (the ESP8266) to respond accordingly.

Displaying The Data and Google Charts

Displaying data from an Espressif-based microcontroller to a website isn't new, but displaying that data with a chart is something I couldn't find much about, hence the main motivation for creating this repository.

Then I stumbled upon Google Charts. For this repository, I used the gauge charts that were provided.

The Google Charts gauges are implemented in data/index.html.