iPads and iPhone as wall clock

alexkoch.net

A nice web-based
clock app for 2–3
tablets or phones

tl;dr

Let‘s say you own some really old iOS or Android devices no one bothers to use anymore, but they still work.

Take at least two of them, point them to this page and tap an “hour” dot on one device and a “minute” dot on the other. When you see two huge numbers on the screens moving around the browser window you’re good.

Select “add to homescreen” and save. Leave the browser app and tap the new icon (labelled “hrs light” or “min bold black” if you didn‘t choose something different).

Voilá — the clock hands should be ticking fullscreen.

If you decide to use them as a real wall or bedside clock don‘t forget to set the sleep time for the device to “never”, because the screen would just go dark after the set interval.

Please forgive me not to step-by-step all of the aforementioned for tablets, smartphones and all the OSses times the languages you might be using; if you made it here I‘m pretty confident you‘ll figure out what exactly “add to homescreen” is called on your setup and where to find the sleep settings.

Separate apps for hours, minutes and seconds

There are three font-weights for every “hand” — and two color schemes: randomly changing colors (12) and black with just white type. Mix and match as you like:

random color

hh
hh
hh
mm
mm
mm
ss
ss
ss

black/white

hh
hh
hh
mm
mm
mm
ss
ss
ss

plain sans-serif, no embedded font;
still random colors

hh
mm
ss

Demo

I‘m glad you asked: the numbers move and the colors change in order to prevent screen burn-in, which worked really well in long-time testing. The real apps don‘t move synchronously, though, since they all use independant random timers. The demo script is just much simpler that way.

iPads and iPhones as a wall clock

minutes on an iPad 1

Setups

I started with two original iPads from 2010 in 2015, and added an iPhone 4 later on as a seconds hand. They are the ones in the photos. They ran straight up until May 2024, when the files had to move to a way too modern server they couldn‘t access anymore.

So I upgraded my installation to two *new* iPad Air 2s from 2014 and again a phone-sized display for the seconds — an iPod Touch 4 from 2012.

Asymmetrical setups are actually really nice, and by all means — use iPads or phones with a black bezel. White ones work but add too much visual clutter, I tried white iPad Airs and Pros (similar age, don‘t worry), but the screens looked too small.

iOS Device Constellations

Why?

The idea was a) to make use of once spectacular hardware which now just sits in a drawer. And b) to have a clock with really large “hands” so you can look up the time from across the room.

That usually doesn't work with just one display, even in landscape orientation. So we’ll use two or three standing upright, portrait mode.

Well, it would effectively work in landscape orientation, but dangeling cables from the side… meh. (I don‘t suspect you will use an 13" iPad Pro for this, at least not before 2034)

How?

Deliberately simple. In order to not to have to go through app-store procedures and since I‘m no real programmer I used simple (old browsers!) html and css and a small script a colleague gave me to build these one-pager web apps.

Everything the clocks use are baked into one html-file, with no dependencies whatsoever. No cookies are written to store a setup, no configuration screen to open and futz around with. Selecting a dot here on the device and save it to its homescreen is the configuration.

If you‘re comfortable running your own local server you can just download the html-files you like and store them there so your devices don‘t have to access this server – what they‘ll do sometimes.

Fonts?

Everything today uses Google Fonts, which is great for contemporary gear, if font formats couldn‘t change or just be dropped entirely, the copyright situation stayed the same forever and nothing would ever be replaced with a newer version or just gets removed from the catalogue.

I used other webfonts (tricky licensing situation – web or app?), local fonts via css (not supported anymore because of device fingerprinting), never flash (was a thing for web typography until 2012 maybe, but never on iOS) and svg (which I like as a format, but svg-fonts are a hack and a pain to build and use)

So I made a real font myself in three weights and put them right in the css section of the pages (@font-face with a base64-converted .woff in it). They‘re free, no format will change, and they don‘t have to be loaded from a different location. You‘re welcome to use it anywhere, but it‘s only numbers and a colon in three weights.

iPads and iPhones as a wall clock

5 minutes later on an iPad 1

Timing

Unfortunately web-apps can't sync clocks between devices, so you’ll notice situations when the devices drift off a little and the whole thing switches from 19:59 to 19:00 for some seconds (when it should say 20:00). This apparently only affects the oldest iPad models and OSses…

So every now and then you’ll have to re-sync date & time yourself: settings > general > date and time… switch off auto-time-sync & back on. But I only saw this happen on the very first generation of iPads

There is a second hh:mm:ss miniclock in the lower left to check what the device thinks the current time might be. Admittedly hard to read in the light font-face.

There is a night-mode, though: It switches from daytime color to nighttime greyscale at midnight by exchanging the color palette. That doesn't really help power consumption, I know, but a web app can't switch off the whole device at, say around midnight and switch it back on in the morning.

Mac Clssic II as clock, Mac SE/20 dead CRT

Early 2000s and Mac SE after 20+ years

History

Being a "multimedia" relic from the early nineties, I used to work with Macromedia Director to build all kinds of stuff — while old Macintosh SE, Classic, Quadra 700 and the like kept filling my basement.

I loved the idea of having a classic all-in-one Mac sit on a shelf and be my clock, but old Macintoshes make a lot of noise even when they aren’t doing anything, fan and harddisk spin continuously no matter what.

But there were tools to send the harddisk to sleep when not in use and Director “applications“ notoriously only ran from RAM, which was great for my project. But the fan still ran, blowing almost unheated air out of the box…

So I tried passive cooling. I drilled a grid of maybe 60 5mm holes into the top of the case right above the power supply and unplugged the fan.

The two Macs did run for 6 and 4 years respectively, one passed away when it tried to access its stuck harddisk after an outage and the other had the CRT die with a bright horizontal streak on a black background.

After that I used a PowerBook with a cracked case on its side as a one-screen clock (faux portrait display!) with an extra-condensed bitmapped font, still a Director app. But eventually some iPads became sufficiently obsolete….

PowerBook in portrait mode with Director app as a clock

Disclaimer: Everything here is free to use, but no responsibility is taken for any outcome. Questions & Suggestions: ak at alexkoch dot net (you‘re not a robot, I know). And I don‘t use cookies. Built with frame·plates