Move images to random placeholders - iphone

I have a simple jigsaw puzzle i'm making. I have a method that is called when the view is loaded and when the device is shaken. This method places 4 images in 4 specific places on screen. Below is the code:
-(void) makePieceHolders {
//create 4 points where the jigsaw pieces (images) will be placed
CGPoint holder1 = CGPointMake(80, 80);
CGPoint holder2 = CGPointMake(200, 80);
CGPoint holder3 = CGPointMake(80, 200);
CGPoint holder4 = CGPointMake(200, 200);
image1.center = holder1; //set the position of the image center to one of the newly created points
image1.alpha = 0.3; //set the image opacity back to 0.3
image2.center = holder2;
image2.alpha = 0.3;
image3.center = holder3;
image3.alpha = 0.3;
image4.center = holder4;
image4.alpha = 0.3;
}
What i'd like is to place the images randomly in the four placeholders. I have some more code written below where i get a random number between 1 and 4 and set the tag of each image to each of these random numbers.
int randomNumber;
int placeHolders[4];
int i=0;
bool numberFound;
do{ // until you get 4 unique numbers
randomNumber=arc4random()%4+1;
// Does this number exist already?
numberFound=FALSE;
for (int j=0; j<i; j++) {
if (placeHolders[j]==randomNumber)
numberFound=TRUE;
}
if (numberFound==FALSE){
placeHolders[i]=randomNumber;
i++;
}
} while (i<4);
image1.tag = placeHolders[0];
image2.tag = placeHolders[1];
image3.tag = placeHolders[2];
image4.tag = placeHolders[3];
NSLog(#"img1 tag: %i img2 tag: %i img3 tag: %i img4 tag: %i", image1.tag, image2.tag, image3.tag, image4.tag);
How do now refer to this tag information in order to move it to a placeholder?
In pseudocode i was thinking:
where image tag = 1, move that image to holder1
where image tag = 2, move that image to holder2
............
I don't know how to write this though.
If there is a better way i'd appreciate the help. Thanks

You don't need your complicated do..while / tag logic.
Just use an array:
NSMutableArray* images = [NSMutableArray arrayWithObjects: image1,image2,image3,image4,nil];
// shuffle the array
NSUInteger count = [images count];
for (NSUInteger i = 0; i < count; i++) {
// Select a random element between i and end of array to swap with.
int nElements = count - i;
int n = (arc4random() % nElements) + i;
[images exchangeObjectAtIndex:i withObjectAtIndex:n];
}
After that, you have randomly placed your images in a new order. After that assign the positions:
UIImageView* imageView1 = (UIImageView*)[images objectAtIndex: 0];
imageView.center = holder1;
UIImageView* imageView2 = (UIImageView*)[images objectAtIndex: 1];
imageView.center = holder2;
UIImageView* imageView3 = (UIImageView*)[images objectAtIndex: 2];
imageView.center = holder3;
UIImageView* imageView4 = (UIImageView*)[images objectAtIndex: 3];
imageView.center = holder4;
(You could also do this in a loop.. so it would be more general and reusable.)

Related

How to assign values to images [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Alright, so I have 5 custom images total.
Heres the values I need to set each image to:
Image1 = 1
Image2 = 2
Image3 = 3
Image4 = 4
Image5 = 5
I need values assigned to these because I want to have xcode randomly place them on the view until it reaches a value of 50. So im assuming I need some kind of loop that adds up the values until 50 is reached?
How do I assign values to these images since it brings up a warning when trying to assign an int value to a UIImage. Also, on a side note what method would I use to randomly place the images on the view without overlapping?
Thanks for any and all help!
Your app will be placing UIImageViews, not UIImages onto a view. Like all UIView subclasses, UIImageView has an NSInteger tag property, but if I understand the problem correctly, I don't think you need that, either.
// add count randomly selected images to random positions on self.view
// (assumes self is a kind of UIViewController)
- (void)placeRandomImages:(NSInteger)count {
for (NSInteger i=0; i<count; ++i) {
UIImage *image = [self randomImage];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = [self randomFrameForImage:image];
[self.view addSubview:imageView];
// add a tag here, if you want, but I'm not sure what for
// imageView.tag = i;
}
}
// answer a random image from the app's bundle
// assumes the images are named image-x where x = 0..4
- (UIImage *)randomImage {
NSInteger imageNumber = arc4random() % 5;
NSString *imageName = [NSString stringWithFormat:#"image-%d", imageNumber];
return [UIImage imageNamed:imageName];
}
// answer a random position for the passed image, keeping it inside the view bounds
- (CGRect)randomFrameForImage:(UIImage *)image {
CGFloat imageWidth = image.width;
CGFloat imageHeight = image.height;
CGFloat maxX = CGRectGetMaxX(self.view.bounds) - imageWidth;
CGFloat maxY = CGRectGetMaxY(self.view.bounds) - imageHeight;
// random location, but always inside my view bounds
CGFloat x = arc4random() % (NSInteger)maxX;
CGFloat y = arc4random() % (NSInteger)maxY;
return CGRectMake(x,y,imageWidth,imageHeight);
}
If want to assign an arbitrary integer value, I would use the tag property on UIImageView.
NSInteger currentTag = 50;
while (currentTag > 0) {
UIImageView *imageView = [UIImageView alloc initWithImage:image];
imageView.tag = currentTag;
[self.view addSubView:imageView];
currentTag--;
}
Put the images into an NSArray then from NSHipster:
How Do I Pick a Random Element from an NSArray
Use arc4random_uniform(3) to generate a random number in the range of a non-empty array.
if ([array count] > 0) {
id obj = array[arc4random_uniform([array count])];
}

drawn area in UIImage not recognized correctly

I am having a strange problem in my project. What I want to do is that, a user will paint or draw using swipe over a image as overlay and I just need to crop the area from the image that is below the painted region. My code is working well only when the UIImage view that is below the paint region is 320 pixel wide i.e. width of iPhone. But If I change the width of the ImageView, I am not getting the desired result.
I am using the following code to construct a CGRect around the painted part.
-(CGRect)detectRectForFaceInImage:(UIImage *)image{
int l,r,t,b;
l = r = t = b = 0;
CFDataRef pixelData = CGDataProviderCopyData(CGImageGetDataProvider(image.CGImage));
const UInt8* data = CFDataGetBytePtr(pixelData);
BOOL pixelFound = NO;
for (int i = leftX ; i < rightX; i++) {
for (int j = topY; j < bottomY + 20; j++) {
int pixelInfo = ((image.size.width * j) + i ) * 4;
UInt8 alpha = data[pixelInfo + 2];
if (alpha) {
NSLog(#"Left %d", alpha);
l = i;
pixelFound = YES;
break;
}
}
if(pixelFound) break;
}
pixelFound = NO;
for (int i = rightX ; i >= l; i--) {
for (int j = topY; j < bottomY ; j++) {
int pixelInfo = ((image.size.width * j) + i ) * 4;
UInt8 alpha = data[pixelInfo + 2];
if (alpha) {
NSLog(#"Right %d", alpha);
r = i;
pixelFound = YES;
break;
}
}
if(pixelFound) break;
}
pixelFound = NO;
for (int i = topY ; i < bottomY ; i++) {
for (int j = l; j < r; j++) {
int pixelInfo = ((image.size.width * i) + j ) * 4;
UInt8 alpha = data[pixelInfo + 2];
if (alpha) {
NSLog(#"Top %d", alpha);
t = i;
pixelFound = YES;
break;
}
}
if(pixelFound) break;
}
pixelFound = NO;
for (int i = bottomY ; i >= t; i--) {
for (int j = l; j < r; j++) {
int pixelInfo = ((image.size.width * i) + j ) * 4;
UInt8 alpha = data[pixelInfo + 2];
if (alpha) {
NSLog(#"Bottom %d", alpha);
b = i;
pixelFound = YES;
break;
}
}
if(pixelFound) break;
}
CFRelease(pixelData);
return CGRectMake(l, t, r - l, b-t);
}
In the above code leftX, rightX, topY, bottomY are the extreme values(from CGPoint) in float that is calculated when user swipe their finger on the screen while painting and represents a rectangle which contains the painted area in its bounds (to minimise the loop).
leftX - minimum in X-axis
rightX - maximum in X-axis
topY - min in Y-axis
bottom - max in Y-axis
Here l,r,t,b are the calculated values for actual rectangle.
As expressed earlier, this code work well when the imageview in which paining is done is 320 pixels wide and is spanned throughout the screen width. But If the imageview's width is smaller like 300 and is placed to the center of the screen, the code give false result.
Note: I am scaling the image according to imageview's width.
Below are the NSLog output:
When imageview's width is 320 pixel (These are value for the component of color at matched pixel or non-transparent pixel):
2013-05-17 17:58:17.170 FunFace[12103:907] Left 41
2013-05-17 17:58:17.172 FunFace[12103:907] Right 1
2013-05-17 17:58:17.173 FunFace[12103:907] Top 73
2013-05-17 17:58:17.174 FunFace[12103:907] Bottom 12
When imageview's width is 300 pixel:
2013-05-17 17:55:26.066 FunFace[12086:907] Left 42
2013-05-17 17:55:26.067 FunFace[12086:907] Right 255
2013-05-17 17:55:26.069 FunFace[12086:907] Top 42
2013-05-17 17:55:26.071 FunFace[12086:907] Bottom 255
How can I solve this problem because I need the imageview in center with padding to its both side.
EDIT: Ok looks like my problem is due to image orientation of JPEG images(from camera). Png images are working good and are not affected with change in imageview's width.
But still JPEGs are not working even if I am handling the orientation.
First, I wonder if you're accessing something other than 32-bit RGBA? The index value for data[] is stored in pixelInfo then moves +2 bytes, rather than +3. That would land you on the blue byte. If your intent is to use RGBA, that fact would affect the rest of the results of your code.
Moving on, with an assumption that you were still getting flawed results despite having the correct alpha component value, it seems your "fixed" code would give Left,Right,Top,Bottom NSLog outputs with alpha values less than the full-on 255, something close to 0. In this case, without further code, I'd suggest your problem is within the code you use to scale down the image from your 320x240 source to 300x225 (or perhaps any other scaled dimensions). I could imagine your image having alpha values at the edge of 255 if your "scale" code is performing a crop rather than a scale.

UIImageView - How to change speed of reverse animation

I have the following code which animates a volume meter:
float meterIndexFloat = volume * 6;
int meterIndex = (int)roundf(meterIndexFloat);
NSMutableArray *litImages = [[NSMutableArray alloc] init];
for(int i=0; i < meterIndex; i++) {
[litImages addObject:[volumeMeterImages objectAtIndex:i]];
}
volumeMeter.animationImages = litImages;
volumeMeter.animationDuration = 0.4;
volumeMeter.animationRepeatCount = 1;
[volumeMeter startAnimating];
It works well, but I would like to slow down the animation when it reverses itself. Right now the duration is 0.4, but I would like to have it slow down to say 0.7 when the images go in the opposite direction. What's the easiest way to modify it to do this?
Thanks!

What is the best programmatically approach to display images/icons horizontally?

I'm trying to place the icons / images horizontally in a view that is intended to show details. Maximum number of pictures per row is 6 pieces and I want to have a mechanism that manage line breaks or similar automatically. I suspect it is a custom cell that solves this?
I have tried the following code below, but the images above to add another when I reload the view. Furthermore, the cell's height is not adjusted by the view that the code returned.
-(UIImageView *)fillView{
collage = nil;
collage = [[[UIImageView alloc] initWithFrame:CGRectMake(11, 7, 0, 0)] autorelease];
int rowCounter = 0;
int colCounter = 0;
int nrOfPictures = [paymentImages count];
//max 6 images per row
while (nrOfPictures > 0) {
while (colCounter <= 6 && nrOfPictures != 0) {
UIImageView *iv = [[UIImageView alloc] initWithImage:[paymentImages objectAtIndex:nrOfPictures-1]];
CGRect frame = iv.frame;
frame.origin.x = (frame.size.width + 4) * colCounter;
frame.origin.y = (frame.size.height + 4) * rowCounter;
iv.frame = frame;
[collage addSubview:iv];
[iv release];
colCounter++;
nrOfPictures--;
if (colCounter > 6) {
colCounter = 0;
rowCounter++;
}
}
}
return collage;
}
Can someone head me in the right direction?
You might want to check out this project. http://github.com/kirbyt/KTPhotoBrowser

Justifying UIVIews on the iPhone: Algorithm Help

I have been messing around with a way to justify align a collection of UIView subclasses within a containing view. I am having a little bit of trouble with the algorithm and was hoping someone could help spot my errors. Here is pseudocode of where I am now:
// 1 see how many items there are
int count = [items count];
// 2 figure out how much white space is left in the containing view
float whitespace = [containingView width] - [items totalWidth];
// 3 Figure out the extra left margin to be applied to items[1] through items[count-1]
float margin = whitespace/(count-1);
// 4 Figure out the size of every subcontainer if it was evenly split
float subcontainerWidth = [containingView width]/count;
// 5 Apply the margin, starting at the second item
for (int i = 1; i < [items count]; i++) {
UIView *item = [items objectAtIndex:i];
[item setLeftMargin:(margin + i*subcontainerWidth)];
}
The items do not appear to be evenly spaced here. Not even close. Where am I going wrong?
Here is a shot of this algorithm in action:
alt text http://grab.by/1Wcg
EDIT: The code above is pseudocode. I added the actual code here but it might not make sense if you are not familiar with the three20 project.
#implementation TTTabStrip (JustifiedBarCategory)
- (CGSize)layoutTabs {
CGSize size = [super layoutTabs];
CGPoint contentOffset = _scrollView.contentOffset;
_scrollView.frame = self.bounds;
_scrollView.contentSize = CGSizeMake(size.width + kTabMargin, self.height);
CGFloat contentWidth = size.width + kTabMargin;
if (contentWidth < _scrollView.size.width) {
// do the justify logic
// see how many items there are
int count = [_tabViews count];
// 2 figure out how much white space is left
float whitespace = _scrollView.size.width - contentWidth;
// 3 increase the margin on those items somehow to reflect. it should be (whitespace) / count-1
float margin = whitespace/(count-1);
// 4 figure out starting point
float itemWidth = (_scrollView.size.width-kTabMargin)/count;
// apply the margin
for (int i = 1; i < [_tabViews count]; i++) {
TTTab *tab = [_tabViews objectAtIndex:i];
[tab setLeft:(margin + i*itemWidth)];
}
} else {
// do the normal, scrollbar logic
_scrollView.contentOffset = contentOffset;
}
return size;
}
#end
I was able to get it to work on my own! I was applying the margin wrong to the elements. The issue is that I needed to apply the margin while considering the previous elements origin and width.
#implementation TTTabStrip (JustifiedBarCategory)
- (CGSize)layoutTabs {
CGSize size = [super layoutTabs];
CGPoint contentOffset = _scrollView.contentOffset;
_scrollView.frame = self.bounds;
_scrollView.contentSize = CGSizeMake(size.width + kTabMargin, self.height);
CGFloat contentWidth = size.width + kTabMargin;
if (contentWidth < _scrollView.size.width) {
// do the justify logic
// see how many items there are
int count = [_tabViews count];
// 2 figure out how much white space is left
float whitespace = _scrollView.size.width - contentWidth;
// 3 increase the margin on those items somehow to reflect. it should be (whitespace) / count-1
float margin = whitespace/(count-1);
// apply the margin
for (int i = 1; i < [_tabViews count]; i++) {
// 4 figure out width from the left edge to the right of the 1st element
float start = [[_tabViews objectAtIndex:i-1] frame].origin.x + [[_tabViews objectAtIndex:i-1] frame].size.width;
TTTab *tab = [_tabViews objectAtIndex:i];
[tab setLeft:(start + margin)];
}
} else {
// do the normal, scrollbar logic
_scrollView.contentOffset = contentOffset;
}
return size;
}
#end
coneybeare, thanks for figuring this out, but your solution doesn't really work as expected. It changes the position of tabs on the bar, but the spacing is not right. This seems to work better for me:
#import "TTTabStrip+Justify.h"
#import <Three20UI/UIViewAdditions.h>
// Width returned by [super layoutTabs] is always 10 px more than sum of tab widths
static CGFloat const kContentWidthPadding = 10;
// Adds fixed margin to left of 1st tab, right of last tab
static CGFloat const kHorizontalMargin = 5;
#implementation TTTabStrip (JustifyCategory)
- (CGSize)layoutTabs {
CGSize size = [(TTTabStrip*)super layoutTabs];
CGPoint contentOffset = _scrollView.contentOffset;
_scrollView.frame = self.bounds;
_scrollView.contentSize = CGSizeMake(size.width, self.height);
CGFloat contentWidth = size.width - kContentWidthPadding + 2 * kHorizontalMargin;
if (contentWidth < _scrollView.size.width) {
// do the justify logic
// see how many items there are
int count = [_tabViews count];
// calculate remaining white space
float whitespace = _scrollView.size.width - contentWidth;
// calculate necessary spacing between tabs
float spacing = whitespace / (count + 1);
// apply the spacing
for (int i = 0; i < count; i++) {
CGFloat lastTabRight = kHorizontalMargin;
if (i > 0) {
TTTab *lastTab = [_tabViews objectAtIndex:i-1];
lastTabRight = [lastTab right];
}
TTTab *tab = [_tabViews objectAtIndex:i];
[tab setLeft:(lastTabRight + spacing)];
}
} else {
// do the normal, scrollbar logic
_scrollView.contentOffset = contentOffset;
}
return size;
}
#end
Morgz, I also got several compiler errors. I needed to import UIViewAdditions.h and tell it that super is a TTTabStrip.