Morphing Digital Clock




A quick video about this project. I have since implemented a way to set timezone.

Thanks to the work of the Arduino and ESP8266 community, this cool clock is a surprisingly easy to build!

  1. Just two main components: Display (obviously) and a WiFi MicroController
  2. No soldering required
  3. No programming skill required, code is provided!

Let's get started!

Step 1: Parts List

Although I've included links to where I bought my parts, these parts can be easily purchased from other vendors all around the world.

  • P3 64x32 RGB LED Matrix $20
  • NodeMCU 32MB ESP8266 WiFi Microcontroller module $4.95
  • Female to Female 20cm Dupont jumper wires $0.85
  • Micro USB Data/Sync cable and 5V phone charger wall adapter (I had these and didn't have to buy it)
  • 5V 2A MINIMUM Power Supply (I had this and didn't have to buy it) $7.95
  • Solderless Female barrel connector to connect the Power Supply to the display power cable.


  • Some USB cables are designed just for power delivery (charging) -- these are ok to power the finished clock, but to upload code to the ESP we will need a data/sync USB cable.
  • The P3 RGB Matrix has over 6000 LEDs. For this clock, we will never turn all of them at once, so 2 Amp is more than sufficient. However, if you plan on doing more with the display and have all LEDs set to white, the recommended power supply is 8 Amp minimum.

Step 2: Wiring Summary

There are a lot of wires, but don't worry. All we're doing is connecting one pin to another.

Just take your time. Double check each connection before and after you plug it in.

Make sure the wires are fully inserted so they would not accidentally come undone. They are quite snug when fully inserted.

Step 3: ESP Wiring

First, let's put jumper wires on the ESP. Don't worry if your wire colors are different than mine. Which pair of pins are connected by each wire is what is important.

Do NOT connect the ESP to your PC YET. We need to complete all wiring before we power anything up.

We are using pins D0 through D8 and two GND.

We can skip the 3V pin because the ESP will be powered via the USB port.

We also skip the Transmit and Receive pins because we will communicate to the ESP via USB or WiFi.

Step 4: Matrix Wiring Part 1

Next, take the other end of the jumper wires we've just hooked up to the ESP and plug them into the matrix.

Again, the chart includes the colors of the wires that I used, but of course your colors might be different.

What is important is that you connect the ESP pins to the matrix as shown in the table.

The matrix is NOT symmetrical, there is a left/right, up/down. Please note the white arrows.

Connectors on my matrix are not labeled, so I've added a photo with labels. Your matrix might be slightly different. These resources discuss other board versions in great detail:

Step 5: Matrix Wiring Part 2

Second set of jumper wires connect the left connector to the right connector of the matrix.

Third photo shows the right side of the matrix.

Step 6: Power Wiring

The display power cable were designed for screw terminals.

You could cut off the solder lug and strip the wire, but I opted to bend the prongs and use additional heat shrink tubing to ensure that there are no exposed metal. Whatever you do, make sure the wires make good contact, securely attached and insulated.

Obviously Red wire should be connected to (+) and Black wire to (-)

Plug the other end to the display, again noting polarity: Red goes to VCC and Black goes to GND.

If your cable is designed to simultaneously power two displays, it does not matter which one you connect to your one display. It is however VERY IMPORTANT that you do not reverse the red(+) and black(-)

If you haven't already, now is a good time to double check to make sure all the jumper wires are are connected to the correct pins (before we apply power).

Check polarity of the power cable AGAIN, make sure that PLUS and MINUS are NOT REVERSED!

Hey, we're done with wiring! But don't plug it in YET!

Step 7: Install Arduino IDE

To upload the code to the ESP, you will need the Arduino software and a few libraries:

Follow installation instructions on the Arduino website.

Arduino has done so much for the maker community, so you should contribute to Arduino, but it is optional.

Click "Just download" to download without contributing.

Step 8: Install Libraries

Once installed, launch the Arduino IDE then:

  • Click the Sketch menu > Include Library > Manage Libraries...
  • Search and install the latest version of the following libraries:
    • AdaFruit Gfx library
    • PxMatrix by Dominic Buchstaller
    • ArduinoJSON version 5.13.2 by Benoit Blanchon
    • WiFiManager by Tzapu
    • DoubleResetDetector by Stephen Denne aka Datacute

Notice that at the time of this writing, ArduinoJSON version 6.x beta does not work with Morph Clock. Doing so causes compile errors. Make sure you specify version 5.13.2 when you install/update ArduinoJSON.
Thanks to user lmirel for noticing this.

Step 9: Install ESP8266 Support

We also need ESP8266 support

  • Close Manage Libraries, but stay in Arduino IDE
  • Go to File > Preferences
  • Click the icon to the right of Additional Board Manager URLs
  • Paste this URL on a separate line (sequence does not matter).
  • Click Ok to get out of Preferences
  • Navigate to: Tools > Board xyz > Board Manager...
  • Search for 8266
  • Install esp8266 by ESP8266 Community.

Step 10: Install CH340 Driver

The last thing to install is the device driver so our PC can talk to the ESP.

Download and install the driver for your computer from the bottom of the manufacturer's driver page.

If you need help, there is a nice tutorial on how to install Arduino Nano CH340 by samuel123abc. The same CH340/CH341 that is on the NodeMCU ESP is on the Arduino Nano clone.

Step 11: Upload the Code

We're almost there...

  1. Download and unzip the latest Morphing Clock code.
    • (see picture above if you're unfamiliar with github)
    • Unzip the downloaded zip file then double-click MorphingClock.ino
  2. Compile and Upload
    • Before we plug in the NodeMCU to your PC via the Micro USB cable, have you double-checked your wiring? :-)
    • Make sure that the pins of the NodeMCU are not being shorted by any metal objects on your desk while the NodeMCU is on.
    • When you plug in USB, you should hear the usual "ding" as Windows recognize a USB device being plugged in.
    • Setup the options in Arduino IDE > Tools as pictured
      • Your COM port might be different.
      • I had to change Flash Size to 4M(1M SPIFFS) your ESP might be different.
    • Click the Upload button as pictured. This will take some time (about a 30 seconds), and there will be warnings, but it will eventually upload to the NodeMCU.


  • If the upload fails because it could not connect, make sure you choose the port where the ESP is plugged into under Tools > Port.
  • If there is no enabled option under Tools > Port
    • Make sure you've installed CH340 driver (see previous step)
    • Make sure you are using a data/sync cable. Test it by connecting your phone and PC with that cable. If you could see files on the phone from the PC, then you have a good data cable.
  • If the compile fails before it tries to upload, scroll up in the black background window and then slowly scroll down and note the first error it reports. If you cannot figure out what it's saying, post that first error and I will try to help. There will be some warnings - those are OK, they do not stop the compile.
  • if you get a JSON-related error when compiling, use JSON library version 5.13.2 instead of the latest version (6-beta) -- Thanks lmirel !

  • If the compile succeeded, upload succeeded but the clock does not work, open serial monitor in Arduino IDE, press reset on the ESP. If the errors are a bunch of hex numbers, try changing the Flash Size to 4M(1M SPIFFS) and reupload.
  • If the error is in English, it should tell you what it's having trouble with. Post what it says if you need help deciphering what it's trying to say :-)
  • Matrix works, but the ESP never shows up as an access point. I've seen this happen on the smaller NodeMCU that is based ESP-12E and 1M SPIFF and use this ESP-12E version of MorphClk.
    Unfortunately, I've only been able to work around the problem by decreasing the refresh rate of the display, so the display is not as bright compared to the original version.

Step 12: Configuration

Once the upload is completed, you should see the word: "Connecting" on the display.

The ESP is trying to connect to your WiFi to fetch the current time. However, it doesn't know the password to your WiFi Access Point (AP) yet.

  • Press the reset (RST) button on the ESP twice in a row about one second apart.
  • The display will show you AP: MorphClk,Pwd: HariFun, and
  • At this time, the ESP is acting as WiFi access point named MorphClk with password HariFun.
  • Go to your computer/phone to change your WiFi connection from your normal WiFi to MorphClk.
  • To switch WiFi, on Windows, the icon is on bottom right corner, on a Mac it's on top right.
  • You might see a warning saying that your phone cannot find the Internet. It's OK. Your phone is now connected JUST to the ESP and the ESP is not connected to the Internet (yet).
  • Using a web browser on your computer/phone, visit, this is a website being served by the ESP.
  • Tap "Configure WiFi" and select YOUR WiFi access point and enter your WiFi password. It will then save that information in permanent storage so you will never to enter it again.
  • This is also where you choose timezone
    Use this website to find the TimeZone offset for your location. Don't forget to enter the minus sign.
  • Enter Y in the 24Hr field to show hours in military format, or enter N if you prefer to 12 hour format. I do not yet have an AM/PM indicator. Maybe you could add that feature and share how you did it?
  • Don't forget to switch your computer/phone back to your normal WiFi access point or you will not have internet access.

Step 13: All Done!

Well, that's it!

All that's left is to make a pretty case for it.

You no longer need the computer/phone. You can use any phone charger to power the ESP.

Please let me know if you see anything that I could improve on this instructable. I will do my best to answer questions too.

If you build this, please click the "I Made It" button and show off your version. Have fun making!

Step 14: Contributed Code

The wonderful people of the Internet have improved this project! Let me know if you've made improvements you'd like to share here. Thank you everyone!

Morphing Clock Remix by lmirel

Date, Temperature, Relative Humidify by VincentD6714

Clocks Contest

Runner Up in the
Clocks Contest

15 People Made This Project!


  • Optics Contest

    Optics Contest
  • Plastics Contest

    Plastics Contest
  • Make it Glow Contest 2018

    Make it Glow Contest 2018

319 Discussions


Question 16 days ago

Hi to everyone.
Today the daylight saving time ended.
I've startet the configuration with the reset button, changed the timezone and clicked on save.
But after the reset it still shows the old timezone +2 instead of +1.
I tried several times but had always the same problem.
Right after the built there was no problem with setting wifi and timezone.
I use a Geekcreit ESP-F Devkit V4. Has anyone an idea what could be wrong?

3 more answers

Answer 12 days ago

Hi Technikker,

I had the same problem with the wintertime. What worked for me was to change the time in the basic screen via the procudure with and than set the time to 1 ( i did that with my phone.) I hope you understand this because i am not a native english

regards Tobo.


Reply 11 days ago

Hello Tobo, thank you for your advice, but I think this is exactly
what I've tried.
I've started the the configuration procedure with pressing reset on the ESP twice.
I've connected to the access point with my notebook (I've also tried my phone). On the web page I've chosen the tab "Configure wifi" and changed the
timezone from +2 to +1. After that I've clicked on save or just hit enter.
The clock restarted but while booting it still showed timezone +2 instead of the
new setting, also after synchronization the time was still 1 hour off (still summertime).
My next thought was if it is perhaps necessary to fill in the SSID and password of the
Wlan too, to change the timezone setting. So I've tried with the same SSID and password I had before, changed the timezone again and saved the settings.
Still the same.
Then I've tried to change the timezone by reloading the code. I hoped to reset it to default. No result, timezone still +2.
Next I've altered the line 40 in the NTPCLIENT.ccp from
"char timezone[5] = "";" to
"char timezone[5] = "+1";" also no result.
I've also searched the web for a timeserver which distributes the DCF77 german
time with automatic summer-/wintertime. This would be the best solution as there would be no need to do this manually each time. I've found an old link to
but when I altered the NTPClient.ccp to this timeserver, the time display was blank.
I don't know if there have to be additional settings or if the server doesn't exist any more.
Perhaps someone knows such a server which distributes the DCF77 time instead of the

Then I remembered an older post down below where someone with another problem
solved it by changing to another WLAN.
I've changed the WLAN SSID and password, set the new timezone,saved it and after
the restart the new timezone was finally accepted.

It seems that the timezone is changed only if SSID and password are changed too.
I haven't tried if you can use some non existing fake ones to change the timezone
and then enter your normal one again, so that you don't have to reconfigure your
router every time.

P.S. also my native language is not english and my grades at school were terrible.
So don't bother and simply try your best
Such forums have visitors from around the world and there are no complaints because
we try to help each other and are happy if someone tries to help us. As long as we can
figure out what the other tries to explain there is really no problem. Otherwise just ask what was meant.


Reply 11 days ago

Hi Technikker,

Iam glad that is worked finally.
The only difference is that in the phone menu i changed also the SSID and PW with my original credentials and put them in again.
It is a pity I know not enough about the programming because for example in the scetch from Vincent about the 64x64 display with a made also the summer/winter time worked automatic so it has to do with how to program. See below for the conversation.(the big red display in French.

And also thanks for the explantion, always usefull.

regards Tobo.


Question 12 days ago

Hi all,
After changing to wintertime i get in the sketch morphing remix the error "class NTPclient has no member named 'getHour' "
Has anyone an idee how to solve this.

regards Tobo.


15 days ago

Hello, please ignore my previous request for help, I got it working perfectly. I made the mistaken assumption that the USB port had enough power since it was only powering a few, one color led's I was wrong. Everyone should hook up a separate power supply. I tried many colors for the display but since I like Blue there really was no other choice. I could not get the colors Purple (205, 0, 205) and Orange (255, 128, 0) to work without them flashing like a strobe light.


2 months ago

What does the 'E' dataline do Mister? Can I replace it with the Latch on the P5/P4 matrix?

1 reply

Reply 16 days ago

My P5 display didn`t have a "E" pin on the connector, so I left the D3 pin on the ESP free.
The clock worked on first attempt. As it uses 1/16 scan the pin "E" = 1/32 scan seems not to
be needed.


Answer 16 days ago

Hi JohnBobo,

just yesterday I built one with a P5 display from ebay.
The pin layout of the connector was different from the one above and the connector
had no pin "E". I made the connections like described in the link to PxMatrix. I didn't
connect the pin D3 which was meant to go to pin "E" on the connector. As the clock
uses 1/16 scan it seems not to be necessary.
It worked on the first attempt. So good look with your built.



16 days ago

Hello, Great Project, I have been working on it all day, and I do mean all Freaking Day. I have had many problems along the way but finally when I apply power and code all I get is 6 vertical lines three dots wide each. When I double click I get this error message:

⸮⸮⸮⸮⸮D⸮⸮⸮$⸮⸮⸮⸮Ȥl⸮⸮⸮l$⸮⸮$:h⸮⸮Failed to open config file
01:52:53.986 -> *WM: Adding parameter
01:52:54.033 -> *WM: timeZone
01:52:54.033 -> *WM: Adding parameter
01:52:54.033 -> *WM: military
01:52:54.080 -> Double Reset Detected
01:52:54.080 -> *WM:
01:52:54.127 -> *WM: Configuring access point...
01:52:54.127 -> *WM: MorphClk
01:52:54.127 -> *WM: Invalid AccessPoint password. Ignoring
01:52:54.174 -> *WM:
*WM: AP IP address:
01:52:54.596 -> *WM:
01:52:54.643 -> *WM: HTTP server started

And even though I have been placing a "N" everywhere I can, as you can see it is still trying to send the unwanted military time.
Any ideas?

Thank you


21 days ago

I thought that you could display additional weather information as a scrolling text. Maybe someone knows how to do it on this panel.


Reply 4 weeks ago

Hi Trenck,

Would you please send the code with the small seconds, i have been trying but can not find it where to change. Regards Tobo.


Reply 4 weeks ago

Hi Tobo!
I'm not a programmer, I'm sure this is not the most elegant solution. I made a copy of the Digit.h and Digit.cpp files. I renamed them Digitsec.h and Digitsec.cpp. I've replaced references from Digit to Digitsec. In MorphingClock.ino, I added the #include "Digitsec.h" line in the Segment section. I replaced Digit to Digitsec in the line of seconds. I've set the size and position of the numbers.

Here is the link of full code:



Reply 27 days ago

Hi Trenck,

Just an another color (0,25,25), everething works fine, thanks


Reply 27 days ago

I'm glad I could help.


Reply 4 weeks ago

Hi Trenck,

Thanks very much for your quick respons. Nice work you did for "not a programmer " i could not have done that !! I am going to look how you did it to learn for it and make ofcourse the clock. Thanks again, regards Tobo.


4 weeks ago

I have a problem when compiling.
An error pops up
#include "Digit.h"
What library do I miss?

Someone can provide me with all the bivliaries used for compilation.


1 reply

Reply 27 days ago

digit.h is part of the project (digit object class) not an additional librairy. If you consider the original Harri's version, you must have 5 tabs in your Arduino sketch editor : the main one Morphingclock.ino, digit.h and cpp, NTPClient.h and cpp.

Good luck