ESP8266 WiFi Wordclock

Surprisingly recently my parents got rid of their beloved VHS tape recorder and replaced it with a DVD player alongside a new flatscreen TV. The new DVD player undoubtedly was an overdue update to their living room but it was lacking one important feature the tape recorder used to have: An illuminated clock on its front! This meant that while watching a movie with the lights turned way down in the entire room, one wasn’t able to tell what time it was anymore.

Once I heard about this issue I started thinking of a solution to fix it. I started looking into clock designs but most of the nice looking ones weren’t illuminated ones. The idea of using a set of 7 segment displays really wasn’t appealing to me because it just reminds me too much of those cheap radio alarm clocks and an LCD screen would simply be overkill for the task.

I ended up falling in love with the concept and design of a so called Wordclock.

A Wordclock is able to display the current time in words by illuminating a selection of letters which are arranged in rows and columns in a specific order to allow for telling the hours and minutes in 5-minute increments. If let’s say the time was 8:30 am, a Wordclock would display the following text: “It is half past eight” – or in my case “Es ist halb neun”, which is the same thing in German.

Of course such Wordclocks can be store bought and there are also building kits available online. Since their prices range from a few hundred bucks to up to 1300USD though, buying was not an option for me. This is why I set out to build my own Wordclock as this year’s Christmas present for my parents.

The Design

The most important element of the Wordclock is its frontplate on which the letters are displayed. I decided to make this frontplate out of a 300x300mm sized sheet of opaque acrylic glass. In order to be able to illuminate individual letters I had a local copy shop plot a sheet of black vinyl foil of the same size.

For my German Wordclock the layout of the letters looks as follows:

Behind this acrylic frontplate, 110 LEDs are mounted inside their individual compartments. I decided to use individually addressable 5V WS2812b-type LEDs because they would be the easiest to wire up and also only require one microcontroller pin for controlling all of them.

As the “brain of the operation” I am using a cheap, yet powerful ESP8266 microcontroller which offers all of the features required to drive the Wordclock. Its Wifi capability allows the clock to regularly and automatically synchronize time through the NTP service and the GPIO pins offered by the ESP are plenty when the aforementioned WS2812b-LEDs are chosen.

The Build

LEDs

As mentioned before, I am using 110 individual WS2812b-type LEDs. I found the cheapest way to get these was to buy a 1 meter strip of 144-LED/m-WS2812b-LEDs off of eBay since those strips can be cut after each individual LED.

Mounting and Wiring

I decided to mount the LEDs onto a 3mm thick sheet of MDF, 250x250mm in size. Before glueing the LEDs to the MDF, however, I laid out a grid of circles, 15mm in diameter with their center points spaced evenly at 20mm distance. The grid has 10 rows and 11 columns in total. This way I knew exactly what space I had available for each LED.

At this point, I simply used the sticky back of the LEDs to put them in place.

Each LED requires several electrical connections to be made. First of all, there are the power connections, in the case of the WS2812b-LEDs this is a ground and a +5V connection. Additionally, each LED has a “data in” and a “data out” pin, where the “data out” of every LED needs to be connected to the “data in” of the next LED in a chain-like fashion.

Since each LED needs to have a separate compartment without any light leakage in-between them, I had to route the wires interconnecting the LEDs from the front side of the MDF board through to its backside.

For this purpose, I firstly had to drill 660 individual 2mm holes next to the LEDs

At this point it was time for the extremely time consuming and tedious process of cutting around 350 small pieces of wire, stripping the insulation on both ends, pre-tinning the wire and then soldering it to the tiny pads on each LED…

Approximately 10 hours of soldering later, all required connections were made.

Next time I am building a Wordclock, I will definitely be making a large PCB which already has all these connections made and only the lights need to be soldered to. This will save a lot of time and also make everything more reliable I think.

LED compartments

Like mentioned before, each LED needs to be separated from its neighboring ones by a barrier which blocks the light from leaking through from one letter to a different one.

In order to accomplish this, I got myself another piece of MDF with the same width and height of 250mm but 16mm in depth. This depth is also needed to give the light emitted by the LEDs some room to be diffused, so the whole area of a letter is being illuminated evenly.

Once I had laid out the location for each compartment, I went over to a friend’s to borrow his drill press, since these holes would need to be placed as accurately as possible.

I started out by pre-drilling the 110 compartments with a regular 3mm drill bit…

…and then continued by enlarging them to their final size using a 15mm Forstner bit.

Now, most of the letters on the front of the Wordclock are sized to fit into a 15mm circle precisely with only one exception: The top ends of the “W” are sticking out slightly too far. For this reason I had to enlarge a few of the compartments with a Dremel tool.

The only step required to complete this part of the build was to attach the board with the LEDs to the one with the large holes in it. For this purpose, I applied some white silicone caulking between each row and column of LEDs and then pressed both boards together firmly while the caulking set.

Frontplate

Visually, the look of the Wordclock is dominated by its frontplate, hence I invested a lot of thought into how I would be able to make it the best and most sleek looking. In the end I settled on using a 3mm thick sheet of opaque acrylic glass with a black vinyl plot applied to its front.

I had the vinyl foil made by a local copy shop and got quite excited when I first saw how accurately it had been manufactured. This is what it looked like with the transfer film still applied to it:

With the help of my brother I took off the protective foil from the frontside of the acrylic glass as well as the backer foil of the vinyl plot and then carefully applied the vinyl to the acrylic glass, making sure to align it perfectly along the four sides.

We were very pleased with how it turned out, even though we weren’t able to avoid bubbles underneath the foil entirely. The ones which did form and couldn’t be removed were really small and not visible when looking at the frontplate straight on.

We then did a quick test with the frontplate simply laid on top of the LED compartments and were so happy with the result that we decided not to apply the second, mirrored vinyl plot to the backside of the acrylic glass like I had originally planned.

Then it was time to attach the frontplate to the MDF with the LED compartments in it. In order to do this we used some more white silicone caulking.

Power Supply and Microcontroller

The choice of microcontroller used for this project is heavily influenced by the way I decided I wished to update the current time of the clock. Since the internal oscillator of a microcontroller isn’t very accurate it is required to compensate its drift regularly and sync the internal time of the microcontroller with some type of accurate external source of the current time.

The only alternative to an external source would be a battery powered and temperature compensated RTC-module which is able to count time a bit more accurately than the internal oscillator but still wouldn’t be a very convenient solution.

Then there is the possibility of using a DCF77 receiver. DCF77 is a longwave radio signal broadcast in Western Europe used to synchronize all standard radio clocks here. The setup of one of these and their reception in some parts of our house is questionable though. I briefly also thought about using a GPS module to receive the current time but the reception inside the house ruled this one out as well.

At this point I was left with the last possible solution: Using the WiFi network to connect to an NTP server online which is how all network connected devices like PCs and phones synchronize their clocks.

Since the ESP8266 is a very capable yet cheap microcontroller with WiFi capabilities built in I decided that it would be the ideal controller for this project.

Originally, I thought that the ESP itself would be the only IC required for the Wordclock since I had previously always been able to drive the data input of WS2812b-LEDs with the 3.3V logic level the ESP uses, even though the LEDs nominally require 5V logic.

When I flashed some test program onto the ESP and hooked one of its digital outputs up to the input of the LEDs however, I experienced some extremely odd behaviour with LEDs which were supposed to be turned off displaying random colors and similar. In the beginning, I suspected some kind of grounding issues but couldn’t find any problems there. I then hooked up a 5V Arduino Uno to the LEDs and everything worked as expected.

This is why I placed a last minute order at a local electronics dealer for a SN74AHCT125N level shifter IC which would be able to convert the 3.3V logic of the ESP to the required 5V.

I then soldered both the NodeMCU ESP8266 module as well as the 74HC125N IC onto a small piece of perfboard and made all the required connections between the chips as well as connecting power and the LEDs in the appropriate locations.

In case you wish to find a more detailed description of the connections between the ESP8266, the level shifter IC and the LED strip you can check out this page from Adafruit.

For the power supply I had a 5V adaptor on hand, left over from some other project. With its 4A maximum current it is quite a bit oversized for this project, which draws a maximum of 1.5A with the LEDs set to their highest brightness.

Back Cover and Foot

Since the Wordclock is supposed to be placed on top of a cupboard in the living room it needed some kind of foot to rest on. I wanted the foot to be mostly hidden behind the frontplate and the clock to have a frameless and kind of floating look. Making this foot was the responsibility of my brother.

To make the clock blend in with the rest of the furniture he chose to use beech for the foot. With his miter saw he cut two pieces of wood to size. Both are 25cm in width, with the smaller one being 15cm and the larger one about 30cm in length.

Both pieces received a 45° miter on one end so they could then be glued together to form a piece standing up vertically at a 90° angle.

Next, he drilled a hole 15mm in diameter into the side facing towards the front of the clock in order to be able to fit a DC power plug through it.

That’s what it looks like from the back with the plug put in place:

As the very last step in the build process we needed a way to attach the foot to the rest of the Wordclock. In order to do this, we cut four 15mm wide pieces of beech, 25cm long with a 45° angled cut at each end.

These four pieces could then be glued to the MDF board with the LEDs on it like a picture frame with the help of some wood glue.

With four long screws from the backside of the foot we could finally attach the foot to these four beech pieces. Before that however, we glued the perfboard with the electronics on it in place with a dab of hotglue and also attached the supply wires to the terminals of the DC power plug.

The main piece of the clock was attached to the foot in such a way that it seems to be floating off the surface it’s standing on by about 5mm.

The Code

The program which runs on the ESP8266 microcontroller is a pretty simple quick’n’dirty solution for the problem presented. I really wasn’t able to invest a lot of time into good coding-practices but here’s a quick rundown of the idea:

First of all, the microcontroller attempts logging in to the Wifi-network specified in its network configuration file. As soon as this was successful, the NTP service is started and the microcontroller requests the current time from one of the NTP servers available every few minutes. If the Wifi connection or NTP service become temporarily unavailable the microcontroller simply skips synchronizing its internal time with the online servers until they become available once again.

Additionally, every few seconds the information displayed on the LEDs needs to be updated. In order to illuminate the appropriate LEDs every time, the microcontroller internally sees the frontplate as a 2-dimensional array with 10 rows and 11 columns.

The program then splits the current time into hours and minutes with the minutes being rounded down to a 5 minute precision. After that, the program decides which fields in the array make up the words required to display the current time and sets these fields as active with the rest staying inactive.

The only step remaining is to sequentially shift out color information to each of the 110 LEDs through a single GPIO pin.

Later on, I added two more awesome features for a more convenient setup and better maintainability of the Wordclock. Firstly, I implemented the functionality of a library called WiFiManager. When the microcontroller gets powered on, it checks whether some network access data has already been saved to its memory and if this is the case, it attempts connecting to the specified network. If it cannot find any data or connect to the saved one however, it sets up the ESP8266 in AccessPoint mode which means the ESP creates its own WiFi network. You can then connect to this network with your smartphone, scan for available WiFi networks and input the password for your own WiFi. The microcontroller can then connect to this network. This allows for a very simple setup of the WiFi connectivity without having to change anything in the program code. Secondly, I implemented the ArduinoOTA library which allows flashing a new program onto the microcontroller remotely via WiFi (“over-the-air”). This way, changes can be made to the program without having to have access to the USB port of the ESP microcontroller which is hidden inside the back of the Wordclock.

If you want to download a copy of the code, just have a look at it or get some more technical information about the program, simply head over to my Git repository where I keep the most up to date version of code: Wordclock by marcow1601 on GitHub

The Result

18 Comments

    1. Hi Marc,

      thank you for your comment.

      I’m sure you’ll be able to figure out a way to connect your Wordclock to a smarthome setup. I’m actually using an OpenHAB server device to manage all my smart devices but I’m sure FHEM will give you just the same possibilities.

      What are you planning to use the Smarthome Wordclock connection for?

      Marco

      Like

  1. just add these lines to your code 🙂 and search for a new Alexa device …

    #include

    //callback function prototype
    void colorLightChanged(uint8_t brightness, uint32_t rgb);

    Espalexa espalexa;

    uint8_t redCLOCK = 255; // default Farbe Orange
    uint8_t greenCLOCK = 166;
    uint8_t blueCLOCK = 0;

    void setup() {

    espalexa.addDevice(“Wordclock”, colorLightChanged);
    espalexa.begin();

    }

    //the color device callback function has two parameters
    void colorLightChanged(uint8_t brightness, uint32_t rgb) {
    //do what you need to do here, for example control RGB LED strip
    Serial.print(“Brightness: “);
    Serial.print(brightness);

    Serial.print(“, Red: “);
    redCLOCK = uint8_t (((rgb >> 16) & 0xFF) * brightness / 255);
    Serial.print(redCLOCK); //get red component

    Serial.print(“, Green: “);
    greenCLOCK = uint8_t (((rgb >> 8) & 0xFF) * brightness / 255);
    Serial.print(greenCLOCK); //get green

    Serial.print(“, Blue: “);
    blueCLOCK = uint8_t ((rgb & 0xFF) * brightness / 255);
    Serial.println(blueCLOCK); //get blue
    }

    void loop() {

    espalexa.loop();


    leds.setPixelColor(row*11+(10-col), redCLOCK, greenCLOCK, blueCLOCK); //RGB

    leds.setPixelColor(row*11+col, redCLOCK, greenCLOCK, blueCLOCK);

    }

    best regards
    Reiner

    Like

      1. Thank you so much for this information, Reiner. I will definitely check out the ESPAlexa-Library very soon, I hadn’t come across it before and it looks very interesting for a few upcoming projects!

        Like

  2. Any chance that you maybe add a “Minute” display aswell to the sketch? (Like the original with the 4 dots in each corner)

    Like

    1. Hey Ben, thanks for your comment!
      I must admit, that I didn’t even realize the original qclocktwo had this feature, hence the missing implementation during my own build.

      Do you have a specific idea how these four leds would be connected to the microcontroller? Would you add them in series with the WS2812 LED strip displaying the letters or would you want to use a separate microcontroller pin and attach a new sequence of four adressable LEDs to this pin?

      Are you in need for this feature for your own build? If you could give me a bit more information I will gladly add this feature to my sketches on Github.

      Like

  3. Thanks Reiner for the Alex stuff. Works like a charm.
    Marco, as i wrote in the email, i guess its good enough to just extend the array if possible. No need to take another Pin, for the additional 4 LEDs.
    Tried another sketch which implemented it completely different, and it works exactly that way. But i like your programming style much more 😉

    Like

    1. Hey Ben,
      I have just added the one minute increment feature to my sketch on GitHub. You can now simply connect an additional 4 adressable LEDs behind the 110 character-LEDs and for each minute passing between the 5 minute worded increments, an additional minute LED will turn on.

      It is important to note that this change in the code must not be done using the text and display arrays but instead, only the number of LEDs in the initializing call to the NeoPixel library needs to be adapted. Turning on and off the LEDs is then done in the loop function as you should be able to find checking out my comments within the code.

      Also note that a dimming feature has been added. The brightness of the characters will automatically be turned down between 11pm and 6 am.

      Right now I am not able to test this new feature so I would be glad if you could share your experiences using my sketch and let me know of any issues.

      Marco

      Like

  4. Wow, that was quick. Thank you very much for your effort. Will definetely try this later the day.
    Just need to merge and compare the Alexa stuff also into the new sketch.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s