Log in or register to post comments

Swap OpenGL for image

February 14, 2012 - 4:57am #1

On the iOS SDK, whats the best method of swapping out the OpenGL rendering stuff and instead just show an image, a PNG or JPG that is available in the apps resources folder which can be displayed over the top of the trigger image?

I've read the example for the Youtube video overlay, but that was for Android / Java environment, just wanted to see possible options for iOS



Re: Swap OpenGL for image

February 23, 2012 - 3:48am #8

Hi Jason,

I see some problems here:

1) it's a good idea to create the view as a sibling of the EAGLView not a child. Create it in the appDelegate and add it to the window after the EAGLView but before the overlay view. Either hide it or move it off screen for the pre-detection phase. (Sorry, I should have suggested that in my last post)

2) On detection use the updateUI method (still called on the main thread) to alter the view position/visibility/colour (either set a property in the EAGLView to access the view object or discover it via accessing the appDelegate).

3) Have a timeout that hides/repositions the object from the user after target detection has not been made for a given time.

Hope that helps.

Re: Swap OpenGL for image

February 22, 2012 - 1:42pm #7

Hi MoSR,

Moved everything to the other method, and set some class ivars, but the iPhone still crashes - if I put NSLog statements in, it runs those in the log, but doesn't load my red square view over the top - I've popped the project code up here, its basically the ImageTargets sample code, and I'm just trying to overlay a red square over the stones image for the time being (eventually it'll be a UIView)


Re: Swap OpenGL for image

February 22, 2012 - 5:13am #6

Ah, you need to do all the UI stuff on the main thread, so move everything out to updateUI that creates or refers to UIView.

You can use private class properties (or static variables!) to hold the information you want to communicate between calc... and update... (eg. myFrame).

Re: Swap OpenGL for image

February 21, 2012 - 1:33pm #5

Really appreciate the help so far and been trying to mod the ImageTargets demo app to try and replace the target with a view (a basic red background one for the time being) - tried to execute the UI call on the main thread and it killed my phone and it rebooted. Heres the code snippet....

calcScreenCoordsOf is called from renderFrameQCAR as per the other posts

- (void) calcScreenCoordsOf:(CGSize)target inView:(CGFloat *)matrix inPose:(QCAR::Matrix34F)pose
    // 0,0 is at centre of target so extremities are at w/2,h/2
    CGFloat w = target.width/2;
    CGFloat h = target.height/2;
    const QCAR::Tracker& tracker = QCAR::Tracker::getInstance();
    const QCAR::CameraCalibration& cameraCalibration = tracker.getCameraCalibration();
    // calculate any mismatch of screen to video size
    QCAR::CameraDevice& cameraDevice = QCAR::CameraDevice::getInstance();
    QCAR::VideoMode videoMode = cameraDevice.getVideoMode(QCAR::CameraDevice::MODE_DEFAULT);
    CGPoint margin = {(videoMode.mWidth - self.frame.size.width)/2, (videoMode.mHeight - self.frame.size.height)/2};
    // now project the 4 corners of the target
    CGPoint s0 = [self projectCoord:CGPointMake(-w,h) inView:cameraCalibration andPose:pose withOffset:margin];
    CGPoint s1 = [self projectCoord:CGPointMake(-w,-h) inView:cameraCalibration andPose:pose withOffset:margin];
    CGPoint s2 = [self projectCoord:CGPointMake(w,-h) inView:cameraCalibration andPose:pose withOffset:margin];
    CGPoint s3 = [self projectCoord:CGPointMake(w,h) inView:cameraCalibration andPose:pose withOffset:margin];
    double width = s3.x-s0.x;
    double height = s1.y - s0.y;
    CGRect myFrame = CGRectMake(s0.x, s0.y, width, height);
    UIView *myView = [[UIView alloc] initWithFrame:myFrame];
    myView.backgroundColor = [UIColor redColor];
    CGRect screenBounds = [[UIScreen mainScreen] bounds];
    parentV = [[UIView alloc] initWithFrame: screenBounds];
    screenBounds = CGRectMake(0, 0, parentV.frame.size.height, parentV.frame.size.width);
    iView = [[UIView alloc] initWithFrame:myFrame];
    [self performSelectorOnMainThread:@selector(updateUI) withObject:nil waitUntilDone:NO];

- (void)updateUI{
    [self addSubview:iView];

Re: Swap OpenGL for image

February 20, 2012 - 3:27am #4

Hi Jason,

The posts #18, #21 in the thread provided, made by Kim, show how to set up a view - in this case for a video view.

From renderFrameQCAR you'd call a method on the main thread (as renderFrameQCAR is running in a thread that can't access the UI), that sets the view's frame CGRect according to the values of s0-s3 computed in post #8.

You'll need to make your own decisions as how to place the view with respect to the 4 coordinates that represent the target corners, as they won't be rectilinear when projected into the 2D view.

Re: Swap OpenGL for image

February 15, 2012 - 11:28am #3

Thanks for the reply, could you post your code snippet for how you did your UIViews?
I've got the code working from that video examples to get the corners, just wanted to see how your implementation was with relation to the CGPoints returned

Thanks for your help - appreciate it


Re: Swap OpenGL for image

February 14, 2012 - 5:12am #2

Hi Jason,

It would probably be easier to leave the OpenGL in place and just not show any 3D augmentation. Then you'll be able to get screen coordinates for the corners of the target as described in:


Log in or register to post comments