To countdown to the release of Windows 10 on July 29th 2015, I’ve created a simple countdown clock. When I was asked to do this, I first thought of a simple clock with counters, but I wanted something different. So I came up with the idea of using fridge magnets to make up the clock.
The clock is (now) always in Dutch, maybe I’ll upgrade it to also do English. You can find the app in the Windows 8 Store.
A minute is counted down visualy by the blue background that slides in or out vertically. The rest is counted down by the dynamic removal, addition and movement of magnets. All moves are done by a hand. Every now and then (at random) a random magnet almost falls off, but the hand corrects that again.
The entire screen links the the Windows 10 landing page where you can register for upgrade now or get the upgrade once it’s made available.
How it’s build
I get questions on the way this app was created. I created all images and animations myself. The app is written in C# with XAML. The magnets and the hand are all images.
The “sentence” logic
The app checks regulary what the time difference (in days, hours and minutes) is until the release date and builds a sentence for it. The first and the last sentence are fixed during countdown. For the time I use this logic:
- If the difference exists of one or more days, I add the magnet(s) for the number and add the “days” or “day” magnet.
If I know the hours component AND the minutes component are one or more as well, I add the magnet for the comma.
If I just have a minutes or a hours line, I just add “and”.
- If the difference hours component is one or more hours, I add the magnet(s) for the number and add the “hours” or “hour” magnet.
If I know that minutes are added as well, I add “and”.
- If the difference minutes component is one or more minutes, I add the magnet(s) for the number and add the “minutes” or “minute” magnet.
To determine the magnets to be used for a number, the logic is very simple. I have magnets for the numbers 0 – 14, 20, 30, 40, 50, 60, 70, 80 and 90. This means that it can make the numbers 0 – 99. If the number I need to make is smaller than 15, I use the 0-14 magnet for that. Otherwise I add <number % 10> first. If the number is 20 or higher, I add a connection magnet (“en” in Dutch). Then I add the magnet for <number / 10 rounded>.
Once I have determined the scentence, I compare it to the one on the screen. If they are different, I remove the magnets that are not longer in the new sentence. Then I add the new magnets that are required. And finally I start moving the magnets so it’s all centered vertically on the screen. To move the magnets I use an extra image of a transparent arm
The animation is a single storyboard that’s created in code and then played. It moves the magnets and the hand. The thing that puzzled me for a while was the way the hand was moving and sometimes magnets appeared and disappeared on the screen. I placed magnets on the screen and calculated deltas between the current position and the targeted position – this was added to the storyboard. Still, I missed something.
Then I found out my mistake – XAML animations of an object are always done with a RenderTransform on the object. To move an item you manipulate the X and Y of the RenderTransform. There for you don’t want to calculate deltas between the current position and the targeted position, but between the actual position (X and Y on the Canvas) and the target position.
I’ve created a Windows 10 app with the same views and code so I could try to run it on Windows 10 IoT Core on a Raspberry Pi 2 – and it works! Amazing.
Next is to implement the logic in another language (English first) as well. I would rather build the magnets dynamically with text instead of using images. And after that, use the logic to provide a more general purpose countdown clock in the store. You then could configure the header and the footer, the end time, the language and the colors.
More ideas? Let me know 🙂