Controlling 7-Segment LED Display Using ESP8266 Web Server

WHAT IT IS

It is a IOT project developed using ESP8266 (NodeMCU) wifi module. The motive of the project is to create a web server on the module that can host multiple clients over the network. Here, basic knowledge of html and javaScript is needed to understand my project. Some advance topic which I will discuss here regarding ESP8266 and javaScript are:

• 2. Web storage using JavaScriptsing ESP8266 (NodeMCU) wifi module. The motive of the project is to create a web server on the module that can host multiple clients over the network. Here, basic knowledge of html and JavaScript is needed to understand my project. Some advance topic which I will discuss here regarding ESP8266 and JavaScript are:

• 2. Web storage using javaScript

SPIFFS

Up until now, we've always included the HTML for our web pages as string literals in our sketch. This makes our code very hard to read, and you'll run out of memory rather quickly.

SPIFFS is a light-weight file system for microcontrollers with an SPI flash chip. The on-board flash chip of the ESP8266 has plenty of space for your webpages, especially if you have the 1MB, 2MB or 4MB version.

You can understand how to add tools in your Arduino software for uploading files to SPIFFS by following link: http://esp8266.github.io/Arduino/versions/2.0.0/doc/filesystem.html

SKETCH

In this project, I have 2 html file and a javascript file. All these files are uploaded to the SPIFFS separated from the sketch so that the change in these files is independent of the main sketch.

Both the html files are retrieved by prepareFile() as shown below:

void prepareFile(){
 bool ok = SPIFFS.begin();
 if (ok) {
   File f = SPIFFS.open("/index.html", "r");
   File f1=SPIFFS.open("/index1.html","r");
   data = f.readString();
   data1=f1.readString();
   f.close();
   f1.close(); 
   }
 else 
     Serial.println("No such file found.");
 }

while the javascript file is read using the loadScript() as shown below:

void loadScript(String path,String type){
  if(SPIFFS.exists(path)){
    File file=SPIFFS.open(path,"r");
    server.streamFile(file,type);
    }
  }

LOCAL STORAGE FOR WEB APPLICATIONS

You can understand how to use different objects and methods of local storage in HTML5 using javascript from the following article: http://diveintohtml5.info/storage.html

I will discuss the use of local storage in my project in the working section.

WORKING

As discussed earlier, we have two html files. One of which is the root html page called when ESP8266 server received "/" i.e If the URI '/' is requested, the server should reply with a HTTP status code of 200 (Ok) and then send a response with the "index.html" file.

The second html file will be sent when the client request from the root page by submitting an input on the form. As soon as, the server gets the input POSTED from the form, it compare it with fixed string value and send the second html page in response.

if(server.arg("nam") == "0") { 
   server.send(200, "text/html", data1);
   sevenSeg(0); }

Since the html for 2nd page is not defined in the sketch, so here we are referencing "data1" that is already read the html codes using SPIFFS.readString()

File f1=SPIFFS.open("/index1.html","r");
data1=f1.readString();

Here sevenSeg() is also called with an argument "0" so that it can be used to display "0" by switching different segments ON and OFF. Here, I made the name of fuction self explanatory i.e onA() will turn on the A segment of 7 seg display on breadboard, similarly offA will switch it off.

So, in this case to display "0", we have to switch all segment except G(DP is ignored as it is not connected to any pin of ESP8266). So my function looks like:

if(num==0){
    onA(); onB(); onC(); onD(); onE(); onF();
     offG();
     }

HTML & JAVASCRIPT CODE

The index.html has a canvas having 7 segment display in off mode and form below it. This is what you see after opening it:

If we want use our webpage without ESP8266, it will be possible by changing the link in the action attribute of your form.Currently this is the link in action:

<form id="form1" action="http://192.168.43.185/submit" method="POST">

Here you can see that the link in action is the same ip address which is alloted to your nodeMCU after connecting to any wifi(or hotspot). The form tag after adjustment looks like:

<form id="form1" action="Computer location of index1.html" method="POST">

Here, I am using web stroge of the browser to store the input value of the user such that the value entered in index.html is stored in the browser locally( like cookie). That value is fetched by the index1.html and number is displayed on the 7 segment display on html canvas.You might understand this procedure by following video:

KEY NOTES

This project will work with your nodemcu if you take care of following points :

• 3. SPIFFS will work only if your index.html, index1.html and main.js are put together in the data folder. You can clone the code file from my GitHub

• 2. Use latest version of browser that supports html5 and new tags and functionality.

• 3. SPIFFS will work only if your index.html, index1.html and main.js are put together in the data folder. You can clone the code file from my GitHub.