ESP8266 (NodeMCU) ADC analog

value on dial gauge

February 3, 2018ESP8266esp, html, Javascript, NodeMCU, web server
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

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

1 //Connect to wifi Network

2 WiFi.begin(ssid, password); //Connect to your WiFi router

3 Serial.println("");

5 // Wait for connection

6 while (WiFi.status() != WL_CONNECTED) {

7 delay(500);

8 Serial.print(".");

9 }

10

11 //If connection successful show IP address in serial monitor

12 Serial.println("");

13 Serial.print("Connected to ");

14 Serial.println(ssid);

15 Serial.print("IP address: ");

16 Serial.println(WiFi.localIP()); //IP address assigned to your ESP

2. Create Web Server onRoot, onNotFound and finally readADC

Server Initializer for more information on this read here

1 //Initialize Webserver

2 server.on("/",handleRoot);

3 server.on("/getADC",handleADC); //Reads ADC function is called from out index.html

4 server.onNotFound(handleWebRequests); //Set setver all paths are not found so we can handle as per URI

5 server.begin();

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

1 void handleWebRequests(){

2 if(loadFromSpiffs(server.uri())) return;

3 String message = "File Not Detected\n\n";

4 message += "URI: ";

5 message += server.uri();

6 message += "\nMethod: ";

7 message += (server.method() == HTTP_GET)?"GET":"POST";

8 message += "\nArguments: ";

9 message += server.args();

10 message += "\n";

11 for (uint8_t i=0; i<server.args(); i++){

12 message += " NAME:"+server.argName(i) + "\n VALUE:" + server.arg(i) + "\n";

13 }

14 server.send(404, "text/plain", message);

15 Serial.println(message);

16 }
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

1 bool loadFromSpiffs(String path){

2 String dataType = "text/plain";

3 if(path.endsWith("/")) path += "index.htm";

5 if(path.endsWith(".src")) path = path.substring(0, path.lastIndexOf("."));

6 else if(path.endsWith(".html")) dataType = "text/html";

7 else if(path.endsWith(".htm")) dataType = "text/html";

8 else if(path.endsWith(".css")) dataType = "text/css";

9 else if(path.endsWith(".js")) dataType = "application/javascript";

10 else if(path.endsWith(".png")) dataType = "image/png";

11 else if(path.endsWith(".gif")) dataType = "image/gif";

12 else if(path.endsWith(".jpg")) dataType = "image/jpeg";

13 else if(path.endsWith(".ico")) dataType = "image/x-icon";

14 else if(path.endsWith(".xml")) dataType = "text/xml";

15 else if(path.endsWith(".pdf")) dataType = "application/pdf";

16 else if(path.endsWith(".zip")) dataType = "application/zip";

17 File dataFile = SPIFFS.open(path.c_str(), "r");

18 if (server.hasArg("download")) dataType = "application/octet-stream";

19 if (server.streamFile(dataFile, dataType) != dataFile.size()) {

20 }

21

22 dataFile.close();

23 return true;

24 }

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

1 /*

2 * ESP8266 SPIFFS HTML Web Page with JPEG, PNG Image

3 * https://circuits4you.com

4 */

6 #include <ESP8266WiFi.h>

7 #include <ESP8266WebServer.h>

8 #include <FS.h> //Include File System Headers

10 const char* htmlfile = "/index.html";

11

12 //WiFi Connection configuration

13 const char *ssid = "circuits4you.com";

14 const char *password = "password";

15

16

17 ESP8266WebServer server(80);

18

19

20 void handleADC(){

21 int a = analogRead(A0);

22 a = map(a,0,1023,0,100);

23 String adc = String(a);

24 Serial.println(adc);

25 server.send(200, "text/plane",adc);

26 }

27

28 void handleRoot(){

29 server.sendHeader("Location", "/index.html",true); //Redirect to our html web page

30 server.send(302, "text/plane","");

31 }

32

33 void handleWebRequests(){

34 if(loadFromSpiffs(server.uri())) return;

35 String message = "File Not Detected\n\n";

36 message += "URI: ";

37 message += server.uri();

38 message += "\nMethod: ";

39 message += (server.method() == HTTP_GET)?"GET":"POST";

40 message += "\nArguments: ";

41 message += server.args();

42 message += "\n";

43 for (uint8_t i=0; i<server.args(); i++){

44 message += " NAME:"+server.argName(i) + "\n VALUE:" + server.arg(i) + "\n";

45 }

46 server.send(404, "text/plain", message);

47 Serial.println(message);

48 }

49

50 void setup() {

51 delay(1000);

52 Serial.begin(115200);

53 Serial.println();

54
55 //Initialize File System

56 SPIFFS.begin();

57 Serial.println("File System Initialized");

58

59

60 //Connect to wifi Network

61 WiFi.begin(ssid, password); //Connect to your WiFi router

62 Serial.println("");

63

64 // Wait for connection

65 while (WiFi.status() != WL_CONNECTED) {

66 delay(500);

67 Serial.print(".");

68 }

69

70 //If connection successful show IP address in serial monitor

71 Serial.println("");

72 Serial.print("Connected to ");

73 Serial.println(ssid);

74 Serial.print("IP address: ");

75 Serial.println(WiFi.localIP()); //IP address assigned to your ESP

76

77 //Initialize Webserver

78 server.on("/",handleRoot);

79 server.on("/getADC",handleADC); //Reads ADC function is called from out index.html

80 server.onNotFound(handleWebRequests); //Set setver all paths are not found so we can handle as per URI

81 server.begin();

82 }

83

84 void loop() {

85 server.handleClient();
86 }

87

88 bool loadFromSpiffs(String path){

89 String dataType = "text/plain";

90 if(path.endsWith("/")) path += "index.htm";

91

92 if(path.endsWith(".src")) path = path.substring(0, path.lastIndexOf("."));

93 else if(path.endsWith(".html")) dataType = "text/html";

94 else if(path.endsWith(".htm")) dataType = "text/html";

95 else if(path.endsWith(".css")) dataType = "text/css";

96 else if(path.endsWith(".js")) dataType = "application/javascript";

97 else if(path.endsWith(".png")) dataType = "image/png";

98 else if(path.endsWith(".gif")) dataType = "image/gif";

99 else if(path.endsWith(".jpg")) dataType = "image/jpeg";

100 else if(path.endsWith(".ico")) dataType = "image/x-icon";

101 else if(path.endsWith(".xml")) dataType = "text/xml";

102 else if(path.endsWith(".pdf")) dataType = "application/pdf";

103 else if(path.endsWith(".zip")) dataType = "application/zip";

104 File dataFile = SPIFFS.open(path.c_str(), "r");

105 if (server.hasArg("download")) dataType = "application/octet-stream";

106 if (server.streamFile(dataFile, dataType) != dataFile.size()) {

107 }

108

109 dataFile.close();

110 return true;

111 }

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.