Tutorial:Storing WiFi Configuration On Your ESP8266 Using The EEPROM Library Made Simple Part 1

Please put some money in the tip jar by clicking on the donate button to support me so I can continue creating contend like this. P.S. please donate more than $1 as PayPal takes minimum $0.30 per transaction
IOT Symbol.png

In this tutorial we are going to build an IOT device, using the ESP8266, that allows you to setup the network configuration (e.g. SSID, and password of a WiFi router ) through a form and store it in it’s memory. This is a bit harder to do then for instance using  an Arduino UNO as the ESP8266 does not really have an EEPROM like all the  real Arduino boards have. This is why most of us struggle to use the EEPROM library with the ESP8266 development board.

This is the first tutorial out of a 2 part series. In part 1 I will teach you how to write the data to the ESP8266. In part 2 we will teach you how to read it back out of memory to configure your IOT device to connect to your home network.

Part one has 3 sections. In section One (The EEPROM Conundrum)  we will look at how to write data to the ESP8266 memory. Section Two (Setting up a basic WAP) will explain how to set up an WiFi Access Point.

"An access point is a device that creates a wireless local area network. or WLAN, usually in an office or large building. An access point sometimes connects to a wired router, switch, or hub via an Ethernet cable, and projects a Wi-Fi signal to a designated area. It is also used for users to configure IOT devices for first time use, or password changes"

In Section Three ( Adding a form to the WAP, and write data to huzzah memory )  we will put it all together to create a functional WiFi access point that writes configuration data to your ESP8266 memory

Below is a You Tube video accompanying this tutorial. For best result download the example sketches within this tutorial before watching this video.

Materials Needed in this tutorial

  • The Adafruit ESP8266 Huzzah Breakout board
  •  5v ftdi cable
  • Access  to the the SSID and password of your WiFi router you want to connect to, to get configuration data

 

Section One:The EEPROM Conundrum

Because many makers want to build cheap IOT solution, the ESP8266 has become a favourite to a lot of us. But writing values other than integers to its memory can be problematic. The main reason is that the standard EEPROM library does not work, because the ESP8266 does not have an EEPROM. The library we use simply emulates an EEPROM but in real life we are writing to the FLASH Memory.

Writing to the ESP8266 memory

The trick is simple; anything we write to the ESP8266 memory will have to be a string, and we can write them one character as a time.  Download the sample sketch from this link:

#include <EEPROM.h> //The EEPROM libray 
String string_Value;
float float_Value=111.2222;


void setup() {
string_Value=String(float_Value,4);
string_Value=string_Value+";";
EEPROM.begin(512);
for(int n=0; n< string_Value.length();n++){
  EEPROM.write(n,string_Value[n]);
}
EEPROM.commit();
}

void loop() {
  // put your main code here, to run repeatedly:

}

As you can see the code is very simple. Let me explain what we do. First we declare a String variable called string_Value and a float variable float_Value with a value of 111.2222

String string_Value;
float float_Value=111.2222;

Next in the setup() function I convert the float variable into a string. I do this using the String object. If you notice  the "4" in the String(float_Value,4), this signifies the precision of the float value that gets stored in the string_Value variable. If you notice I added the "; "character  to the string value.

string_Value=String(float_Value,4);
string_Value=string_Value+";";
string.PNG

I add the ; character as an end of string symbol. When you read data one character at a time you need to know when you have reached the end of the data. The easiest way to do this is by adding a predetermined character that symbolizes the end of data stream. I chose the ; character as you are not allowed to use them in most passwords, or URL's.

Now comes the writing process,  I first initiate the EEPROM function with EEPROM.begin(512);, and I also set the size of the storage as well. Next I cycle through the string value string_Value one character at a time using a for() loop.  I start writing these characters to the ESP8622 memory starting at position 0 with this command EEPROM.write(n,string_Value[n]).

Eeprom_write.PNG
cabinet-with-many-small-drawers.jpg
"If you look at the memory we defined as a chest of drawers with 512 drawer. The first drawer has an address of 0, and the last drawer has a address of 511. As the sketch walk's through the string one character at a time, it opens the drawer with the corresponding address and deposits the character in that drawer. "  

The write position in the ESP8622's memory get determined by the value n which I set to 0 in the initialization section of the for loop. I use the string.Value.length() to set how many times we go through the for loop. After the loop terminates I commit the data written to memory with EEPROM.commit() 

As you see it is quite easy. You can write any value you want to the ESP8266 memory this way as long as you first convert it to a String. 

Section TWO: setting up a basic WAP

Access Points are fun little things that allow you to connect to your Arduino  projects to do interesting things like, get or store data that is password protected, create your own WiFi router, or for our purpose to let the user configure your project.

In this section we are setting up a basic WAP. It will allow you to give your WAP a name like a WiFi router( the SSID), require a password for authentication and security purposes, and provide you with a static IP address so you can access the web server to get information. 

Download the sample sketch "WiFiAccesspoint1_0.ino" from here. I will walk through it and highlight the important bits. 

At the top of the sketch you see the following section near line 20 in your sketch

/* Configuration Variables for the AP name and IP. */
const char *ssid = "Test";
const char *password = "Password";
IPAddress ap_local_IP(192,168,1,1);
IPAddress ap_gateway(192,168,1,254);
IPAddress ap_subnet(255,255,255,0);

These variables set up the WAP environment. The ssid variable gives your WAP its name, and the password provides you with a password. You can change this to whatever your heart desires. Here you can also find 3 variables that define the IP information. If you understand a little bit about the  IP configuration you can alter this to your liking. The IP, Gateway, and subnet get  bound to the board with the following commands you can find in the setup() function roughly at line 33 in the sketch and write below it we set the name and password for the AP ;

WiFi.softAPConfig(ap_local_IP, ap_gateway, ap_subnet)
WiFi.softAP(ssid, password);

You are now ready to connect to the WAP. It still would not do anything as we have to add a service to provide. We are going to add a web-server. We do this with the following line found in your sketch on line 19;

ESP8266WebServer server(80);

This line adds a webserver listening on port 80. Now it is time to add some content to the webserver. We do this by adding the following lines to the setup() function near line 41.

server.on("/", handleRoot);  
server.onNotFound(handleNotFound);
server.begin();

The first line tells the server to execute function handleRoot() when somebody accesses the root of the server. In our case if somebody would type http://192.168.1.1/. The next line will execute function handleNotFound() if somebody would try to access anything else other then the root of the server.

If you look at the bottom end of the sketch you actually see both functions handleRoot() and handleNotFound(). The handleRoot() function has this line of code in it;

server.send(200, "text/html", "<h1>You are connected</h1>");

This line basically sends a response to the request for data when you type  http://192.168.1.1/ into your web browser and press enter.  The send() function basically is made up like this; send(code,content type,content).

The code parameter is basically the type of response the webserver gives. The two most common are 200 (which means this is success full response and here is what you requested), or the 404 (which means the data requested does not exist). The next parameter is content type. For us it is plain html (text/html), and the next parameter is the actual content. In our case it is;

"<h1>You are connected</h1>"

This can also be a string variable that contains html code. If you look at the handleNotFound() function you see that we first create a string called message where we store the html response of the server not finding the requested page. Then in the send() function we give a code of 404 (page not found), a content type of text/plain, and the content is the message string.

The final component in setting up the webserver is the line server.handleClient(); in the loop() function of the sketch. The server.handleClient(); listens to the IP address provided and will call the appropriate function declared in the setup() function. Now your webserver is ready. Compile your sketch and upload it to your huzzah breakout and see what happens.

Section Three: Adding a form to the WAP, and write data to huzzah memory 

In this section we combine Section one and two of this tutorial to get a WAP that writes information you enter into a form to memory.  I am not going to rehash all the points explained in the previous sections, I am just going over the new stuff. Start with downloading the sketch "WiFiAccesspoint_Write1_0.ino" by clicking on this link.

The first major difference is that we create a constant char near line 17 of the sketch named INDEX_HTML. This contains the form html data that we are going to display.

The next big change you can find is near the bottom of the sketch in the handleRoot() function(on line 79 of your sketch). It has a if() statement that checks if the data received by the web server contains the input field information of the form created on line 17 of the sketch. This is done by checking for the names assigned to the input fields on the html form. See the example of  an html input field below.

<input maxlength="30" name="ssid">

The following code checks if the input field name "ssid" is one of the parameters received by the webserver when you submitted it. If it did it returns a value of true, if not it returns a value of false;  

serverhash.png

The if() statement below makes sure that all field name parameters are present. 

ifhashcheck.PNG

If this is true we call the handleSubmit() function. If this is not true we display the html input form.

In this sketch we don't check if the data entered is correct. If this would be a completed sketch to be used in the field it would be imperative to check this.

If the input field names exists  and the if statement returns as true, we call the handleSubmit() function (on line 87 of your sketch). In this function we create an html page displaying the data the user just entered, and we call the write_to_Memory() function (on line 108 of your sketch).

We pass this function the content of each input field found in the html form. You get the content of the form input field named "ssid" with the code below; 

server.arg.PNG

This code returns the value of the form input field as a String. 

In the write_to_Memory() function the end of data symbol ";"  is added to each fields data and call the write_EEPROM( ) function to write it to memory. At the end of the write_to_Memory() function we commit the data to memory using the EEPROM.commit() code.

Webform.PNG

Compile your sketch and upload it to your ESP8266. Now use a laptop or other device to connect to your WAP. If you did not change the ssid name look for the name Test in your available WiFi connection point. Use Password as the password. After it completes connecting to your IOT device start up a web browser and type 192.168.1.1 in your URL bar and press enter. A form pops up, and you are ready to type in your WiFi router credentials and press enter. Your information is now written to your ESP8266.

This completes this tutorial , check back in a week or two for Part 2 of this tutorial where we will learn how to read the data back and how to put these two sections together. If you have further questions leave them in the comments below.  

If you like this tutorial and want to see more of this please subscribe to my periodical Newsletter by filling out the form below, or follow me on Facebook by clicking on this link, and click the Like button on my Facebook page. 

Subscribe to our mailing list

* indicates required
Email Format