Paper Cone + Color LED Clock

My granddad was an electrical engineer and he always made amazing projects. He also made clocks from time to time (no pun intended), and I've always wanted to make one myself. After countless ideas that never made it past a sketch, I finally made one!

It's simple to build, easy to look at and a bit unusual. Use your phone to choose the colors, brightness and dimming time, without having to take the clock off your wall! It adjusts automatically to your time zone's summer/winter period.

The build is very simple:

• a few soldering connections
• loading the program onto the controller (NodeMCU) with Arduino
• 3D printing the frame with quick / coarse settings
• making the paper cone and disc with a circular cutter

Power for the LEDs and the board is supplied through a USB charger with micro-USB connector.

Using a NodeMCU with Arduino reduces the circuit to the bare physical minimum: the LED strip, one resistor and one capacitor, and a few short wires. Notably it does not use a "Real time clock" (an extra chip and battery to keep time) - instead, it pulls the time from the internet every couple of hours and uses the onboard clock in between. All settings like color and scheduled dimming are handled by using the WiFi capability of this board: it serves a WiFi access point that a mobile device can connect to and send the settings. This data is stored persistently, so even if the power is cut off, it will remember your chosen settings.

Electronics

NodeMCU

RGB LED strip WS2812B 100 LED / m

Resistor 330 Ohm

Capacitor 100 uF

USB charger / white micro USB cable

Frame and Dial

Basic 3D Printer (at least 120x120 mm build area)

50 g white PLA

Solvent-based glue

Thick white paper (200+ gm/m2)

Circle cutter [must-have for clean result!]

Cutting mat

The LED strip is 60 cm long (60 LED at 100 LED / m), which determines the basic diameter for the frame: 60 cm / 3.141 = 19.09 cm. Unfortunately that is too big for my small 3D printer so I split the frame into multiple segments that will be clipped together.

The frame consists of

• 4x identical quarter circles
• 2x connecting clips (side)
• 1x connecting clip (top)
• 1x connecting clip (bottom)

You can print them all at once if your printer is big enough, or print them one after the other.

The frame will be practically invisible, so don't worry about achieving perfect print quality. Just try to make sure that there is no steps at the joints, or otherwise the paper cover would warp unsightly when attached.

I designed the parts in Onshape. If you want to modify the design (different LED strips, different boards etc.) then you can clone it directly from this link.

Count 60 LEDs on the strip and make a cut before and after. The strip has a direction: the signal from the NodeMCU can only travel in one direction along the strip. Be sure to cut leave the copper pads on so you can solder the wires to them.

On the end of the strip cut off the copper pads. That way you can wrap the strip around the frame and there is still a small gap to feed the wires through.

Make the following connections

• Red wire between VIN on the NodeMCU and VIN on the LED strip
• Black wire between GND on NodeMCU and GND on the LED strip
• Place the capacitor between the VIN and GND on the NodeMCU

Pull the wires through the hole in the frame and solder the connections directly to the pins of the NodeMCU.

Place the NodeMCU into its holder.

Remove the double sided tape backing and wrap the LED strip around the frame.

Briefly

1. Download the code from Instructables or from my github.
2. Open it with Arduino.
3. Choose your board (mine is a "NodeMCU 0.9").
4. Go to Tools > Library Manager and add the libraries
   1. ESP_EEPROM by j-watson
   2. FastLED by Daniel Garcia
   3. WiFiManager by tzapu,tablatronix
5. Go to code tab "01_ColorClock_Time" and change the time zone in line 36 to match yours. Find the right string to use here on github.
   1. #define MYTZ TZ_Europe_Brussels
6. Connect your clock to your computer's USB port.
7. Select the USB port in Tools > Board
8. Click the Upload button

More detail about the code (you can skip this if you just want to use the clock and you are using a NodeMCU):

Board other than NodeMCU

If you are using a board different from "NodeMCU" you may need to change the LED pin. It is configured in the code tab "04_ColorClock_Led"

#define LED_PIN 2

Keep track of time

NTP-TZ-DST ESP8266 example code. This syncs the time from the internet and also manages day light savings time. Go here to find your nearest city in the list and put it in the code. E.g. I live in Brussels, Belgium, so in the code I have

#define MYTZ TZ_Europe_Brussels

Control the LEDS

fastled (documentation) to drive the rgb light strip

Web user interface

simple web server example to provide a user interface to adjust settings

Persistent Settings Storage

ESP EEPROM to store user settings that are retained even if power is removed

Cut a disc of 230 mm diameter. You can use a circle cutter to make the job much easier and give you a perfect circle.

Apply glue (use thin double-sided tape or solvent based glue for best results - water based glue might wrinkle the paper) to the plastic ring and place it onto the paper disc. Take care to center it well.

Cut a cone (link to calculate) by first cutting a circle (310 mm diameter), then, without lifting the circle cutter change the diameter to 208 mm and cut a second circle. You will now have a ring.

Cut a line through the center of the ring. If you happen to have a gridded cutting mat use it for alignment.

Now wrap it around the assembled ring in a cone shape and mark where the ends overlap.

Remove the paper cone and trim the section you marked, removing 2-3 mm extra. This will form the 12 o'clock gap.

Now put the cone back in place and secure it with some transparent sellotape from the back.

When you plug in the power the clock's 12 o'clock LED will light up red. Adjust the ring rotate so the gap lines up perfectly.

The paper construction is finished!

Use a micro USB cable and a good ("fast") USB charger to power up the clock. I've been using a 750mA charger and it works fine. The clock will greet you with red at 12, green at 3, blue at 6 and yellow at 9 o'clock. This way you can verify that indeed the LEDs are configured properly.

Setting up internet connection

The clock will attempt to connect to WiFi to obtain the current time from the internet. If it cannot connect to WiFi it will make an AP (access point) available called "ColorClock". Connect with your phone or laptop to this WiFi network (default password "12345678"). You should automatically be redirected to the configuration portal, where you can select which WiFi network the ESP should connect to and enter the password. If it does not appear automatically you may browse to "192.168.4.1" while being connected to "ColorClock".

This portal will be available after power up until the clock connected to the internet to retrieve the time.

Choose colors

Once the clock can connect to the internet it will start to display the time. The default colors might not be to your liking - no problem, just change them!

Connect to the ColorClock AP, then browse to 192.168.4.1.

Tap the color box for the background / hours / minutes / seconds and choose the colors you like. You can also deactivate displaying the seconds. The order of drawing the different elements is seconds over hours over minutes over background. Confirm by tapping the "Submit" button, or tap "Reset" to cancel the changes.

You can also use the "Random colors" button to let the clock choose colors for you. After that you can still tweak them.

Set up dimming mode

You may want to increase the LEDs' brightness during the day to be easily seen, and dim them for the night.

Choose the relative brightness for these modes with the slider bars.

Choose the time to start dimmed mode (usually in the evening) and the time to go back to normal mode (in the morning).

Tap the "Submit" button to confirm your selection, or "Reset" to cancel the changes.

Demo mode

Press "Start Demo" and the clock will fast forward from the current time so that you can see what it looks like at different times, including the dimming mode. Tap "Stop Demo" to switch back to displaying the current time.

There's still much that could be done to make the clock neater. Some ideas that I didn't get around to implementing yet:

• Use a photoresistor to dim the clock according to ambient light.
• Select time zone automatically based on IP location, or add it to the configuration interface.
• Make the clock change colors during the day, or dim gradually instead of abruptly. The FastLED library that I'm using in this project is really powerful but I've only scratched the very surface here.
• Instead of drawing seconds, hours, ... over each other, use some blending mode. E.g. if minutes are red and hours are green, in the overlapping LEDs it would show yellow.
• Make the configuration interface prettier!
• Change the cone and disc sizes. You could make the disc so large that it meets the cone, or make is a little smaller for a slimmer effect.

I'd love to see your builds here, and if you make any improvements to the code please submit a pull request on the github project.