ESP32 Multicolor Word Clock

by Professor Ziebart in Circuits > Clocks

3317 Views, 16 Favorites, 0 Comments

ESP32 Multicolor Word Clock

20210504_113355.jpg
20210502_001023.jpg

The Multicolor Word Clock is a Variant of the Wordclocks which takes Advabtage of WS2812 Multicolor LEDs (aka NeoPixel) and the Power of an ESP32.

Whilst other Word Clocks have the Problem that there aren't enough GPIOs for the Words, the WS2812 only need one GPIO as the Color and so the ON/OFF Info get's handed from one LED to another by the DataIN/ DOUT Pins on each LED.Logically there is only one long Ribbon of LEDs instead of single Words.

To be able to take full advantage of these LEDs I took an ESP32 with a Webserver to be able to switch color modes without having to flash again.

Surely the Hardware can be altered (I was too lazy to cut out the Letters) but I do like the solution with the printed Paper.

This is my first instructable so be kind ;)

The Code is based on Work of Rui Santos from Randomnerdtutorials.com, the greatest site to learn ESP32.

Supplies

For the Clock itself I took:

  • A Bunch of 100 WS2812 LEDs which come as one element by 10x10 LEDs. Beware to test each LED first before building the project. Sometimes some suppliers don't deliver 100% Quality and you dont't want a dead pixel in midst of your clock. (I took these: BTF-LIGHTINGWS2812B ECO RGB-Legierung Drähte 5050 SMD Schwarz LED-Chips mit PCB-Kühlkörper (10 mm * 3 mm) WS2811 IC Eingebauter 5050 SMD RGB DC5V 100pcs)
  • About a meter of soldering wire (0,2mm², I took this one: 0.2mm² 24awg Elektrischer Draht Kabel aus solide verzinntem Kupferdraht 7 Farben je 9 Meter Spule flexible DIY)
  • Some Wooden Rail, 25x10mmx 500mm.
  • Some Pieces of Glass (4mm thick) About 2 Pieces each 120x120mm or larger.
  • A Piece of thin construction board Wood (120x120x2mm)
  • An ESP32 (mine is from AZ-Delivery)
  • An Elektrolytic Condensator 1000 µF/6,3 V or bigger
  • A Resistor about 500Ohms
  • Some soldering lead
  • Some Hot Glue

Sensible Tools:

  • A soldering mat
  • A "third hand" to fix the Bunch of LEDs
  • A good soldering Iron about 330 Degrees hot
  • A good fine wire cutter
  • Insulation stripping pliers adjustable to the small 2mm² Wire)
  • A Chop Stick or anything else to push down the Wires
  • A good set of head worn loupe.
  • Small tweezers for the Insulation and thick tweezers to bend the Wires.
  • A breadboard for Testing and a
  • small mirror so you don't have to turn around the LED Bunch while debugging.
  • Something like a mitre square to cut the Corners of the Wood 45° and a cutting saw.
  • Maybe a 4mm mill

You can see my Setup with two wood blocks (one for the Tools and one to stabilize the Hand)

Soldering All the Neopixels Together

20210501_235425.jpg

Most of the Work is to solder all the Pixels together. I started on the bottom line and worked my way up so that the Wires don't get in my Way whilst soldering.

I tried a bit around and found out this quite good working procedure:

How to Solder Fast - Part 1

20210501_235255.jpg

Take the Wire and deinsulate about 10mm. Throw the insulation away and deinsulate a small rest of about 2mm which you leave loosely on the wire.

Prepare all the left sided (Output) Solder pads with some soldering lead. Leave the Piece on the "roll of wire".

How to Solder Fast - Part 2

20210501_235342.jpg

Now solder the wire to the pad. Take the small tweezers and push the insulation rightmost when your'e done soldering and the pad is cold. Cut away the Wire to about the length of the adjacent soldering pad of the following LED. Beware not to short-circuit your LEDs.

How to Solder Fast - Part 3

20210501_235402.jpg

Now push down the freshly cut wire so it touches the "new" soldering pad. Heat it up with the soldering iron and add some lead. When it's hot enough you will see the lead-drop be sucked under the wire. Hold some time to avoid cold solderings and you're done. Repeat about 600 Times.

Soldering Scheme

Ground and 5V: I soldered each row of 10 LEDs together. The Rows are connected in parallel on the right side from bottom to top.

The Data Wire is connected from the leftmost LED-OUT to the next Row rightmost LED IN.

Mechanical Mounting

20210504_112915.jpg
Maske.png
  • I cut a Square Piece of Glass 4mm thick to about 120x120mm. That way the LED Matrix is covered and I have some frame around it.
  • Then I cut the Wooden Frame with my saw so that I got these nice 45° Angles on the edges.
  • The Frame Sides got milled with 4mm groove (I took a 4mm Mill and a small moving table for my Table Drill, you could also cut the groove with a buzzsaw or by hand).
  • I mounted the Sides and adjusted their length so that the LEDs had enough space and the cutting edges of the glass were hidden.
  • I measured the inside of the frame (which you could also buy) and cut another piece of 4mm Glass which fit exactly into the frame. This Piece of Glass holds the Paper with the Letters in Place and keeps the LEDs at 4mm distance, which I found out is perfect for lighting up small circles around the letters. It was about 115x115mm.
  • Then I printed out the Paper Sheet positioned it between the glass plates and positioned the LED Matrix
  • Then the Matrix is to be fixed with hot glue to the Glass and the Frame Around it (Maybe you find a better solution mine forced me to remove the side frame to access the Paper afterwards)
  • Then I cut the Wooden Backplate to size (About 115x115mm) drilled a small hole for the connection wires, and mounted it behind the LED Matrix
  • Then I soldered the Connection wires: Ground to GND on the ESP32, 5V to the 5V and the Data LIne to GPIO 14.
    • Beware! The Neopixels take about 0,3W, I think which would be 3W for a Row and 30 Watts for the whole Clock. We take advantage here that the Clock works nicely with 30% brightness and never all LEDs lit up white.
  • I glued the ESP32 to the Backplane.

Flashing the ESP32

Then I Flashed the ESP32.

To make the Clock as versatile as possible

  • I already prepared a 24hr Wordclock (which would need more Pixels)
  • void ConvertTime() converts the Time to german words, but in most languages you can find the same structure of "hour talk". Only we switch at half to the next hour!, Not past 8 but half to 9.
  • void MapWordstoPixel is the places to add other languages as you can define which pixels make up your words.
  • Coordinate2Number converts a Coordinate to a number in your LED-Ribbon if you need it for some effects. I wrote a testing routine where you can define coordinates with StartLED and LastLED. (called SingleLED)
  • FlipBoard was necessary to mirror the board as I you turn it around (soldered from the back, viewed from the front) If you solder in a different way, you can change or leave it.

Operation Modes

20210502_001133.jpg
WordClockHTML.png

When the ESP32 fires up, it connects to your Wifi.

Then it fetches the NTP Time and shows the Webpage.

Once a day the Internal Clock is refreshed by NTP.

Get the IP from the Debug- Window and call it via a webbrowser.

On top is a switch to turn off the Webbrowser to save energy when you're done configuring. It will come back if you restart your ESP.

Then we got 3 Sliders:

First one is Called Start-LED which I took for debugging showing a red dot moving from led to led.

Second One is Last-LED

Third one is brightness

Then a colorpicker

and a Combobox for choosing the Operation Mode.

The Word Clock has some Operation Modes now:

1, Testmode: Start on Start LED and show a moving pixel in the color of the Colorpicker to the Last LED.

2. Monocolor Word Clock: The Wordclock shows the words in the color of the Colorpicker

3. Multicolor Word Clock: The Words are in Rainbow Style, Speed is controlled by StartLED and the Rainbow moves over all words. (Shown in the Video above)

4. RainbowColor Words: The Rainbow is on each word. Speed is controlled by Start LED and the "Stretching Factor" is on Last LED. Small Values give a Childrens Birthday look

5. Rainbow Background: the Background's got a rainbow, the Words the color of the Colorpicker. StartLED controls the Speed.

6. my special mode (still in progress) Rainbow Words with a drop of blue water.... Coming Soon.