Implement a kind of white board on Iphone

[Dazdh]

Hello,

I'm a beginner on Iphone development (I'm a Java, PHP, C#, C++ programmer).

I would like to implement a kind of "white board" on Facebook, where users can add some photos and draw whatever they want with fingers.

Following some tutorials, I know that it's possible to draw and add photos on any UIView.

However, I'm not quite about two issues:
- first, is it possible to simulate the white board as a map, where users move arount with fingers (exactly like we move around a map with mouse on Google Maps)? Does it mean a sequence of UIView all stuck to each other, and showed one after another on screen following movement done by fingers? Is there a built in stuff to do that? Is it possible to "navigate" inside an UIView bigger than screen?
- second, what about transparency of UIView? In case of users add a photo and then draw on it, does it mean higher view (with drawing) is transperent? Is it possible to do that? Is there any better way to match this goal?

Thanks you very much for your replies.

Best regards,

Dazdh

[Dutch]

Have a look at this thread.. It shows how to display a larger image (it is a map in this case) and implement it's sliding around and zooming. There is also a for-loop that adds points to the map that you can ignore, or use to place images on your photos. Once you implemented that, change it so the user can load their own image. Then it is just a matter of the drawing which we can discuss later... This might be a good place to start.

[Dazdh]

Hi Dutch, indeed that post is absolutly a very good start. UIImageView on UIScrollView, here it is!! Thanks for your help.

However with this method, only one UIScrollView and one UIImageView are used. Therefore users can only move around one image (the campus map), so it must be fully downloaded once on the begining of the app. My goal is to provide a "huge" white board, where you can move and move again in one direction whitout finding the end. Obvisouly there will be an end at the board, but what I mean is the consecutives pictures that constitute the board (one board, many pictures) should be downloaded only when they are displayed.

Is is a good way to consider only one ScrollView and many ImageView (like the red points on campus map, but replaced in my case by consecutives images forming the board)? In this case, will consecutives images be downloaded only when display? Is there a better way to implement such an issue?

Thanks,

Dazdh

[Dutch]

You've got it! All you really need to do is change the map image to display a background image of your choice, and change the generic dots to your photos.

However, instead of using a UIImage, I would use this UIImageView subclass that nobre helped me write. I call it JImage. You essentially initialize it like a UIImage, but you also send it a URL that downloads in its own thread and displays upon download. Oh - an activity indicator is also shown during the download.

    NSURL *theUrl=[NSURL URLWithString:@"http://www.domain.com/imagename.png"];
    JImage *photoImage=[[JImage alloc] init];
    [photoImage setContentMode:UIViewContentModeScaleAspectFill];
    [photoImage setFrame:CGRectMake(X, Y, W, H)];
    [photoImage initWithImageAtURL:theUrl];	
    [bgImage addSubview:photoImage]
    [photoImage release];

JImage.h

//
//  JImage.h
//  AlphaEntry
//
//  Created by Jason Goldberg on 9/17/09.
//  All rights reserved.
//

#import <Foundation/Foundation.h>

@interface JImage : UIImageView {

    NSURLConnection *connection;
    NSMutableData* data;
    UIActivityIndicatorView *ai;
}
	
-(void)initWithImageAtURL:(NSURL*)url;	         

@property (nonatomic, retain) NSURLConnection *connection;
@property (nonatomic, retain) NSMutableData* data;
@property (nonatomic, retain) UIActivityIndicatorView *ai;

@end

JImage.m

//
//  JImage.m
//  AlphaEntry
//
//  Created by Jason Goldberg on 9/17/09.
//  All rights reserved.
//

#import "JImage.h"

@implementation JImage
@synthesize ai,connection, data;

-(void)initWithImageAtURL:(NSURL*)url
{
    [self setContentMode:UIViewContentModeScaleAspectFit];
    if (!ai){
        [self setAi:[[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge]];	
        [ai startAnimating];
        [ai setFrame:CGRectMake(27, 13, 20, 20)];
        [self addSubview:ai];
    }
	
    NSURLRequest* request = [NSURLRequest requestWithURL:url cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:60];
    connection = [[NSURLConnection alloc] initWithRequest:request delegate:self];    

}

- (void)connection:(NSURLConnection *)theConnection	didReceiveData:(NSData *)incrementalData {
    if (data==nil) data = [[NSMutableData alloc] initWithCapacity:2048];
    [data appendData:incrementalData];
}

- (void)connectionDidFinishLoading:(NSURLConnection*)theConnection 
{
    [self setImage:[UIImage imageWithData: data]]; 
    [ai removeFromSuperview];
}

-(void)dealloc{
    [data release];
    [connection release];
    [ai release];
    [super dealloc];
}
@end

[Dazdh]

Very well! Thanks you! I ll test that and I ll get back on this thread.

[Dutch]

Originally Posted by Dazdh

Very well! Thanks you! I ll test that and I ll get back on this thread.

How did it turn out?

[mogs]

Originally Posted by Dutch

You've got it! All you really need to do is change the map image to display a background image of your choice, and change the generic dots to your photos.

However, instead of using a UIImage, I would use this UIImageView subclass that nobre helped me write. I call it JImage. You essentially initialize it like a UIImage, but you also send it a URL that downloads in its own thread and displays upon download. Oh - an activity indicator is also shown during the download.

    NSURL *theUrl=[NSURL URLWithString:@"http://www.domain.com/imagename.png"];
    JImage *photoImage=[[JImage alloc] init];
    [photoImage setContentMode:UIViewContentModeScaleAspectFill];
    [photoImage setFrame:CGRectMake(X, Y, W, H)];
    [photoImage initWithImageAtURL:theUrl];	
    [bgImage addSubview:photoImage]
    [photoImage release];

JImage.h

//
//  JImage.h
//  AlphaEntry
//
//  Created by Jason Goldberg on 9/17/09.
//  All rights reserved.
//

#import <Foundation/Foundation.h>

@interface JImage : UIImageView {

    NSURLConnection *connection;
    NSMutableData* data;
    UIActivityIndicatorView *ai;
}
	
-(void)initWithImageAtURL:(NSURL*)url;	         

@property (nonatomic, retain) NSURLConnection *connection;
@property (nonatomic, retain) NSMutableData* data;
@property (nonatomic, retain) UIActivityIndicatorView *ai;

@end

JImage.m

//
//  JImage.m
//  AlphaEntry
//
//  Created by Jason Goldberg on 9/17/09.
//  All rights reserved.
//

#import "JImage.h"

@implementation JImage
@synthesize ai,connection, data;

-(void)initWithImageAtURL:(NSURL*)url
{
    [self setContentMode:UIViewContentModeScaleAspectFit];
    if (!ai){
        [self setAi:[[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge]];	
        [ai startAnimating];
        [ai setFrame:CGRectMake(27, 13, 20, 20)];
        [self addSubview:ai];
    }
	
    NSURLRequest* request = [NSURLRequest requestWithURL:url cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:60];
    connection = [[NSURLConnection alloc] initWithRequest:request delegate:self];    

}

- (void)connection:(NSURLConnection *)theConnection	didReceiveData:(NSData *)incrementalData {
    if (data==nil) data = [[NSMutableData alloc] initWithCapacity:2048];
    [data appendData:incrementalData];
}

- (void)connectionDidFinishLoading:(NSURLConnection*)theConnection 
{
    [self setImage:[UIImage imageWithData: data]]; 
    [ai removeFromSuperview];
}

-(void)dealloc{
    [data release];
    [connection release];
    [ai release];
    [super dealloc];
}
@end

hey it doesn't work... the - (void)connectionNSURLConnection *) theConnection didReceiveDataNSData *)incrementalData and - (void)connectionDidFinishLoadingNSURLConnection* )theConnection
methods are not working.. it does not called ...