iOS Programming: I've found the solution for the fundamental bug in mirroring the Retina display to the VGA output

If you've read the VGA output-specific remarks in my Web Browsing and PDF Reader bibles (more specifically: the dedicated row in the charts), you may remember I've complained about all(!) of the VGA output-enabled titles not producing high-resolution output on Retina display-equipped 4th generation iPhone and iPod Touch models.

As I've been updating my official iOS Programming course with everything dedicated to programming the VGA output, I've decided to find out what the problem is caused by.

Fortunately, it was very easy to find out the bug, particularly because I knew from the beginning it must be caused by the different scaling of the Retina display-based devices from the iPad. (The VGA output work just fine on the iPad with all these programs.)

The fix is simple: instead of using the plain UIGraphicsGetImageFromCurrentImageContext, (assuming you use the traditional way of „blind” bitmap copying to the VGA output – see e.g. THIS for more info on this technique; note that my solution is way simpler, contains far less code and is, therefore, far easier to understand/follow), you will need to use the conditional block explained HERE. It fixes all these problems.

I've even created a very simple program demonstrating all these. It displays a scrollable UITextView full with scrollable text on the internal screen. Note that it must be inside a UIScrollView for the mirroring to work right. (If you leave UIScrollView out, mirroring will only work OK at the top of the document; if you scroll down, the mirrored image will be gradually hidden.)

The UIWindow directly connected to the external screen only has a UIImageView inside. (There's no need to use any View Controllers unless you want to support display rotation.) It's this image view that we just copy the bitmap contents of the internal screen's document layer four times a second.

Try commenting out the conditional block setting the scaling and using the plain old UIGraphicsGetImageFromCurrentImageContext (it's commented out by default) instead – you'll see the output becomes blurry on a 4th generation high-resolution device.

Two screenshots showing the output in the simulator (where you can also debug VGA output; see Hardware > TV Out):

the buggy version (look for the blurry characters in the VGA output emulation window!)

the fixed version (the default)

BTW, I've just spoken to the developer of iCab, the best Web browser on iOS; he's told me this will be fixed in the next version.

The source code archive for the entire project is HERE.

Master your iPhone in one minute a day: Sign up here to get our FREE Tip of the Day delivered right to your inbox.

<p>Werner Ruotsalainen is an iOS and Java programming lecturer who is well-versed in programming, hacking, operating systems, and programming languages. Werner tries to generate unique articles on subjects not widely discussed. Some of his articles are highly technical and are intended for other programmers and coders.</p>
<p>Werner also is interested in photography and videography. He is a frequent contributor to not only mobile and computing publications, but also photo and video forums. He loves swimming, skiing, going to the gym, and using his iPads. English is one of several languages he speaks.</p>