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.

Hardware:

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)

Software:

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

Hardware

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

Software

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.

AJAX

AJAX (Asynchronous JavaScript and XML) allows background updating of data without reloading the entire page. In this sketch AJAX is used to update the date and time every second. Only the date and time are sent by the web server instead of the entire page. Reloading the entire page could take too long and wouldn't be possible every second. This sketch shows a simple example of creating and handling AJAX calls.

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.

Using Forms

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.

Properties File

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.

OLED Display

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:

OLED ESP8266-12E

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:

Scanning...
I2C device found at address 0x3C !

Make sure this address is used in the sketch code:

SSD1306 display(0x3c, D3, D5);

Compile and upload.