7-Segment Digital Clock Using LED Strip Lights

This instructable will guide you through the exciting process of building a LED digital clock from scratch, making it a perfect beginner-friendly project that blends electronics, coding and web development. We’ll start by assembling a segmental LED display, creating a reliable power supply using a 5V mobile charger and setting up an Arduino IDE to program our clock. Along the way, we’ll write code in Arduino IDE, design a sleek webpage using HTML, CSS, and JavaScript, and integrate it all to create a customizable timepiece that can change colors with a simple web interface. While this tutorial is designed to be detailed and beginner-friendly, it's important to note that soldering this clock can be a tiring task, requiring patience and precision, which might challenge your motivation—so take breaks when needed! Additionally, while my version was crafted using cardboard, you have the flexibility to 3D print, laser-cut, or use acrylic for a more polished and professional look. Get ready to dive into a rewarding DIY experience and bring your digital clock to life!

Supplies

Electronic components:

1. ESP8266 NodeMCU CP2102 Development Board (microcontroller)
2. WS2812B Neopixel LED Strip (60 Led/meter) (5volts- 5meter pack)
3. DS1307 Real Time Clock (RTC) Module
4. Breadboard
5. Jumper wires (male to male)
6. Copper wires
7. 5volts phone charger (if you have extra at home otherwise buy a AC to DC 5volts supply)
8. Soldering iron & wire

Craft materials:

1. Cardboard
2. Glue gun
3. Paint
4. Covering paper
5. Covering transparent sheet
6. Tracing paper or butter paper without any print
7. Black tape
8. Nail paint
9. Glue

Step 1: What Is 7-segment Display?

7-segment displays are based (as per their name) on seven segments, which are actually LEDs of a specific shape and color. Each of these segments is typically designated by a letter from “a” to “g”. When using LED strips we will arrange them in this manner only but cutting the strips at cutting line and arranging them on the cardboard.

Step 2: Main Electronic Components Used

1. Addressable LED strip lights, such as the WS2812B, consist of multiple LEDs that can be individually controlled. Each LED contains a small microcontroller, allowing for precise control over colour and brightness. These strips typically operate on 5V and can be cut to any length, making them highly versatile for various applications.
2. The Real-Time Clock (RTC) module, such as the DS1307, is a timekeeping device that maintains accurate time even when the main power is off. It includes a battery backup, ensuring continuous operation. The DS1307 is known for its high accuracy, with an error of only a few minutes per year.
3. The microcontroller acts as the brain of the project, managing the interactions between the LED strip and the RTC module. It processes the time data from the RTC and controls the LEDs to display the correct time.

Step 3: Install & Setup Arduino IDE for ESP8266

For setting up the computer for its programming and testing we have to install:

1. Arduino IDE software
2. Install the desired ESP8266 driver (CP2102 or CH340)
3. Install ESP8266 package in Arduino IDE
4. Test the if everything is working or not by uploading a simple blinking LED code.

Step 4: Testing of LED Strip by Uploading Code

To check if the LED strip is working or not just upload this simple code in which I have specified number of leds and the digital pin it connected to. Upload this code through Arduino IDE to your ESP8266 board.

Through this code the leds will light up one by one in random colors.

#include <FastLED.h>

#define NUM_LEDS 150

#define DATA_PIN D4

CRGB leds[NUM_LEDS];

void setup() {

FastLED.addLeds<NEOPIXEL, DATA_PIN>(leds, NUM_LEDS);

}

void loop() {

// Light up the LEDs in a snake-like pattern with different colors

for (int i = 0; i < NUM_LEDS; i++) {

leds[i] = CHSV(random(0, 255), 255, 255); // Set to a random color

FastLED.show(); // Display the updated colors

delay(50); // Wait for 100 milliseconds

leds[i] = CRGB::Black; // Turn off the LED

}

// After the loop reaches the last LED, turn on all LEDs with different colors

for (int i = 0; i < NUM_LEDS; i++) {

leds[i] = CHSV(random(0, 255), 255, 255); // Set to a random color

}

FastLED.show(); // Display the updated colors

delay(10000); // Keep all LEDs on for 2 seconds

// Turn off all LEDs

for (int i = 0; i < NUM_LEDS; i++) {

leds[i] = CRGB::Black; // Turn off all LEDs

}

FastLED.show(); // Display the updated colors

delay(1000); // Wait for 1 second before repeating the loop

}

Step 5: Making Template to Trace Digit on the Cardboard

Here I made a template of a 7-segment digit and colon so I can just trace it on my base easily.

Step 6: Cut Strip Lights & Paste

To arrange and solder the WS2812B LED strip for a 7-segment digital clock, follow these steps:

1. Determine the number of LEDs required for each digit (this is what I used you can use less leds to reduce the size of the clock)
2. LEDs per segment- 3 LEDs
3. LEDs per digit- 3×7segments= 21 LEDs
4. No. of digits to display hours, minutes & seconds- 6 digits
5. No. of colons (:) between digits- 2 colons
6. LEDs required for colons- 4 LEDs
7. LEDs required for all 6 digits- LEDs per digit×6= 21×6= 126 LEDs
8. Total LEDs used- 126+4 colon leds= 130 LEDs
9. Carefully cut the WS2812B strip into pieces:
10. 42 segments (each with 3 LEDs).
11. 4 colon pieces (each with 1 LED).
12. Always cut on the designated copper cutting line to ensure the circuits of the individual 3-LED segments remain intact.
13. Identify the DIN (data input), GND and VCC pins.
14. Secure the LED strip on the base using adhesive.
15. Before pasting see the diagram to get idea of how to arrange the cut LED strips.

Step 7: Solder the Strip Lights

1. Before soldering see the diagram to get idea of how to connect the cut LED strips.
2. Solder the GND and VCC pins along the entire strip.
3. Connect the DIN pin of each section to the DOUT (data output) pin of the previous section.
4. Use thin wires to connect the sections if necessary.
5. Add connectors for power (VCC and GND) and data input (DIN).
6. Wire the entire display in a single, continuous data chain:

ESP8266 > Digit 1 > Digit 2 > Colon 1 > Digit 3 > Digit 4 > Colon 2 > Digit 5 > Digit 6

(code file attached below is for this clock to work without webpage control)

Step 8: Circuit Diagram Connections

1. ESP8266 Microcontroller:
2. Power Supply:
3. 3V3 pin: Connected to RTC module’s VCC.
4. GND pin: Connected to RTC module’s GND and the GND of the LED strip.
5. Data Pins:
6. D1 (SCL): Connected to RTC SCL pin.
7. D2 (SDA): Connected to RTC SDA pin.
8. D6 (DIN): Connected to the data input of the LED strip.
9. RTC Module (DS1307):
10. VCC: Connects to the 3V3 pin of the ESP8266 for power.
11. GND: Connects to the GND pin of the ESP8266.
12. SCL: Connects to the D1 pin of the ESP8266.
13. SDA: Connects to the D2 pin of the ESP8266.
14. LED Strip Lights (WS2812B):
15. Power Supply:
16. +5V: Connects to an external 5V power supply.
17. GND: Connects to the GND of both the power supply and the ESP8266.
18. Data Input (DIN): Connects to the D6 pin of the ESP8266, allowing the microcontroller to send data to the LEDs.
19. Power Supply:
20. Provides 5V to both the ESP8266 (via VIN pin) and the LED strip.

Common ground connections ensure a stable circuit.

Step 9: What Does the Code Say?

Web interface for User Control: This webpage enables us to:

1. Customize clock colors: Users can modify the RGB values for digits and colons.
2. Change time format: The clock supports 12-hour and 24-hour modes.
3. Set custom time: Users can manually enter a specific time.
4. Enable timer and countdown modes: Provides additional functionality for timed events.

Web Page Implementation:

The ESP8266 hosts a local web server, allowing remote access to the clock's controls via a smartphone or computer.

Step 10: Upload the Code & Control the Colors

1. Included Libraries:
2. <Wire.h>: Manages I2C communication.
3. <Adafruit_NeoPixel.h>: Controls the WS2812B LED strip.
4. <RTClib.h>: Interfaces with the RTC module.
5. <ESP8266WiFi.h>: Connects to Wi-Fi.
6. <WiFiUdp.h>: Handles UDP communication.
7. <NTPClient.h>: Fetches time from an NTP server.
8. <TimeLib.h>: Manages time.
9. <WiFiClient.h>: Manages HTTP requests.
10. Defines and Constants:
11. LED_PIN: The pin connected to the LED strip.
12. NUM_LEDS: Total number of LEDs in the strip.
13. DIGITS: Number of digits in the clock.
14. SEGMENTS: Number of segments in each digit.
15. SEGMENT_LEDS: Number of LEDs per segment.
16. FIRST_COLON_INDEX and SECOND_COLON_INDEX: Starting indices for the colon LEDs.
17. HOUR_LEDS_START, HOUR_LEDS_END: Indices for LEDs displaying hours.
18. FIRST_COLON_INDEX, SECOND_COLON_INDEX: Indices for the colons.
19. MINUTE_LEDS_START, MINUTE_LEDS_END: Indices for LEDs displaying minutes.
20. SECOND_LEDS_START, SECOND_LEDS_END: Indices for LEDs displaying seconds.
21. WiFi and NTP Configuration:
22. const char* ssid and const char* password: WiFi network credentials.
23. const char* wled_ip: IP address of the WLED device.
24. WiFiUDP ntpUDP: Initializes the UDP instance.
25. NTPClient timeClient: Configures the NTP client to synchronize time.
26. RTC and LED Strip Initialization:
27. DS1307 rtc: Initializes the RTC module.
28. Adafruit_NeoPixel strip: Initializes the LED strip with the specified parameters.
29. Segment Mapping:
30. uint8_t segmentMap[10][SEGMENTS]: Maps digits (0-9) to their respective segments.

Key Functions and Their Roles:

1. setup():
2. Initialize the serial communication for debugging.
3. Begin the LED strip and clear it initially.
4. Establish WiFi connection.
5. Set up and synchronize time using NTP.
6. Initialize WLED for LED control.
7. loop():
8. Continuously handle WLED operations.
9. Update the time using the NTP client.
10. Display the current time on the LED strip.
11. displayTime(hour, minute, second):
12. Convert current time into digits.
13. Map each digit to the corresponding segments.
14. Control the LEDs to display the time accurately.
15. Light up the colon dots between hours, minutes, and seconds.
16. displayDigit(digitIndex, number):
17. Map each digit to its segments on the LED strip.
18. Light up appropriate segments for each digit.

Step 11: Build the Outercover of Clock

To build this clock I made it layer by layer:

1. Took a plane cardboard base, drew the digits, stick & solder the leds.
2. Took another cardboard sheet to make the digits in 3D.
3. Covered the outer cover with brown covering paper.
4. Painted the whole clock with black paint.
5. Covered the digits with tracing paper and painted it edges with paint to give it a clean look.

Step 12: Cover the Clock to Protect It

Finally took a transparent covering paper and covered the whole clock with it. And with black tape I secured the edges of the clock.

Previously, I left some space to place electronics inside it. So, that space will be used to program the clock in future and give it external power supply.

Step 13: Use External Power & Hang the Clock

I can't run this clock on batteries so I used a 5volts mobile charger. I separated its positive and negative terminals and gave power to my clock. It runs perfectly now.