Roger Chapman

Custom UIView Animations with Vector Graphics

2013-08-23T00:00:00+00:00

There are may great things that you gain by using vector graphics in your iOS apps:

Increased performance
Reduced app file size
Works on retina and non-retina devices
Dynamic shapes and colors
Animations

Because vector graphics are all drawn in-code with CoreGraphics we can change values to animate the UIViews.

If you’ve never used vector graphics in your iOS apps before you should take a look at PaintCode; PaintCode is an awesome vector drawing app that generates Objective-C code that you can copy and paste into your application. I don’t build an iOS app without it now.

Example

What we are going to create is and animation that is similar to the following; please note that this GIF only has 5 frames, our animation will be smooth from start to finish:

Custom Control CALayer

The key to creating a custom animation lies within the view’s layer class. The CALayer’s drawInContext: method will draw the curved arrow and by changing the percentage property will determine the x position of the arrow head’s frame:

The important parts to creating this animation layer is making sure that the percentage property is @dynamic and that we update the display when the percentage property changed.

We also set the action for the percentage to return a nice CABasicAnimation. This means that when we change percentage from 1 to 0 the actual property transitions from 1 to 0.9 to 0.8 … 0.2 to 0.1 to 0.0 with the given easing function.

Usage

Once we have created a the layer we can easily create the UIView that implements this layer and add this to our UIViewController either via code or Interface Builder.

I’ve created a sample project on GitHub that contains all the source and shows the implementation here:

https://github.com/rogchap/…/CustomUIViewAnimation

Simple iOS Dropdown Control using UITextField

2013-08-13T00:00:00+00:00

The Native iOS controls do not specifically have a native control for a dropdown. What we want is a control that behaves like a HTML dropdown that uses a UIPickerControl in Safari.

UITextField is the “go to” for text input, but we can utilise the inputView property to display the UIPickerControl and then the rightView property to make the text field look like a dropdown.

This is what we are looking to achieve:

The Arrow View

To create the dropdown arrow we create a UIView for the right hand side of the UITextField. You could use an UIImageView but I’ve chosen to subclass UIView and draw my own arrow in drawInRect::

Subclass UITextField

By subclass-ing UITextField we can easily add the UIPickerControl as the inputView as well as the arrow view as the rightView.

Usage

Within interface builder I can easily add UITextField controls to my view and change it’s class to RCDropdown. All that is left to do is setup the data source for the picker control:

I use the tag property in case I require multiple dropdowns.

Additions

Things that are not included that would be nice is to have the arrow respond to touch events and the picker to use a “tick” image for selection as per Safari’s dropdown picker.

Image Resize Middleware for Express.js

2013-02-07T00:00:00+00:00

I love node.js and I love using express.js. One of the cool things with express is being able to add your own middleware. The following code snippit is a simple middleware that handles resizing images in my public folder.

The benifit of using this middleware is that I do not need a seperate controller to dynamically resize imagery. For example:

<!-- original image: -->
<img src="/images/logo.png" />

<!-- I don't want this: -->
<img src="/imagereziser?image=/images/logo.png&w=100$h=100" />

<!-- I'd rather have this: -->
<img src="/images/logo.png?size=100x100" />

This is a simple code snippet for the basic middleware; it can easily be extending to check for image types (you don’t want to resise css or javascript files!) and it could take a optional parameter to handle crop instead of just resize.

Dependencies

This middleware requires imagemagick and the mkdirp node module:

$ brew install imagemagick
$ npm install mkdirp

Middleware

// image-resize.js
var path = require('path'),
exec = require('child_process').exec,
mkdirp = require('mkdirp');

module.exports = ir = {};

// express.js middleware
ir.static = function(rootPath) {

  var root = path.normalize(rootPath),
    cache_path = path.join(root, '.cache');

  return function (req, res, next){

    var file = req.url.replace(/\?.*/,''),
      size = req.query.size,
      orig = path.normalize(root + file),
      dst = path.join(cache_path, type, size, file);

    function send_if_exists(file, callback) {
      fs.exists(file, function(exists){

        if (!exists) return callback();

        return fs.stat(file, function(err, stats){
          if (err){
            console.error(err);
          }
          else if (stats.isFile()){
            return res.sendfile(file);
          }
          return callback();
        });
      });
    }

    if (!size){
      return send_if_exists(orig, next);
    }

    send_if_exists(dst, function() {

      mkdirp(path.dirname(dst));

      exec('convert ' + orig + ' -resize '+ size +' ' + dst , function(err) {
        if(err) {
          console.error(err);
          res.send(err);
        } else {
          res.sendfile(dst);
        }
      });

    });

  };
};

Usage

In your app.js replace the following:

//app.use(express.static(path.join(__dirname, 'public')));
app.use(require('./image-resize').static(path.join(__dirname, 'public')));

The size parameter triggers the image resize otherwise it will just fetch the original image. The resized images are also cached for later use.

Apologies for my feed being down

2011-09-07T00:00:00+00:00

Recently I made a post with an “&” symbol in the post’s title. The title did not get properly encoded and caused the xml atom feed to fail.

Apologies to all my subscribers, and I hope you can catch up on older posts (some cool Node stuff!).

Feed is now up and running again!

Top 40 Website Programming Languages

2011-09-06T00:00:00+00:00

I was having a look on Google’s top 1000 most-visited websites and I thought it would be intresting to see if I could find out what programming languages these sites use.

Obviously it would take ages to do all 1000, so I researched the top 40.

Disclaimer

My results are in no way definitive and may even be wrong, but my resuts are comprised of:

HTTP Header information
Request for file types (.php for example)
Searches on forums, presentations and Google
Educated gueses ;)

Once again, my results may be wrong! Also, I’m not thinking about other backend technology that may be used: like C/C++ for search engines etc, it is purly the programming languages that are serving HTML.

Results

 | Website        | Visits       | Programming Language
-------------------------------------------------------------
 | facebook.com   | 870,000,000  |  PHP
 | youtube.com    | 790,000,000  |  Python
 | yahoo.com      | 590,000,000  |  PHP*
 | live.com       | 540,000,000  |  ASP.NET
 | wikipedia.org  | 460,000,000  |  PHP
 | msn.com        | 450,000,000  |  ASP.NET
 | blogspot.com   | 370,000,000  |  Python*
 | baidu.com      | 310,000,000  |  PHP
 | microsoft.com  | 280,000,000  |  ASP.NET
 | qq.com         | 250,000,000  |  PHP
 | bing.com       | 230,000,000  |  ASP.NET
 | ask.com        | 190,000,000  |  SSI
 | taobao.com     | 170,000,000  |  PHP
 | twitter.com    | 160,000,000  |  Ruby on Rails
 | adobe.com      | 160,000,000  |  ColdFusion
 | youku.com      | 160,000,000  |  PHP
 | soso.com       | 140,000,000  |  CGI*
 | wordpress.com  | 140,000,000  |  PHP
 | sohu.com       | 130,000,000  |  PHP
 | 163.com        | 130,000,000  |  JSP
 | windows.com    | 120,000,000  |  ASP.NET
 | hao123.com     | 120,000,000  |  PHP
 | amazon.com     | 120,000,000  |  CGI
 | tudou.com      | 120,000,000  |  PHP
 | apple.com      | 97,000,000   |  PHP
 | ebay.com       | 97,000,000   |  CGI
 | linkedin.com   | 89,000,000   |  Scala/Java
 | yahoo.co.jp    | 82,000,000   |  PHP*
 | sogou.com      | 81,000,000   |  PHP
 | go.com         | 74,000,000   |  CGI
 | 4399.com       | 74,000,000   |  PHP
 | paypal.com     | 73,000,000   |  CGI
 | mozilla.com    | 73,000,000   |  PHP/Python
 | aol.com        | 73,000,000   |  JSP
 | about.com      | 73,000,000   |  unknown
 | xunlei.com     | 68,000,000   |  PHP
 | 56.com         | 67,000,000   |  PHP
 | flickr.com     | 67,000,000   |  PHP
 | craigslist.org | 66,000,000   |  Perl
 | tmall.com      | 66,000,000   |  PHP

*educated guesses

Observations

Based on the above results we see that PHP is the dominant language claming 50% of the top 40 websites. Also, ASP.NET seems to be only used in Microsoft properties.

Other interesting observations that are not in the results is that two of the PHP websites are using IIS 6.0 and the rest mainly using Apache with a few using Nginx.

Report errors

If you see an error in my results I would love to hear from you: please leave a comment stating the correction. Thanks.

HTML 5, Mobile Web and Websokets; What More do You Want?

2011-08-26T00:00:00+00:00

I’ve done a cool (I think it is anyway) experiment: I wanted to use my mobile web browser to control my desktop browser. The app was to be built using HTML5 technologies and no Flash or native mobile application.

Technologies

For the server side code I used Node.js, HTML5’s canvas and JavaScript on the client, and transport over websockets via socket.io

Moble detection was nice and easy in Node:

app.get('/', function(req, res){

	var ua = req.header('user-agent');
	if(/mobile/i.test(ua)) {
		res.render('mobile.html');
	} else {
		res.render('desktop.html');
	}
});

So, what does the app do?

Basically, it allows you to use your mobile’s touch screen to draw on the canvas that resides on your desktop screen:

Demo

A demo is availible at:

http://drawing.labs.rogchap.com

Ps. It’s been tested on Chrome, Firefox and Safari, with an iPhone and an Android Phone. Don’t bother with IE or a Windows 7 Phone or Blackberry: It just won’t work! ;)

Source

Once again (as always) source is available on GitHub:

https://github.com/rogchap/SampleProjects/tree/master/NodeDrawing

Chat App Online

2011-08-23T00:00:00+00:00

I previously bloged about my NodeChat app that I created, with the code up on GitHub.

I decided to publish the app so that you lovely people could have a play with it without having to download the source and run it locally. It also served as a good walktrough in putting together a nodejs production server. I’ll write up a seperate post on this.

NodeChat URL

You can find my NodeChat at:

http://chat.labs.rogchap.com

NodeChat Screenshot

My Node.js Chat App

2011-08-10T00:00:00+00:00

I’m a big fan of node.js, and when learning node, you can’t do it without building a chat room app! Everybody’s done one so I thought I would share my node chat app:

The building blocks

My chat app uses three frameworks:

Socket.IO makes websockets supper simple, and is even cross browser compatible. Socket.IO will use the best transport of your messages that is available in that browser, ie. websockets -> websockets over Flash -> ajax polling. So this should mean that my app should work in IE6 (although not tested!).

A very simple socket.io demo:

// server.js

var io = require('socket.io').listen(3000);

io.socket.on('connection', function(client){
	client.emit('welcome', 'Welcome to NodeChat!');
});

// client.js

var socket = io.connect('http://localhost:3000');

socket.on('welcome', function(data){
	alert(data);
});

You can’t get more simple than that!

Source code

As always the complete application is available on GitHub:

https://github.com/rogchap/SampleProjects/tree/master/NodeChat

All the information is contained in the README file and the best thing to do is download the source and run it.

Beautiful Number Input for iPhone

2011-07-13T00:00:00+00:00

Most text/number input is done with a UIFextField, but the text in the field can not be styled very well (ie. no shadow). It also has a blinking cursor which sometimes you just don’t want.

I wanted to enter a number using the number pad, have a nice drop shadow on the text, no blinking cursor and as an added bonus would show the currency symbol at the start of the number:

Hidden UITextField

The trick here is to have a UITextField with a UILabel in front. The UILabel needs to have a background color so to hide the text and cursor being entered into the text field.

Then all we need to do is hook up the EditingChanged event on the text field to then update our styled label:

- (IBAction)textChanged:(id)sender {

	int number = [_numberTextField.text intValue];

	// make sure we don't go beyond INT32_MAX
	if (number == INT32_MAX) {
		number = _currentNumber;
 		_numberTextField.text = [NSString stringWithFormat:@"%d", number];
	}

	_currentNumber = number;
	_numberLabel.text = [NSString stringWithFormat:@"%@%d", [[NSLocale currentLocale] objectForKey:NSLocaleCurrencySymbol], _currentNumber];
}

Source on GitHub

Once again I’ve added a source project on GitHub so you can try it out for yourself:

https://github.com/rogchap/SampleProjects/tree/master/NumberInput

Not just Numbers

This technique will work on regular text too, and not just number. If you use this technique in any of your projects let me know as I would love to take a look at you implementation. :)

Simple User Helper for iOS

2011-07-12T00:00:00+00:00

I’m sure there are many ways to store user information to remember if a user is logged in or not, using the key chain api for example. However, I like to keep things really really simple, so I created a simple helper class to deal with my user object and store the info using NSUserDefaults and have a static constructor:

// UserHelper.h
	
@interface UserHelper : NSObject {
	NSString *currentUserId;
	NSUserDefaults *_defaults;
}

@property(nonatomic,retain) NSString *currentUserId;

-(BOOL) isValid;
-(void) clear;

+(UserHelper *) default;

@end
	
// UserHelper.m
	
#import "UserHelper.h"

@implementation UserHelper
@synthesize currentUserId;

//////////////////////////////////////////////////////////////////////////////////
#pragma mark -
#pragma mark NSObject

static NSString *kcurrentUser = @"currentUser";

+(UserHelper *) default {
	static UserHelper *helper = nil;

	if (helper == nil) {
		helper = [[UserHelper alloc] init];
	}

	return helper;
}

-(id) init {

	if (self == [super init]) {
		_defaults = [NSUserDefaults standardUserDefaults];
		currentUserId = [_defaults stringForKey:kcurrentUser];
	}

	return self;
}

//////////////////////////////////////////////////////////////////////////////////
#pragma mark -
#pragma mark Private

-(void)setCurrentUserId:(NSString *)_id {
	currentUserId = _id;
	[_defaults setObject:currentUserId forKey:kcurrentUser];
	[_defaults synchronize];
	[[NSNotificationCenter defaultCenter] postNotificationName:@"UserSignedIn" object:nil];
}

//////////////////////////////////////////////////////////////////////////////////
#pragma mark -
#pragma mark Public

-(BOOL) isValid {
	return [currentUserId isKindOfClass:[NSString class]] && [currentUserId length] > 0;
}

-(void) clear {

	currentUserId = nil;
	[_defaults removeObjectForKey:kcurrentUser];
	[_defaults synchronize];
	[[NSNotificationCenter defaultCenter] postNotificationName:@"UserSignedOut" object:nil];
}

@end

In this helper method I’m only storing the user Id, but you could always store a user object and serialize/deserialize to JSON to store as NSString

Hope this may help someone who is after simple authentication persistence.

Simple API Creation with Node.js

2011-06-25T00:00:00+00:00

This will be a tutorial for setting up a simple JSON API using Node.js.

Node.js is discribed as “evented I/O for V8 JavaScript” so is perfect for creating simple, lightweight APIs or websites.

Step 1: Install Node.js

You can download Node.js from the GitHub repository and follow the installation guide, but I’m quite a fan of using package managers so I’m going to install that way, but either way works. Package manager details can be found here:

https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager.

Check your Node.js installation:

$ node -v
v0.4.8

Now that we have Node.js installed we will want to install npm (Node Package Manager) which will make installing Node.js modules a breeze.

curl http://npmjs.org/install.sh | sh

Now we have Node.js installed and the Node Package Manager.

Step 2: Setup API Application

Create the directory for application:

$ mkdir NodeApi
$ cd NodeApi

Although we could create our API with Node.js alone I’m going to install express which makes web development simple; well also make sure we have all the dependancies like Jade, a templeting engine:

$ npm install -g express
$ npm install -d

Then lets create a default express project:

$ express

This will create the directories and files for a basic web application. Lets test our new web app:

$ node app.js
Express server listening on port 3000 in development mode

$ curl localhost:3000
<!DOCTYPE .... etc

Now we have a running web application! You can get more simple and lightweight that that….love it!

Part 2: Coming soon

I’m going to split this tutorial into a few parts. In the next part we will setup our application with a familier MVC style pattern.

As always I’ll be putting the source project on GitHub:

https://github.com/rogchap/SampleProjects/tree/master/NodeApi

Custom Navigation Bar Background and Custom Buttons

2011-06-21T00:00:00+00:00

The default UINavigationBar color is a bit boring and even changing the tint color only adds a little to the desired effect. More iPhone apps are displaying more “fancy” designs and the bulk standard navigation bar needs the same treatment.

This is the sort of navigation bar we are trying to achieve:

To change the background of the navigation bar be need to override the the drawRect: method, but I also only wanted to change the navigation background for the default navigation style. This way I could still have an app that can use the semi-transparent navigation bar when necessary. To achieve this we store the original drawRect: method and only override when the barStyle is equal to UIBarStyleDefault.

I placed this code at the end of my app delegate:

#import <objc/runtime.h>

static void (*_origDrawRect)(id, SEL, CGRect);

static void OverrideDrawRect(UIToolbar *self, SEL _cmd, CGRect r) {
  if ( self.barStyle == UIBarStyleDefault ) {
    self.tintColor = UIColorFromRGB(0x008A35);
    [[UIImage imageNamed:@"top_navbar"] drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
  } else {
    // Call default method
    _origDrawRect(self, _cmd, r);
  }
}

@implementation UINavigationBar (UINavigationBarCategory)

+ (void)load {
  Method origMethod = class_getInstanceMethod(self, @selector(drawRect:));
  _origDrawRect = (void *)method_getImplementation(origMethod);

  if(!class_addMethod(self, @selector(drawRect:), (IMP)OverrideDrawRect, method_getTypeEncoding(origMethod)))
    method_setImplementation(origMethod, (IMP)OverrideDrawRect);
}

This will now set the background of all UINavigationBars to top_navbar.png for the default style. You can also use similar code to change UITabBars.

At this point your navigation bar will have your new background image but the buttons will still have the default look based on the tint color you specified. This maybe what you want but if you want custom buttons I created the following category:

// UIBarButtonItem+Image.h

@interface UIBarButtonItem (Image)

-(id)initWithImage:(UIImage *)image title:(NSString*)title target:(id)target action:(SEL)action;

@end

//  UIBarButtonItem+Image.m

@implementation UIBarButtonItem (Image)

-(id)initWithImage:(UIImage *)image title:(NSString*)title target:(id)target action:(SEL)action {
  UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
  button.frame= CGRectMake(0.0, 0.0, image.size.width, image.size.height);
  button.titleLabel.font = [UIFont boldSystemFontOfSize:12];
  button.titleLabel.shadowOffset = CGSizeMake(0, -1);
  button.titleLabel.shadowColor = [UIColor colorWithWhite:0 alpha:0.5];

  [button setTitle:title forState:UIControlStateNormal];
  [button setBackgroundImage:image forState:UIControlStateNormal];
  [button addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];

  UIView *view =[[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, image.size.width, image.size.height) ];
  [view addSubview:button];

  self = [[UIBarButtonItem alloc] initWithCustomView:view];

  [view release];
  [image release];

  return self;
}

-(void)setEnabled:(BOOL)enabled {
  if (self.customView) {
    if ([[self.customView.subviews objectAtIndex:0] isKindOfClass:[UIButton class]]) {
      ((UIButton*)[self.customView.subviews objectAtIndex:0]).enabled = enabled;
    }
  }
}

The setEnabled method allows you to set a disabled state on the UIBarButtonItem and that state be reflected in the custom button.

In order to use your custom button in the nav bar you must set the left/right bar button item:

#import "UIBarButtonItem+Image.h"

self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"custom_button"] title:@"Cancel" target:self action:@selector(cancel)];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"custom_button_blue"] title:@"Continue" target:self action:@selector(continue)];

Your left and right button should now look like you custom buttons. One down side to this is that you would have to manually set the back button each time with a popViewController action if you wanted a custom back button, but that’s no real headache.

Bonus: UIColorFromRGB

You’ll have notice that I used a macro in the OverrideDrawRect method to set the tint color of the navigation bar:

#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

This was a macro provided by Cocoa-Matic.

MKMapView Moving the Google Logo

2011-06-17T00:00:00+00:00

The terms & conditions of using the MapKit in iOS is that the Google logo has to be visible, but sometimes your UI hides the logo, for example you may have an iAd or toolbar. This is a very simple addition to MKMapView to access the Google logo, so that you can move it to another part of the screen.

Warning: Do not hide the logo otherwise your app will get rejected by Apple. As long as the logo is fully visible you should be fine.

@implementation MKMapView (Additions)

- (UIImageView*) googleLogo {

	UIImageView *imgView = nil;
	for (UIView *subview in self.subviews) {
		if ([subview isMemberOfClass:[UIImageView class]]) {
			imgView = (UIImageView*)subview;
			break;
		}
	}
	return imgView;
}

@end

As an extra method to make things easy for my particular application I decided to add the use of UITextAlignment to align the logo left, center or right (right in my case):

- (void) alignGoogleLogo:(UITextAlignment) alignment {

  UIImageView *logo = [self googleLogo];
  CGRect frame = logo.frame;
  float padding = 9;

  if (alignment == UITextAlignmentLeft) {

    frame.origin.x = padding;

  } else if (alignment == UITextAlignmentCenter) {

    frame.origin.x = (self.size.width / 2) - (frame.size.width / 2);

  } else if (alignment == UITextAlignmentRight) {

    frame.origin.x = self.size.width - frame.size.width - padding;
  }

  [logo setFrame:frame];

}

Calculating Collection Index Within a Grid

2011-06-13T00:00:00+00:00

In my latest iOS app that I’m building I have the need for a grid view. iOS out of the box does not have a grid control, however I did find the awesome DTGridView by Daniel Tull. This grid view uses the same concepts as the well known UITableView and recycles the grid cells to maintain memory over a large dataset.

With a grid view there will always come to a point where you will want to know the selected cell. In a table view this is really simple as the row index is equal to your collection index; however in a grid view this involves a little math. The math is not straight forward, but even us developers have brain block and can’t even work out the simplest of equations.

For example given the following grid we want to work out the selected index at row 3 column 2:

  |  0  1  2
-------------
0 |  0  1  2
1 |  3  4  5
2 |  6  7  8
3 |  9  10 11

Ok so the answer from the grid above is 11 and the equation for this problem is:

n * r + c

n = number of columns
r = row index
c = column index

So in our problem:

3 * 3 + 2 = 11

Correct!

This should work for any grid with any number of rows and columns. Remember that both the collection and grid have a zero based index.

Special thanks to James Lynch for helping with figuring this out last thing on a Friday afternoon!

iOS Image Manipulation with UIGestureRecognizer: scale, move, rotate

2011-06-10T00:00:00+00:00

I promised to share with you my code that I used on the Twibbon iPhone app, to manipulate images using touch gestures. This solution uses UIGestureRecognizers and therefore only work in iOS 3.2 and above. The full source to a sample applications is available at the end.

Setting up the UI

On your main view you first want to set up an UIView that will act as your canvas. This canvas will contain your UIImageView for your photo. Setting the canvas view to Clip Subviews will make sure that your photo view will be masked inside of the canvas.

Create your UIGestureRecognizers

Once we have set up the basic UI we then need to make sure our app responds to your touch gestures on the screen, like so:

- (void)viewDidLoad {
	[super viewDidLoad];

	UIPinchGestureRecognizer *pinchRecognizer = [[[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(scale:)] autorelease];
	[pinchRecognizer setDelegate:self];
	[self.view addGestureRecognizer:pinchRecognizer];

	UIRotationGestureRecognizer *rotationRecognizer = [[[UIRotationGestureRecognizer alloc] initWithTarget:self action:@selector(rotate:)] autorelease];
	[rotationRecognizer setDelegate:self];
	[self.view addGestureRecognizer:rotationRecognizer];

	UIPanGestureRecognizer *panRecognizer = [[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(move:)] autorelease];
	[panRecognizer setMinimumNumberOfTouches:1];
	[panRecognizer setMaximumNumberOfTouches:1];
	[panRecognizer setDelegate:self];
	[canvas addGestureRecognizer:panRecognizer];

	UITapGestureRecognizer *tapProfileImageRecognizer = [[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapped:)] autorelease];
	[tapProfileImageRecognizer setNumberOfTapsRequired:1];
	[tapProfileImageRecognizer setDelegate:self];
	[canvas addGestureRecognizer:tapProfileImageRecognizer];
}

You’ll notice that the pinch and rotate actions have been added to the whole view whereas the move has only been added to the canvas; this is because I felt that it gives a better user experience especially as it gives the user more screen to use two fingers.

Hook up the manipulation methods

Once we have the gestures set up we can now use some animation to manipulate the photo based on the users touch gestures:

-(void)scale:(id)sender {

    if([(UIPinchGestureRecognizer*)sender state] == UIGestureRecognizerStateBegan) {
      _lastScale = 1.0;
    }

    CGFloat scale = 1.0 - (_lastScale - [(UIPinchGestureRecognizer*)sender scale]);

    CGAffineTransform currentTransform = photoImage.transform;
    CGAffineTransform newTransform = CGAffineTransformScale(currentTransform, scale, scale);

    [photoImage setTransform:newTransform];

    _lastScale = [(UIPinchGestureRecognizer*)sender scale];
    [self showOverlayWithFrame:photoImage.frame];
}

	-(void)rotate:(id)sender {

    if([(UIRotationGestureRecognizer*)sender state] == UIGestureRecognizerStateEnded) {

      _lastRotation = 0.0;
      return;
    }

    CGFloat rotation = 0.0 - (_lastRotation - [(UIRotationGestureRecognizer*)sender rotation]);

    CGAffineTransform currentTransform = photoImage.transform;
    CGAffineTransform newTransform = CGAffineTransformRotate(currentTransform,rotation);

    [photoImage setTransform:newTransform];

    _lastRotation = [(UIRotationGestureRecognizer*)sender rotation];
    [self showOverlayWithFrame:photoImage.frame];
}


-(void)move:(id)sender {

  CGPoint translatedPoint = [(UIPanGestureRecognizer*)sender translationInView:canvas];

  if([(UIPanGestureRecognizer*)sender state] == UIGestureRecognizerStateBegan) {
    _firstX = [photoImage center].x;
    _firstY = [photoImage center].y;
  }

  translatedPoint = CGPointMake(_firstX+translatedPoint.x, _firstY+translatedPoint.y);

  [photoImage setCenter:translatedPoint];
  [self showOverlayWithFrame:photoImage.frame];
}

-(void)tapped:(id)sender {
  _marque.hidden = YES;
}

Added bonus code snipet: selection marque overlay

You’ll notice in some of the code above making reference to a _marque, This is the marching ants you see when you have selected the photo and allows you to easily see the boundary line of the image.

First we set up a CAShapeLayer object using QuartzCore:

if (!_marque) {
	_marque = [[CAShapeLayer layer] retain];
	_marque.fillColor = [[UIColor clearColor] CGColor];
	_marque.strokeColor = [[UIColor grayColor] CGColor];
	_marque.lineWidth = 1.0f;
	_marque.lineJoin = kCALineJoinRound;
	_marque.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:10],[NSNumber numberWithInt:5], nil];
	_marque.bounds = CGRectMake(photoImage.frame.origin.x, photoImage.frame.origin.y, 0, 0);
	_marque.position = CGPointMake(photoImage.frame.origin.x + canvas.frame.origin.x, photoImage.frame.origin.y + canvas.frame.origin.y);
}
[[self.view layer] addSublayer:_marque];

Then we show the marque when we move (rotate, resize) the photo and add the marching ants animation.

-(void)showOverlayWithFrame:(CGRect)frame {

	if (![_marque actionForKey:@"linePhase"]) {
		CABasicAnimation *dashAnimation;
		dashAnimation = [CABasicAnimation animationWithKeyPath:@"lineDashPhase"];
		[dashAnimation setFromValue:[NSNumber numberWithFloat:0.0f]];
		[dashAnimation setToValue:[NSNumber numberWithFloat:15.0f]];
		[dashAnimation setDuration:0.5f];
		[dashAnimation setRepeatCount:HUGE_VALF];
		[_marque addAnimation:dashAnimation forKey:@"linePhase"];
	}

	_marque.bounds = CGRectMake(frame.origin.x, frame.origin.y, 0, 0);
	_marque.position = CGPointMake(frame.origin.x + canvas.frame.origin.x, frame.origin.y + canvas.frame.origin.y);

	CGMutablePathRef path = CGPathCreateMutable();
	CGPathAddRect(path, NULL, frame);
	[_marque setPath:path];
	CGPathRelease(path);

	_marque.hidden = NO;
}

Example project and source on GitHub

The full source of the above code is available within my Sample Projects GitHub account under the ImageManipulation folder. Running this app should produce a lovely frame of Steve Jobs:

Twibbon on your iPhone

2011-06-09T00:00:00+00:00

Twibbon is a Twitter and Facebook application that allows you to create and select a campaign and display a twibbon on your avatar.

Twibbon was created by our ideas arm of the company: Storm Ideas. I had the privilege of building the iPhone version.

Twibbon was a fun app to build and includes some cool image manipulation and getting to grips with UIGestures. In a future post I will share some of the image code, but for now go download the new Twibbon app now available on the App Store:

Download Twibbon for iPhone now!

iOS5 and Automatic Reference Counting

2011-06-07T00:00:00+00:00

Well today is another day and it would be impossible to to write a blog post without mentioning Apple’s Keynote at WWDC 2011. There were some awesome announcements for OSX Lion, iOS5 and iCloud; all with some amazing features.

For iOS there are some cool new features and applications which you can get an overview here, but there are some equally cool features for Developers:

Automatic Reference Counting (ARC)

Apple’s definition:

Automatic Reference Counting (ARC) is a compiler-level feature that simplifies the process of managing the lifetimes of Objective-C objects. Instead of you having to remember when to retain or release an object, ARC evaluates the lifetime requirements of your objects and automatically inserts the appropriate method calls at compile time.

Coming from a C# background, memory management became a thing of the past, however when I entered the iOS and Objective-C world I had to learn (and learn fast) about retaining, releasing objects. Now thanks to Apple’s new LLVM Compiler (3.0) I won’t have to type a retain or release again. That make me a very happy developer. Now I can concentrate on building great apps without the fear of the app crashing because of a memory leak or and object being auto-released.

I’m looking forward to using this new feature as well as storyboards and other great features, but because it’s just a beta I won’t be able to try it out in anger until a little bit closer to Fall, when iOS5 is set to be released.

Facebook Connect Helper for iOS

2011-06-06T00:00:00+00:00

Many iPhone/iPad apps use Facebook Connect, and Facebook have made this really easy with their Facebook iOS SDK.

One thing that you will always most likely want to do is make sure that the user only has to log in once, and every time time they want to use your app that they are already authenticated with Facebook. This means two things: first you need to make sure you authenticate the user with the offline_access flag and secondly, save the access tokens for the next time your app is used.

This led me to create a very simple helper class that I use in conjunction with the Facebook SDK to make my life a little easier:

// FacebookHelper.h

#import "FBConnect.h"
@interface FacebookHelper : NSObject {

}

+(Facebook*)fb;
+(void) resume;
+(void) save;
+(void) revoke;

@end

//FacebookHelper.m

static NSString* kFBAccessToken = @"FBAccessToken";
static NSString* kFBExpirationDate = @"FBExpirationDate";

@implementation FacebookHelper

+(Facebook*)fb {
	static Facebook *fb = nil;

	if (fb == nil) {
		fb = [[Facebook alloc] initWithAppId:FB_APP_ID];
	}

	return fb;
}

+(void) resume {
  NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
  Facebook *facebook = [FacebookHelper fb];
  facebook.accessToken = [defaults stringForKey:kFBAccessToken];
  facebook.expirationDate = (NSDate*)[defaults objectForKey:kFBExpirationDate];
}

+(void) save {
  NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
  Facebook *facebook = [FacebookHelper fb];

  [defaults setObject:facebook.accessToken forKey:kFBAccessToken];
  [defaults setObject:facebook.expirationDate forKey:kFBExpirationDate];
  [defaults synchronize];
}

+(void) revoke {
  NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
  [defaults removeObjectForKey:kFBAccessToken];
  [defaults removeObjectForKey:kFBExpirationDate];
  [defaults synchronize];
}

@end

As you can see I have a static object for the Facebook SDK, and three simple static method to help me deal with login and logout. Now in my applicationDidFinishLaunching method on my AppDelegate I simply call: [FacebookHelper resume]; And when fbDidLogin and fbDidLogin are called: [FacebookHelper save]; and [FacebookHelper revoke];

Simple!

Mobile Development: The Beginning

2011-06-05T00:00:00+00:00

Well, it’s a Sunday and here I find myself writing a blog post. Well I did just promise that I wold keep up with this one, so I’m keen not to flop on the first hurdle.

In the last 18 months (or so) there has been a massive boom in mobile application or apps as they are know commonly known. My background is in web based applications, but there is a huge cross over to mobile applications and many high flying web apps also have sold mobile apps: facebook and twitter instantly come to mind.

No surprise to us that are clients start asking if we can do mobile applications for them to complement or add to their current web presence. We always tried to push them back to the web (even mobile web) there was still a huge demand for mobile applications. We’ll I just couldn’t just ignore that huge demand; could I?

Mobile Applications Require Web Applications

OK, so not strictly true, but you do find that most mobile applications (even games) have some sort of internet connection to provide news articles, scoreboards, videos, photographs or what somebody is having for breakfast on there latest status update. So even mobile applications go back to the web.

RESTful services are so important to the success of a mobile application. The web based service that is taking requests and returning data (JSON most likely) is like the controller and the mobile device/phone is the view (yes that was an MVC analogy).

The Beginning = The Web

So although mobile apps are very cool and we all want a bit of that pie, we will never see web development disappear. Although I have loved working with iPhone’s and Android device’s, creating some awesome applications, I always have to remind myself that the beginning is still with web development.

I’ll hopefully be able to share more with you about my web development experiences, and the mobile world from iOS to Android. I promise that I’ll share more tutorials and screen-casts as soon as I get a chance to put something together. Basically I want to share as much as I can, and I hope it helps at least one person out there.

The Start of yet Another Blog

2011-06-03T00:00:00+00:00

Over the course of my career I’ve had quite a few blogs, however I have struggled to maintain writing content for each one. I still write blog posts for -Storm ID- (I’ve left Storm ID. and now work for M&C Saatchi in Australia) but any personal blogs have now all disappeared from various hosting platforms.

The setup

This blog is hosted on GitHub pages. GitHub pages allows me to be in control of my blog and makes it super simple to publish a new blog post; it’s as simple as: $ git push Also, by hosting my blog posts on GitHub (should) mean that I won’t loose any of my posts and they will be all version controlled via my git repository.

Jekyll is also at the heart of this blog. This is mainly because GitHub pages support it (it was written by one of the co-founders of GitHub after all) and it is a really lightweight way to publish HTML content. Jekyll’s power comes in the form of layouts, templates and plugins. I’m currently using Daring Fireball’s Markdown as my template engine for my blog post, but the great thing about Jekyll is that I can change to textile (for example) for any one post and Jekyll will deal with the rest i.e. I can mix ‘n’ match.

About Me

I’m an Application Developer living in Sydney, Australia. I’ve been in the development world commercially for 10 years now, but have been an indie developer for much longer.

My core programming language has been C# and the .NET framework, however, the last two years has seen me develop my skills in Objective-C (iOS development), Java (Android development) and even PHP; my current development enviroment of choice is Node.js.

I love building new things and I’m always on the lookout for the next big thing in technology; software or hardware.

The Beginning

I’ll be writing about anything I think would be useful and will be sharing more about my development stuff as time goes on. Until then, thanks for stopping by.

Roger Chapman

Custom UIView Animations with Vector Graphics

Example

Custom Control CALayer

Usage

Simple iOS Dropdown Control using UITextField

The Arrow View

Subclass UITextField

Usage

Additions

Image Resize Middleware for Express.js

Dependencies

Middleware

Usage

Apologies for my feed being down

Top 40 Website Programming Languages

Disclaimer

Results

Observations

Report errors

HTML 5, Mobile Web and Websokets; What More do You Want?

Technologies

So, what does the app do?

Demo

Source

Chat App Online

NodeChat URL

NodeChat Screenshot

My Node.js Chat App

The building blocks

Source code

Beautiful Number Input for iPhone

Hidden UITextField

Source on GitHub

Not just Numbers

Simple User Helper for iOS

Simple API Creation with Node.js

Step 1: Install Node.js

Step 2: Setup API Application

Part 2: Coming soon

Custom Navigation Bar Background and Custom Buttons

Navigation Bar background

Custom Navigation Bar Buttons

Bonus: UIColorFromRGB

MKMapView Moving the Google Logo

Calculating Collection Index Within a Grid

iOS Image Manipulation with UIGestureRecognizer: scale, move, rotate

Setting up the UI

Create your UIGestureRecognizers

Hook up the manipulation methods

Added bonus code snipet: selection marque overlay

Example project and source on GitHub

Twibbon on your iPhone

iOS5 and Automatic Reference Counting

Automatic Reference Counting (ARC)

Facebook Connect Helper for iOS

Mobile Development: The Beginning

Mobile Applications Require Web Applications

The Beginning = The Web

The Start of yet Another Blog

The setup

About Me

The Beginning