iPhoneGUIExample in landscape?

I’m using interface builder to overlay a GUI on top of my oF app, as in iPhoneGUIExample.

As an aside, it’s a shame you can’t get touch events in oF this way. It seems I could try and get ofxiPhone to run inside a nested UIView, but that’s a task for another day.

Can anyone can tell me how to get the GUI to load in landscape? I set the orientation to lanscape, but the GUI shows up in portrait, despite the fact that I designed it in interface builder with it flipped sideways. Seems like I need to add a line of code telling the UIViewController to be in landscape.


Hey Zach,

did you add
UIInterfaceOrientation UIInterfaceOrientationLandscapeRight

as key value pair to you plist?


Just tried that and not seeing any difference. UIInterfaceOrientation wasn’t in the drop down menu- I’m not sure if that has to do with it.


I’ve been banging my head against this for a while now as well, glad to know someone else is running into the same thing. Have you had any luck getting this to work Zach or anyone else? Or have any other recommendation on ways to do a GUI in landscape mode?


This is stuff you should do in your view controller. Put this in your view controller to support portrait and landscape-right:

// Ensure that the view controller supports rotation and that the split view can therefore show in both portrait and landscape.  
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {  
    return (interfaceOrientation == UIInterfaceOrientationPortrait ||  
		interfaceOrientation == UIInterfaceOrientationLandscapeRight);  

Easy enough! Now the hard part, make sure that your interface aligns well when rotated. There are 3 different approaches here:

  1. Open your nib file and make sure that ‘autosizing’ is set right. It takes a bit getting used to but for simple interfaces this can be awesome.

  2. Manually place UI elements at right position. If you do this you need an outlet for every element that needs to be moved. Implement the following method to do this:

- (void)willAnimateSecondHalfOfRotationFromInterfaceOrientation: (UIInterfaceOrientation)fromInterfaceOrientation   
duration:(NSTimeInterval)duration {  
UIInterfaceOrientation toOrientation= self.interfaceOrientation;  
if (toOrientation== UIInterfaceOrientationPortrait || toOrientation== UIInterfaceOrientationPortraitUpsideDown)  
    //move stuff to portrait position  
    [object setFrame:CGRectMake(20,20,125,125)];  
    //move stuff to landscape position  
    [object setFrame:CGRectMake(120,120,125,125)];  

This method gets called when you rotate the phone, and it finishes when the rotation of the interface finishes. Exactly what we need. Of course, to make it look shiny, you can place the setFrame: calls inside an animation block.

  1. Load in a second nib file. Only recommended for complex interfaces. If you change anything in your interface, you’ll have to change it in two files, which can be a pain. If you select a button and rotate your phone, the same button has to be selected in the other nib file. There’s a whole chapter on this stuff in “Beginning iPhone Development, Exploring the iPhone SDK”. I’d recommend it to anyone interested in iPhone development.

I solved this issue by ALWAYS being inside my UI. Yep. So no matter what position the device is in, the UI rotates properly. I simply did not want the draw window to rotate, just my UI and I was having an issue with my UI launching but not always being at the correct position. So my method resolved all of this.

There were additional benefits to this (for me) and I can draw right through my UI when specified.

Jason, can you explain what you mean by ‘always being inside my UI’? Do you have an example you can share - I didn’t quite follow your approach.

Hi cerupcat,

Sure, when my app launches it starts inside my UI and it’s always inside it. This design makes sense for me and/or my specific app but might not be appropriate for everyone. Now, however the device is orientated, the screen reflects the correct orientation.

In testApp.h

#include "MyViewController.h"  
MyViewController *myViewController;  

In testApp.mm::setup()

    myViewController = [[MyViewController alloc] initWithNibName:@"MyView" bundle:nil];  
    //JRW - Start inside UI  
    [UIView beginAnimations:nil context:NULL];  
    [UIView setAnimationDuration:1.0];  
    [UIView setAnimationDelegate:[[UIApplication sharedApplication] keyWindow]];  
    // configure your animation  
    [UIView setAnimationTransition: UIViewAnimationTransitionNone   
                           forView: [[UIApplication sharedApplication] keyWindow]   
                             cache: YES];  
    //JRW - Allows drawing in UIView "DrawView"  
    [ofxiPhoneGetGLView() addSubview:myViewController.view];  
    // do it!  
    [UIView commitAnimations];  

Of course there’s more to this, like defining orientations or added additional viewcontrollers to handle a variety of functions like an intro page, a draw window, a menu, etc.

Ah great Jason. I think I understand. So the main part is that you’re adding ofxiPhoneGetGLView as a subview to the controller? Does this allow the openGL to get touch events still? I’ll have to try this sometime and see how it does.

Just wanted to say thanks to jasonrwalters for the example. This works perfectly for having a main UI that accepts touches on buttons and whatnot but allows touches to go through the transparent areas to the OF app below. I’m going to add in a UINavigationController so I can switch between different UI views over the top of my application while keep the app itself running in the background.

For the particular case of the landscape app, I found that the easiest way to solve it is to add this line

[guiController.view setTransform: CGAffineTransformMakeRotation(-M_PI / 2)];  

and I understand jason’s idea, but I still think there’s something strange in the GUI view not responding to orientation changes, like it should when you specify this:

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation  


is there any idea on a better way to solve it?

I haven’t tried it yet, but someone seemed to find a solution here:

Ha - that’s my blog post. That’s what I do now in Make Space Ship (http://makespaceship.com)