I rather threw together a speedometer app using the original iPhone SDK: Safari.
Screenshot
An Early Screenshot (note to self: replace with updated screenshot)
It’s all JavaScript, CSS3 and HTML5. The gauges are all built and controlled with a JavaScript library that I developed, and are rendered with CSS3. The only images are the footer bar texture and the logo1 (I know, looking at that screenshot, it’s hard to believe).
I built this for two reasons. The first being that I wanted a rotary gauge JavaScript library (for use in another unrelated project), and the second being that I wanted to demonstrate (mostly to myself) how feasible these WebKit apps really are.
Installation
When you go to the app’s URL, you’ll be given instructions on how to install it (it’s as simple as bookmarking it to your homescreen). Then, when you launch it, it will download and cache all the assets2, and each subsequent launch after that will check for updates if your device has network access.
How it works
Basically, the app calculates how fast you’re going by getting the distance between your current position and your last position and dividing that by how long it took to get there. There are other things going on, like soft rejecting3 positions that would seem to indicate an acceleration of anything above 2g4.
This could be further optimized, of course, and when I do that, I can push those changes and everyone (with a network connection) will have access to the new version as soon as they launch.
Features
- A speedometer
- A bearing indicator (it tells you what direction you’re heading)
- An analog clock
The clock was really just an exercise for myself. It’s basically a rotary gauge with 3 custom indicators with their own values.
If you have an idea for what should be there instead of the analog clock (or any other feedback, really), feel free to let me know. I’m also on twitter.
Sidenote(s)
Debugging and testing this isn’t easy. While iPhone can hit .local domains on a local network, I couldn’t exactly do use a local network to test this app. I had to be in motion. I spent time while commuting to do my testing and debugging. I also needed full access to the internet to update the remote servers so the iPhone could access the app. I don’t think I could have done this without tethering5.
I might have been able to create a WiFi network with my MacBook to get access to the .local domain, but even in that case, I’d have to configure my development environment to serve this app from my .local address, and that’s also not ideal. Meh, I’ll figure out the best solution eventually.
Forgive my rambling, I had to be up early this morning (like, so early it was still Saturday for another 30 minutes).
-
With the exception of the startup graphic and app icon. ↩
-
In this case, an HTML file, a couple JavaScript files, a stylesheet, and a couple images. ↩
-
Is that a thing? Basically, what I mean by this is that if it the location doesn’t fit the criteria, I’ll ignore it, but keep it around. If it starts looking like the location was correct, I’ll switch to the rejected set. ↩
-
If you happen to be able to accelerate at 2g, let me know once you’ve returned to Earth. ↩
-
Which I technically shouldn’t be able to do until tomorrow (Monday, June 7th). ↩
