Log in or register to post comments

iOS image, imageAnimation and Movie example

February 24, 2012 - 11:04am #1

Hi!

I would like to show an image and/or image animation instead of an 3d object. it should behave just like an image sticked (overlayed) on the target image. Additionalty, this new image or image animation should react on touches.

any hints how to implement this?

It seems that several people would like to have an example how to draw an image, image animation or movie instead of a 3D model to an image target.

Maybe someone could provide an example or qualcom could extend their sample apps with this functionality.. sure, both for iOS and android..

thx..
alex

Re: iOS image, imageAnimation and Movie example

March 1, 2012 - 4:05am #10

Hi Alex,

I think I've got a handle on this - the example was given during the beta of version 1.0 and a couple of things changed before the release that need to be taken account of, such as orientation of the view.

In version 1.5 things are different again, as you've spotted. Plus the way that orientation is handled changes again.

I'll put some new samples together, but for now there are two things you can do.

1) Make sure that your view is in a parent view that is rotated by 90 degrees, rotated around the centre, to match the orientation of the camera
2) Account for that rotation in 'calcScreenCoordsOf' by using the opposite screen size for calcuating the margin.

    CGPoint margin = {(videoMode.mWidth - self.frame.size.height)/2, (videoMode.mHeight - self.frame.size.width)/2};

Re: iOS image, imageAnimation and Movie example

February 29, 2012 - 5:27pm #9

so, i have updated my example at http://www.learnclip.com/iPhoneDev/AR/ImageTargets.zip once again, now it is moving but only vertically. horizontally is inverted. hope, some will join me to fix this!

Re: iOS image, imageAnimation and Movie example

February 29, 2012 - 4:41pm #8

so, i have updated my example at http://www.learnclip.com/iPhoneDev/AR/ImageTargets.zip

the image is now centered and has (dynamically) the same size as the target image. the only missing thing is that it is not MOVING.

maybe someone is willing to adapt my example. i will keep it open source and post the results at the end!

the four corner images are (currently) useless. MoSR had a good idea to make the s0,s1,s2,s3 corners visible / which helped me in finding one error.

it seems, that x and y are inverted.


CGRect rect = CGRectMake(y, x, MAX(height, 0), MAX(width, 0));

compare to the full method:


- (CGRect) 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;
    //target width is the fixed widh of target!!
        
    // calculate any mismatch of screen to video size
    QCAR::CameraDevice& cameraDevice = QCAR::CameraDevice::getInstance();
    
    const QCAR::CameraCalibration& cameraCalibration = cameraDevice.getCameraCalibration(); 
    
    
    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];
    

    
    int x = MIN(MIN(s0.x, s1.x), MIN(s2.x, s3.x) ) ; 
    int y = MIN(MIN(s0.y, s1.y), MIN(s2.y, s3.y) ) ; 
    
    int width = MAX(MAX(s0.x,s1.x),MAX(s2.x,s3.x)) - x;
    int height = MAX(MAX(s0.y,s1.y),MAX(s2.y,s3.y)) - y;
    
   // NSLog(@"w %f h %f", target.width, target.height);
    
    NSLog(@"x %d y %d", x, y);
    //NSLog(@"s0x %f s1x %f s2x %f s3x %f", s0.x, s1.x, s2.x, s3.x);
    //NSLog(@"x %d", x);
    //NSLog(@"y %d %f", y, target.height);
    
    CGRect rect = CGRectMake(y, x, MAX(height, 0), MAX(width, 0));
    //CGRect rect = CGRectMake(0, 0, w * 2, h * 2);
    //CGRect rect = CGRectMake(40, 130, 310, 240);
    return rect;

Re: iOS image, imageAnimation and Movie example

February 29, 2012 - 4:05pm #7

I have uploaded an example: http://www.learnclip.com/iPhoneDev/AR/position.PNG

what i would expect from the function calcScreenCoordsOf is that it gives me the X and Y coordinates of the targetImage.

so, in my image (=screenshot of display of iPhone with imageTarget sample running), where the orange borders are the display borders, i would expect that some values are close to 0. because the imageTarget is close to the edge of X 0.

but if i am printing all the x values of the points i get from s0, s1, s2, s4 it does not match.

313.320862 s2x 313.732239 s3x 238.592773
2012-03-01 00:48:47.941 ImageTargets[782:6d2f] s0x 247.625458 s1x 324.564087 s2x 325.030457 s3x 248.046753
2012-03-01 00:48:48.006 ImageTargets[782:6d2f] s0x 250.944885 s1x 328.982788 s2x 332.553925 s3x 253.845795
2012-03-01 00:48:48.086 ImageTargets[782:6d2f] s0x 242.464355 s1x 322.967560 s2x 326.033081 s3x 244.598297
2012-03-01 00:48:48.181 ImageTargets[782:6d2f] s0x 242.464355 s1x 322.967560 s2x 326.033081 s3x 244.598297
2012-03-01 00:48:48.269 ImageTargets[782:6d2f] s0x 242.464355 s1x 322.967560 s2x 326.033081 s3x 244.598297
2012-03-01 00:48:48.378 ImageTargets[782:6d2f] s0x 242.464355 s1x 322.967560 s2x 326.033081 s3x 244.598297
2012-03-01 00:48:48.420 ImageTargets[782:6d2f] s0x 242.464355 s1x 322.967560 s2x 326.033081 s3x 244.598297

Re: iOS image, imageAnimation and Movie example

February 29, 2012 - 1:55pm #6

Hi MoSR,

At http://www.learnclip.com/iPhoneDev/AR/ you fill find two photos showing the problem. The rect as I take it as mentioned from you gives me a picture which behaves not as expected.

Are you sure that the rect coordinates are right? The rect coordinates should be the exact edge coordinates of the image target, in that case the coordinates of the chips image.

the two pictures in the link show what is happening if i am moving the device slightly. The image is going bigger, or smaller, as it wants..

alex

Re: iOS image, imageAnimation and Movie example

February 29, 2012 - 2:36am #5

I meant my original example was minimalistic. :-)

Can you enlarge on "behaves strange"?

If you don't need exact registration, you may want to add some damping - then if the target is lost temporarily the transition is smooth - when the target is lost (ie no new detections within a timeout) you can also make it animate back to a known place before dissappearing gracefully.

Re: iOS image, imageAnimation and Movie example

February 28, 2012 - 1:48pm #4

Hi MoSR,

Thank your for your reply. I am generating my rect variable as described below / the point is, that my overlayed image (which gets the rect as update) behaves strange if i am moving my device (with a targetImage in focus) so I guess there is something wrong with my rect. And yes, i know that my approach still is minimalistic :0)


   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];
    

    
    int x = MIN(MIN(s0.x, s1.x), MIN(s2.x, s3.x) ) ; 
    int y = MIN(MIN(s0.y, s1.y), MIN(s2.y, s3.y) ) ; 
    
    int width = MAX(MAX(s0.x,s1.x),MAX(s2.x,s3.x)) - x;
    int height = MAX(MAX(s0.y,s1.y),MAX(s2.y,s3.y)) - y;
    
    NSLog(@"x %d %d", x, width);
    NSLog(@"y %d %d", y, height);
    
    CGRect rect = CGRectMake(x, y, MAX(width, 0), MAX(height, 0));

Re: iOS image, imageAnimation and Movie example

February 28, 2012 - 3:08am #3

Hi Alex, well done for getting this far!

The original code to position the corners is a little simplistic and needs to be modified to be more robust.

If the four projected corners of the target are s0-s3, then to find the x,y of the view you need the lowest x and y value of *all* the points; to find the width,height of the view you need the maxiumum x,y of all the points etc. as you've done.

Then you need to apply some constraints such as the screen dimensions and what is the minimum acceptable size. You may also want to scale down the view a little so it fits within the target rather than encompassing it.

I'm not clear what is not working for you?

Re: iOS image, imageAnimation and Movie example

February 27, 2012 - 2:28pm #2

So, hard work for a newbie, but not impossible :0)

in the attachment, you will find the sample app adapted with an overlay-ed image. the image will appear if the chips.jpg is visible. Hence, the image "tries" (so it is still not working as it should..) to adapt to the distance/position of the targetImage. Thx to MOsR

http://www.learnclip.com/iPhoneDev/AR/ImageTargets.zip

The only thing i guess and hope is wrong is the code below. I hope, someone can point me into the right direction:
[CODE" />
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" />;

int x = MIN(MIN(s0.x, s1.x), MIN(s2.x, s3.x) ) ;
int y = MIN(MIN(s0.y, s1.y), MIN(s2.y, s3.y) ) ;

int width = MAX(MAX(s0.x,s1.x),MAX(s2.x,s3.x)) - x;
int height = MAX(MAX(s0.y,s1.y),MAX(s2.y,s3.y)) - y;

NSLog(@"x %d %d", x, width);
NSLog(@"y %d %d", y, height);

CGRect rect = CGRectMake(x, y, MAX(width, 0), MAX(height, 0));
[/CODE" />

Log in or register to post comments