I’ve been busy since I completely rewrote SpeakerClock in SwiftUI. That was version 1.2.0.
The App Store provides a concept called Universal Purchase, which is where purchasing an app on one device also unlocks it on all other supported platforms. In the previous version I added a Mac version. This update now adds the AppleTV version. Still a minor update, because the functionality is identical, yet all three versions benefit from improvements.
As on the other platforms I wanted to keep the UI identical, while optimising for the screen dimensions at hand. The main challenge was that contrary to the direct manipulation on the other platforms (with finger or mouse pointer) you are controlling focus on Apple TV with the remote.
So my round LED buttons have an additional white circle if they are in focus. That didn’t look nice for the LED digits however. So there I used the LED digits shadow to give it a white glow. While the timer is thus focussed you can adjust it by swiping horizontally on your Apple TV remote.
I wanted to avoid having the white glow being active while the timer is running, it would soon be annoying to the user. So if you start the timer via tapping on the remote, I place focus back on the currently active preset.
The second big change for the Apple TV concerned the user guide which is shown via the button with the question mark. Since there is no direct manipulation of a scroll view I experimented with having the individual paragraphs be focusable. But that didn’t work out well.
In the end I discarded the ScrollView and instead put the individual user guide sections on separate tabs. Since there was a lot of empty space around the text, I added some eye candy. Some of which is actually interactive.
Finally, the hidden bonus feature which possibly only developers would care about concerns the multiple layers of the app icon. The icons are all generated with original live user interface elements from the app. The non-TV icons were quite simple to do like that. On TV however an app icon has multiple layers which are shown three-dimensionally floating in an awesome parallax effect.
To achieve this for SpeakerClock I divided the multiple layers such that you have the inactive LED bars at the back, the active LED elements in the middle and the traffic light in the front.
Next up I’ll be looking into a Watch app. Although there it might make sense to wait for the iOS 15 feature where you can continue to update the screen every second. Also you should be able to use the watch as remote control for SpeakerClock running on any other platforms.
If you have any ideas or requests or questions, please feel free to contact me by email.
Originally published at Cocoanetics.