Next step: ESP8266 NodeMCU project (how to measure potentiometer and show values in the webpage)

In this exercise, I will show how to check the potentiometer values (resistance) by NodeMCU development board (ESP8266) and then show value by using intergrated webserver to visitors

Required hardware and software

This input exercise is pretty simple what comes to electronics, because only NodeMCU and one potentiometer is required for this task (and necessary cables and breaboard of course)

Hardware

• 1x breadboard
• 1x NodeMCU (ESP8266 board)
• 1x Potentiometer (10k)
• 3x female-to-female jumper wires
• 1x computer ;-)

Software

• 1x Arduino IDE (see the embedded program week)
• 1x ESP8266 Board Package and the serial port driver (see the embedded program week)
• LIBRARIES

Circuit diagram and breaboard layout

In this exercise we will use only linear (rotary shaft) potentiometer (10Kohm). It will be wired to NODEMCU by using three wires: ground, 3v current and analog input (resistance of the potentiometer, which will be measured by the NODEMCU)

Next step is to create sketch (code) in Arduino IDE and upload it to ESP8266

Now next step is to configure ESP8266 to run as an standalone www-server and measure analog input (potentiometer) value to be shown on simple webpage

Preparing the Arduino IDE

In order to be able to program ESP8266 you need to install Arduino IDE and then install ESP8266 add-on to it. I have explained those pages in the embedded programming week, so please visit here: week 9. Embedded programming.html

In this case you doesn't need to install any other additional libraries, so we can proceed to create actual sketch!

Displaying potentiometer value on ESP8266 web server

Now, I am going to explain how to configure ESP8266 into Station (STA) mode, and create a web server to serve up web pages to any connected client under existing network

First step is to check what are details of your wifi network. Before uploading the sketch, you need to modify the following two variables witrh your network credentials, so that ESP8266 can establish a connection with existing network

				  
const char* ssid = "YourNetworkName";  // Enter SSID here
const char* password = "YourPassword";  //Enter Password here  
				  

In the following code sketch you will see different segments of the code commented, which will help you to understand how this simple potentiometer www-server will work in the practise

				
/* Simple code, which will measure potentiometer value and 
 *  show it on internal ESP8266 webserver
 */

// include ESP8266 www-server library, which do turn ESP8266 into www-server
#include <ESP8266WebServer.h>

// Analog input A0 is defined to be potentiometer
#define Potentiometer A0

// let's define variable potvalue where potentiometer value is stored
float potvalue;

// wifi settings (these variables need to be adjusted to fit into wifi network )
const char* ssid = "ubinotko1";
const char* password = "";

// www-server will be set up to answer in port 80 and can be called as server in the code
ESP8266WebServer server(80);


/* 
*    Following codes are run once; this is the spot for setup and configuration
*	- In this program this section is used to start www-server and serial-connection (for debugging)
*
*/
void setup() {

// serial connection is openeded
  Serial.begin(115200);
  delay(100);

// this code puts SSID name to serial console 
  Serial.println("Connecting to ");
  Serial.println(ssid);

//connect to your local wi-fi network
  WiFi.begin(ssid, password);

/*check wi-fi is connected to wi-fi network. 
* If connection is not established "." will be displayed until connection is ok
*/
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }

// When wifi connection is established, serial console will show following messsage
Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());
 
 // if page request is ok, show handle_onconnect, if not found, then show handle_not_found
  server.on("/", handle_OnConnect);
  server.onNotFound(handle_NotFound);
  
  // start server and show it also via serial connection
  server.begin();
  Serial.println("HTTP server started");
}

/*  Put your main code here, to run repeatedly:
*	In the context of code this section is used only to listen port 80 (wait potential visitors)
*
*/

void loop() {
 
server.handleClient();

}

// When page request is done by visitor(s) this section will read potentiometer and send it to www-pages
void handle_OnConnect() {
    potvalue=analogRead(Potentiometer);
	server.send(200, "text/html", SendHTML(potvalue));  
}l

// if requested page is not available, then show error 404 message
void handle_NotFound(){
  server.send(404, "text/plain", "Page Not found. I am sorry :(");
}

// This is full html page which will be shown to visitor
String SendHTML(float potvalue){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head>\n";
  ptr +="<title>ESP8266 Potentiometer value (resistance) www-server ;-)</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;}\n";
  ptr +="p {font-size: 24px;color: #444444;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<div id=\"webpage\">\n";
  ptr +="<h1>ESP8266 Potentiometer Value Station\n";
  ptr +="<p>Resistance: ";
  ptr +=potvalue;
  ptr +="Ohm</p>";
  ptr +="</div>\n";
  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}