OVERVIEW

In this blog, you will learn,
1. How to link ESP32 with Arduino IDE
2. How to Interface ESP32 with 0.96″ OLED Display
3. Installation of libraries needed here
4. Understanding the code to build your own smartwatch
5. How to add the digital clock to the OLED Display.

In our previous blogs, you must have learned that how to interface NodeMCU with push-button, Home automation with NodeMCU and firebase, etc.

How to link ESP32 with Arduino IDE

firstly, let’s understand how to link ESP32 with Arduino IDE to take your first step TO BUILD YOUR OWN SMARTWATCH. First, open rduino IDE, then Goto File > Preferences

Now add the given URL to the Additional Boards Manager URLs,

https://dl.espressif.com/dl/package_esp32_index.json

If you already have any additional url present then you can separate them with a comma(,) like shown here,

Once you have added the link to the preferences, press OK. Now, go to tools > Board > Board Manager

Now you will get a window popped up, here search for ESP32 and install the one it will show in output.

Now, let’s verify that and select the board for esp32, goto Tools > Board > DOIT ESP32 DEVKIT V1

If you can see this option, that means you have successfully completed the first step to link ESP32 with Arduino IDE to build your own smartwatch.

How to Interface ESP32 with 0.96″ OLED Display

Now, let’s interface ESP32 with the OLED Display. Here is a list of all the components that you need for interfacing,

SR. NO.	COMPONENT NAME
1	ESP32 WROOM
2	0.96″ OLED DISPLAY
3	BREADBOARD
4	USB CABLE
5	M2M JUMPERS

Now that you are aware of all the components that you will use here. Now interface ESP32 with OLED display TO BUILD YOUR OWN SMARTWATCH as shown here:

Installation of libraries needed

For interfacing the ESP32 with OLED display we need to have two different libraries,
1. Adafruit SSD1306
2. Adafruit GFX

How you have to install is, I guess you already know this right? But still if you are not aware about it then,

goto Sketch > Include Library > Manage Libraries
Now, search for both of it one by one and install them as shown here:

Understanding the code to build your own smartwatch

Now, let’s understand what you will do in the coding stuff. For that I’ll be using Internet of Things for building this smart watch. But Internet of Things also have a disadvantage that due to bad network it will be difficult for a device to keep you update every time. So, instead of using Internet of Things continuously, we will use it only once on booting then we’ll store the date and time into the temporary memory. This will give us the flexibility to keep get the real-time values of date and time and to update them accordingly and every second.

First connect to the WiFi with the SSID and Password of your WiFi,

// network credentials
const char* ssid = <enter-ssid-here>;
const char* password = <enter-password-here>;

Now, initialize the NTP objects for fetching the real-time date and time from the server.

// Define NTP Client to get time
WiFiUDP ntpUDP;
NTPClient timeClient(ntpUDP);

Now initialize the OLED display as interfaced above,

define SCREEN_WIDTH 128 // OLED display width, in pixels
define SCREEN_HEIGHT 64 // OLED display height, in pixels

#define BLACK 0x0000
#define WHITE 0xFFFF

// Declaration for SSD1306 display connected using software SPI (default case):
define OLED_MOSI 21
define OLED_CLK 22
define OLED_DC 4
define OLED_CS 8
define OLED_RESET 2
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT,
OLED_MOSI, OLED_CLK, OLED_DC, OLED_RESET, OLED_CS);

For more clarity check this video,

CODE

Now, write a program that will connect to the WiFi and will collect the date and time from the server initially and then store them to the variable as temporary storage. Then, it will work as per the code below to update the date and time every second.

/****
Ashish Saini
Innovate Yourself
www.innovationyourself.com
****/
include
include
include
include
include
include
include

// network credentials
const char* ssid = <enter-ssid-here>;
const char* password = <enter-password-here>;

// Define NTP Client to get time
WiFiUDP ntpUDP;
NTPClient timeClient(ntpUDP);
char daysOfTheWeek[7][12] = {"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"};
define SCREEN_WIDTH 128 // OLED display width, in pixels
define SCREEN_HEIGHT 64 // OLED display height, in pixels

// Color definitions
#define BLACK 0x0000
#define WHITE 0xFFFF
// Declaration for SSD1306 display connected using software SPI (default case):
define OLED_MOSI 21
define OLED_CLK 22
define OLED_DC 4
define OLED_CS 8
define OLED_RESET 2
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT,
OLED_MOSI, OLED_CLK, OLED_DC, OLED_RESET, OLED_CS);
void setup() {
pinMode(18,INPUT);
pinMode(23,INPUT);
Serial.begin(115200);
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
timeClient.begin();
// Set offset time in seconds to adjust for your timezone, for example:
// GMT +1 = 3600
// GMT +8 = 28800
// GMT -1 = -3600
// GMT 0 = 0
timeClient.setTimeOffset(19800); // 6060(+5.5)
// SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally
if(!display.begin(SSD1306_SWITCHCAPVCC)) {
Serial.println(F("SSD1306 allocation failed"));
for(;;); // Don't proceed, loop forever
}
// Show initial display buffer contents on the screen --
// the library initializes this with an Adafruit splash screen.
//display.display();
//delay(2000); // Pause for 2 seconds
// Clear the buffer
// Clear the buffer.
//display.clearDisplay();
// Display bitmap
//display.drawBitmap(0, 0, myBitmap, 128, 64, BLACK, WHITE);
display.display();
}
void loop() {
Clock();
}
int Clock() {
timeClient.update();
String day=daysOfTheWeek[timeClient.getDay()];
int hour=int(timeClient.getHours());
int minute=int(timeClient.getMinutes());
int second=int(timeClient.getSeconds());
// Serial.println(timeClient.getYear());
unsigned long previousMillis = 0;
const long interval = 1000;
for(;;){
unsigned long currentMillis = millis();
// visibility off/on
if (digitalRead(18)==0){
button=!button;
delay(50);
Serial.println("button pressed");
}
if (currentMillis - previousMillis >= interval) {
// save the last time you blinked the LED
previousMillis = currentMillis;
display.clearDisplay();
// if (button==0)
Clock_Home(hour,minute,second,"PM",10,9,2020, day,INVERSE);
// else
// Clock_Home(hour,minute,second,"PM",6,9,2020, day,BLACK);
second++;
if(second>=60){
second=0;
minute++;
}
if(minute>=60){
minute=0;
hour++;
}
if(hour>=24){
second=0;
minute=0;
hour=0;
}
// if(second<10){
// second
// }
}
}
}
int Clock_Home(int hour,int minute,int second,String am_pm,int date,int month,int year,String day,int VISIBLE) {
display.clearDisplay();
display.setTextSize(1); // Draw 1X-scale text
display.setTextColor(VISIBLE);
display.setCursor(0, 0);
display.println(day);
display.setTextSize(2);
display.setCursor(10, 25);
if(hour<10){
display.print("0"+String(hour));
}
else{
display.print(hour);
}
display.print(":");
if(minute<10){
display.print("0"+String(minute));
}
else{
display.print(minute);}
display.print(":");
if(second<10){
display.print("0"+String(second));
}
else{
display.print(second);}
//display.println(am_pm);
display.setTextSize(1);
display.setCursor(30, 55);
if(int(date)<10){
display.print("0"+String(date));
}
else{
display.print(String(date));}
display.print("/");
if(month<10){
display.print(String(0)+String(month));
}
else{
display.print(month);}
display.print("/");
display.print(year);
// display.println(F("DAY"));
display.display(); // Show initial text
//display.clearDisplay();
delay(100);
// display.startscrollleft(0x00, 0x0F);
// delay(7000);
}

Download the full code TO BUILD YOUR OWN SMARTWATCH here:

DOWNLOAD FULL CODE FOR SMARTWATCH

This is all about HOWTO BUILD YOUR OWN SMARTWATCH. I hope you have got a crystal clear understanding of it. But still, if you are facing any difficulties in understanding and implementing it. Feel free to leave a comment below in the comment section.

Stay Tuned and Happy Learning. 🙂