Introduction: ESP8266 OLED Clock IoT Using AJAX
This video demonstrates using an ESP8266-12E and an OLED display as a digital clock. While clocks may be ubiquitous these days, this project demonstrates some useful concepts that can be used in a variety of applications. The Arduino IDE is used to develop a sketch that access a NPT time server to accurately set the date and time. The date and time are then displayed on an OLED display and also via a web browser accessing the ESP8266 web server. The web page allows the setting of options like Time Zone, 24 hour clock, daylight savings and a variable to control the time server update interval. The web page uses AJAX to update the time without reloading the entire web page.
There is also a brief overview of the source code sketch in the video.
Step 1: What You Need
You will need the following items to build this project.
- 1 ESP8266-12E module (Less than $10 from eBay or Amazon)
- 1 OLED display. For this project I used a Diymall 0.96" Inch Yellow Blue I2c IIC Serial Oled LCD LED Module 12864 128X64 for Arduino Display 51 Msp420 Stim32 SCR ($10 from Amazon)
- Breadboard. One regular (or two small ones) . (Less than $5 from Amazon or eBay)
- Jumper wires. Male - male. (Less than $5 for more than enough for this project)
- You will need to download the source code sketch and libraries here: https://github.com/dmainmon/ESP8266-OLED-World-Clock-IoT
- You will need the Arduino IDE to compile the souce code sketch. Available from https://www.arduino.cc/
Step 2: Hardware and Software Setup
The photo above shows where to connect the OLED display to the ESP8266-12E.
OLED -> ESP8266-12E
VCC -> 3V3
GND -> GND
SCL -> D5
SDA -> D3
After installing the Arduino IDE you can unzip the download from github (https://github.com/dmainmon/ESP8266-OLED-World-Clock-IoT). There is another zip file inside the download named ESP8266-12E_OLED_ClockAJAX.zip. Unzip this file and place the contents of the libraries folder into the Arduino libraries folder. For a windows computer, the Arduino libraries folder is in Documents/Arduino/libaries.
To compile code for the ESP8266 you will need to install some libraries from the ESP8266 Community. The following video demonstrates how to add these libraries:
After installing all the necessary libraries, you should be able to compile and upload the sketch to your ESP8266-12E board. It may take a minute before the OLED display shows anything. You should be able to see serial output from the console. The first time the code is uploaded, SPIFFS is formatted so a properties file can be created. This take about 30 seconds. After this occurs you will start to see data on the OLED display including the IP address used to access the web server. Access the ip address with a web browser to use the web interface..
Step 3: Coding Concepts
The source code for this project demonstrates some coding concepts that can be useful in other projects.
NTP Time Server
The sketch demonstrates an example of using NTP time server calls to set the current date and time. This is very useful for data logging applications.
This sketch uses Drop Down, Text Box and Check Box form elements to set variables in the code for Time Zone, 24 Hour Time, Daylight Savings and a variable to change the NTP server update interval. Using form posts to control application variables can really take an IoT project to the next level. It allows you to interact with and control devices rather than just observe output.
When the form is submitted, the variables are stored in a properties file. This file is read on startup to set the default preferences for Time Zone, 24 Hour Time, Daylight Savings and the NTP update interval. This way the application always goes back to the last used preferences.
The sketch demonstrates using the ESP8266-12E with an OLED display.
Step 4: Troubleshooting
If you are unable to compile the code, make sure you have installed the proper libraries (see previous setup steps).
If the sketch compiles but the OLED display doesn't show anything, you may need to use the I2C_Scanner.ino sketch included in the github download. This will allow you to determine the I2C device address of the OLED display. The wiring for this sketch is a little different:
VCC -> 3V3
GND -> GND
SCL -> D1
SDA -> D2
Compile and upload the sketch to your ESP8266-12E board and open the serial console. Make sure you have the serial console baud rate set to 115200. If everything is connected correctly the serial output will show the address:
I2C device found at address 0x3C !
Make sure this address is used in the sketch code:
SSD1306 display(0x3c, D3, D5);
Compile and upload.