Pingo is a clock that's all about adding some fun and color to your day! Its name means "I paint" in Latin, and that's exactly what it does - it paints the color of time. It's a completely innovative and one-of-a-kind way to tell time. Plus, the colors it displays can actually influence your mood and emotions throughout the day, making it a unique addition to your space.

During the day, Pingo's outer ring is a bright and inviting yellow, just like the sun. This color is known to be warm and friendly, making it a great choice for daylight hours. At sunrise or sunset, the color shifts to a comforting red, while at night it transforms into a peaceful and relaxing shade of purple. The changing colors add a touch of magic to your surroundings and help set the mood for each part of the day.

You could tell time by the changing colors, but actually, you don't. It has an hour hand and a minute hand. A casual user just sees Pingo as some mesmerizing device with colors, but you know the trick to tell the time from it. It uses three rings of LEDs: the outer ring shows a solid color for the minute hand, the second ring shows a rainbow of colors, and the inner disk shows a solid color for the hour hand. Wherever the color of the inner disk matches the color of the rainbow, that is the location of the hour hand. In this picture, the magenta inner disk matches the rainbow color at the ten o'clock position. Similarly, the outer yellow ring matches the rainbow at ten minutes past the hour, so the time is 10:10. Note that it doesn’t matter how the rainbow is rotated as long as you change the colors of the rings to represent the time. You could, in fact, animate the orientation of the rainbow any way you like. For example, you could rotate it once a minute, or you could rotate it in such a way that the outer ring keeps your favorite color. The default setting is, as mentioned, to let the outer ring (with the most LEDs) slowly change its hue to set the mood of time. By default, the brightness reduces to 30% after sunset and goes back to 100% at sunrise.

If you prefer a more traditional clock, you can still use Pingo - it offers a clear indication of the hands of the clock as well. And if you need an alarm, Pingo has got you covered with a blinking red light that goes off for one minute at your desired time.

Pingo is also super easy to use - just connect it to the internet and it will automatically set the time and sunrise/sunset times. You can customize your clock's settings through a simple interface, and your preferences will be saved in non-volatile memory.

Overall, Pingo is a cheerful and unique addition to any space. Its vibrant colors and innovative design will definitely brighten up your day and make telling time a lot more fun!

Supplies

If you're wondering what you'll need to build your very own Pingo clock, don't worry - it's not as much as you might think. I've even included some links at the end of this section to help you out.

First off, you'll need a set of rings with LEDs on them. While there are a variety of suppliers out there, the one I used for my Pingo clock came from aliexpress.

Next, you'll need a micro-controller. Specifically, you'll need an ESP8266 NodeMCU V3 with built-in WiFi. This version is ideal because it has a pin labeled VU that's connected directly to the 5V from the USB port, and you can power the LEDs directly from it. Some jumper wires with female connectors will make your work easier, though you can solder the wires in place if you prefer.

To drive the LEDs, you'll need a capacitor (between 500-1000 uF, 16V) and a resistor (between 250-500 Ohm). This instructable uses a 680 uF/16V capacitor and a 330 Ohm resistor (which has a color code of orange-orange-brown).

You'll also need some extra wire and a soldering iron to connect everything together.

To power the clock, you'll need a 5V USB power supply that can deliver at 1.0 - 1.5A. If you don't have one lying around, you can easily find one on Amazon. And don't forget the micro USB cable to connect the NodeMCU.

As for a diffuser, you'll need a sheet of 3mm translucent white pmma (acrylic). While you can build the clock without a diffuser, it looks better with one. Get your sheet from a local shop, or find one on Amazon.

For the housing, 3dsmax was used to design a simple ring with a bevel and a little rectangle at the bottom to stand the clock on. If you have access to a 3D printer, you can print the included stl file. Once you've printed the housing, you should paint the interior black (or use black material).

Lastly, you'll need a bit of plastic glue (or hot glue) to mount everything together, and a pair of pliers to bend the pins of the micro-controller. With these supplies, you'll be well on your way to building your very own Pingo clock!

leds rings: https://www.aliexpress.com/item/4001111964956.html
nodeMCU: https://www.az-delivery.de/en/products/nodemcu-lolin-v3-modul-mit-esp8266
jumper wires: https://www.aliexpress.com/item/4000203371860.html
diffuser: https://www.amazon.com/Milky-Acrylic-Translucent-Plexiglass-AZM/dp/B0818HYY8G

Step 1: Love Pingo

(and please love its maker by subscribing to his youtube channel youtube.com/@illusionmanager and discover what else he makes, as he loves to reach 1000 subscribers)

Step 2: Pingo's Housing

Let's get crafty and create a stunning housing for our Pingo! If you have a 3D printer, you're in luck because I've attached an STL file for you to print. You can print it in any color you fancy - I personally love a shiny copper finish. But hey, why not experiment with different materials like wood or even mix it up with something else? The inner diameter should measure 172 mm.

Next, use the finished housing to draw a circle on the acrylic and carefully cut it out with a fretsaw. Don't rush this step or the acrylic will melt and your saw will get stuck. Take your time, and you'll get it just right.

Initially, I used the housing like this, but later discovered that the light reflected from the housing made it harder to read the time. So, I decided to paint the inside of the housing black. If you made the housing from black material, you can totally skip this step and move on to the next.

Put the disk inside and glue it in place. I used some very thin 17 mm high acrylic pieces to hold it in place, but it's not necessary. It just makes it easier to glue the ring with LEDs on top at the perfect distance. Don't glue the LEDs yet, as we'll be wiring them in the next step. With a little creativity and patience, our Pingo will be shining bright and looking fabulous in no time!

pingo-housing.stl
Download View in 3D

Step 3: Pingo's Wiring

Let's get this clock up and running! You're excited to see it in action, so let's start by wiring it up. Each ring requires two wires for power: +5V (red wire) and ground (black wire). To avoid any sudden power spikes that might damage the lights, it's recommended to add a capacitor between the +5V and ground. Make sure to connect the capacitor's negative pole to ground and the other pole to +5V. And of course, it needs data! Each ring has a Data Input (DI) and a Data Output (DO). The data from the micro-controller goes first to the central LED Data Input, and then the output from that is connected to the next ring's Data Input. It is recommended to place a resistor just before the central LED's Data Input for optimal performance. As you can see by looking at the yellow wires, I skipped a ring (because it was broken).

The +5V from the LEDs is connected to the pin VU of the NodeMCU, the ground wire is connected to pin G next to it, and the data wire is connected to pin D2.

After you have done the the wiring, glue the rings in place using some hot glue. The first led of each ring, should be in the twelve o'clock position. Leave a 17mm gap between the diffuser and the rings, as this will help the LEDs blend together more smoothly.

Step 4: Pingo's Programming

You need something like Arduino IDE (https://wiki-content.arduino.cc/en/software/) to be able to program the NodeMCU. After you have installed it, connect the micro-controller to your computer using a micro-usb connector. You have to tell the IDE which processor you have. Go for NodeMCU 1.0 (ESP-12E Module) connected to your com port (USB port). The Pingo program needs a few libraries. Go to the tools menu and from there "Manage libraries...". Search for and install "Adafruit NeoPixel by Adafruit"," ESPAsyncWebSrv by dvarrel" (and its dependencies ESPAsyncTCP and AsyncTCP), and "Preferences by Volodymyr Shymanskyy".

Load Pingo.ino and edit the following lines:

37 #define MYSSID "YOUR_NETWORK_NAME"
38 #define MYPASSKEY "YOUR_NETWORK_PASSWORD"

to match your local WiFi network.

51 #define TIMEZONE TZ_Europe_Amsterdam

and set it to your timezone which you can find in https://github.com/esp8266/Arduino/blob/master/cores/esp8266/TZ.h

54 #define LATITUDE "53.25"
55 #define LONGITUDE "6.75"

Lastly, in lines 54 and 55, enter your location's latitude and longitude as strings to fetch the right sunrise/sunset times. You can find these numbers on Google Maps - just click on your location and look for the first two numbers after the @-sign in the browser bar.

That's it! You're ready to compile and upload your code (use the right-arrow in the top bar of the IDE). Once it's running, your very own Pingo clock will come to life, starting with an animated WiFi icon and then displaying the default clock. Enjoy!

pingo.ino
Download

Step 5: Pingo's First Use

(the above image doesn't to justice to the beautiful colors, it is just very hard for my phone to capture them correctly, and no, I didn't build four, i just made it look that way)

After you've finished uploading the software, check the Serial Monitor (in the tools menu of the IDE) for a message similar to the following. If you don't see it, start the Serial Monitor and hit the little rst button on the NodeMCU.

Pingo Clock Starting in 3..2..1..

Pingo Color Clock

by illusionmanager (youtube.com/@illusionmanager)

Access settings like this from your web browser:

192.168.0.184/pingo

The response from openwheathermap.org will show you the sunrise and sunset times, which are important for the clock to function properly. Copy the line below "web browser" and paste it into your browser bar (PC or phone). Note that the actual IP address will be different than 192.168.0.184. The Pingo Color Clock response is a nice user interface. That line also tells you the value of PINGO_IP, in this case 192.168.0.184.

CAUTION:

The USB port on your computer can only deliver up to 0.5A of power. If you increase the brightness to anything higher than 40, you will most likely damage your computer.

Once everything is working, edit line 48 in the code and set MAXBRIGHTNESS to 100 if you are using a 1A USB power supply or 255 if you have a 1.5A power supply. Recompile and upload the code to Pingo. Disconnect the clock from your computer and connect it to the power supply. You can now safely set the brightness to any value. If you want to reconnect the clock to your computer again, reduce the brightness to 40 or lower first and save that setting. For added safety, disconnect the jumper wire connected to the VU pin whenever you connect Pingo to your computer.. You can still change Pingo's programming, but the LEDs will be off.

With your Pingo Color Clock up and running, you can now enjoy a beautiful and unique addition to your space.

Step 6: Pingo's Interface

Whenever you refresh the web page PINGO_IP/pingo (replace PINGO_IP with the value you've got earlier), Pingo shows the time, and nine different styles to pick from. You can set the alarm and adjust the brightness. The save button stores your preferences in non-volatile memory, so Pingo will remember those if it reboots.

If you want it to look as nice as in the picture, download and install the free Empanada font otherwise it will use Helvetica.

Step 7: Pingo's Ideas

Be Creative! Look at the code and add your own clock face.

Perhaps add a a bit of code to the section that reads the answer from openweathermap.org that finds the wind direction and use that in your clock face.


    120	  p = strstr(d,"\"deg\"");
    121   int degree=0;
    122    if (p != NULL) {
    123      		p+=6;
    124      		while (isDigit(*p)) degree = degree *10 + *p++ -'0';
    125      		Serial.printf("wind direction %d\n",degree);
    126    }

Or use similar code and search for "temp" to get the temperature (in Kelvin).

You could cut twelve small rectangles out of vinyl and stick it on the inside of translucent disk to have very clear indications of where the hour tick marks are (I didn't do that, the picture above is the result of Photoshop).

Here is an idea for yet another clock face. Meteors. Edit the magical answer for web browser to add a meteor button. Contact youtube.com/@illusionmanager if you can't figure out how to.

case -5:
              // meteor, the end of the meteors give the position of the clock's hands.
              leds.clear();
              for (int i = 0; i <36; i++) {
                  int pos = (hour % 12) * ringsize[6] / 12.0+0.5 + (minute*ringsize[6])/720.0 -i;
                  if (pos < 0 ) pos += ringsize[6];
                  int val = leds.gamma8(255 - i * 255 / 36.0);
                  leds.setPixelColor(ring[6]+pos, (val << 16) | (val << 8));
                  pos = minute -i;
                  if (pos < 0 ) pos += ringsize[8];
                  leds.setPixelColor(ring[8]+pos, val | (val << 16));
                }
                leds.fill(leds.ColorHSV(hue_hour), ring[0], ringsize[0]+ringsize[1]);
              break;

Step 8: Pingo's Final Remarks

It is important to note that at super low brightness the LEDs don't have many values to represent color, so the clock might not look as good. Some elements might even disappear.

To adjust the clock with the time option, enter a line like this in the address bar of your browser, replacing PINGO_IP with the IP address of your Pingo device:

PINGO_IP/pingo?time=-3600.

This will subtract 3600 seconds from the current time. However, be sure to set it back to zero afterwards, as the time server should return the correct result for your timezone.

To change the default brightness reduction during nighttime, enter a line like this in the address bar of your browser, replacing PINGO_IP with the IP address of your Pingo device:

PINGO_IP/pingo?night=50.

This will set the brightness reduction to 50%. The default value is 34%.

If for some reason the NodeMCU decides to reboot, the WiFi animation will play during the setup process. You can disable this animation by recompiling the code with line 61 #define WIFI_ANIM commented out. After this change, the reboot will not be noticeable to anyone.
If you want to use a static IP address for your Pingo device, rather than a dynamic one, you will need to change some settings in your router. The process for doing this will depend on your router model and software, but in many cases, you can find an option to add static IP addresses to the DHCP settings in your router's configuration.