Color Changing Hue Clock

by arnoudvh in Design > Digital Graphics

48 Views, 0 Favorites, 0 Comments

Color Changing Hue Clock

Hue_Clock_photo.jpeg
Hue_Clock_on_Wall.jpeg
IMG_2333 Large.jpeg

This digital clock is pleasant to look at as it slowly changes through all colors of the rainbow for each digit, which are placed in a square pattern. It shows the second-dot on the outer edge and has cool animation at minute and hour changes, it also displays the outside temperature (based on zip-code) and automatically adjusts brightness to ambient light.

It is very easy to make, it uses a cheap 16x16 programmable LED matrix and an ESP32 to control, it can be fitted in a standard picture frame of choice. The code can be customized & expanded as desired.

Supplies

16x16 WS2812B programmable LED matrix.jpg
ESP32_WROOM-32.jpg
12x12 Photo_Frame.jpg
Wall_Adapter_5V_4A.jpg
5mm-5516-ldr-photoresistor-dimensions.jpeg
  1. 16 x 16 programmable LED Matrix using WS2812B LEDs 6.3" x 6.3" (Amazon $15)
  2. ESP32 Development board (various <$10)
  3. 5V Wall power adapter >15W
  4. Electronics: Photo-resistor, resistor, wires. Soldering iron.
  5. Picture frame of choice
  6. Optional: diffusing screen

Electronics

Connecting-WS2812B-Addressable-LED-Matrix-to-ESP32-5V-External-Power.jpg

The Programmable LED matrix can be controlled using only 3 wires: +5V, GND and dataIN. As there are many LEDs, the power draw can add up 75W max, but for this project a >15W power adapter will work fine (LEDs are not driven at full brightness, which is too bright). The 5V adapter supply must be connected to the two voltage supply wires for good power supply to the matrix. Splice the 5V power to the ESP32 board also - make sure it is a ESP32 that can accept 5V as power supply. The wires labeled "Out" are not connected (they serve to connect to another LED-matrix).

Any ESP32 board should work, as only 2 GPIO pins are being used; I used a ESP32-WROOM-32.

For brightness control a photo resistor can be added as shown (read as ADC value).

Putting the ESP32 & Matrix in a Photo Frame

Location of photo resistor.jpeg

I used a 12"x12" square photo-frame, it came with a black backing cardboard, I centered the matrix, poked a small hole for the wires and secured in place it with small pieces of double sided tape. The ESP32 board was taped in the back and the photo resistor was taped in place poking out at the top of the frame. The wire from the wall power adapter was taped at the bottom center of the frame.

Instead of the photo-frame-glass, I used a cut-to size sheet of vinyl which is semi-transparent (a bit milky) to diffuse the LED light and obscure the non-illuminated LEDs in of the matrix. A sheet of regular printer paper (under the glass) also works quite well for diffusing, but that of course will result in a white clock face.

Programming

I used the Arduino IDE for coding and programming. The source code is attached, there is a lot of room for improvement and additions (if I find time, I like to add a weather icon (sun, cloud, rain, snow, wind) based on the the open-meteo weather code code). Perhaps people can share their updates in the comments. Animations and color patterns can be changed as desired.

First use the board manager under to Tools menu to download the ESP32 boards from Espressif Systems. Next download the libraries needed in the #includes. The firmware uses WiFi to get the correct time and weather information (via open-meteo API) - so the time is set automatically and always correct.

The code can be compiled and uploaded to the ESP32 via the USB cable interface.

Downloads

Enjoy the Clock!

I've had this clock on the wall for a few months, and it is still pleasing to see and it offers a different color pattern every time. The colors provide a happy sight - and when I saw the rainbow competition email it seemed like a good match. I hope this is an easy and cheap instructable for people to enjoy!