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).

awesome-app

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

About spouliot

Xamarin Hacker, Mono Contributor, Open Source Enthusiast with strong interests in Code Analysis, Cryptography and Security. Presently working on MonoTouch, previous projects were Moonlight and libgdiplus and a lot of the cryptographic work done on Mono.
This entry was posted in mono, monomac, monotouch, xamarin. Bookmark the permalink.

3 Responses to Graphics vs Resolution Independance

  1. The better solution would be to take XAML support from the Moonlight and make it more portable.
    Then just convert SVG to XAML and use it on all platforms.

    • spouliot says:

      Not sure it would be better like apples being better than oranges. IOW that would be a totally different (non-competiting) solution, one that would not have helped me a bit – but that would likely be helpful to other people.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s