ESP8266 (NodeMCU) ADC analog value on dial gauge

This is advance tutorial it uses knowledge for JavaScripts, ESP8266, CSS and HTML. In this example we are reading analog value of ADC and display it on HTML web page, which is served by ESP8266 or NodeMCU web server, To get more details on basic HTML page creation in ESP8266 read this.

ESP8266 have only one adc channel. Lets begin to read analog and make something cool

ESP8266-analog read dial

Steps to make ESP8266 NodeMCU analog read on dial gauge

Step 1: Write a ESP NodeMCU code as given below

This code creates a web server on ESP and connects to the given wifi network configuration. Make changes in WiFi Configuration as per your wifi network

Code is divided in multiple parts lets get to know what is what?

1. Connecting to WiFi Network

2. Create Web Server onRoot, onNotFound and finally readADC

Server Initializer for more information on this read here

The web server main page is on root. The notFound Handler performs task such as sending javascripts, jQuery and Css file to client.  ESP redirect explained here

The above code actually first decodes the URL which is not found then these arguments are passed to spiffs loader. ESP8266 SPIFFS is explained here

Once you know above all programming techniques lets move to actual programming.

Final Complete Code

copy and paste this code in arduino. then upload it

after uploading program wait you need more to do

Step 2: Upload web page and jQuery, Javascripts and CSS to ESP8266 NodeMCU Flash memory

To do this create a folder named as “data” in your sketch folder i.e. where you saved your above .ino file. Then Download and unzip these files ESP8266-analog-gauge-data.

Folder structure is your .ino file with data folder. In data folder you have these files index.html, style.css, jQuery.min.js, d3-gauge.js.

Not Upload these files to your ESP8266 NodeMCU Flash File System. How to Do this ? Read here It takes a time to load files.

Step 3: Testing

Assuming that you have uploaded your program and SPIFFS files. Open serial monitor and reset the ESP. You will get IP address, open it in web browser. Make sure your ESP and your laptop are in same network

and you will get nice looking interface. as we have shown at the beginning.

What You have earned here?

  1. Uploading Web Pages and Javascripts to ESP
  2. Serving these files to Client
  3. Cool analog Gauges to represent data
  4. Background data processing without refresh

6 thoughts on “ESP8266 (NodeMCU) ADC analog value on dial gauge

  1. I’m just starting to use the ESP8622 and this is he best tutorial with a working Gauge sample. So many new things learned and great explanations.

    Is there a guide or explanation on the index.html file?
    mainly in the script, how is the needle updated?
    what or how the functions draw the first and second Gauge?

    Thank you for the great explanations!

  2. Hi, Thanks for the great tutorial. Also try adding the following code with #include header to have mdns broadcast “esp8266.local” address.

    if (MDNS.begin(“esp8266”)) { //Start mDNS

    Serial.println(“MDNS started”);

    Now esp8266.local should give the result.

Leave a Reply