damienlegrand.com

Freebase and DBPedia

Thu, 21 June 2012 13:38:24 UTC

This year I had a big project for my studies. It was a musical recommendation website. So I had to use data from different services, as Freebase and wikipedia.
Here is a screenshot of this project :

Freebase

Freebase is now a Google service ! And you can make queries on Freebase with MQL. It look likes a json array...

{
	"mid" : "artist's Freebase ID", 
	"type" : "/music/artist",
	"name" : null,
	"home_page" : [{
		"uri" : null,
		 "optional" : True
	}],
	"key" : [{
		"namespace" : null,
		"value" : null,
		"optional" : True
	}],
	"active_start" : null,
	"active_end" : null,
	"label" : [{
		"mid" : null,
		"name" : null,
		"optional" : True
	}],
	"genre" : [{
		"mid" : null,
		"optional" : True
	}],
	"album" : [{
		"mid" : null,
		 "optional" : True
	}]
}

Here I'm getting data for an artist entity. Null values are what I'm asking to Freebase. If you want more information there is a nice documentation here : http://wiki.freebase.com/wiki/Main_Page

Freebase get his data from others services as MusicBrainz for musical data, and wikipedia, which is a nice thing (less work for me ;) ). But it doesn't provide the wikipedia description (more work for me ^^). Nevertheless, Freebase provide a wikipedia id (I'm getting it with the "key" attribute).

WIkipedia API

So with this id, I tried to get wikipedia information through the Mediawiki's API : http://www.mediawiki.org/wiki/API

But what you get is a strange things ! Wiki markup ! Because I'm a lazy developer (as the majority of developers...) and I don't want to understand how it work and how to parse it (I'm a json lover), so I found another way.

DBPedia

The other way is to get data from DBPedia which is a linked open data services as Freebase.
After some days of research, I found the magical SPARQL query to get data on DBPedia from a wikipedia id. And here is the query :

PREFIX dbp: < http://dbpedia.org/resource/ >
PREFIX dbp2: < http://dbpedia.org/ontology/ >
SELECT ?abstract WHERE {
	dbp:WIKIPEDIA_ID dbp2:abstract ?abstract .
}

You can replace WIKIPEDIA_ID with the ... wiki... wait for it... pedia id ! Here is an example :

http://dbpedia.org/sparql?query=QUERYHERE&format=json

And at this url you get all you need ! Here is the artist description in English, Spanish, Finnish, Italian, Japanese, French...

An Easy Scroll To Top Plugin

Sat, 11 February 2012 7:39:19 UTC

Now, every website need to have his scroll to top button. So I made a little jQuery plugin that fit my needs ;). You can see it in action on this page. Try to scroll down and to resize the window to see it in action.

How this plugin work?

You need to have a div at the end of the body. You can apply the style you want on it. But the display parameter of this div has to be set to "none". After that you just need to import jQuery and the plugin in your html page and to apply the plugin on this div.

Here an example:

HTML

Top

CSS

#top {
	background-color: black;
	color: white;
	display: none;
	font-size: 20px;
	margin: 20px 0px;
	text-align: center;
	width: 100px;
}

JavaScript (jQuery)

So finally in a single html page :




        
        GoTop Plugin in action
              
        
        



	The content of your website ...

	 Top

Configuration

There is some parameters that can be personalize on this plugin.

$('#top').gotop({
	content:	960, /*The size of the main content so the button is never display over the content*/
  	bottom:	30, /*The space in pixel between the button and the bottom of the window*/
  	margin:	"none", /*The margin between the button and the left or right of the window. If this parameter is set to 'none', the plugin center the button automatically*/
  	position:	"right", /*If the button is display on the left or the right of the window*/
  	scrollTop:	100, /*The button is displayed when the user scroll down; in pixel*/
  	duration:	700 /*Duration in milliseconds for the fade in and fade out*/
});

Download

You can download this plugin on gitHub.

Kinect tile 3D Effect with CSS3 and jQuery

Sat, 7 January 2012 8:40:33 UTC

I've used my Kinect for 1 year now, and one thing I like is the Kinect dashboard that is reacting in 3D with my hand; you know the tiles...
So I tried; and succeeded!; to mimic the same 3d effect on html elements with some CSS3 and jQuery, and I made a jQuery plugin so it’s much more easier for you to add this effect on your website.

Because this plugin is awesome, it work only on webkit browsers (Google Chrome & Safari) because of the CSS3's rotate3d function.

First step

To use this little plugin, first of all you just need to add jquery and the tile plugin to your html page:




	
	Tile

Second step

Now we can call the plugin on an element in the page. So in the body we add a div with some style:




	
	Tile

And in the head we call the plugin:

And BAMM! you get something like that:

Configuration

You can even personalize some settings like the perspective, the degree and the inversion by doing this:

$("#tile").tile({
	perspective: 400,
	degree: 10,
	inverse: true
});

Source

You can find source files on gitHub here

Distributed Objects with Java & Cocoa

Sat, 22 October 2011 14:44:22 UTC

I’m currently learning interesting things about distributed programming in Java. Because I’m not a Java fan, I tried [and succeeded] to redo a simple RMI example from Java to Cocoa in Objective-C.

Remote method invocation

Before showing you how an application can communicate with another one on a network in Objective-C, I’ll explain you a bit how things work, and how we do it in Java to see the differences between the two languages.

Principle

RMI is a java API that let you call methods on an object which is not on the same computer. So for an easy example, let see the communication between a server application and a client application.

So the server just need to vend an object, so the client can reach a pointer to this object and call methods on it; but to do so, the client need to know the interface of this object.

Java RMI

Before programming the server, we need to create an interface (here for a Person object) and define it on the server side.

So we create a new file «PersonStructure.java» in a new java project and put this code to define the interface:

import java.rmi.Remote;
import java.rmi.RemoteException;

public interface PersonStructure extends Remote{
	public String getName() throws RemoteException;
	public void setName(String name) throws RemoteException;
}

Here our interface need to extend Remote, if not, the object can’t be vend.

Now we need to define a Person class that will implements our interface, so let’s do it be creating a new file Person.java with this code:

public class Person extends UnicastRemoteObject implements PersonStructure {
	private String name;
	private static final long serialVersionUID = 1L;
	
	protected Person(String name) throws RemoteException {
		super();
		this.name = name;
	}

	@Override
	public String getName() throws RemoteException {
		return this.name;
	}

	@Override
	public void setName(String name) throws RemoteException {
		System.out.println("the new name is = " + name);
		this.name = name;
	}
}

You can see here that our class Person need to extend UnicastRemoteObject to be shared by a server...

Now we can do our server that will vend the Person object. Create a «Server.java» file with this:

import java.rmi.Naming;
import java.rmi.registry.LocateRegistry;

public class Server {
	public static void main(String[] args) {
		try {
			//Start a new RmiRegistry 
			LocateRegistry.createRegistry(1099);

			Person person = new Person("Doe");
			
			//We share our person
			Naming.bind("///person_server", person);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

Now here we have our server sharing the person object on the localhost (the 3 slash in the bind). It’s in this bind that you can specify a hostname or an ip address (i.e. "//localhost/server_name" or "//127.0.0.1/server_name").

To have a simple example we stay in the same project to create our client. So create «Client.java» with a main method:

import java.rmi.Naming;

public class Client {
	public static void main(String[] args) {
		try {
			PersonStructure obj = (PersonStructure) Naming.lookup("person_server");
			System.out.println("Name of the person shared by the server = "+ obj.getName());
			obj.setName("Steve");
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

Now you can run the project with the main method of the Server class and after that run the same project but with the main method of the Client Class; and it’s Magic! the client can get and set the person’s name which is on the server.

Objective-C & Distributed Objects

Now we can see how we do the same example but with Cocoa applications. So in Xcode create a new Cocoa Application and name it Server.

Create a new file (cmd+N), choose the Objective-C protocol template and name it PersonStructure. Now we define the structure of a person with this:

@protocol PersonStructure < NSObject >

- (NSString *)getName;
- (void)setName:(NSString *)name;

@end

Now we can define our Person class (create a new class which will subclass NSObject):

In Person.h:

#import "PersonStructure.h"

@interface Person : NSObject < PersonStructure > {
    NSString *_name;
}

- (id)initWithName:(NSString *)name;
 
@end

In Person.m:

@implementation Person

- (id)initWithName:(NSString *)name
{
    self = [super init];
    if(self)
    {
        _name = [name retain];
    }
    
    return self;
}

- (NSString *)getName
{
    return _name;
}

- (void)setName:(NSString *)name
{
	NSLog("the new name is = %@", name);
    [_name release];
    _name = [name retain];
}

- (void)dealloc
{
    [_name release];
    [super dealloc];
}

@end

You can see here that I’m managing memory by myself with the retains, releases and deallocs, but it’s not necessary if your project use the automatic reference counting (ARC).

Know we just need to start our server in the AppDelegate:

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification
{
    // Create the Person to vend
    Person *person = [[Person alloc] initWithName:@"Doe"];
    
    NSConnection *serverConnection = [NSConnection serviceConnectionWithName:@"person_server" rootObject:person];
    
    //Start the server
    [serverConnection runInNewThread];
}

Our server is done. Now we need to create a new project Client. In this project we have to drag and drop the PersonStructure. h file from the server project.

Finally we can access the person object from the server application by adding this code in the Client’s AppDelegate:

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification
{
    //Until we find the server
    NSDistantObject *serverObject = nil;
    while (serverObject == nil)
    {
        serverObject = [[NSConnection rootProxyForConnectionWithRegisteredName:@"person_server" host:nil] retain];
        [[NSRunLoop currentRunLoop] runUntilDate:[NSDate dateWithTimeIntervalSinceNow:1.]];
    }
    
    //We cast the remote object in the interface we know 
    id< PersonStructure > remoteObject = (id< PersonStructure >)serverObject;

    //we use our remote object
    NSLog(@"Person's name on server = %@", [remoteObject getName]);
    
    [remoteObject setName:@"Steve"];
}

And we are done! You can now run the server and the client, and you’ll see that the client can communicate with our server.

Conclusion

Distributed Objects is really an interesting technique to know. This comparison between Java and Objective-C confirm (for me =D) that Objective-C still more elegant and simpler than Java. (i.e. In java the distributed object as to extends Remote and UnicastRemoteObject than in Objective-C every object can be a distributed object).

Beatbox App on iPad - Part Two

Sun, 31 July 2011 12:01:27 UTC

On the first part of this tutorial I was showing you how to make the interface and the navigation of our beatbox app. So now in this second and final part, I’ll show you how to implement functionalities. These functionalities are :

Saving a name on each button
Play a sound when user touch a button in playing mode
Record a sound when user touch a button in recording mode

Button’s Name

To save names, we will use the NSUserDefaults Class. To do so, add this attribute in the PadButtonViewController.h, inside the interface brackets:

NSUserDefaults *def;

And in the initWithNibName:bundle: method in the .m file add this line:

def = [NSUserDefaults standardUserDefaults];

Now that we have an instance of NSUserDefaults we can save an object with a corresponding key. This have to be done when the user type something in the text field, and our method changePadName can perform that task. So put this code inside :

[pad setTitle:textField.text forState:UIControlStateNormal];
[def setObject:textField.text forKey:[NSString stringWithFormat:@"pad-%d", identifier]];
[def synchronize];

To have that name set when the app start put this line in the viewDidLoad method:

[pad setTitle:[def objectForKey:[NSString stringWithFormat:@"pad-%d", identifier]] forState:UIControlStateNormal];

And we are done with the button’s name!

Audio

Now that the big part! To do some playing/recording we will use the AVFoundation and the CoreAudio Frameworks. To include these framework in the project, click on the project name and add theme in the «Link Binaries With Libraries» list.

We can now import these frameworks in PadButtonViewController.h file:

#import <AVFoundation/AVFoundation.h>
#import <CoreAudio/CoreAudioTypes.h>

As this controller will be the recorder's delegate, we have to change our @interface like this :

@interface PadButtonViewController : UIViewController  {

And inside the interface brackets:

NSURL *file;
NSError *error;
AVAudioPlayer *player;
AVAudioRecorder *recorder;
BOOL hasRecordDone;

After the bracket add these methods:

- (void)configAudio;
- (void)configPlayer;
- (void)configRecorder;
- (void)startRecording;
- (void)stopRecording;
- (void)startPlaying;
- (void)stopPlaying;

Then in the initWithNibName:bundle: method add this:

hasRecordDone = NO;

To use the hardware, we need to create the good session. In the changeState method (PadViewController.m), after the for loop add this:

if (theSwitch.on) {
        NSError *error;
        AVAudioSession *audioSession = [AVAudioSession sharedInstance];
        [audioSession setActive:NO error: &error];
        [audioSession setCategory:AVAudioSessionCategoryRecord error:&error];
        [audioSession setActive:YES error: &error];
    }else {
        NSError *error;
        AVAudioSession *audioSession = [AVAudioSession sharedInstance];
        [audioSession setActive:NO error: &error];
        [audioSession setCategory:AVAudioSessionCategoryPlayback error:&error];
        [audioSession setActive:YES error: &error];
}

We actually need to set the session at the start of the app too, so in viewDidLoad add :

NSError *error;
AVAudioSession *audioSession = [AVAudioSession sharedInstance];
[audioSession setCategory:AVAudioSessionCategoryPlayback error:&error];
[audioSession setActive:YES error: &error];

As you can see we are using some NSError, but we will not handle errors in this tutorial.
Now return in the PadButtonController.m file and to configure the audio add this code:

//We set here the name of the audio file that we will use
- (void)configAudio
{
    file = [NSURL fileURLWithPath:[NSTemporaryDirectory() stringByAppendingPathComponent:[NSString stringWithFormat: @"padsound-%d", identifier]]];
	[file retain];
    
    [self configPlayer]; //by default we configure the player
}

- (void)configPlayer
{
    if(player != nil)
    {
        [player release];
        player = nil;
    }
    
    player = [[AVAudioPlayer alloc] initWithContentsOfURL:file error:&error];
    player.numberOfLoops = -1;
    [player prepareToPlay];
}

- (void)configRecorder
{
    if(recorder != nil)
    {
        [recorder release];
        recorder = nil;
    }
    
    NSMutableDictionary* recordSetting = [[NSMutableDictionary alloc] init];
    [recordSetting setValue :[NSNumber numberWithInt:kAudioFormatAppleIMA4] forKey:AVFormatIDKey];
    [recordSetting setValue:[NSNumber numberWithFloat:44100.0] forKey:AVSampleRateKey]; 
    [recordSetting setValue:[NSNumber numberWithInt: 2] forKey:AVNumberOfChannelsKey];
    
    recorder = [[ AVAudioRecorder alloc] initWithURL:file settings:recordSetting error:&error];
    [recorder setDelegate:self];
    [recorder prepareToRecord];
    
    [recordSetting release];
}

In the dealloc method add this:

- (void)dealloc
{
    [recorder release];
    [player release];
    
    [super dealloc];
}

The configAudio method need to be call at the execution, but we need the identifier attribute to be set before, so we override the setIdentifier method to automatically call the configAudio method:

- (void)setIdentifier:(int)value
{
    identifier = value; 
    [self configAudio];
}

Now add this code to perform de recording and the playing:

- (void)startRecording
{
    if (hasRecordDone == NO) [self configRecorder];
    hasRecordDone = YES;
    [recorder record];
}

- (void)stopRecording
{
    [recorder stop];
}

- (void)startPlaying
{
    [player play];
}

- (void)stopPlaying
{
    [player stop];
    player.currentTime = 0;
}

In the setRecordingMode method, in the else (after the Playing color) add this:

if(hasRecordDone) [self configPlayer];
hasRecordDone = NO;

Now we just need to call these method when the user touch the button, and change the button's color so the user know what's happening:

- (IBAction)touchDown
{
    if(file == nil) [self configAudio];
    if (recordingMode)
    {
        [self startRecording];
        pad.backgroundColor = [UIColor orangeColor];
    }
    else
    {
        [self startPlaying];
        pad.backgroundColor = [UIColor blueColor];
    }
}

- (IBAction)touchUp
{
    if (recordingMode)
    {
        [self stopRecording];
        pad.backgroundColor = [UIColor redColor];
    }
    else
    {
        [self stopPlaying];
        pad.backgroundColor = [UIColor colorWithWhite:0.25 alpha:1];
    }
}

Conclusion

Making this app learned me a lot on the iOS SDK and I hope this little tutorial learned you something too.
I'll soon try to put this app on the App Store.

Beatbox App on iPad

Tue, 26 July 2011 16:01:29 UTC

I’m currently learning how to develop apps on iOS (iPhone, iPad, iPod) and I share with you how I’ve done to make one of my first app. As I am starting the development on iOS, this tutorial can be useful for developers beginning on that platform.

The App

This app is made with Xcode 4 and run on iOS 4.3, but before starting we need to define the specifications of the app. I have made it simple ;)

The app is a beatbox, so we will need some buttons to play a unique sound on each one when the user touches it. But if we want play to some sounds, we actually need to have these sounds, so we will let the user record his own, with a record mode. Finally the user will have the possibility to save a name on each button, so he can remember easily the button’s sound.
Here is a quick video showing what the app is able to do. (You will see that I’m not a musician :D).

Setup of our new app

Project Files

First, we create a new window based project. This beat box can be done with a View based project, but I think is better to start from nothing, to understand how everything works.

Secondly, we will need two UIViewController. The first one controlling a switch making the app entering in a record mode, and some instances of our second UIViewController. This second UIViewController will control two UIView (One with a button, and another with a text field allowing the user to change the button’s name) and perform the playing/recording actions.

So we create our two UIViewController subclasses (CMD+N) called PadViewController and PadButtonViewController. Don’t forget to click on "With XIB for user interface".

Interface

Now we can make our interface with connections between the Controller and the View.
Open PadViewController.h and add these attributs which will let us connect the controls to the controller in Interface Builder.

@interface PadViewController : UIViewController {
    NSMutableArray *pads; //will be a collection of PadButtonViewController
}

@property(nonatomic, retain) IBOutlet UISwitch *rec;
@property(nonatomic, retain) NSMutableArray *pads;

@end

And in PadViewController.m inside the implementation:

@synthesize pads;
@synthesize rec;

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations - here Landscape Left and Right
	return (interfaceOrientation == UIInterfaceOrientationLandscapeLeft
            || interfaceOrientation == UIInterfaceOrientationLandscapeRight);
}

Now we can open PadViewController.xib and make our interface. We will need to place two labels and one switch. To connect the switch to our controller, just ctrl-click on File's Owner (the orange cube) and drag to the switch contol. After that, make sure that the switch state is on off. You should have something like this :

As we are done with the PadViewController interface, we can start the PadButtonViewController interface, so in PadButtonViewController.h we put this :

@interface PadButtonViewController : UIViewController {
    int identifier;
}

@property(nonatomic, retain) IBOutlet UIButton *infoButton;
@property(nonatomic, retain) IBOutlet UITextField *textField;
@property(nonatomic, retain) IBOutlet UIView *moreView;
@property(nonatomic, retain) IBOutlet UIButton *pad;
@property(nonatomic) int identifier;

@end

And in PadButtonViewController.m we put inside of the implementation :

@synthesize pad, infoButton;
@synthesize moreView;
@synthesize textField;
@synthesize identifier;

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
	return NO;
}

Then in PadButtonViewController.xib we can make our interface; First delete the current view, and drag and drop two views, then change their sizes :

In the first view we can put a button with a custom type, which will take the same size of the view. This button need to have a dark background.
In the second view, which will be our "moreView", we put a label and a text field.
In the two view we place a button in a bottom right with type "Info Dark" or "Info Light". The Info Button on the first view need to be hidden. It can be done in the Attributes Inspector > View > check the Hidden.
Now we can make connections between File’s Owner and interface elements. (The infoButton IBoutlet have to be connected only with the info button on the first view)

To mix all these interfaces, first of all we call the PadViewController when the app is launched in the My_BeatBoxAppDelegate.
So in My_BeatBoxAppDelegate.h :

#import "PadViewController.h"

@interface My_BeatBoxAppDelegate : NSObject  {
    PadViewController *padView;
}

And in My_BeatBoxAppDelegate.m :

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.
    padView = [[PadViewController alloc] init];
    [self.window addSubview:padView.view];
    [self.window makeKeyAndVisible];
    return YES;
}

Now we have to create 6 PadButtonViewController in PadViewController and put them in the middle of the view.
So we import the PadButtonViewController.h in the PadViewController.h, and when the view is loaded we create these buttons :

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    pads = [[NSMutableArray alloc] init];
    for (int i = 1; i <= 6; i++) {
        PadButtonViewController *pad = [[PadButtonViewController alloc] initWithNibName:@"PadButtonViewController" bundle:nil];
        [pads addObject:pad];
        pad.identifier = i;
        [self.view addSubview:pad.view];
    }
}

As you can see I’m setting an identifier on each PadButtonViewController. It will be useful to know which sound to load when the user touch one of these buttons.
To place the view at the good place we can set the frame on each one in their respective viewDidLoad (PadButtonViewController.m) :

- (void)viewDidLoad
{
    [super viewDidLoad];
    if (identifier != 0) {
        
        int marge = 30;
        
        int width = 225;
        int height = 200;
        
        int line = 0;
        int pos = (identifier-1);
        if (identifier > 3){
            line = 1;
            pos = pos - 3;
        }
        self.view.frame = CGRectMake( 144.5 + (pos * (width+marge)), 169 + (line*(height + marge)), width, height);
    }
}

Oh, and for the good practice, we have to nil every Outlets in the viewDidUnload :

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
    pad = nil;
    infoButton = nil;
    moreView = nil;
    textField = nil;
}

We do the same in for PadViewController :

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
    rec = nil;
}

We are done with the interface, now we need some interactions.

Interactions

Our app will have two states :

Playing Mode
Recording Mode

So the switch on the PadViewController, will help us know in which mode we are. But in PadButtonViewController we need to add an attribut (Boolean) to know in which mode the button is, and another one to know if the user is on the more Info view. So in PadButtonViewController.h, inside the @interface brackets we add :

BOOL recordingMode;
BOOL infoMode;

and after the bracket :

@property(nonatomic) BOOL recordingMode;
@property(nonatomic) BOOL infoMode;

- (IBAction)changePadName;
- (IBAction)moreInfo;
- (IBAction)touchDown;
- (IBAction)touchUp;

You can see that we add some IBAction methods, and we need to define them in the .m file, inside the implementation :

@synthesize recordingMode, infoMode;

//Called when the user type something in the text field on the moreInfo view
- (IBAction)changePadName
{

}

//Called when the user touch the info buttons in the bottom right of the views
- (IBAction)moreInfo
{

}

//Called when the user touch the button 'pad'
- (IBAction)touchDown
{

}

//Called when the user touch up the button or drag his finger outside of the button
- (IBAction)touchUp
{

}

Now we can go in the PadButtonViewController.xib file and connect these IBAction to the good interface elements. You should have that in the File's Owner Connection Inspector:

The PadViewController need just one IBAction. It will be called when the value is changed on the switch. So in PadViewController.h :

- (IBAction)changeState:(id)sender;

and in the .m file :

- (IBAction)changeState:(id)sender
{

}

Now we can connect it to the switch in the .xib file.

The change of state

As I said before, this app has two states. The user can use the switch to define the state he want to use. So when it's turned on, the PadViewController has to say to all the PadButtonViewController that they have to change their state to a recording mode; And in playing mode when it's turned off.
The user also need to know in which state the app is. So we will change the buttons background color to red.

So inside the "changeState" method in the PadViewController.m file put this code :

UISwitch *theSwitch = (UISwitch *)sender;
for (PadButtonViewController *pad in pads) {
        [pad setRecordingMode:theSwitch.on];
}

So we set the switch's state to our PadButtonViewControllers by setting the "recordingMode" attribute. But in order the change the button's color, we have to override the setter method of this attribute in the PadButtonViewController.m :

-(void)setRecordingMode:(BOOL)value
{
    recordingMode = value;
    [UIView animateWithDuration:0.7
                                        delay:0 
                                      options:UIViewAnimationOptionBeginFromCurrentState 
                                 animations:^{
                                     if (recordingMode) {
                                         //Recording color
                                         pad.backgroundColor = [UIColor redColor];
                                     }else{
                                         //Playing Color
                                         pad.backgroundColor = [UIColor colorWithWhite:0.25 alpha:1];
                                     }
                                 } 
                               completion:nil];
    
    infoButton.hidden = !value; //if in recording mode we show the info button so the user can go on the moreView
}

You can see here that we are making an animation. This animation is actually making a smoothly change of color. After that we are showing our info button only if the PadButtonViewController is in recording mode.

Then we have to make the transition between the button in recording mode and the more view. We will use the flip animation. So in the the "moreInfo" method add this code :

[UIView beginAnimations: @"flip" context: nil];
[UIView setAnimationDuration: 0.5f];
[UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft forView:self.view cache: YES];
    
infoMode = !infoMode;
if (infoMode)
{
    [self.view addSubview:moreView];
}
else
{
    [moreView removeFromSuperview];
}
[UIView commitAnimations];

We now have an issue! When the user flip on the "more view" of one or more PadButtonViewController, and switch to the playing mode, the more view still here. To solve this just put this line of code in the for loop of the changeState method (PadViewController.m) :

if(!theSwitch.on && pad.infoMode) [pad moreInfo];

Now we need to define the default states of our PadButtonViewControllers. The right place to do that is in the initWithNibName:bundle: method :

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
        identifier = 0;
        infoButton.hidden = YES;
        recordingMode = NO;
        infoMode = NO;
    }
    return self;
}

What's next ?

Now that we can navigate through our application, the next step will be to add some interaction with the main button to perform some playing and recording. We will use the AVFoundation framework to do this, and I'll show you how in a future article.

Beatbox App on iPad - Part Two

HTML5 Canvas with Processing.js

Fri, 8 July 2011 13:37:44 UTC

Recently I was searching for some documentation about the HTML5’s canvas element. And what I found is Processing.js, which is a project that let you code visual applications and generate it as web standard. What is puzzling is that in fact, you are not coding with JavaScript, but with the Processing language, similar to Java. At beginning I was lost; I was wondering how to get values from a form in my Processing.js application. But after some time I find a solution to use basic JavaScript with Processing.js.

Brief Introduction to Processing

The Processing.js’s logic is pretty easy to understand. First of all you have two important functions to override:

setup()
draw()

Processing call setup() at the start of the application. It means that you can set here some global variables. And the draw() function is called every time to let you draw some animations.

int size_x = 900;
int size_y = 300;
int frame_rate = 100; 

void setup(){
        size( size_x, size_y );
        frameRate( frame_rate );
}

void draw(){
	background(0,0,0);
	rect(0,0,100,100);
}

Here it’s a simple example of a processing code. We have three global variables. In our setup function we use these global variables to set the size of our final canvas, and the frame rate with a value of 100; so the draw function will be called 100 times per seconds. In result here, we have no animation, but just a white square of 100 pixels at the top left, on a black background.
If we want that result visible in our html page, this code has to be in a .pjs file. In the html we need to import processing.js with this line of code:

And finally in the body we have to add a canvas element importing our .pjs file:

How to get values from user in Processing’s code

As I said, I had some issues on that. What is important here to understand is that Processing doesn’t use the same variable types as JavaScript.
So the procedure is simple. We need a JavaScript function in our html returning a value. This function can be called in the processing code (.pjs) and be cast, so the value corresponds to the variable type. Here is a quick example.

Here is a simple function returning the number of input in our html. Note that here I’m using jQuery which have to be imported before.

Now in our .pjs:

void draw(){
	int nb_input = (int)getNbInput();
	for(int i = 0; i < nb_input; i++){
		String message = “Input Number ”+(i+1);
		text(message, 0, i*20);
	}
}

Here we save the number of input from our JavaScript function casted as an integer in the nb_input variable, and print a list of message corresponding to the number of input in the DOM.

Demo

You can see a quick demo of a chart animation using input’s values, you just need to click on the animation. Nevertheless, if you want to see more demos, you can find some on http://processingjs.org/exhibition

Chart

January
February
March
April
May
June

July
August
September
October
November
December

Download

Even if the demo is not perfect, you can still download the code source from the demo here: Sources

How to Parse CSV with PHP

Wed, 6 July 2011 14:24:11 UTC

What is CSV?

CSV, for Comma Separated Values, is a format where tabular data are stored separated by commas and line breaks. It is really easy to use and understand as you can see with the next exemple:

Name,Movie
Darth Vader,Star Wars
Keyser Soze,Usual Suspect
Hannibal Lecter,Silence of the Lambs

Why CSV?

In every company, people are using spreadsheet applications (Excel), so it’s always useful for a developer to play with spreadsheet’s data. And what is interesting is that Excel can save it as CSV.

My CSV Class

I’ve made a little class that you can use as a starter or a little tool to play with some CSV. ~~Just be carful, this class work only with PHP >= 5.3.~~ Now work with previous versions.

Methods

SetDelimiter($delimiter) (Normally, it’s always a comma (the C from CSV…) but we never know)
SetRowDelimiter($delimiter_row)
SetCsvFromString($string)
SetCsvFromFile($path)
AddToCsvFromString($string)
AddToCsvFromFile($path)
GetArray()
GetHtmlTable($attrs)
GetRowNumber()
GetColumnNumber()

Example of use

$csv = new CSV();
$csv->SetCsvFromFile('test.csv');
$csv->AddToCsvFromString($_POST['csv']);
echo $csv->GetHtmlTable();
echo 'There are '.$csv->GetColumnNumber().' columns';
echo 'There are '.$csv->GetRowNumber().' rows of data';

So this little code takes data from “test.csv” file and adds more data with the content of the post variable named "csv". After that we can print an html table representing the final CSV. And finally we show how many columns and rows we have. As you can see this class is really easy to use.

Demo

This demo use the class to take a CSV from the form and generate an HTML Table with it.

CSV

Download

You can of course download source code with a demo inside ;) : CSV Source Code

How to Make a Sliding Box with jQuery

Tue, 5 July 2011 14:37:56 UTC

In this article I will show you how to make a sliding image showing the caption on mouse over, and because we are now in a world where websites need to be clear and fun to use, we will use for the fun part, animations from jQuery, and for the clean part the overflow CSS property.

What is the overflow property?

A container having the property overflow set with scroll, auto or hidden constrain his content to be render inside. The scroll value will add scrollbar around the container to see all his content, as the auto value, if the content is really overflowing. Here we will use the hidden value, which will give us the opportunity to hide the caption under the image.

First Part: The HTML

First of all we need to use the basic html template and inserting in the body the content that we want to show. Here is the content:


		
     
                	
          
	  This is a Stormtrooper from the Galactic Empire's Army

The div with the identifier “Test” is our container doing an overflow: hidden. The div with the identifier “content” is the container of the different things we want to show (an image and a caption which is in the "sub" div). As we want to slide the "content" div in the "test" div, we need to set an absolute position on "content" relative to the "test" div. So let start with the CSS.

Second Part: The CSS

To have a great design, the next CSS uses property from CSS3, so it certainly won’t work in every browser like Internet Explorer 6 or 7 or hummm 8. (Hope it works on IE9 as they say that it’s fully HTML5…)

#test {
        height: 333px;
        margin: 100px auto auto auto;
        overflow: hidden;
        position: relative;
        width: 500px;
        
        -webkit-box-shadow:     0px 4px 3px rgba(0,0,0,0.2),
                                          0px 8px 13px rgba(0,0,0,0.1),
                                          0px 18px 23px rgba(0,0,0,0.1),
                                          0px -10px 12px rgba(0,0,0,0.03);
        
        -moz-box-shadow:        0px 4px 3px rgba(0,0,0,0.2),
                                0px 8px 13px rgba(0,0,0,0.1),
                                0px 18px 23px rgba(0,0,0,0.1),
                                0px -10px 12px rgba(0,0,0,0.03);
        
        box-shadow:             0px 4px 3px rgba(0,0,0,0.2),
                                0px 8px 13px rgba(0,0,0,0.1),
                                0px 18px 23px rgba(0,0,0,0.1),
                                0px -10px 12px rgba(0,0,0,0.03);
}

#content {
        position: absolute;
        width: 100%;
}

#content img {
        float: left;
}

#sub{
        float: left;
        height: 100px;
        padding: 42px 5px 0px 5px;
        width: 490px;
        
        background-image: -moz-linear-gradient(#686868, #232323);
        background-image: -webkit-linear-gradient(#686868, #232323); 
        background-image: -o-linear-gradient(#686868, #232323);

        color: #ffffff;
        font-size: 14px;
        text-align: center;
        text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
}

Here we set the same size for the ‘test’ container as the image we have to show and of course we hide what is overflowing in it.
To put the "content" div in the absolute top left of the "test" div, the position of "test" has to be set as relative and "content" has absolute.

Final Part: jQuery

Now we need to animate the slide. We want that the image go up with the caption showing under when the cursor is over the image. To do this, first we need to import jQuery in our html file with this line of code:

And now we can make the animation happening with the hover event.

$(function(){
	$("#test").hover(function(){
		$("#content", this).stop().animate({"top": "-100px"}, 250);
	},function(){
		$("#content", this).stop().animate({"top": "0px"}, 200);
	});
});

So here we use the jQuery event function "hover" on our "test" div. This function takes two functions as parameters. The first function is called when the mouse enter over the "test" element, and the second is called when the mouse leave the "test" element. And what we just need to do in these functions is to animate the top property of the "content" div and set duration to the animation, so that our content can slide up. You can notice that the stop function is used before doing the animation. It’s useful to stop the animation if the mouse doesn’t stay enough time over the element.

Demo

Put your mouse over this image and see the magic happen :p

This is a Stormtrooper from the Galactic Empire's Army

Download

You can download the code source just here : HERE

Generate a Pdf with PHP

Sat, 2 July 2011 6:28:45 UTC

I had to make PDF in PHP, so I found FPDF which is a fantastic tool to draw a pdf file. But I had to make some different kinds of pdf with a unique template. So I made a subclass of FPDF and called it EasyPdf.
I share with you my work and hope it will help some developers.

What EasyPdf can do ?

Print a header with a big title and an image under.
Print a text with a title.
Print a list from an array with a title.
Print table of data.
Print the page number on footer.
Set a background image to print on each page.
Set a header text to print on each page.
Set a footer text to print on each page.

Example of use

I think I've well commented this exemple, so enjoy.


SetBackgroundImage('./images/pdf-background.jpg');
$pdf->SetAccentColor(50, 50, 100);
$pdf->SetTableFillColor(150, 150, 200);
$pdf->HeaderPage("Big Title", './images/header.jpg');

//Data
$information = array(
    'Reference' => '123456qwerty',
    'Date' => '2011-07-01',
    'Price' => '123,456.78'.EUR,
    'Comment' => "Lorem ipsum dolor sit amet.nUt pellentesque pulvinar laoreet.",
);
$more_info = array(
    'First Name' => 'Legrand',
    'Last Name' => 'Damien',
    'Age' => 23
);
$text = "Lorem ipsum dolor sit amet, consectetur adipiscing.";
$text .= " Ut pellentesque pulvinar laoreet.";
$text .= " Cras sapien enim, dapibus vitae molestie sed,";
$text .= " volutpat eget ligula. Donec justo diam,";
$text .= " fermentum non tincidunt id, congue vitae enim.";
$text .= " Ut blandit interdum sapien, eget venenatis quam.";
$text .= " Nullam accumsan odio quis tellus interdum semper.";
$text .= " Mauris pharetra libero eget ante aliquet ornare.";
$text .= " nClass aptent taciti sociosqu ad litora torquent,";
$text .= " per inceptos himenaeos. Curabitur vel eros nisi.";
$text .= " Cras gravida facilisis risus, sed semper tortor.";
$text .= " Suspendisse ac mi sit amet sapien consectetur.";
$text .= " Lorem ipsum dolor sit amet, consectetur.";
$text .= " Pellentesque a tincidunt tortor.";

//Add some different kinds of lists
$pdf->AddList($information, 'Big List');
$pdf->AddListMin($more_info, "List Left");
$pdf->AddListMin($more_info, "List Right", 'R', true, true);

//Add a text block
$pdf->AddText($text, "Lorem Ipsum Title");

//Change page and add a header text
$pdf->header = "Header Text"; //false for delete
$pdf->AddPage();

//Add a table
$pdf->SetHeadingTable('', 'Price', 'QTY');
$pdf->SetColumnAlignTable('L', 'C', 'C');
$pdf->SetColumnSizeTable(90, 50, 50);

$tot_price = 0;
$tot_qty = 0;

for($i = 1; $i <= 8; $i++)
{
        $name = "Row N".DEG.$i;
        $price = 111*$i;

        //Add a new row to the table
        $pdf->AddRowTable($name, $price.EUR, $i);
        
        $tot_price += $price*$i;
}

$pdf->AddTotalRowTable('TOTAL', '', number_format($tot_price, 2).EUR);
$pdf->AddTable("Order");

$pdf->ClearTable();

//And add another table and change colors

//Print a title
$pdf->AddTitle("Product");

//Change colors
$pdf->SetAccentColor(120, 110, 200);
$pdf->SetTableFillColor(220, 210, 255);
$pdf->SetLineColor(255, 255, 255); //White lines

$pdf->SetHeadingTable('Name', 'Price', 'Stock', 'Other');
$pdf->SetColumnAlignTable('L', 'C', 'C', 'R');
$pdf->SetColumnSizeTable(75, 50, 50, 15);

for($i = 1; $i <= 8; $i++)
{
        $name = "Product N".DEG.$i;
        $price = 1112*$i;

        //Add a new row to the table
        $pdf->AddRowTable($name, $price.EUR, $i*10, 'YES');
}

//Print the table without the title and with small font
$pdf->AddTable(false, true);

$pdf->SetAccentColor(45, 200, 120);
$pdf->SetLineColor(0, 0, 0);

//Different kinds of titles
for($i = 1; $i <= 6; $i++)
{
        $pdf->AddTitle("Title $i", $i);
        $pdf->Ln(5);
}

//Information about the PDF
$pdf->SetAuthor('Damien Legrand');
$pdf->SetTitle('EasyPdf Exemple');

//Print the PDF
$pdf->Output();

Demo

And this is what you get with this little script : PDF

Download

You can download EasyPdf with FPDF 1.7 here : EasyPdf
And FPDF can be found on this website : www.fpdf.org