Some time ago I discovered Chris Pirillo on Youtube and I wondered what he had above his desk. Some sort of LED lights in different colors that change every now and then. I thought it was a very cool accessory but rather pointless.
But! I soon discovered that these LED lights where in fact Tix clocks! They weren't random LED lights that turned on once in a while.
Before I began implementing a Tix clock, I needed to understand how they worked and how they represent time.
This image is really all you need to learn how to read a Tix clock. Simply count the amount of LEDs turned on in each segment and you know the time!
After I cleared up my confusion on how to read Tix clocks, I started working on the HTML skeleton:
I created a div for every LED and gave it a unique ID. I used the following ID format:
[Group number of LED]_[Number of LED in that group]. So the first LED in the first group get's the ID
A Tix clock is all about color, so I added CSS to mimic the looks of a real clock. I used a black background and standard HTML color names for the red, green and blue LEDs:
Let's go crazy and throw some CSS3 in here as well! When you look at an active LED of a Tix clock you notice that the light is not spread evenly. When a LED is turned on, the square has a bright spot in the middle and a more diffused light at the edges. So to make it look somewhat the same I added a box-shadow:
It's silly I know. But it makes my Tix clock look much more like a real one! I'm not a good designer but this does the trick!
random_number()to generate a random number between two values (used to randomly pick a LED to turn on)
inArray()searches an array for a given value
pad()to add leading zero's to a number
colorLeds()to 'turn on' a given amount of a LED's in a specific group
clearLeds()to turn off every LED
- And finally
updateTime()to update the entire Tix clock!
A real Tix clock updates every 4 seconds so mine does that too. This piece of code triggers everything that's required to show the time:
After successfully implementing my own Tix clock I wanted to use it as a screensaver for my Macs!
Sadly I have no knowledge of how to write a screensaver, how to work with Xcode or how to program Objective-C. Luckily though I found WebSaver on GitHub and within a few minutes I had a working Tix clock screensaver for OS X!
Here's a picture of the screensaver running on my Hackintosh:
Demo, Download & Source
See my Tix clock in action right here!
Download the Mac OS X Tix clock screensaver here. (To install simply extract and double click Tix.saver)
(A Windows screensaver isn't available yet. I didn't find anything similar to WebSaver for Windows. If you have suggestions: let me know! I'm dying to get this running on my netbook!)
Source code is available on Github