Portfolio To Go goes Pro!

Portfolio to Go for Flickr has just been approved for sale by Apple and is now availabile for iPad on the App Store.

Following the success of Portfolio To Go Lite – a top 10 free iPad App for Photographers – this pro version adds many new features including:

  • Photo Wall:
    View all your Flickr photo galleries at once – scroll each gallery horizontally to browse thumbs, scroll vertically to traverse through all synced galleries. Click on any thumbnail to jump into the main image view.
  • Main image view displays gallery thumbnails to enable improved gallery navigation. Just click the main image to go full-screen.
  • Pick and choose which galleries to display and which to hide
  • Share your photos and Flickr links in app via Facebook, Twitter or Email

Apple has chosen to feature Portfolio to Go for Flickr in the new and noteworthy section of the iPad Photography category – they did the same for the Lite version ๐Ÿ™‚

W.A.Ellis Property: iPhone App

Built for Property specialist digital agency World Archipelago, I was supplied with the customized design and commissioned to build a reskinnable iPhone property app that can be added to WAI’s range of online solutions for their extensive range of Real Estate Agencies.

Here’s a live version for Estate Agency Halls:

The app includes the following features:

  • Auto-paginated property search
  • User-location finding for local property searches
  • Auto-saves recent search requests
  • Saved property list between sessions
  • Property location display on a map
  • In app email property to a friend
  • Property details image gallery
  • Cached thumbnails

With additional functionality such as previous/next property buttons directly from within each property page this app is a great solution to most estate agency requirements. A robust, optimised and elegant-looking iPhone property app.

Introducing Loop&Learn!

After 5 months ‘ad hoc’ development and a short but anxious 6ย  day wait in the Apple submission queue we have finally launched our ‘Social Learning’ App for iPhone, iPad and iPod Touch: Loop&Learn.

Loop&Learn is more than just ‘my best ever iPhone App’, it is my best ever app… desktop, web, mobile or otherwise. It is both technically and content-wise the coolest software I’ve been lucky enough to develop.

Learn Chinese Phrasesloop-study-birds
Whether you want to learn Chinese or are an avid bird watcher,ย  there’s a loop for that ๐Ÿ™‚

Here’s my business partner, Neil Gerstenberg, presenting our app on YouTube:

As Neil describes in the video, Loop&Learn is a tool to help you learn ANYTHING! Right on your iPhone you can create multimedia ‘Learning Loops’ consisting of recorded audio phrases, images and text. On iPhone and iPad the audio recording works directly from the device microphone. On iPod Touch you’ll need a compatible microphone earphones for authoring but all of the study and learning loop playback is compatible without any extra hardware.

Create

We’ve designed the authoring process to be as intuitive as possible with features such as:

  • body text is auto split into loop phrases based on line/paragraph breaks – so you can easily import large learning texts into the app
  • auto-record in the phrase editing screen detects silences and enables you to split up your multiple audio phrases without continuously clicking a record button
  • the full current paragraph text is instantly displayed when recording each phrase
  • while editing body text the app enables users to play the existing audio phrase associated with the current text cursor position

Loop&Learn AuthoringBody Text Editor
New/Edit Loop Home Screen and Body Text Editor

Loop&Learn AuthoringLoop&Learn Authoring
Phrase Record and Edit

Learn

Likewise, in study mode here are just a few handy learning features offered by our app:

  • multi-gesture control: double tap to start/stop playback, swipe left and right for next/prev phrases, swipe down and up for next/prev looping groups
  • single or multi-select the loop blocks at the top of the screen to split your learning into looping bite-size chunks
  • 2 learning modes: ‘Repeat with me’ and ‘Listen’n’Repeat’ – the latter plays the full loop group and then repeats silently giving you the chance to repeat aloud

Share

Saving the best for last, my favourite feature of Loop&Learn is the new collaborative learning concept it introduces: ‘social learning’.

Users of our app can share the learning loops they create via our ‘Loop Library’. All that’s required is an account with Twitter.ย  Once a user shares one or more of their learning loops they retain ownership of the loop and can change and update it at any time via the same share and update process.

Loop Libraryshare-on-twitter

Think of the amazing possibilities that social learning offers. Language learning for example: User A is French and wants to learn English, User B is English and wants to learn French. If User A and User B create and share language loops in their native tongues then they both will benefit from the shared content!

In anticipation of launch, Neil, myself and friends have created some example loops that demonstrate how versatile the app is. Take a look at the Featured Loops page on loopandlearn.com. You’ll find learning loops for:

Just a few of our examples to kick off the app. As more people purchase Loop&Learn we expect the content to grow and it will always remain free to download user generated loops so the loop library should get bigger and better ๐Ÿ™‚

Thanks to the power of Twitter when users share new learning loops Loop&Learn sends a tweet with a link to the newly created loop preview page on our site. Like this one for example: http://www.loopandlearn.com/9ddbb9

what’s really cool is that on the top right of that preview page is a download link which when clicked on by Loop&Learn users via Safari or most iPhone Twitter clients Loop&Learn will automatically:

  1. launch on theย  iPhone
  2. download and install the loop being previewed

The Website

www.loopandlearn.com stays up-to-date automatically with the latest learning loops uploaded by Loop&Learn users. We have also launched the site with a ‘Hot Loops’ / Featured Loops section.

Happy Looping!

How to create square thumbnails using iPhone SDK / CG Quartz 2D

Today I wrote a useful Objective-C method which uses Quartz 2D from the iPhone SDK to dynamically generate square thumbnails from any portfolio or landscape UIImage. I failed to find helpful results on Google for the various CGContextClipToRect/CGContextTranslateCTM/CGContextScaleCTM Quartz functions so after a lot of trial and error I managed to get the results I was after with a fairly efficient script – shown below.

So, if for example you want to get a 32×32 pixel square thumbnail, you can pass 32 as the ‘length’ parameter in the function below. For portfolio images the code will take a full square from the original image from the centre using the full width of your original portfolio image. Likewise, for a landscape image the script will use all the height available, clipping the right and left sides.

I think the most import thing I learned when writing this script is that when you call UIGraphicsBeginImageContext(CGSize) make sure that the size you pass in is the size you want your final image to be. Otherwise you end up having to call UIGraphicsEndImageContext() and UIGraphicsBeginImageContext() multiple times with different CGSize instances which I’m sure isn’t an optimised way to achieve the same results.

– (UIImage *)thumbWithSideOfLength:(float)length {

NSString *subdir = @”my/images/directory”;
NSString *filename = @”myOriginalImage.png”;
NSString *fullPathToThumbImage = [subdir stringByAppendingPathComponent:[NSString stringWithFormat:@”%dx%d%@”,(int) length, (int) length,filename];
NSString *fullPathToMainImage = [subdir stringByAppendingPathComponent:filename];

UIImage *thumbnail;

NSFileManager *fileManager = [NSFileManager defaultManager];

if ([fileManager fileExistsAtPath:fullPathToThumbImage] == YES) {
thumbnail = [UIImage imageWithContentsOfFile:fullPathToThumbImage];

}
else {
//couldn’t find a previously created thumb image so create one first…
UIImage *mainImage = [UIImage imageWithContentsOfFile:fullPathToMainImage];

UIImageView *mainImageView = [[UIImageView alloc] initWithImage:mainImage];

BOOL widthGreaterThanHeight = (mainImage.size.width > mainImage.size.height);
float sideFull = (widthGreaterThanHeight) ? mainImage.size.height : mainImage.size.width;

CGRect clippedRect = CGRectMake(0, 0, sideFull, sideFull);

//creating a square context the size of the final image which we will then
// manipulate and transform before drawing in the original image
UIGraphicsBeginImageContext(CGSizeMake(length, length));
CGContextRef currentContext = UIGraphicsGetCurrentContext();

CGContextClipToRect( currentContext, clippedRect);

CGFloat scaleFactor = length/sideFull;

if (widthGreaterThanHeight) {
//a landscape image – make context shift the original image to the left when drawn into the context
CGContextTranslateCTM(currentContext, -((mainImage.size.width – sideFull) / 2) * scaleFactor, 0);

}
else {
//a portfolio image – make context shift the original image upwards when drawn into the context
CGContextTranslateCTM(currentContext, 0, -((mainImage.size.height – sideFull) / 2) * scaleFactor);

}
//this will automatically scale any CGImage down/up to the required thumbnail side (length) when the CGImage gets drawn into the context on the next line of code
CGContextScaleCTM(currentContext, scaleFactor, scaleFactor);

[mainImageView.layer renderInContext:currentContext];

thumbnail = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();
NSData *imageData = UIImagePNGRepresentation(thumbnail);

[imageData writeToFile:fullPathToThumbImage atomically:YES];

thumbnail = [UIImage imageWithContentsOfFile:fullPathToThumbImage];
}
return thumbnail;
}

So if, for example your original image looked like this:

finn

Using the method above you could request a 100×100 pixel thumbnail which would result in this:

finn_thumb

Pitching the Microphone with Flash Player 10.1 Beta

I’ve been lucky enough to get some Research & Development work in over the last few weeks. The latest batch of work has included some experimental stuff with the the new Microphone features introduced in Flash Player 10.1 which is currently in beta. You can download the required Flash Player here.

In the example below the app will automatically record your voice until you stop talking and will playback the sound bytes as Barry White or a Chipmunk (adjust using the slider).

Prior to Flash 10.1 you could manipulate the sound bytearray from an mp3 at runtime but you couldn’t access the native incoming microphone data. I can see this modification to the Flash Player leading to some really cool future games and apps.

In my example there’s currently no encoding to mp3. I just save the incoming sound byte arrays in memory. I think there may be as3 mp3 encoders already written if this was a project requirement.

Microphone Fun

Alternative content

Get Adobe Flash player

I’m also really intrigued by Didier Brun’s R&D work on voice recognition in Flash Player 10.1:

http://www.bytearray.org/?p=1151

http://vimeo.com/9780416

Looks like he’s really getting somewhere from those example videos. I guess one approach might be to render the sound data samples to bitmaps and run the sort of blend, colour threshold comparisons that you achieve with Flash WebCam motion detection.

Thanks to Andre Michelle’s shared work on pitching MP3s and Devon Wolfgang’s microphone code example I was able to get the above up and running.

Here’s the source ๐Ÿ™‚