One of the most awesome clocks I know, is probable the QlockTwo. A 110 digit square piece that tells the time in human readable text, by highlighting the right words. Today, I recreated this beautiful piece of design by writing a small iOS Swift application.

Now, I must admit, this post would be a lot more fun if built a real working version myself. But don’t worry, It won’t take long before I do, but until then, my iPad is a nice alternative.

So you built an app? Big deal.

No, it’s not a big deal: the setup of the application is pretty straight forward:

I created a TextClockView by subclassing UIView

The TextClockView is filled with 110 CharacterViews which is just a simple UILabel subclass

I extended the NSDate object to produce a text string from the current time.

I lookup the views for every word in the sentence, and change the opacity.

Now of course, the actual code is much longer than the four lines above, but copy pasting all my code in this code would make this post a bit messy.

To make sure my clock looks nice on all devices, I rely heavily on the AutoLayoutConstraints Apple uses. If you’ve never used these, this might look a bit like magic. But I can ensure you: give it a try, it will save you a LOT of time.

Show me the code!

Great! You wan’t to give it a try? Head over to GitHub and download the project. If you run it on your iPad, it should look something like this:

Now, keep staring for 5 minutes, and you’ll see the text change. Whoaah!

Can I make changes?

Of course! Make sure to send me some sweet pull requests! I like pull requests!

Ok cool! Can I sell your app in the App Store.

Technically, you could. But I’ll come to your house and set every clock you own 15 minutes late. That will teach you!

If this app gave you the urge to built a real working version before I do, make sure to check out this awesome gallery I found on Reddit.

UPDATE 2014/11/15: This app is available for free in the App Store now!