Morphing Digital Clock

36,181

380

338

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

17 People Made This Project!

Recommendations

  • Big and Small Contest

    Big and Small Contest
  • Make it Glow Contest 2018

    Make it Glow Contest 2018
  • PCB Contest

    PCB Contest

338 Discussions

0
None
deadawakeuk

Question 5 days ago

Hi,

I'm having some major issues with the screen itself not displaying correctly. I'm running the Weimos D1 Mini ESP8266, but it's wired up exactly like yours. Code uploads fine. I can access the wifi and set everything correctly in there.

The p3 64 x 32 board itself just has the top half lit up like the photos though...anyone hit this issue?

MVIMG_20181206_203717.jpgMVIMG_20181206_203739.jpg
3
None
Racer1TN

26 days ago

After a few hours of running at the correct time, it drops back an hour. Anyone ran into this situation? Rebooting it resets it back to the correct time and then a few hours later its one hour slow.

4 replies
0
None
JonathanT165Racer1TN

Reply 13 days ago

This is definitely still a bug. Sometimes the clock will run perfectly for days and then jump back 1 hour and other times (after a complete reset via the ip login) it will jump back an hour within just a few minutes of a reset. I feel like it must have something to do with polling the time server? It's very odd how randomly the error occurs.

0
None
lorenz24JonathanT165

Reply 6 days ago

Have the same problem.
It seems after some days if the time server is used the time offset is not added.
WIFI connection is not the problem because after reset the time is correct.

0
None
Racer1TNHariFun

Reply 18 days ago

It's still doing the same thing. Nice idea but not an accurate clock for telling time. :(

0
None
mmccoury

Question 6 days ago

Any one else having these errors:

Failed to open config file
*WM: Adding parameter
*WM: timezone
*WM: Adding parameter
*WM: military
DOUBLE Reset Detected
Exception (3):
epc1=0x4020f527 epc2=0x00000000 epc3=0x00000000 excvaddr=0x4024563f depc=0x00000000
ctx: cont
sp: 3fff38c0 end: 3fff3c60 offset: 01a0
>>>stack>>>
3fff3a60: 00300000 00002000 00300000 402126d8
3fff3a70: 00000002 00000001 00000000 00000002
3fff3a80: 0000001f ffffffff 00000000 00000000
3fff3a90: 00000005 0000003f 3fff4ee4 00000145
3fff3aa0: 0000000a 00000001 3ffe9307 00000001
3fff3ab0: 00000000 00000001 3ffe9307 3ffe8aec
3fff3ac0: 3ffef768 00000000 3ffef768 4020f804
3fff3ad0: 00000001 00000001 3ffe9307 40212c6c
3fff3ae0: 3ffe9306 00000000 3ffe8aea 40212c6c
3fff3af0: 00000000 00000015 3fff2b74 3fff291d
3fff3b00: 00000000 3fff2b74 3ffef768 40210315
3fff3b10: 3ffe8aea 00000001 3fff2b74 40210340
3fff3b20: 3ffef768 3fff2b74 3ffef704 40210328
3fff3b30: 3ffef768 3fff2b74 3ffef704 40208bc8
3fff3b40: 00000000 00000000 3ffe8c54 00000000
3fff3b50: 3fff49d4 0000000f 00000000 3fff49ec
3fff3b60: 0000000f 00000000 00000000 00000000
3fff3b70: 00000000 3ffe9790 00000000 3ffe9790
3fff3b80: 00000000 3ffe9790 00000000 3ffe9790
3fff3b90: 00000000 3ffe9790 00000000 3ffe9790
3fff3ba0: 00000000 00000002 ffffffff 00000001
3fff3bb0: 3ffe8985 00000000 3f014e35 00000000
3fff3bc0: 40207b70 0000000a 3fff4a04 3ffe8a00
3fff3bd0: 3ffe8a92 3fff4a44 00000003 3ffe8985
3fff3be0: 3ffe89f7 3ffe8a88 3fff4a34 00000005
3fff3bf0: 3ffe8985 00000001 3fff2b74 3fff29a4
3fff3c00: 3ffef768 00000000 3fff29a4 00000020
3fff3c10: 3ffef768 00000030 00000020 40207890
3fff3c20: 00000010 3fff2818 feefeffe feefeffe
3fff3c30: feefeffe feefeffe feefeffe 3fff2c34
3fff3c40: 3fffdad0 00000000 3fff2c2c 40211174
3fff3c50: feefeffe feefeffe 3fff2c40 4010070c
<<<stack<<<
?)⸮*⸮
J⸮=== Loading Config ===
Failed to open config file

0
None
VincentD67

Question 2 months ago

Is there anybody who made it working by using a NODEMCU 32 (ESP32) ? I've got rid of compilation pbs but it still does'nt work. Of course, double reset detection has been eliminated.

11 more answers
0
None
Tond11VincentD67

Answer 2 months ago

Hi Vincent,

I do not know a lot about programming but maybe this link could be helpfull??

groet Tobo

0
None
VincentD67Tond11

Reply 2 months ago

Hi Tobo, I'm already a bit further ;-) fighting with the display update and ESP32 timers...There is a lot to understand about ESP32.

0
None
dkelley01VincentD67

Reply 2 months ago

Hi VincentD67, I also am interested in using the ESP32. I don't know what include files to use for this. Have you gotten any further in your quest to use ESP32? Can you share any specific modifications? I am also trying to use SPIFFS to record an alarm time for my clock. Works with ESP8266 but 'SPIFFS not defined' with ESP32. Thanks for any info you can share.

0
None
VincentD67dkelley01

Reply 2 months ago

Hi ,

here is a link to a version working great with ESP32

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

There is not so much difference as proposed in the original version from Hari. Double reset is of course removed as this librayry is not ESP32 compatible. This function could easily be replaced by using the boot push button of ESP32 dev module to enter AP mode (I haven't tried yet). Also, Wifimanager is the ESPAsync version, working fine with ESP32. SPIFFS is the one from Espressif for ESP32. With ESP32, there is existing a problem of flickering display from time to time, for this reason, better is to remain on ESP8266 awaiting a better PxMatrix version.

Vincent

0
None
DarkflickerVincentD67

Reply 8 days ago

Hey, it works great on my ESP32 and a P5 matrix! But there is quite a bit of flickering as you mentioned. Have you found any fix for that yet? Thanks.

0
None
PnavoyVincentD67

Reply 2 months ago

Good day. Perfect project. It is always possible to improve: It is possible to change the display brightness control, for example, from 20.00 to 8.00 - low brightness and at any time high brightness. Then it would be unbeatable for the best hours. Can you help please? Well thank you.

0
None
VincentD67Pnavoy

Reply 2 months ago

Hi, if you have a close look to Mirel's remix, he has implemented this function which is really an easy one. Anyway, I'll post a revised version asap.

0
None
PnavoyVincentD67

Reply 8 weeks ago

Good day. I tried to solve the problem of display brightness control, for example from 20.00 to 8.00, according to my suggestions - Mirelov remix - low brightness and always high brightness. There were errors in compilation that I can not solve - I'm not a programmer. Can you help me? Well thank you.

0
None
VincentD67Pnavoy

Reply 8 weeks ago

Hi, I had no time so far... I'm not programmer either ;-), just learning by doing.

You can set brightness by using different ways:

- change the showtime duration in display.display(70); (unappropriate solution for you)

- change the RGB values, for example (0,0,24) will show a low brightness blue

- use the setBrightness() method of PxMatrix object.
Place display.setBrightness(i);

where you want brightness to change (with i int 0-255).

Then, code in loop becomes :

if (hh != prevhh) {
if (hh >= 20 || hh <= 8) {
display.setBrightness(24); // night brightness
}
else {
display.setBrightness(255); // day brightness
}

int h0 = hh % 10;
int h1 = hh / 10;
if (h0 != digit4.Value()) digit4.Morph(h0);
if (h1 != digit5.Value()) digit5.Morph(h1);
prevhh = hh;
}

I'll compile and share as promised.

cheers

Vincent

0
None
Tond11VincentD67

Reply 2 months ago

Thanks Vincent, i am going to test this as well.

Tobo.

0
None
dkelley01VincentD67

Reply 2 months ago

Thanks for the quick response, code and insight into the issue. I will give the code a look when I get a chance.

0
None
UdvarhelyiG

Question 12 days ago

Hi Everyone,

Anyone can help with the wiring? I am beginner of morphing clock project and I don't know how to step forward! I have not even come to that the matrix write out "connecting" ! Once I managed to upload the code but nothing appeared on the panel. I use nodemcu esp8266 microprocessor and 32x64 led matrix. I have a 12" MacBook and connected via usb cable through EPICO usb hub to ESP 8266! The key question is that Is the usb cable enough to supply energy the LED MATRIX? Tell anyone something about the wiring ?

Thank you for Everyone .)

IMG_5865.JPG