Control Page Design


Tips for designing Control Pages for the Indigo Touch client

With the introduction of the iPad, designing control pages for Indigo Touch Clients became a bit more complicated. The addition of iOS 4 has also complicated it as well, and now that we also support screen rotations (Indigo Touch v1.6+), well, it's just not a simple matter any more. Hopefully this article will shed some light on the subject.

The first thing you'll need to know is how Indigo Touch renders pages. With Indigo Touch v1.6+, when a page is loaded, it will be rendered at 100% if the width of the page is equal to or less than the width of the device's screen in pixels. If the width is greater than the width of the device's screen, then the page will be scaled down to show the full page (fit-to-width). The height of the page has no bearing.

Double-tapping on a control page area that's not a control will do different things based on how the page is currently rendered. If the control page is shown at full size, then a double-tap will zoom in about 20%, and another double-tap will zoom you back out to full size. If, however, Touch has rendered your page scaled down, then a double-tap will zoom to full size. Another double-tap will zoom you back out to fit-do-width.

This is a switch from how Touch previously displayed pages, but given the various screen sizes and orientations that are now available, we think it's the most reasonable behavior. Speaking of screen sizes, etc, here's some information about each of those (these are the largest sizes you can use so that the page won't resize or scroll in any way given the orientations specified):

  • iPhone/iPod touch
    • Viewable Portrait size: 320×416
    • Viewable Landscape size: 480×268
  • iPad
    • Viewable Portrait size: 768×960 (for retina display use 1408×1776)
    • Viewable Landscape size: 1024×704 (for retina display use 2048×1408)

If you look closely at the numbers, you'll see that on the iPad, the Indigo Touch header that's displayed above the control page is 64pix regardless of screen orientation. However, it appears that the header is decreased to 52px when in landscape mode on the iPhone/iPod touch. This is verified in iOS 3.x and later.

Also, if your iOS device has a retina display, you can use the larger sizes specified and Indigo Touch will scale them to fit the display. This will make them look quite sharp. Note, however, that as of Indigo 5.0.x and below the built-in images are not 2x retina compatible images so you'll need to provide all images yourself (unless half-sized images work for your page). You can continue to use the non-retina sizes specified above and the pages will look the same as they always have.

Now, you might be thinking to yourself, wouldn't it be cool if I could design landscape and portrait pages and have Indigo Touch switch between them based on the true orientation? And, even better, if I designed one page per device per orientation (4 total currently) so that it automatically picked the right device and orientation page? Yep, that would be pretty cool, and it's something that we'll look into in future versions.

control_page.txt · Last modified: 2015/04/17 19:54 by jay
 

© Perceptive Automation, LLC. · Privacy