Image tribute designed by Jonathan Mark

Even if you never met the man, if his visionary products helped your child to read and write at an early age, let grandparents see their grandchildren across thousands of miles without having to crowd around a computer, led the transformation of the mobile and music industry that pays your salary today, made product companies rethink their priorities towards customers, and most importantly made many of us want to make even a fraction of a dent he has made to this industry and shape our careers accordingly, its not surprising that on his passing you’d think you knew him very well and to ask yourself ‘What do you want to do before you go’?

I recently purchased a 4 disk-bay Netgear ReadyNAS NV+ box. This was a few days after I lost 60% of my media collection because my HD just decided to stop working. And yes, I’ve been meaning to back up the archive, but never got around it, till it died. Hindsight is 20-20, I guess.

Anyhow, the ReadyNAS NV+ is a great box. The nicest thing about it is that via plugins, you can convert it into a full fledged development box running linux. One of the things lacking was how to make this box a VPN server as well. I currently have OpenVPN running on an ‘always on’ home laptop, but it was better if I moved the VPN server to the ReadyNAS box as it is the one that is supposed to be ‘always on’ anyway.

I searched around. There are several sites that give only partial instructions of how to get things working. No one site has ‘everything you need’. So I thought I’d post *exactly* how to do everything you need to get this working.

Step 1: Install SSH and apt-get

1) Download the Enable RootSSH plugin from here. (You need this to ssh into readynas)

2) Install it in the ReadyNas via the menu (System/Update/Local Update)

3) Download the apt plugin from here. (you need this to download the openvpn package and dependencies)

4) Install it in the ReadyNas via the menu (System/Update/Local Update)

Note: Don’t try and upload both plugin images together and then apply. Only the latest plugin will be applied.

Step 2: Getting OpenVPN working: The layout

Before we setup OpenVPN, lets discuss the network first. You may need to change the client.conf or server.conf as fit.

My home LAN has the following network: 192.168.1.x

The ReadyNAS server (which will be my VPN server soon) runs on: 192.168.1.10

The home router (Which allocates DHCP addresses to my home LAN and is the default internet gateway) runs on: 192.168.1.1

What I want:

a) I want to be able to connect to my ReadyNAS VPN server from outside my home

b) I want to make sure all my internet connections are not forced through my home LAN when connected via VPN.

c) I want my remote client to be able to access all my other machines @ home in addition to the VPN server

Step 3: Getting OpenVPN Server working: The execution

We need to do the following steps:

1) Generate the right certificates/keys for the server and client (easy)

2) Configure the server.conf and client.conf files correctly (logical if you follow the instructions)

3) Enable IP forwarding in your ReadyNas (if you don’t do this, you will not be able to access other machines on LAN)

4) Configure your default home router with a static route (if you don’t do this, you will not be able to access other machines on the LAN)

Step 3.1: Install openVPN

Pre-requisite: You have SSH and apt-get installed and enabled in the ReadyNas.

First, connect to your readynas via SSH (password is same as your readyNas admin password)

ssh -l root 192.168.1.10

Once logged in:

apt-get update
apt-get install openvpn

(the above will download and install all dependencies)

[Note: If you upgrade the NAS Firmware after installing openvpn (like I did for it to support OSX Lion) you will need to re-install openvpn or you may find it segfaulting when a client attempts to connect]

Step 3.2: Create your certificates

(This is just the same instructions as this thread)

You need to set some key variables which will be used to generate the certificate. The content here is not critical – you can change it to what you need. Basically, edit the vars file in your favorite editor and make the changes to the following variables in them. Make sure you save the changes.

cd /usr/share/doc/openvpn/examples/easy-rsa/
vi vars
export KEY_COUNTRY=US
export KEY_PROVINCE=Maryland
export KEY_CITY=MD
export KEY_ORG="Arjun"
export KEY_EMAIL="your@email.com"

Next up:

. ./vars
./clean-all
gunzip openssl.cnf.gz
./build-ca
./build-key-server MyVPNServer

Important: You will be asked a series of questions: The default values are filled in. I just entered my name in the Organization question as well. Also,when it asks you “Sign certificate?” please answer YES otherwise it will generate 0 byte certificates and OpenVPN won’t start.

Note: It is important you do “. ./vars” and not “./vars” as this will not export the variables to your current shell and you will get errors.

At this point, you have the certificate and key for the server instance. Now, you need to build the client keys


./build-key Client01


Finally, build the Diffe-helman code (this takes forever on the ReadyNAS. Take a meal break here).


./build-dh

Step 3.3: Copy the certificates and keys to the right location to your server

cp ./keys/ca.crt /etc/openvpn/
cp ./keys/ca.key /etc/openvpn/
cp ./keys/MyVPNServer.crt /etc/openvpn/
cp ./keys/MyVPNServer.key /etc/openvpn/
cp ./keys/dh1024.pem /etc/openvpn/

The next step is optional – but I prefer to do it and suggest you do too. Basically, you can create a new user/group with limited rights which will run the openvpn server. It’s not a good idea really to run the server as root, because one could exploit a vulnerability in it and get access to a root shell, which is not going to be pretty.


groupadd openvpn
useradd -d /dev/null -g openvpn -s /bin/false openvpn


Step 3.4: Set up the server.conf file


cd /etc/openvpn/
Now just create a server.conf file in your favorite text editor and use the contents below (after the sidebar) Please modify the IP addresses according to your local LAN and VPN IPs.

Sidebar: Tun vs Tap (in .conf files)

Note that I am using a “tun” virtual adapter and not “tap”. Simply put, it means I am establishing an IP level p2p link between my client and the VPN server.
On the other hand, if I used “tap”, then I’d be creating an ethernet bridge between the two. Specifically, in tun mode, any protocols that use broadcast packets to advertise themselves (example, netbios & AFP uses broadcast packets) will not work, as broadcast packets will not be shared from the VPN lan to my lan. Practically, what it means is that I will not see any of my home devices in my network “automatically” – I will need to connect with them over SMB. For example, when I use tap, the home devices automatically show up in my network list. While in tun mode, I need to “Connect to server” to get access to it. I chose to use tun because I believe it is better in performance – though I am not sure by how much. Actually, the real reason I chose tun was so that my Time Machine backup doesn’t auto start syncing gigabytes of data over VPN. Whichever you choose, make sure you use the same interface in the client side as well.

Also note that if you choose tun, Apple’s TimeMachine will stop working, as it uses broadcast packets to identify/locate itself. If you want TimeMachine to sync over the VPN, change tun back to tap in both client and server files. I like it this way, as for now, I don’t want my mac to sync over the VPN. Every time time machine syncs, it syncs many gigabytes of data (Gee I never knew OSX files change so much in an hour) which I did not want. I only want it to sync when I am @ home (ie no VPN on).

local 192.168.1.10 # real LAN IP address of my VPN server
port 1194 # This is the port OpenVPN is running on
proto udp # UDP tends to perform better than TCP for VPN
mssfix 1400 # Supposedly this fixes erros with RemoteDesktop over VPN. Never tried it
# note: these two pushs below don't work for non windows clients unless
# you write a script to parse for these pushes. See OpenVPN Howto.
push "dhcp-option DNS 8.8.8.8"  # I am using Google's DNS servers - I like them they are fast
push "dhcp-option DNS 8.8.4.4"  #
dev tun
ca /etc/openvpn/ca.crt
cert /etc/openvpn/MyVPNServer.crt
key /etc/openvpn/MyVPNServer.key
dh /etc/openvpn/dh1024.pem
server 10.8.0.0 255.255.255.0  # 10.8.0.0 is the VPN virtual LAN. The VPN server will get 10.8.0.1 and the remote clients will get the next ones
ifconfig-pool-persist ipp.txt    # don't worry about ipp.txt - it will be created
push "route 192.168.1.0 255.255.255.0"       # this route will be pushed to a client which connects
keepalive 10 120
cipher BF-CBC        # Blowfish (default) encryption
comp-lzo
max-clients 100 # Assign the maximum number of clients here
persist-key
persist-tun
status openvpn-status.log
verb 1

Now, launch the VPN server. I find it easier to run it in non-daemon mode first to make sure there are no errors. So,

openvpn --config server.conf

Make sure openvpn is working and it does not exit.

Great. Now get openVPN running in daemon mode
/etc/init.d/openvpn restart
Make sure it is running by checking ps:
ps aux | grep openvpn

All good? Great. Your server is ready.

Step 3.5: IP forwarding – Don’t forget

Whoops, we almost forgot. You need to enable IP forwarding in your ReadyNas.


vi /etc/sysctl.conf:

Add the following line: (if it exists, make sure ip_forward is 1 not 0)

net.ipv4.ip_forward = 1

This will make sure IP forwarding is permanent across reboots. To apply it to the current session without rebooting:
sysctl -p /etc/sysctl.conf

Double check by
cat /proc/sys/net/ipv4/ip_forward

If it says 1, good. You are ready to focus on the client. If not, go back and trace your steps and see what you might have missed.

Step 4: Getting OpenVPN client working: The execution

The main thing here is you need to copy the certificates and keys you created for the client to your remote client as well and set up its conf file. The files you need to copy from /etc/openvpn to your client are:
Client01.crt
Client01.csr
Client01.key
ca.crt

In my case, I have a MacOS remote client. I use the excellent tunnel brick app (free) to connect. In the case of TunnelBrick, all the configuration files are stored in the path
~/Library/Application Support/Tunnelblick/Configurations so I just copied the above files here.

(Note: these Client01.crt, csr, key files can be found in /usr/share/doc/openvpn/examples/easy-rsa/keys directory where you created them as part of Step 3.2 – thanks Martyn)

Now all that remains is to set up a client configuration that can connect to the VPN server.

Here is my client.conf file (you can call it whatever-you-want.conf)

client
proto udp
dev tun
remote AA.BB.CC.DD 1194 # Replace AA.BB.CC.DD with the public IP of your VPN server (if you don't have one, this will be the public IP of your home router and port forward from your home router to the VPN server. The latter is my case)
resolv-retry infinite
nobind
persist-key
persist-tun
ca ca.crt
cert Client01.crt
key Client01.key
ns-cert-type server
cipher BF-CBC
comp-lzo
verb 3

Step 5: Configuring your home router
This last step can be forgotten very easily. If you don’t do this, things won’t work.

We need to do 2 things:
a) If your VPN server is not on a public IP, you need to use the public IP of your router and port forward all traffic to port 1194 to the router to the VPN server.
b) Set up a static route to make sure remote clients can reach other LAN terminals once connected via VPN.

For a) there is a better way – I use dyndns.org to assign a permanent hostname for my router. This is better than IP as if the wan IP of the router changes, the hostname in dyndns is automatically updated. Most routers allow you to specify a dyndns acct and it can automatically keep dyndns updated. Dyndns is free and this is very useful. Google around on how to do this, or, to start just use wan IP of the router in the client code. In my case, “AA.BB.CC.DD” in the conf file above reads “myhostname.dyndns.org”

Next, add the port forwarding:
a) Open the Port fowarding entry in your home router, and add a new rule (call it “openvpn”)
b) Start port:1194, end port: 1194, protocol:UDP
c) Server IP address: 192.168.1.10 (in my case, change to LAN IP of your VPN server)

What we did here is made sure that if the router receives any connections/traffic to port 1194 of its WAN IP, it will forward it internally to the VPN server (your readynas box). That takes care of the VPN server not having a public IP.

Next up, add a static route to your router: (Change IP addresses to match your setup)
Click on the static route option of your router and create a new route:
route name: name it whatever – I called it vpnroute
Destination IP address: 10.8.0.0 (This is the virtual LAN that the VPN server will create)
Netmask: 255.255.255.0
Gateway: 192.168.1.1 (This is my default LAN gateway)

And save.

(Note: I am not sure if you need the above step if you use tap because it is supposed to be an ethernet bridge. You can experiment by not doing this while using tap to see if you can still access other machines)

Step 6: Test
Now try and connect to your VPN server from a remote client.
Works? great, check a few things:

At the client type:
ifconfig

If you are using tun (ip p2p link), you will see something like this:

tun0: flags=8851 mtu 1500
inet 10.8.0.6 --> 10.8.0.5 netmask 0xffffffff
open (pid 2205)

Or, if using tap (ethernet bridge):

tap0: flags=8843 mtu 1500
ether x:x:x:x:x:x
inet 10.8.0.2 netmask 0xffffff00 broadcast 10.8.0.255
open (pid 3146)


Note the difference. In tap, your virtual interface works at layer 2 and creates a virtual ethernet mac address. While in tun mode, a routing path is established at the IP layer.

In both cases, it is telling you a virtual interface has been created with a 10.8.0.x address. (Remember I chose 10.8.0.0 as my VPN network range)
good.
Now ping the VPN server at its virtual LAN address:

arjun@~] ping 10.8.0.1
PING 10.8.0.1 (10.8.0.1): 56 data bytes
64 bytes from 10.8.0.1: icmp_seq=0 ttl=64 time=70.841 ms
64 bytes from 10.8.0.1: icmp_seq=1 ttl=64 time=48.327 ms

Great. Now ping the VPN server at its real LAN address (this won’t work if routes are not set up properly)

[arjun@~] ping 192.168.1.10
PING 192.168.1.10 (192.168.1.10): 56 data bytes
64 bytes from 192.168.1.10: icmp_seq=0 ttl=64 time=29.200 ms
64 bytes from 192.168.1.10: icmp_seq=1 ttl=64 time=46.460 ms


Finally, ping another machine on the LAN:

[arjun@~] ping 192.168.1.9
PING 192.168.1.9 (192.168.1.9): 56 data bytes
64 bytes from 192.168.1.9: icmp_seq=0 ttl=126 time=190.009 ms
64 bytes from 192.168.1.9: icmp_seq=1 ttl=126 time=30.312 ms


Great. All done.

Here is what we will be developing: Let’s assume you are planning a trip from Bethesda, MD to 90210, CA and you plan to drive (Yeah a road warrior!).  You can get the driving directions from many places, including Google. What you also want is, what “what is the weather along the route”. Not only that, you want it for the day you plan to drive (so maybe tomorrow, the day after, or the day after the day after…)

I often need this information. I don’t drive cross country, but I do drive and knowing the weather along the route and for the day I want to drive is very useful to me. I wish we had an app for that. Well, let’s not wish, let’s write one.

In the process, you will learn how to:

a) Use TBXML for XML parsing

b) Use Google Weather and Driving directions XML data

c) Use segmented controls

d) Use TableViews and custom cells

e) Write an app that brings all of this together

*** Credits: The fine folks at icodeblog started me off with this article. ***

First the customary screen shots:

First Screen: You enter your from and to and select which day you want the forecast for:

Second screen: We use a HUD to tell the user we are doing all the backend magic to get the route weather

Third screen: We display the results:

Now lets break up the design and code:

The following files will be explained:

• DrivingWeatherViewController.h/m: This is the main program. It is responsible for bringing up the first screen, accept user inputs and then invoke Google’s secret APIs to get driving directions and weather along the route. It subsequently invokes code in my next bullet point that displays all the retrieved data in a nice, friendly table.
• WeatherTable.h/m: This is responsible for displaying the parsed data in a TableView (The tableview controller is implemented in DrivingWeatherViewController)
• CustomCell.h/m: This is used by WeatherTable to display a custom table cell for each row (if you see the third screen image, you will notice we have 3 sub-rows of data in each TableView Cell along with an image on the right.
• WeatherDataClass.h/m: Just a data structure (wait, they are called Classes) that holds weather information for each location along the driving path. Used by DrivingWeatherViewController

I will not be explaining how to use the HUD. For that take a look at my other tutorial here.

Now let’s break up the code. Let’s target the main code first:

DrivingWeatherViewController.h

//
//  DrivingWeatherViewController.h
//  DrivingWeather
//
//  Created by Arjun on 10/29/10.
//  Copyright 2010 Hughes Systique Corp. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "MBProgressHUD.h"
#import <MapKit/MapKit.h>

We are going to use a specific data-structure that is provided by MapKit.h called CLLocationCordinate2D. It is just a convenient structure to store a lat/long value.

@interface DrivingWeatherViewController : UIViewController <MBProgressHUDDelegate>
{

	IBOutlet UITextField *textFrom;
	IBOutlet UITextField *textTo;
	MBProgressHUD *HUD;
	NSString *escapedFrom;
	NSString *escapedTo;
	IBOutlet UIButton *goButton;
	IBOutlet UIButton *tableButton;
	IBOutlet UISegmentedControl *daySegment;
	int day;

}

@property (nonatomic, retain) UITextField *textFrom;
@property (nonatomic, retain) UITextField *textTo;
@property (nonatomic, retain) UIButton *goButton;
@property (nonatomic, retain) UIButton *tableButton;
@property (nonatomic, retain) UISegmentedControl *daySegment;

First, since we plan to use MBProgressHUD, we need to implement its Delegate methods. As I indicated earlier, see my tutorial on “WhoCalledMe” for more details on MBProgressHUD. Looking at the @interface part, textFrom and textTo are input textfields where the use will enter his source and destination locations. You can be pretty flexible, including adding approximations here. I noticed that the google API is very flexible to abstract input. It accepts all kinds of inputs and also guesses if it can’t figure out for sure. Fiddle around and test its limits. If the app crashes, then you know that’s an input Google barfed on :-)

The variable HUD contains the HUD activity indicator. escapedFrom and escapedTo are basically ‘sanitized’ versions of the input with properly escaped sequences for special characters. For example, “Bethesda MD” needs to become “Bethesda%20MD”. This is because we will be passing this as a URI parameter to google and it needs to be properly escaped to be able to do that.

goButton, is, well, when you hit the go Button :-p (sort of like explaining “i” in “for (i=0)”)

tableButton – well, as a matter of convenience, I’ve added a small button at the lower right that displays the last resolved weather condition along a given route. The logic there is that you may want to see it again, and re-computing it everytime is costly. So all you need to do is hit that button, we be show the previous table of weather along the route that was displayed. How thoughtful of me, wouldn’t you say?

Finally, daySegment (actually day) will contain the day for which you need the weather prediction for. If you notice, I’ve only allowed for 4 days look ahead. I don’t remember too well (its been a few months since I wrote this code, and I am positive my brain cells are dying due to which I have memory loss), but I think there may be a limit of how far ahead you can go with the hidden google HTTP API. Maybe I’ll remember this once I start explaining the .m file. Or maybe, I just really wanted to use a segmented control because it looked cute and doing more than more made no sense…

- (IBAction) goPressed: (id)sender;
- (IBAction) tableButtonPressed: (id) sender;
-(IBAction) textFieldDoneEditing:(id)sender;
-(IBAction) backgroundTapped: (id)sender;
- (void) getDrivingWeather;
- (void) displayError: (NSString *)ex;
-(IBAction) segmentedControlIndexChanged;
@end

The only explanation I need to put in here are:
a) getDrivingWeather – the main working function
b) displayError – just a convenience API to show a Alert message when a parsing error occurs

DrivingWeatherViewController.m

//
//  DrivingWeatherViewController.m
//  DrivingWeather
//
//  Created by Arjun on 10/29/10.
//  Copyright 2010 Hughes Systique Corp. All rights reserved.
//

#import "DrivingWeatherViewController.h"

#import "WeatherTable.h"
#import "DrivingWeatherAppDelegate.h"
#import "WeatherDataClass.h"
#import "MBProgressHUD.h"
#import "TBXML.h"

@implementation DrivingWeatherViewController

@synthesize textFrom, textTo, goButton, tableButton, daySegment;

// MBProgressHUD calls this when the progress bar is over
- (void)hudWasHidden {
	// Remove HUD from screen when the HUD was hidded
	[HUD removeFromSuperview];
	[HUD release];
}

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
	// Set up better looking buttons that the plain white ones that we get by default
	UIImage *buttonImageNormal = [UIImage imageNamed:@"whiteButton.png"];
	UIImage *stretchableButtonImageNormal = [buttonImageNormal stretchableImageWithLeftCapWidth:12  topCapHeight:0];
	[goButton setBackgroundImage:stretchableButtonImageNormal forState:UIControlStateNormal];

	UIImage *buttonImagePressed = [UIImage imageNamed:@"blueButton.png"];
	UIImage *stretchableButtonImagePressed = [buttonImagePressed stretchableImageWithLeftCapWidth:12  topCapHeight:0];
	[goButton setBackgroundImage:stretchableButtonImagePressed forState:UIControlStateHighlighted];

	UIImage *tableButtonNormal = [UIImage imageNamed: @"notepad.png"];
	[tableButton setBackgroundImage:tableButtonNormal forState:UIControlStateNormal];

    [super viewDidLoad];

}

-(IBAction) segmentedControlIndexChanged
{
	day = self.daySegment.selectedSegmentIndex;
}

// Just a convenient function to display an alert box

- (void) displayError : (NSString *)ex
{
	UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Error" message:[NSString stringWithFormat:@"%@",ex]
												   delegate:self cancelButtonTitle:@"OK" otherButtonTitles: nil];
	[alert show];
	[alert release];
	return;
}

// This is invoked when the user presses the notepad button on lower right
// Its just a convenient way to re-show the same table that you just saw (incase you want to go back to it)
- (IBAction) tableButtonPressed: (id) sender
{
	WeatherTable *wt = [[WeatherTable alloc] initWithNibName:@"WeatherTable" bundle:[NSBundle mainBundle]];
	[self presentModalViewController:wt animated:YES];
	[wt release];
}

// This is invoked when user presses the Go button, which means we need to take the inputs in the text fields
// and process the driving weather parsing
- (IBAction) goPressed: (id)sender
{

	escapedFrom = [[textFrom.text stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding] retain];
	escapedTo = [[textTo.text stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding] retain];

	NSLog (@"From:%@ To:%@",escapedFrom, escapedTo);

	// Now lets show a progress dialog, since parsing all lat/long and geocoding takes time
	HUD = [[MBProgressHUD alloc] initWithWindow:[UIApplication sharedApplication].keyWindow];
	HUD.mode = MBProgressHUDModeDeterminate;

	// Add HUD to screen
	[self.view.window addSubview:HUD];

	// Regisete for HUD callbacks so we can remove it from the window at the right time
	HUD.delegate = self;

	HUD.labelText = @"Working...";

	// Show the HUD while the provided method executes in a new thread
	NSLog (@"Just before showWhileExecuting");
	[HUD showWhileExecuting:@selector(getDrivingWeather) onTarget:self withObject:nil animated:YES];

}

// This is the main function. goPressed calls this to actually start the entire XML GET/parse etc.
- (void) getDrivingWeather
{

	CLLocationCoordinate2D coord[200]; // This should really be an NSArray...
	NSLog (@"Inside getDrivingWeather");

	NSString *drivingURI= [[NSString alloc] initWithFormat:@"http://maps.googleapis.com/maps/api/directions/xml?origin=%@&destination=%@&sensor=false",escapedFrom,escapedTo] ;

	[escapedTo release];
	[escapedFrom release];

	float progress=0.0f;
	float progressincr=0.0f;

	HUD.labelText = @"Getting Directions";
	NSLog(@"Google Driving URI is %@",drivingURI);

drivingURI is the base URL string that we need to invoke for Google to return the XML response (explained below). So we are setting up here – we display a HUD saying we are working on it, and then plan to pass the from and to values to this URL and fetch the responses (explained later).

A Diversion: Let’s first understand the XML format returned by Google’s driving directions APIs

Let’s analyze the output of the following REST URL invocation:

http://maps.googleapis.com/maps/api/directions/xml?origin=20876&destination=21704@&sensor=false

Here is a fragment of the output:

The output is organized as so:
a) The entire directions is encapsulated in a<route>  tag
b) Each ‘via point’ is encapsulated in a  <leg> tag (in our app, there will only be one ‘leg’ of the journey – from start to finish. If you instead did A to B to C, then A-B would be one leg and B-C the other.
c) Next, each leg has many ‘steps’. Each step is one instruction (example, step 1: Take left on ‘Foo’. Step 2: Take right on ‘Moo’)
d) Inside each step, you have a lat/long for the starting and ending point.
e) There other tags, you can explore – easy to understand

What is our strategy:

1. Iterate through this list and get to the lat/long values
2. Next, pass the lat/longs to another google API to return weather conditions
3. Next, convert the lat/longs to city names  so it can be displayed (If you know someone who sees a dump of weather and lat/long and finds it useful, you know a massive nerd)
4. Next, eliminate repeated cities (for example, there may be 5 steps within a single city or zip code)
5. Display it all in a nice way, including the weather icon pictorially showing the prediction (part of the weather API output from google)

Okay, now that you understand the structure and our strategy, lets get into execution

	DrivingWeatherAppDelegate *appDelegate = (DrivingWeatherAppDelegate *)[[UIApplication sharedApplication] delegate];

	// Each time we call this API, we need to clear the past table. Easy way is to free it and re-alloc it
	// I suppose I really should be just deleting all rows..
	[appDelegate.drivingWeatherArray release];
	appDelegate.drivingWeatherArray = [[NSMutableArray alloc] init];

	// Get the XML document that returns full driving directions
	TBXML *directionsParser = [[TBXML alloc] initWithURL:[NSURL URLWithString:drivingURI]];

	[drivingURI release];

	if (directionsParser == nil)
	{
		[self displayError:@"Error getting driving directions. Try again, or check your input."];
		return;
	}

The appDelegate variable is just a convenient method for us to exchange data between different classes. It may not be a good design practice, but heck, good design requires intelligent thinking and I’m just slapping code together here. I don’t claim to be an intelligent thinker. Basically, drivingWeatherArray will contain the parsed weather conditions for the route and it will be shared between this class and the WeatherTable class.

So here, we initialize the array, and then use an excellent open source, fast XML parser for iOS called TBXML. We pass it the driving directions URL that was composed using the base URL and the user input. the TBXML initWithURL instantiates a TBXML object, fetches the data in that URL and returns it to the directionParser variable. We now need to walk the XML chain from here.

TBXML is super easy to use and its instructions are really really simple. If you can’t figure out how to use it from my code, go to their website and read about it.

	HUD.labelText = @"Parsing locations";

	TBXMLElement *routeLegStep = directionsParser.rootXMLElement;
	routeLegStep = [TBXML childElementNamed:@"route" parentElement:routeLegStep];
	routeLegStep = [TBXML childElementNamed:@"leg" parentElement:routeLegStep];
	routeLegStep = [TBXML childElementNamed:@"step" parentElement:routeLegStep];
	int cnt=0;

	while (routeLegStep)
	{
		TBXMLElement *start_location = [TBXML childElementNamed:@"start_location" parentElement:routeLegStep];
		TBXMLElement *lat_node = [TBXML childElementNamed:@"lat" parentElement:start_location];
		TBXMLElement *long_node = [TBXML childElementNamed:@"lng" parentElement:start_location];

		NSLog (@"TBXML GOT Lat:%@ Long:%@", [TBXML textForElement:lat_node], [TBXML textForElement:long_node]);
		coord[cnt].latitude=[[TBXML textForElement:lat_node] doubleValue];
		coord[cnt].longitude=[[TBXML textForElement:long_node] doubleValue];
		cnt++;

		TBXMLElement *end_location = [TBXML childElementNamed:@"end_location" parentElement:routeLegStep];
		lat_node = [TBXML childElementNamed:@"lat" parentElement:end_location];
		long_node = [TBXML childElementNamed:@"lng" parentElement:end_location];
		NSLog (@"TBXML GOT Lat:%@ Long:%@", [TBXML textForElement:lat_node], [TBXML textForElement:long_node]);

		coord[cnt].latitude=[[TBXML textForElement:lat_node] doubleValue];
		coord[cnt].longitude=[[TBXML textForElement:long_node] doubleValue];
		cnt++;

		routeLegStep =[TBXML nextSiblingNamed:@"step" searchFromElement:routeLegStep];

	}
	[directionsParser release];

Next up, now that we have a XML document with the entire driving directions, we need to navigate down to the “route” tag, then get to the “leg” tag within in and then iterate though each “step” tag within it. Note that I’ve taken shortcuts – I know for sure there will only be one “leg” tag, so I don’t bother looking for others. I just focus on the series of “step” tags inside the one “leg” tag. Once I have the starting pointer to the first “step”, I iterate till I reach the end. For each iteration, I get the ‘lat/long’ for the start location as well as the ‘lat/long’ for the end location. Obviously, there will be many lat/longs for one ‘city’ or ‘zip’ and we need to filter them out. We will do all that later.
For now, we use TBXML to quickly iterate through all the start/stop lat longs and stuff them into a “coord” array. That’s all we need from the directions XML response. A list of lat-longs along the driving route. Now let’s get to the google weather APIs to work the next part of the magic.

NSLog (@"TOTAL LATLONG %d", cnt);
NSLog (@"Now getting weather for each LATLONG");

// This is used to update the progress pie. Basically, for each "cnt" (i.e. total list of lat/long)
// we are doing two network operations (weather, geocode). So we increment progress accordigly so it reaches
// 1 after 2*cnt operations are completed. MBProgressHUD class considers 1 to be complete.
progressincr = 1.0f/(2.0f*cnt);

// For each lat/long, we need to call the google weather API
// and then also call google geocode API
for (int i=0; i< cnt; i++)
{

HUD.labelText=[NSString stringWithFormat:@"Getting Weather (%d of %d)",i+1,cnt];
NSString *myLatString=[NSString stringWithFormat:@"%f", coord[i].latitude];
NSString *myLongString=[NSString stringWithFormat:@"%f", coord[i].longitude];

myLatString = [myLatString stringByReplacingOccurrencesOfString:@"." withString:@""];
myLongString = [myLongString stringByReplacingOccurrencesOfString:@"." withString:@""];

NSString *weathercoord, *revgeocode;
weathercoord = [NSString stringWithFormat:@"http://www.google.com/ig/api?weather=,,,%@,%@", myLatString, myLongString];

NSLog(@"Google Weather URI:%@",weathercoord);

For each lat/long in our array, we need to pass that lat/long to the google weather API URL to get its weather. This is a time consuming operation, so we display a HUD. We also use a Pie-chart HUD display that MBProgressHUD offers so the user can visually see how much more of parsing is left (Just as one example, driving from MD to CA involves 84 different steps, which means we have to call the weather API 84 times, plus, reverseGeoCode API (coming up later) another 84 times to get city names.

So really, the pie chart doesn’t just look cool. It serves a purpose.

The variable weathercoord contains the google weather API URL along with the lat/long we need data for.

Also, the XML URL does not accept “decimal points” in the lat/long. All you need to do is remove it and it works fine (discovered by some blogger – I don’t have the reference now)

Diversion: Understanding the Weather XML data

Here is an example of the output for http://www.google.com/ig/api?weather=,,,39341250,-77366200

Lets understand first on how we need to parse it and then go to the code. It’s very simple. First there is a “current_conditions” tag that tells you what is the current temperature at that lat/long. Next, there are “forecast_conditions” tags that tell you what is the expected low and high for the next 4 days (Aha! so that explains why I only let you select upto 4 days ahead. My ailing memory came back). Simple! One more thing – it also gives you a link to an image that pictorially shows the weather condition too. Now that’s some jazz that would look good…

Okay back to the code:

TBXML *weatherParser = [[TBXML alloc] initWithURL:[NSURL URLWithString:weathercoord]];
if (weatherParser == nil)
{
NSLog(@"Error parsing Weather URL for lat:%f, long:%f",coord[i].latitude, coord[i].longitude);
continue;
}

progress += progressincr;
HUD.progress = progress;

WeatherDataClass *wdc;
wdc = [[WeatherDataClass alloc] init]; // just alloc wdc object. member functions will retain memory from NSString below

</span>
<pre>@try
{

wdc.longitude = [[NSString stringWithFormat:@"%f", coord[i].longitude] retain];
wdc.latitude = [[NSString stringWithFormat:@"%f", coord[i].latitude] retain];

TBXMLElement *myElement = weatherParser.rootXMLElement;
TBXMLElement *myChild;

myElement = [TBXML childElementNamed:@"weather"  parentElement:myElement];

// first check if there is a tag called problem_cause_data. If it is, there was an error in the XML

TBXMLElement *problemData = [TBXML childElementNamed:@"problem_cause_data" parentElement:myElement];

if (problemData) // yes it found it
{
NSLog(@"(Problem_cause reported) Error parsing Weather URL for lat:%f, long:%f",coord[i].latitude, coord[i].longitude);
continue;

}

Like before, we use the trusty TBXML class to walk though the XML API we explained before. A minor nit – before you parse, look for a tag called “problem_cause_data” – if it is part of the XML, parsing failed. So before we burn and crash, check it first. If it was returned, something got foo bar’d.

// if it comes here, I think the XML should have everything

// now check what is the value of day. If it is 0, then look at current_conditions
// else iterate forecast_conditions

// Now get the date as well
NSString *forecast_day=@"Unknown";
if (day==0)
{
myElement = [TBXML childElementNamed:@"current_conditions"  parentElement:myElement];
//[forecast_day release];
forecast_day=@"Today";
//forecast_day=[[NSString alloc] initWthString:@"Today"];
NSLog(@"Today");
}
else
{
myElement = [TBXML childElementNamed:@"forecast_conditions"  parentElement:myElement];
NSLog(@"Next Day");
for (int i=0; i<day-1; i++)

{
NSLog(@"Next Day");
if (myElement) {myElement =[TBXML nextSiblingNamed:@"forecast_conditions" searchFromElement:myElement];}

}
if (i==0)
{
TBXMLElement *mDayOfWeek = [TBXML childElementNamed:@"day_of_week" parentElement:myElement];
if (mDayOfWeek)
{
//[forecast_day release];
forecast_day = [[TBXML valueOfAttributeNamed:@"data" forElement:mDayOfWeek] retain];
}
} // i==0
} //else

Now we need to figure out which weather data is of interest to us. That depends on what day the user selected in the segmented control (day variable). If the user selected “Today” then we need to parse the “current_conditions” tag. If not, then we need to walk through the “forecast_conditions” tags, once for each day ahead chosen.

if (i==0)
{
[appDelegate.drivingWeatherArray addObject:[NSString stringWithFormat:@"Weather Forecast is for %@", forecast_day]];
}
//[forecast_day release];

myChild = [TBXML childElementNamed:@"condition"  parentElement:myElement];
if (myChild) {wdc.condition = [[TBXML valueOfAttributeNamed:@"data" forElement:myChild] retain];}
NSLog(@"TBXML GOT condition:%@",wdc.condition);

myChild = [TBXML childElementNamed:@"temp_f"  parentElement:myElement];
if (myChild) {wdc.curtemp = [[TBXML valueOfAttributeNamed:@"data" forElement:myChild] retain];}
NSLog(@"TBXML GOT curtemp:%@",wdc.curtemp);

myChild = [TBXML childElementNamed:@"low"  parentElement:myElement];
if (myChild) {wdc.lowtemp = [[TBXML valueOfAttributeNamed:@"data" forElement:myChild] retain];}
NSLog(@"TBXML GOT lowtemp:%@",wdc.lowtemp);

myChild = [TBXML childElementNamed:@"high"  parentElement:myElement];
if (myChild) {wdc.hitemp = [[TBXML valueOfAttributeNamed:@"data" forElement:myChild] retain];}
NSLog(@"TBXML GOT hitemp:%@",wdc.hitemp);

myChild = [TBXML childElementNamed:@"icon"  parentElement:myElement];
if (myChild) {wdc.url = [[NSString stringWithFormat:@"http://www.google.com%@", [TBXML valueOfAttributeNamed:@"data" forElement:myChild]]retain]   ;}
NSLog(@"TBXML GOT url:%@",wdc.url);
}
@catch (NSException *ex)
{
[self displayError:@"Error parsing Weather. Try again or check input"];
NSLog(@"Error:%@",ex);
return;
}

Right, so the code above walks through the XML and picks up the current temperature ( if current day is chosen), or, the forecast high and low for a forecast day. We also pick up the image URL (its in the “icon” tag in the XML output). All of this goes into a data structure (wdc) for use later.

revgeocode = [NSString stringWithFormat:@"http://maps.google.com/maps/api/geocode/xml?latlng=%f,%f&sensor=true", coord[i].latitude, coord[i].longitude];
NSLog (@"GOOGLE GEOCODE URI:%@",revgeocode);

Finished! Now lets populate the table! Oh wait. One more thing. Our last operation is to convert all the lat/longs to cities and zipcodes, and then filter our repeating zip codes (I could have chosen to remove repeating cities, but my assumption is if zip changes, it may be far enough for weather to change). So here, we use the google geocode API, pass it a lat long and hope to get some human understandable city/zip in return

For this one, I am not going to explain the XML output in detail. It is a little voluminous. Take a look at the output for

http://maps.google.com/maps/api/geocode/xml?latlng=39.341250,-77.366200&sensor=true

as an example. Suffice to say, what we are looking for is the “postal_code” tag with a “formatted_address” tag inside it. Thats the value we want to display. So the next piece of code walks this chain and looks for it.

TBXML *geocodeParser;
@try
{
geocodeParser = [[TBXML alloc] initWithURL:[NSURL URLWithString:revgeocode]];

if (!geocodeParser) { [self displayError:@"Failed to get Google GeoCode XML!"]; [wdc release]; continue; }

TBXMLElement * rootXMLElement = geocodeParser.rootXMLElement;
if (!rootXMLElement) { NSLog(@"Error:Failed to get Root of Google GeoCode XML!"); [geocodeParser release];[wdc release]; continue; }

TBXMLElement *resultElement = [TBXML childElementNamed:@"result"  parentElement:rootXMLElement];
if (!resultElement) { NSLog(@"Error:Failed to get result tag. Continuing."); [geocodeParser release]; [wdc release];continue; }

TBXMLElement *typeElement = [TBXML childElementNamed:@"type" parentElement:resultElement];
if (!typeElement) { NSLog(@"Error:Failed to get type tag"); [geocodeParser release]; [wdc release]; continue; }

NSString *type_text = [TBXML textForElement:typeElement];
if (!type_text) { NSLog(@"Error:Failed to get text of type tag (odd)"); [geocodeParser release]; [wdc release]; continue; }

while (  (resultElement) &&  ( !([type_text isEqualToString:@"postal_code"]) ) )
{
resultElement = [TBXML nextSiblingNamed:@"result" searchFromElement:resultElement];
if (resultElement)
{
typeElement = [TBXML childElementNamed:@"type" parentElement:resultElement];
type_text = [TBXML textForElement:typeElement];
}
else
{
typeElement=nil;
type_text=nil;
}

NSLog(@"TYPE IS:%@",type_text);
}

if (resultElement) // you got to the area which has address
{
TBXMLElement *address=[TBXML childElementNamed:@"formatted_address" parentElement:resultElement];
if (address) { wdc.city = [TBXML textForElement:address]; NSLog (@"GOT Geocode %@",wdc.city);}
}
progress += progressincr;
HUD.progress = progress;
[geocodeParser release];
}
@catch (NSException *ex)
{
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"TBXML Error" message:[NSString stringWithFormat:@"%@",ex]
delegate:self cancelButtonTitle:@"OK" otherButtonTitles: nil];
[alert show];
[alert release];
return;
}

Right, now we have the city and zip for that lat long.

/* Now, iterate through the weather array and and check if city was already added. We can't do it before because different lat/longs map
to the same cities. So we first need to get all the latlongs and then compare the resultant city returned by the google geocode api */

int match=0;

if (wdc.city)
{
NSLog(@"**********************************************************");
for (int ndx=1; ndx<[appDelegate.drivingWeatherArray count]; ndx++) // start at 1, as 0 has header info
{
WeatherDataClass *w = [appDelegate.drivingWeatherArray objectAtIndex:ndx];

if ([w.city isEqualToString:wdc.city])
{
match=1;
}

} // for array match
if (!match)
{
[appDelegate.drivingWeatherArray addObject:wdc];
}
[wdc release];
}
} // for

HUD.progress=1;

WeatherTable *wt = [[WeatherTable alloc] initWithNibName:@"WeatherTable" bundle:[NSBundle mainBundle]];
[self presentModalViewController:wt animated:YES];
[wt release];

}

What we now do here is check the drivingWeatherArray object to see if this city+zip is already part of our list. If it is, its a repeat, so just skip and don’t add, else add to the object array.

And finally, display all of that data in a nice TableView. Done!

// used to make keyboard disappear

-(IBAction) textFieldDoneEditing:(id)sender
{
[sender resignFirstResponder];
}

-(IBAction) backgroundTapped:(id)sender;
{
[textTo resignFirstResponder];
[textFrom resignFirstResponder];
}

/*
// Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
*/

- (void)didReceiveMemoryWarning {
// Releases the view if it doesn't have a superview.
NSLog (@"******MEMORY WARNING***********");
[super didReceiveMemoryWarning];

// Release any cached data, images, etc that aren't in use.
}

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

- (void)dealloc {

[textFrom release];
[textTo release];
[escapedFrom release];
[escapedTo release];
[tableButton release];
[daySegment release];

[super dealloc];
}

@end

The “remaining tail” of the main code – usual iphone skeleton code.

WeatherTable.h

//
//  WeatherTable.h
//  DrivingWeather
//
//  Created by Arjun on 10/31/10.
//  Copyright 2010 Hughes Systique Corp. All rights reserved.
//

#import <UIKit/UIKit.h>
@interface WeatherTable : UIViewController <UITableViewDataSource, UITableViewDelegate>{
	IBOutlet UITableView *weatherTableView;
	IBOutlet UIButton *doneButton;

}

@property (nonatomic, retain) UITableView *weatherTableView;
@property (nonatomic, retain) UIButton *doneButton;

-(IBAction) done: (id) sender;

@end

Nothing much – a standard TableView implementation…

WeatherTable.m

This class displays the parsed weather along your driving route in a nice table

//
//  WeatherTable.m
//  DrivingWeather
//
//  Created by Arjun on 10/31/10.
//  Copyright 2010 Hughes Systique Corp. All rights reserved.
//

#import "WeatherTable.h"
#import "CustomCell.h"
#import "DrivingWeatherAppDelegate.h"
#import "WeatherDataClass.h"

@implementation WeatherTable

@synthesize weatherTableView;
@synthesize doneButton;

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
	DrivingWeatherAppDelegate *appDelegate = (DrivingWeatherAppDelegate *)[[UIApplication sharedApplication] delegate];
	return [appDelegate.drivingWeatherArray count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
	DrivingWeatherAppDelegate *appDelegate = (DrivingWeatherAppDelegate *)[[UIApplication sharedApplication] delegate];
	static NSString *CustomCellIdentifier=@"CustomCellIdentifier";
		NSUInteger row = [indexPath row];
CustomCell *cell;

We are using a pointer to the appDelegate class to share the driving list Array between the two classes as explained earlier.
Also, each row of the Table will be filled with a custom cell which will accomodate an image and two rows of data.

	/* First row is special - I display forecast day, copyrights etc, so handle differently */
	if (row==0)
	{
		cell=(CustomCell *) [tableView dequeueReusableCellWithIdentifier:@"HeaderCell"];
		if (cell==nil)
		{
			NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:nil];
			cell = [nib objectAtIndex:0];
		}

		cell.cityLabel.text = [appDelegate.drivingWeatherArray objectAtIndex:row];
		cell.forecastLabel.text=@"All data \u00A9 Google,inc.";
		//[cell.forecastLabel setFont:[UIFont fontWithName:@"Arial-BoldMT" size:18]];
		cell.imageView.image = [UIImage imageNamed:@"icon.png"];

	}
	else
	{

		cell=(CustomCell *) [tableView dequeueReusableCellWithIdentifier:CustomCellIdentifier];
		if (cell==nil)
		{
			NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"CustomCell" owner:self options:nil];
			cell = [nib objectAtIndex:0];
		}

If you look at my sample screenshot for the results screen, the first row is “special” – it displays a copyright message attributing the data to google and my app icon. So we need to ensure that we use a different identifier in “dequeueReusableCellWithIdentifier”. If we did not, then iphone will start sharing memory of that row with other rows. that will mess up formatting the moment you scroll around because it will overwrite formatting data of the header row with the other rows (since you told it that it can be reused if needed) – try it out. So we keep them separate.

		WeatherDataClass *wdc= [appDelegate.drivingWeatherArray objectAtIndex:row];
		NSString *weathertext;
		NSString *nowtext, *lowtext, *hitext;
		nowtext=@"";
		lowtext=@"";
		hitext=@"";

		/* When you get weather from google, it shows current temperature for "today" but no high and low
		   Similarly, if you ask for temperature for other days (+1 to +4 days from today), it shows high and low
		   but current does not make sense, as it is future. So here, I just present stuff I get while keeping the null
		   values from being displayed. \xC2\xB0 is hex for the degree symbol
		*/

		if (wdc.curtemp) { nowtext = [NSString stringWithFormat:@"Now:%@\xC2\xB0 F",wdc.curtemp];}
		if (wdc.lowtemp) { lowtext = [NSString stringWithFormat:@"Low:%@\xC2\xB0 F",wdc.lowtemp];}
		if (wdc.hitemp)  { hitext = [NSString stringWithFormat:@"High:%@\xC2\xB0 F",wdc.hitemp];}

		weathertext= [NSString stringWithFormat:@"%@ %@ %@",nowtext,lowtext,hitext];
		cell.cityLabel.text = wdc.city;
		cell.temperatureLabel.text = weathertext;
		cell.forecastLabel.text = wdc.condition;

		NSString* imageURL = wdc.url;
		NSLog(@"IMAGE URL:%@",wdc.url);
		NSData* imageData = [[NSData alloc]initWithContentsOfURL:[NSURL URLWithString:imageURL]];

		UIImage* image = [[UIImage alloc] initWithData:imageData];
		[cell.imageView setImage:image];
		[imageData release];
		[image release];
	}
	return cell;

}

Next up, we iterate through the drivingWeather Array and set the table cell fields to the right values. Loose explanation, but I think its pretty simple what is going on up here.

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
	UIImage *buttonImageNormal = [UIImage imageNamed:@"whiteButton.png"];
	UIImage *stretchableButtonImageNormal = [buttonImageNormal stretchableImageWithLeftCapWidth:12  topCapHeight:0];
	[doneButton setBackgroundImage:stretchableButtonImageNormal forState:UIControlStateNormal];

	UIImage *buttonImagePressed = [UIImage imageNamed:@"blueButton.png"];
	UIImage *stretchableButtonImagePressed = [buttonImagePressed stretchableImageWithLeftCapWidth:12  topCapHeight:0];
	[doneButton setBackgroundImage:stretchableButtonImagePressed forState:UIControlStateHighlighted];

    [super viewDidLoad];

}

-(IBAction) done:(id) sender {
	[self.parentViewController dismissModalViewControllerAnimated:YES];
}

- (void)didReceiveMemoryWarning {
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];

    // Release any cached data, images, etc that aren't in use.
}

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

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

@end

No explanation needed above -standard stuff.

CustomCell.h and .m

.h:

//
//  CustomCell.h
//
//
//  Created by Arjun on 9/29/10.
//  Copyright 2010 Hughes Systique Corp. All rights reserved.
//

#import <UIKit/UIKit.h>

// This defines how each cell of the table will look

@interface CustomCell : UITableViewCell {
	IBOutlet UILabel *cityLabel;
	IBOutlet UILabel *forecastLabel;
	IBOutlet UILabel *temperatureLabel;
	IBOutlet UIImageView *imageView;

}
@property (nonatomic, retain) UILabel *cityLabel;
@property (nonatomic, retain) UILabel *forecastLabel;
@property (nonatomic, retain) UILabel *temperatureLabel;
@property (nonatomic, retain) UIImageView *imageView;

@end

CustomCell is a XIB file I created in Interface Builder. It has a label to display the city, forecast, temperature and an imageview to show the weather icon.

.m:

//
//  CustomCell.m
//  ViewSwitcher
//
//  Created by Arjun on 9/29/10.
//  Copyright 2010 Hughes Systique Corp. All rights reserved.
//

#import "CustomCell.h"

@implementation CustomCell

@synthesize cityLabel;
@synthesize forecastLabel;
@synthesize temperatureLabel;
@synthesize imageView;

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if ((self = [super initWithStyle:style reuseIdentifier:reuseIdentifier])) {
        // Initialization code
    }
    return self;
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {

    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}

- (void)dealloc {
	[cityLabel release];
	[forecastLabel release];
	[temperatureLabel release];
	[super dealloc];
}

@end

Download Project Source

Grab it from HERE. Hope it helps you.

Before I confuse you any more, I am talking about TotalFinder by Antonin Hildebrand an extension to Snow Leopard’s Finder.The Finder is to Snow Leopard what the File Explorer is to Windows. You use it for everything – copying, deleting, finding, mapping drives and what-not. While the OSX finder is in many ways better than File Explorer, I also think it had limitations. Instead of telling you what they are, let me just describe TotalFinder and why I loved it.

What is TotalFinder? It is an ‘extension’ to Finder in a way that it adds incremental or missing functionality to Finder without being a separate program. In other words, if you are using Finder, the functionality is integrated right there. You don’t have to start a new application called ‘Total Finder’ or whatever. In fact, if it did, it would be dismal failure. No one would use it. (Remember the many times you may have downloaded windows explorer alternatives only to discard them after a few weeks?).

So TotalFinder just enhances the existing Finder in an integrated fashion. No new program. How does it do it? Well, my understanding was that TotalFinder was a SIMBL plugin. SIMBL is mechanism developed by Mike Soloman that easily allows you to ‘hook into’ existing OSX apps to enhance them. I happened to read a blog post that says that starting Aug 2010, TotalFinder no longer needs SIMBL. You can read that post here. Anyway, bottom line is SIMBL or not, it works super great.

What do I love? Well, here you go with pictures:

The Logo

As I mentioned, TotalFinder just integrates into the existing finder. First thing it does is subtly enhance the Finder app icon in your dock like this:

Notice the little tab on the top, that is a hint on some of its new functionality. Subtle. Thank the lord the author did not choose to replace the finder icon with something totally different or gross.

Tabbed finder!

Yes! Total finder implements tabbed browsing. You can open lots of tabs with different directories. Just like Google Chrome. Infact, it reuses the Google Chrome tab engine code for this. And just like Chrome, you can tear the tab into a new window. Here is how tabs looks: As clean as Chrome.

Folders on Top

Also, the other feature I love is that Folders are at the top, irrespective of their lexical naming. By default, OSX sorts folders and files the same according to the alphabet. So you will find folders interspersed with files in any directory. I understand this is subjective, but I *hate* that. I treat folders as a ‘hierarchy point’ and not a leaf node. They have no business being sorted along with files. Obviously, the TotalFinder author feels the same way. Hooray!

Cut to the Chase (Cut and Paste)

The other thing I really missed in Finder is the ability to “cut” from one place to another. In Finder, you need to copy and then manually delete. I understand fully that “cut” can lead to problems if you abort half way or whatever, but I never did have issues in Windows and never quite agreed with the OSX ‘no cut’ policy for Finder. Well, guess what, TotalFinder brings it right back! Woot!  (click for larger image)

Save the Best for Last – Dual mode browsing

But the absolute best is the magic that happens when you hit Cmd+U. Boom – it extends the finder window and creates a mirror of the usual finder screen. Suddently, you can now parallely browse and explore two different directories in the same view. You cannot imagine how useful that it – when all you need to do is move files from one folder to another, it is *invaluable* to see both directories in the same view. I do this a lot at work and I was so elated to find this. Here is how it looks: (click for larger version)

See? It has a left panel that controls the left view and the right panel that controls the right view. Fantastic!!!

Some other features I don’t care for, but they exist of you like:

There are some other features the author provides, which I really don’t use. If you use them, it can help you. You can go to the author’s home page to check them out.

Price – its not free, but may be for you (was for me !)

TotalFinder is not free however. You can buy it for $15, or, if you “qualify”, you will get it free. I got it free. When I first found out about TotalFinder, I noticed that Antonin said if you were a blogger, or an open source contributor, he will give you a free copy. Well, I blog, so I just emailed him and he responded in 2 minutes with a free license. In return, I promised to write about it. Note however that I am not writing a good review just because I got it free. If I found it crap, I’d write about it, but say its crap.

But I loved it. Thanks Anotin, for a great piece of software.

And finally, the author also seems to really keep it updated. I recently updated to OSX 10.6.7 and within a day, he had a patch out. How nice is that!

It is impossible to state what is right and what is wrong when it comes to bringing up a child, because the final decision is yours, as a parent. All  I can say is parents who are able access such new mediums should give it a serious look as times have changed. There is a slew of fantastic learning tools available that offer a level of interactivity and immersive-ness (is that a word?) that never existed before.

In general, I am a technologist. My work, my hobby and my passion all converge to one word: technology. I am totally for adopting digital tools where necessary if I feel it improves mental or physical growth as long as I am convinced that it is not also harming my child in any significant way. So in this post, I’d like to talk about how we  leveraged technology to help in our child’s growth.

As a general rule, we as parents subscribe to the rule of limiting the time our son had his hands on these tools (we typically allow a 45 minute window at most each day for this, with weekends getting a little more digital time) and ensure that he mixes his digital tools with a lot of physical activity (the usual running, playing, reading books at night, board games, etc.), but the focus of this post is how we chose to maximize those 45 minutes each day in selecting the right digital/enterta

nment tools that help his mind grow.

Scope of this post

The rest of the post will talk about several key applications that I think have contributed greatly to reading, writing, music and social skills of our son at an early age. To you, I am not going to talk about  what is right/wrong, how much TV they should or should not watch, whether it is wise to let them play games or not (of the digital kind) etc. That is your choice. Should you choose to expose your little ones to the digital era at an early age, I will simply list tools and applications that we used and felt were of  significant help.

Each attribute mentioned later in the post are attributes that I’ve seen grow rapidly with him by the time he turned 3 and a half, so the results are obvious to me (i.e. ability for music, reading, writing, social skills, visual and problem solving skills)

The Devices

His digital assistance tools centered around 3 primary devices:

a) An iPhone: greatly helped in his: visual skills (puzzle solving etc.),

b) A TV: Specifically, PBS and NetFlix (I’ll talk about this later): Greatly helped him in his musical skills, responsibility and other soft skills

c) An iPAD: greatly helped his: all of the above for iphone PLUS reading and writing skills.

Realistically speaking, the iphone and ipad could really be grouped into one category, but the area that the iPAD stood out was how it helped his reading and writing skills.

Education as a Game

I am also a strong believer in converting education into a game-like format. I’ve observed that kids love it when they are playing a game. If you introduce a concept as a game and not as a formal education point, they adapt easily to it, and may appreciate it (if they like it). A Game format, or an interactive format helps them consider this as fun. Once the fundaments are set in a ‘fun way’ you can proceed to adopt more formal ways to enhance it, if you wish.

The Applicability of TV

There are some great TV serials, I think, that can greatly help child growth. A key criteria for my selection was they must be educational, should use good spoken English (specifically should be a clean accent) and should not have any violence in any form.

(image credit: Where not mentioned explicitly, images are those provided by Wikipedia)

a)  The Art of Music: Little Einsteins: Little Einstein is a Disney series, that features 4 children who essentially travel the world in their spaceship (‘Rocket’) solving cute problems of their friends. The focus of this show, to me, is education through music. Each problem has a musical solution Example, conducting a cresendo to help Rocket jump a high mountain, or dropping down to diminuendo while tiptoeing past a sleeping giant. The music is well selected. Each episode selects music from a well known Classical music composer. I am a huge fan of classical music as I think the construction of the music lends itself immensely in building an appreciation of fine arts in a person. So in short, this show contributes to your child’s ability to appreciate and understand music.

(word world image:http://tvtropes.org/pmwiki/pmwiki.php/Main/WordWorld)

b) Reading: World World and Super Why are two excellent animated shows that help in your child’s reading abilities. Word World, specifically, is a fantastic concept. Basically, this world comprises of letters and words. Every object you see, be it a Pig, and Ant, a Pie, a Bed etc. are all made up of letters. When you press letters together, they bounce into the shape of the object the word spells. Example, B-A-L-L when put together forms a ball and bounces around. This show involves the characters solving problems by either creating new words (example, searching for L-I-G-H-T at night to create a NIGHTLIGHT to that it helps allay fear of the dark) and is a super interactive way to help kids understand how letters form words and how words decompose to letters.

SuperWhy is yet another reading ability animated show. It differs from World world in that I think it focusses more on the phonics part than Word World does, which is also critical for your child to understand how to decompose complex words for pronunciation. SuperWhy is a show where a group of kids face real life problems (example, Dad angry because you did something naughty) and they turn into super heroes and dive into well known story books to live the story and use word power to solve problems in in turn, realizing there is a moral to the story which helps them solve real life issues.

c) Imagination: Having a good imagination is such a wonderful thing. It helps you think out of the box, be creative and so much more. In recent months, I’ve been very impressed with an animated show that we found on NetFlix called ‘The Backyardigans‘. I understand it is of Canadian origin and centers around 4 or 5 cute animal-kids (a hippo, a duck and some others), who, in each episode use their imagination to make believe they are in a new world, or a new place as new characters and help in solving cute problems. The episode starts with the characters playing in their backyard and then using their imagination, they transform the backyard into a “new place” and proceed to solve the problem of the day there. The score is excellent and these little darlings do an excellent dance in their imagined world. I was later told that The Backyardigans is also great for Autistic children who can learn how to more effectively use their imagination. Again, I have no first-hand knowledge on whether it is applicable or not – this is just something that a colleague told me, and I thought I’d mention. Another series, though not as imaginative as Backyardigans, and probably more towards visual problem solving skills, but is also imaginative is “Blues Clues” (Again, on netflix) which is an excellent show where the main character has an animated dog called ‘Blue’ who leaves clues around the episode that tell you what he wants or is feeling that day, which you solve.

d) Respect,Responsibility and “Just Like Daddy”: While all of the above also indirectly talk about Responsibility, another PBS show, to me, translates the merits of being responsible in practical terms in a way that a child can understand. That is Caillou. This one is really meant for pre-schoolers. I think it is important for your child to first learn how to speak and converse to a reasonable amount before you will see the benefits of this. Caillou is a pre-schooler who is a normal kid. He misbehaves at times, throws a fit at times, etc. etc. But in each episode, the creators impress upon the child the value of ‘respecting others’ and being ‘responsible’.  I was initially on the fence for this one. I watched a couple of them with my son, and noticed that Caillou would throw a fit, not play with his sister, speak angrily to someone (all the attributes you want your child to know is not right, eventually). I wondered if my son would mimic that. I noticed that he closely identified with the character. But interestingly, one of the key undertones of the episode is that Caillou, after making mistakes, learns they are wrong (on his own, typically) and corrects himself and I found my son to understand, via this, the meaning of key concepts like “listen to your parents”, “they want your good, even if they are strict”, “it pays to be nice to people” etc. Another key thing in this episode is it establishes a great bond between Caillou and his Dad. In almost each episode, Caillou works with his Dad, helps him, learns from him etc. and as he says all the time “Just like Daddy”. While this serial also shows a great relationship with his mother, sister, grandmother and other folks, I don’t think I’d be wrong in saying that the strongest bond is with the Dad. Naturally, this is great for me – as it just serves as just another great push into making him believe in his Dad more (Yes, this is a self-serving part for me, but practically speaking, I’ve seen his sense of responsibility grow tremendously)

(image from http://muppet.wikia.com/wiki/Sid_the_Science_Kid)

e) Another show that our son has started enjoying a lot is PBS’ “Sid the Science Kid“. Its a show where basic science questions are answered and explored in a fun way by “Sid” (like why does a banana rot, what is inertia etc). I personally think its an advanced show, but for some reason my son loves watching it. Its well animated and fun.

iPhone and iPad applications

An Ode to Apple’s simplicity of design

I strongly believe that an intuitive User Interface is one that you just know how to use. You don’t need to read a manual, and if you make a mistake, you immediately know how to rectify it. This is the beauty of apple products. Admittedly, toddlers are surprisingly smart. In the early days of his growth (its odd to say this since he is only 3.7 yrs old, but in context of this post means when he was 2 or so), he would often want to sit in front of our home computer, but being able to navigate the mouse, differentiate between right and left click and general tool usage was hard for him. He has now mastered our home computer as well, but, the point is, that I would see that he would spend more time getting the mechanics (how to use it) right rather than spending time on the intent (what to use and learn). When I exposed him to the iOS products (Iphone first, as the iPad was released much later), it was amazing how intuitive it was. In a matter of minutes, this little child figured out the natural finger swipes and its effects. He also quickly figured out the “Home Button”. If anything goes wrong in an app, hit “Home”. (Infact, hilariously, when he first started talking and something went wrong in anything, he would say “Daddy, can you please press the Home button?”). Simply put, the iphone took out the complexity of usage and let him to fully focus on the intent (the app). It was amazing to me, looking at such a little guy navigate this little device with so much ease. Naturally, therefore, when the iPAD was released, I bought it on day one. I absolutely knew its larger form factor would only be better for him learning several other things. On an unrelated note, I was also amazed at how our parents used the iPAD. Both my wife’s parents and my parents are completely computer illiterate. To a point, that when my mom wants to send an email, she asks someone else to send it, and even check if they have new emails. When she visited us, in just a matter of days, she embraced the iPAD and being a prolific reader, thoroughly enjoyed researching random stuff on wikipedia (she never knew it existed). No confusion. Amazing – these devices are truly revolutionary – in the simple fact that they, I think have bridged the gap between technology and usability. Any way, I digress. Let’s get back, now to the applications.

The iOS devices have a good selection of educational games that you can download, some free, some for a fee that help enhancing various aspects of a child’s education. The problem with the appstore is that there is no ‘try before you buy’. Even though many apps are cheap ($0.99 or $1.99) you will find that children’s education apps are always more costly than other apps (I guess people know parents will spend for their children) and I’ve often found bogus reviews. I’ve downloaded and paid for several apps, deleted many in minutes and have even paid $15 for an app that only displays static flash-cards but had great reviews (what a waste). Anyway, here are my list of the apps that I’d consider my top few:

IT IS ENTIRELY POSSIBLE I’VE MISSED SOME KEY APPS HERE: THIS IS PURELY BASED ON MEMORY OF APPS THAT WERE USEFUL OVER THE LAST 2-3 YEARS

(All images from the iTunes catalog)

	a) iWriteWords: I’ve tried many apps that help you write, but I think iWrite words is simply the best. It converts writing into a fun game and puts in a bit of fun in between as well to keep your child busy.
	b) ShapeBuilder: Simply the best puzzle solver for small kids. Clean graphics, intuitive and helped immensely with his visual problem solving skills. In this category, I also found ConnectDots to be a very nice app that in addition to being a good visual/cognitive app also helps you learn letters and numbers.
	c) Learn To Talk: When my son was learning to talk, I downloaded many apps to help him from flash cards, to other mechanisms. I landed up deleting most, but this one still exists in my iphone. Its a nice flash card based game that lets you select world complexity (one word, two words,  high impact etc).
	d) Matching Zoo: In the category of Memory Builders, you will find many apps that help your child in building his memory. Matching Zoo is one of them – its the traditional memory game that requires you to remember the position of various objects in a 2×2 grid and try to match a pair. There are many like this. My son outgrew it pretty soon, but I do think it helped.
	e) Word Cub and Build a Word are two good apps that my son enjoyed a lot in helping him with an understanding of phonics. I’d give more points to word cub. There are many other cute phonics apps, one being ABC Phonics. I downloaded the free version and my son quite liked it – phonics in a pop the balloon game fashion.
	f) On Reading Skills, I think the iPad stands head and shoulders above the iphone. Due to its form factor, it is just so much more immersive and my son actually treats it as a book. There are a lot of good e-book apps for children, but when it comes to super interactivity and graphics I thought Jack and the BeanStalk and Toy Story read along were great. But when it came to a  good variety of books, MeeGenius is excellent. All these apps let your child follow a book by highlighting and pronouncing each world clearly.
	g) Doodle Buddy is a simple, drawing app for the iPhone/iPad. It presents a blank screen. You can draw by touching on the screen and change colors and brush sizes. I found my son using this a lot, learning how to draw, how to differentiate between colors and also refine his fine motor skills (of his, umm fingers). Frankly, there may be better apps out there – just that I had this one (FYI, Brushes is too complex for a toddler)
	h) Once he understood numbers and began counting, I found Math Series to be a nice app that brought forward concepts such as number series and other number related simple concepts forward.
	i) When it comes to music playing skills, the iPad outshines the iPhone. There are many free piano apps. I happened to use Virtuoso. My son was fascinated that he could play tunes here (well, he would just bang, but try to make music). Interestingly, after I saw his interest in this digital app, I actually bought a piano for him (which he uses a LOT these days). In a way, it was an easy investment before buying a real piano.
	j) Finally, in the early days of the appstore, I downloaded a game called ‘Adam’s Game‘ which was a cute flashcard game, but not with a good voice though (accent was hard to understand), but it was pretty nice – it asked you to identify objects, basically (flash-cards). This was one of the first games my son liked and actually played it often in the first few months.

There are others that many talk about like LunchBox, PreSchool, Adventure, preschoolTap etc. They are all nice too – they mix some sort of creativity with fun. But I don’t think they were an essential part of what I saw in my specific instance.

There you have it. My thoughts on digital tools focussed on children.