PDA

View Full Version : move a UIImageView "up"

Tex-Twil
Jul 27, 2011, 12:57 PM
Hi,
I have a UIImageView representing the level of the "artificial horizon" in a plane. Blue is the sky, brown is the ground. This image is actually clipped by its super view which creates the square.

http://f.cl.ly/items/2W3I353z0d3S472l1D3Y/Screen%20Shot%202011-07-27%20at%207.29.38%20PM.png

When I I move the nose of the plane up, I move the image down:

http://f.cl.ly/items/1U3G2o1e3u2e442e0h15/Screen%20Shot%202011-07-27%20at%207.31.39%20PM.png

When I move the nose of the plane down, I move the picture up :

http://f.cl.ly/items/3B2S432l030r1x3A0Z3c/Screen%20Shot%202011-07-27%20at%207.33.36%20PM.png

This is called the "pitch"

So far I've been modifying only the x axis of the image:

imageHorizon.center = CGPointMake(imageHorizon.center.x, imageHorizon.center.y + valueToMove);

When I "roll" the plane I rotate the picture either to the left or right:

http://f.cl.ly/items/2D0K010q2l2p2i0X1I2w/Screen%20Shot%202011-07-27%20at%207.36.15%20PM.png

imageHorizon.transform = CGAffineTransformRotate(imageHorizon.transform, angleToRotate*(CGFloat)(M_PI/180));

Now, the problem is that once I rotated the picture and want to modify the "pitch", I dont know which formula to use to find the correct x,y to move the picture towards the sky or ground direction:

http://f.cl.ly/items/1L0v3H2Y0X2g0L0T2N1w/Screen%20Shot%202011-07-27%20at%207.42.17%20PM%20copy.png

In other words, when I rotate the picture with an angle β, what are the x, y value to add to the center of the image to move it on the red line ?

Tex

ChOas
Jul 28, 2011, 12:43 AM
Maybe this will help : http://forum.onlineconversion.com/showthread.php?t=5408

I KNOW I have seen a much better tutorial on this, but I can't find it anymore, sorry.

Tex-Twil
Jul 28, 2011, 01:10 AM
Maybe this will help : http://forum.onlineconversion.com/showthread.php?t=5408

I KNOW I have seen a much better tutorial on this, but I can't find it anymore, sorry.
ok I will have a look but it seems quite complex. I thought that using simple trigonometry (http://en.wikipedia.org/wiki/Trigonometric_functions) should work:

http://f.cl.ly/items/192X3x2X251L3l0M1N3f/Screen%20Shot%202011-07-27%20at%207.42.17%20PM%20copy.png

cos(α) = x /h
sin(α) = y / h

so
x = h * cos(α)
y = h * sin(α)

but anyway in my code it's not working :( The image is not moving to the right direction:

// derive from beta and convert to radians
CGFloat alpha = (90 - beta) * (CGFloat) (M_PI/ 180);
CGFloat moveX = distanceToMove * cos(alpha);
CGFloat moveY = distanceToMove * sin(alpha);
imageHorizon.center = CGPointMake(imageHorizon.center.x + moveX, imageHorizon.center.y + moveY);

Sykte
Jul 29, 2011, 09:03 PM
If I'm not mistaken you want to keep it in degrees and not radians. Then + or - your current location.

Tex-Twil
Jul 30, 2011, 01:31 AM
I got it working with a much easier solution. I put the image in a UIView. I apply the rotation to this view. Then I apply the pitch to the image (which is subview of the "roll" view. Since it is a subview, the coordinates are relative to the superview meaning that I have to simply add or subtract a value the Y coordinate ;)