Graphics vs Resolution Independance

I love my retina iPad (and retina iPod Touch, but no retina MacBook yet) and I hate seeing applications that does not support them, it’s wasting pixels. However I’m not exactly an artist – as seen in yesterday’s screenshots.

In that particular case I think the “tv” text makes a great icon – even if it may be a bit too localized (is AppleTV translated to something else anywhere ?). Anyway it’s clear to me that using a bit of code, like below, to generate images is a good way to support any number of screen resolution / density for mobile applications.

	static UIImage GetIcon ()
	{
		float size = UIDevice.CurrentDevice.UserInterfaceIdiom == UIUserInterfaceIdiom.Pad ? 
			55f : 43f;
		UIGraphics.BeginImageContextWithOptions (new SizeF (size, size), false, 0.0f);
		using (var c = UIGraphics.GetCurrentContext ()) {
			c.SetFillColor (1.0f, 1.0f, 1.0f, 1.0f);
			c.SetStrokeColor (1.0f, 1.0f, 1.0f, 1.0f);
			UIFont font = UIFont.BoldSystemFontOfSize (size - 8);
			using (var s = new NSString ("tv"))
				s.DrawString (new PointF (7.5f, 0.0f), font);
		}
		UIImage img = UIGraphics.GetImageFromCurrentImageContext ();
		UIGraphics.EndImageContext ();
		return img;
	}

This technique was refined by the folks at PixelCut, creator of PaintCodeApp, which let you create CoreGraphics-API compatible source code (either in Objective C or C#) from images you draw (instead of type).

This application is fantastic unless you realize you’re lacking a minimum of artistic talent Thanksfully other people have this talent, like the folks doing FontAwesome which offers a lot of nice, useful icons in several formats.

One such format is SVG, specifically SVG paths, which is something we had to implement in Moonlight (that seems a lifetime ago). Translating this C++ code into a C# library was pretty easy. In fact it was a lot easier than doing the original code – parts of the spec are not trivial, e.g. you can find quite a few SVG (path) library or converters that simply ignore arcs (and even other constructs).

Next, using this new library I created a small (less than 100 lines) tool to convert all symbols into a (rather big, around 15k lines) C# source file containing all SVG paths, each in it’s own method. That generated file was then used in a MonoTouch sample app (again less than 100 lines) to show them in a table view (using MonoTouch.Dialog).

Now this is not really new, Touch.Unit has been using this for a while. New or not, consider this as my xmas gift to other art-challenged developers in needs of nice, scalable icons for their mobile apps

Also if you’re not using C# or CoreGraphics then you might want to contribute other backends. The library (and command-line tool) are made to be extensible – but I do not have immediate needs (or plans) for other language / toolkit at the moment.

About these ads