OLED Stylized Clock

While watching Tron for the umpteenth time, I started thinking about how data could be displayed in abstract, but still readable, ways.  The OLED display, with its crispness, seemed like a good fit for what I had in mind.  After considering a few different options, I settled on a building a stylized clock display.

I used the following parts in this project:

OLED Clock Zoomed

The blocks are drawn so that, from outside to inside, each ring represents hours, minutes, and seconds.  The current hour and minute are indicated by the empty block in each ring.  The current second is drawn as a solid block (this ends up looking like a square moving around the inside ring).  In the above picture, the time can be read as 8:23 and about 38 seconds.  The overall circuit is set up by following the wiring in the tutorial on the monochrome 128×64 OLED and plugging the RTC breakout board directly into the Arduino as shown in the DS1307 tutorial.

OLED Clock Protoboard

The main sketch file handles reading the current time and drawing the rectangles.  A second file contains the coordinates for each rectangle.  The rectangles are broken up into three arrays – hour_rects, minute_rects, & second_rects and ordered by the appropriate time value.  The advantage of this approach is that modifying the design of the clock is as easy as adjusting the values in the appropriate array entry.  The biggest downside was the increase in memory usage; I ended up keeping the arrays in program memory by declaring the arrays with the prog_uint8_t type and PROGMEM attribute:

prog_uint8_t hour_rects[12][4] PROGMEM = {
...
};

Also, reading from the arrays required the use of an appropriate function:

pgm_read_byte_near(&rectangles[i][0]);

The full source is available on github – I’d love to see what other designs for clock displays people come up with or if someone extends this to display other types of data.


Adafruit publishes a wide range of writing and video content, including interviews and reporting on the maker market and the wider technology world. Our standards page is intended as a guide to best practices that Adafruit uses, as well as an outline of the ethical standards Adafruit aspires to. While Adafruit is not an independent journalistic institution, Adafruit strives to be a fair, informative, and positive voice within the community – check it out here: adafruit.com/editorialstandards

Join Adafruit on Mastodon

Adafruit is on Mastodon, join in! adafruit.com/mastodon

Stop breadboarding and soldering – start making immediately! Adafruit’s Circuit Playground is jam-packed with LEDs, sensors, buttons, alligator clip pads and more. Build projects with Circuit Playground in a few minutes with the drag-and-drop MakeCode programming site, learn computer science using the CS Discoveries class on code.org, jump into CircuitPython to learn Python and hardware together, TinyGO, or even use the Arduino IDE. Circuit Playground Express is the newest and best Circuit Playground board, with support for CircuitPython, MakeCode, and Arduino. It has a powerful processor, 10 NeoPixels, mini speaker, InfraRed receive and transmit, two buttons, a switch, 14 alligator clip pads, and lots of sensors: capacitive touch, IR proximity, temperature, light, motion and sound. A whole wide world of electronics and coding is waiting for you, and it fits in the palm of your hand.

Have an amazing project to share? The Electronics Show and Tell is every Wednesday at 7pm ET! To join, head over to YouTube and check out the show’s live chat – we’ll post the link there.

Join us every Wednesday night at 8pm ET for Ask an Engineer!

Join over 36,000+ makers on Adafruit’s Discord channels and be part of the community! http://adafru.it/discord

CircuitPython – The easiest way to program microcontrollers – CircuitPython.org


Maker Business — “Packaging” chips in the US

Wearables — Enclosures help fight body humidity in costumes

Electronics — Transformers: More than meets the eye!

Python for Microcontrollers — Python on Microcontrollers Newsletter: Silicon Labs introduces CircuitPython support, and more! #CircuitPython #Python #micropython @ThePSF @Raspberry_Pi

Adafruit IoT Monthly — Guardian Robot, Weather-wise Umbrella Stand, and more!

Microsoft MakeCode — MakeCode Thank You!

EYE on NPI — Maxim’s Himalaya uSLIC Step-Down Power Module #EyeOnNPI @maximintegrated @digikey

New Products – Adafruit Industries – Makers, hackers, artists, designers and engineers! — #NewProds 7/19/23 Feat. Adafruit Matrix Portal S3 CircuitPython Powered Internet Display!

Get the only spam-free daily newsletter about wearables, running a "maker business", electronic tips and more! Subscribe at AdafruitDaily.com !



2 Comments

  1. Very slick!

    I did a similar time display for my DOTKLOK project:
    http://www.flickr.com/photos/aom/5597209280/in/set-72157625965276784

    Each big block represents an entire hour, and each pixel making up the blocks represents 5 minutes, so the design slowly fills up over 12 hours.

  2. Thanks! 🙂

    Wow, that’s a really nice build! I like the design of the blocks filling up – has a very intuitive feel.

Sorry, the comment form is closed at this time.