When experimenting with the iPhone’s built-in LED font I found it severely lacking in terms of usability. It’s designer has had the glorious idea of not making all numbers the same size. This means that if you have any kind of changing label (like for example a digital clock) then the contents of the label will jump around as digits change size. This is especially annoying going from or to a one which is extra slim.
Generally my instinct is to use regular smooth fonts for display of numbers, but I find that every 2 or 3 months I get into a situation where the classic LED look would be the perfect gimmick. For example I am still pondering how to make the UI of GeoCorder more attractive and one idea was to have the measurements be displayed in LED numbers.
So I set out to create a reusable solution for this problem. A quick search on Google gave me this image from iStockphoto. It does have their watermark, but I was not going to simply off their images. Instead I used it as a template to construct a resolution-indendent drawRect for my DTLEDDigitView. The resolution was just big enough so that I could find the edges in my image editor and make the appropriate connections.
Basically you cut out the 8 which has the best contrast on all sides and then you get the coordinates of each corner of each bar. To make it resolution-indendent you then multiply each value with a unit size for width and height so that this scales nicely. The main reason why I wanted it to be resolution-independent is that this will look nice very small but also on the many extra pixels that are available on the iPad. So if you use DTLEDNumberView you don’t have to worry about static LED number images being scaled into fuzzyness. My solution is always crisp.
Then I added code to turn on and off single bars depending on the digit property. Also I wanted to be able to control the dot, so I added a property for that. Activated bars are paths filled with this distinct red, non-activated bars are 100% white with 30% alpha so they will lighten any background slightly. That’s all about the drawing.
Very useful when creating custom views like this is to fill in the sizeThatFits method with some algorithm that will adjust the width and/or height accordingly. In this case I am using it to find a scaling where the aspect ration of the numbers still fits in.
Then I took the DTLEDDigitView and made a view to add to itself as many such digits as a property numberOfDigits would decide. Optionally there is a property numberOfDecimalPlaces which decides how far from the right the comma is. The final touch is to have a value property and to adjust all the individual digits accordingly if it changes.
Here’s my demonstration video, it simply adds PI every tenth of a second so that you see the numbers change, also behind the comma.
I can immediately think of a number of useful customizations, like changing the colors for active and inactive and maybe adding a neon glow to the active bars. But for lack of a concrete application with it’s requirements I won’t fiddle around with it until there is one. I need either myself or somebody else to have an app to add this component to so that I know the final tidbits necessary.
The whole thing took me about a day to make so I’ll set the introductory price at 50 Euros. If you’d like to use this technique in your own apps, drop me an e-mail so we can discuss what extra features you would require to make the purchase.
Categories: Parts
