Morphing Digital Clock

113,798

674

580

Introduction: 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.

IMPORTANT:

  • 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

IMPORTANT:
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).
    • http://arduino.esp8266.com/stable/package_esp8266com_index.json
  • 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.

Troubleshooting:

  • 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 192.168.4.1.
  • 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 192.168.4.1, 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

https://github.com/lmirel/MorphingClockRemix

Date, Temperature, Relative Humidify by VincentD6714

https://drive.google.com/file/d/1TG8Y1IjAQaV7qGPWL...

Clocks Contest

Runner Up in the
Clocks Contest

45 People Made This Project!

Recommendations

  • Battery Powered Contest

    Battery Powered Contest
  • Plywood Challenge

    Plywood Challenge
  • Plastic Contest

    Plastic Contest

580 Discussions

0
darrylstrong
darrylstrong

1 day ago

Hi Hari!

What a wonderful project, thank you.

One thing I have had to modify is that you aren't flushing the udp buffer. This means that if a reply to a time request takes longer than one secon to be received then the previous reply will be used as the replies are stacked up. A simple flush just before sending the request sorts this :)

Darryl

0
LeaP19
LeaP19

Question 7 months ago

Hey Hari!
Thank you for the great instructions to build this amazing clock.
Is there anyway to use a free input of the esp for switching the time zone?
Is there any free input?
I tried several inputs, no success...
I just want to connect a switch to an input to add 1 hour to the the current time, for not having to use the browser to switch the time zone twice a year...

Greets from Germany
Stay healthy
Lea

0
HariFun
HariFun

Answer 7 months ago

Hey Lea!
That's an excellent idea about putting a physical switch to control timezone offset.
I'll have to look into that.

0
LeaP19
LeaP19

Reply 7 months ago

Thank you. I hope you‘ll find a way :-)

0
noeltoms
noeltoms

Reply 9 days ago

HI Lea,
Can you tell me how were you able to switch the timezone from the browser after the initial run ? I need to change the timezone and I am unable to do so.
Thanks,
Noel

0
noeltoms
noeltoms

Reply 9 days ago

HI Lea,
Can you tell me how were you able to switch the timezone from the browser after the initial run ? I need to change the timezone and I am unable to do so.
Thanks,
Noel

0
_cHooper_
_cHooper_

Question 25 days ago on Step 11

Hi HariFun,
Thanks for putting up this project... I'm so excited to get it working. To that end, I've come across a problem I'm hoping you can help with. Mine doesn't work... at all... nothing on the LCD. I guess that points to a wiring problem, but I was pretty slow and meticulous. I don't seem to have any compile or upload errors, and I did your ESP Reset and only get a "Failed to open config file" error (see image). Any help you can offer would be appreciated.
Thanks!
-carl

javaw_2ipcqCWScm.png
0
_cHooper_
_cHooper_

Answer 24 days ago

UPDATE: SOLVED!!
ok, so I went to github to see if I could download an older version of the project when I stumbled upon the "issues" section. I found a comment by "moybm" on 12/30/19 that suggested using some older versions of the libraries helped them. I tried what he suggested and sure enough... problem solved!! I might go through and see which ones in particular are needed, but I did a wholesale swap as to their recommendations and it works. Very excited!! Here is a link to the post. https://github.com/hwiguna/HariFun_166_Morphing_Clock/issues/11

0
_cHooper_
_cHooper_

Answer 24 days ago

UPDATE: I was able to make some progress on my Matrix at least. It works as expected on various other sketches and even on Hari's MorphDigit3 here: https://github.com/hwiguna/HariFun_165_Morphing_Di...
Unfortunately the MorphingClock still doesn't display anything. From what I can tell, the first thing I should see is the word "Connecting"... this never displays, but I am able to get through the wifi manager and get connected with valid output in the Serial Monitor.

0
dbigliardi13
dbigliardi13

Question 8 months ago

Hi Hari,
I did the project and it works very well, but, since I input the wrong timezone, how can I change it? I try to reset the esp8266, to upload again the sketch... but it doesn't work...
Thank you for your help.
Doriano
----------------------------------------
Solved ! Thank you

0
noeltoms
noeltoms

Answer 26 days ago

Hi..How did you change the timezone ? I need to change my timezone since now DST has ended and the timezone is different now. Appreciate your help.

1
SvenShady
SvenShady

4 months ago

Hi everyone ! =)

Can someone please post all versions of your libraries used?
  • AdaFruit Gfx library
  • PxMatrix by Dominic Buchstaller
  • WiFiManager by Tzapu
  • DoubleResetDetector by Stephen Denne aka Datacute


    I've made a clock long time ago... it worked like a charm...in the meantime i did update arduino.ino... and few libraries... but now i wanted to change colors to red... when i uploaded it to my nodemcu the screen showed only 2 dots... i was swapping versions of libraries... i made it only worse now it shows nothing LOL please someone REPLY with versions and also verified that it works... THANK YOU
    i also tried a fresh copy of morphing clock... no effect :/
0
pjetson
pjetson

Reply 4 weeks ago

I had a similar experience to SvenShady - made the clock a long time ago, all working fine. Lost my (modified) source code in a computer mishap, installed everything again, recompiled and uploaded, then the matrix display didn't work. I loaded the same (older) library versions as detailed in another post here, and now everything works fine. Thanks!

0
SvenShady
SvenShady

Reply 4 weeks ago

i can't find the post with the versions anymore ? LOL

1
pjetson
pjetson

Reply 4 weeks ago

  • AdaFruit Gfx library V1.6.1
  • PxMatrix by Dominic Buchstaller V1.3.0
  • WiFiManager by Tzapu V0.15.0
  • DoubleResetDetector by Stephen Denne aka Datacute V1.0.3
0
BruceH44
BruceH44

Reply 3 months ago

I have finally achieved a display that shows:
AP: MorphClk,Pwd: HariFun, and 192.168.4.1.
The display is incomplete horizontally, with gaps (see image) THANKS FOR THE HELP Almost there

20200816_174707.jpg
0
SvenShady
SvenShady

Reply 2 months ago

sorry for long waiting time... i noticed the mail notification at work... and totally forgot about it when i came home....
i had the same problem...
first check if you connected everything like it has to be...
if it doesn't help... you have to buy a new LED panel...
not every LED panel works good with NodeMCU...
i had to buy a new one...

0
BruceH44
BruceH44

Reply 2 months ago

Thanks, I will try that. I'm not sure that I will buy a new one at that price. There is no guarantee that the new one would work either.

0
Technikker
Technikker

Question 1 year ago

Hello everyone.
About a year ago I managed to built this clock
I used a P5 panel and a Geekcreit ESP-F module from Banggood. It still works fine.
As everyone who saw it was fascinated by this clock I decided to built two other ones as presents.
I still had two of the ESP-F modules left, so I only had to order two P5 panels.
After I have assembled and programmend everything I have the problem, that the displays are showing 4 lines, the next 4 lines are missing/blank, the next 4 lines are shown again and so on.
The connection layout is the same as the one on the old panel and I connected the new panels the same way.
I swaped the ESPs with my first clock and they work fine with the old panel
The ESP from my first clock shows the same error on the new displays.
So I am sure that the displays are at fault.
On a closer look the old display is a 2P1111E (ICs used are TC5020AP, ICN2012, 72HC245C)
The new displays are 2P1111F (ICs used are TC5020A, RUC7258, 74HC245C).
So I think the new chipset is the problem.
Did someone had the same problem? Does someone have a solution for this problem?
As super as this clock and this instructable are, there are so many different types of ESPs and panels out there that it is difficult to find a working combination, especially as the needed information (for example the chipset of the panel) are not provided by the shops and can change at each new order.
A funny fact that I discovered by chance:
When I touch the "EN" Pin of the ESP (I think I give a light eletrostatic discharge to it, which is not very recomendable) the clock sometimes starts working properly until the next reset. But most of the times it freezes or restarts by doing this.
I can't reproduce this effect by pulling up or down the "EN" pin.
When I get the display too work with this method the time is off by minutes per hour.
The clock is too slow then, so I assume the cause for the missing lines is a timing problem.

20190829_143803.jpg20190829_143744.jpg20190829_143755.jpg20190829_143758.jpg
1
Technikker
Technikker

Answer 11 months ago

Finally I had some time to work on this again and was able to solve it (or to tell the truth the community solved it in the meantime and I stumbled over their solution).
Look at the thread: https://github.com/2dom/PxMatrix/issues/139
I needed to install a newer PXmatrix library (higher than 1.3)
With only the new library the display is totally blank at first.
In the MorhpingClock code I had to put // before the line #define double_buffer to disable this line (don't ask me why, I have no clue) .
After that the display showed the picture with missing lines again.
To get rid of them I had to add: display.setMuxDelay(1,1,0,0,0); under void setup ( (I put it after the lines Serial.begin(9600); and display.begin(16);).
With this the problem was solved and the clock works perfect.
A big "Thank you" to all who helped solving this problem