So we all know and love our Android notification bar. So I just wanted to post a quick example application to show how easy it is to display a local notification.

The process runs something like this:

• retrieve a reference to the NotificationManager
• create a Notification
• notify the manager of the notification you've created

The Notification class, at it's simplest consists of an image icon and 3 pieces of text, one for the ticker, one as the title and the last as the content text.

package com.distriqt.mobile.experiments;
 
import android.app.Activity;
import android.app.Notification;
import android.app.NotificationManager;
import android.app.PendingIntent;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
 
public class NotificationExperimentActivity extends Activity
{
    private static final int HELLO_ID = 1;
 
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        //
	//  Look up the notification manager server
        NotificationManager nm =
          (NotificationManager) getSystemService(NOTIFICATION_SERVICE);
 
        //
        //  Create your notification
        int icon = R.drawable.icon;
        CharSequence tickerText = "Hello";
        long when = System.currentTimeMillis();
 
        Notification notification =
            new Notification( icon, tickerText, when);
 
        Context context = getApplicationContext();
        CharSequence contentTitle = "My notification";
        CharSequence contentText = "Hello World!";
        Intent notificationIntent =
            new Intent(this, NotificationExperimentIntent.class);
        PendingIntent contentIntent =
            PendingIntent.getActivity(this, 0, notificationIntent, 0);
 
        notification.setLatestEventInfo(
            context,
            contentTitle,
            contentText,
            contentIntent);
 
        //
        //  Send the notification
        nm.notify( HELLO_ID, notification );
    }
}
 

The Android developer documentation goes through all of this in detail here.

So as many people know, I've been promising an update to the KML Loader for a while now, and even to the point where I've had some local revisions and haven't had the time to check them in (I know, I know, bad practice!)

The major update has been to enable the ability to load linked assets. Initially this just extends to ground overlays and custom icons, but now that I have the structure setup to do this I'll be able to add in linked files and styles easily.

Other updates include a series of bug fixes, features with multiple geometries now load in correctly and I've updated the utility library to correctly parse the newer OGC KML namespace.

Some things to note:

• I've added a trunk directory to keep the main head revision separate from the tag tree
• I've removed the included version of the google maps utility library. I've committed in some changes to this library so I didn't want to have to maintain it in two places, so you'll now have to go to the google maps utility library on google code here (I'll package it all up at the end of this post as well).
• I've tagged the previous version of the library if you wish to keep using it, you'll find it at: http://svn.distriqt.com/public/trunk/gmaps/tags/R20101004_gmaps_utils_v1.0
• I've used the BulkLoader by Arthur Debert and have included it in the repository. This is used to load all the linked assets.

The functionality should be exactly the same as the previous version, so you can still refer to the post on interactions, about the SimpleKMLLoader and the initial post about the KmlLoader.

The major change is that you now need to grab the gmaps utility library separately and put both libraries in your source tree.

svn co http://svn.distriqt.com/public/trunk/gmaps/trunk/ distriqt-gmaps
svn co http://gmaps-utility-library-flash.googlecode.com/svn/trunk/ gmaps-utility-library-flash-read-only

You'll end up with a src directory in both of these checkouts that you need to add to your source path for your projects.

Here are the current packages (v1.2) distriqt-gmaps-kmlloader-v1.2 and google-utility-library-flash.

Let me know if you find it useful!

For an upcoming project we needed to stream content from the user's webcam to be recorded on the server. In theory this sounded like a basic operation, having used FMS to this end before, but actually installing and setting up the Red5 server proved to be a little tricky. So I just wanted to outline the process I went through to get a Red5 Server running on ubuntu and how to setup your first recording stream.

Red5 is a powerful Java based video streaming and multi-user solution for the Flash Player. Red5 includes support for the latest multi-user API’s including NetConnection, NetStream and SharedObject’s while providing a powerful RTMP / Servlet implementation. It is basically an open source Flash Media Server.

We're going to go through two major steps here, firstly installing Red5 on Ubuntu and then building a simple application to record the webcam.

Installing Red5

For this installation we're going to use a stock Ubuntu Server installation (8.04 Hardy Heron). We installed LAMP as well for the project but it's not required for Red5. Firstly we need to install a few dependencies including the Java runtime environment and the Java development kit (and yes these are terminal commands so get it up and running):

sudo apt-get install java-package sun-java6-jdk sun-java6-jre
sudo apt-get install subversion ant

Next we need to grab the code base for Red5. We tried the trunk version first but had some issues with it (as you'd expect from a HEAD revision) so ended up using v0.9.1. You can try other versions of the server by browsing the repository and replacing the reference in the svn checkout below:

svn co http://red5.googlecode.com/svn/java/server/tags/0_9_1/ ~/red5

Now we build using Ant:

export JAVA_HOME=/usr/lib/jvm/java-6-sun
export ANT_HOME=/usr/share/ant/
cd ~/red5
/usr/share/ant/bin/ant

Make sure there were no errors during the build. If there were consult the red5 wiki for help. Install:

sudo mkdir /usr/share/red5
sudo cp -R ~/red5/dist/* /usr/share/red5/.
sudo chmod 755 /usr/share/red5/red5.sh

Start the Red5 server:

export RED5_HOME=/usr/share/red5
/usr/share/red5/red5.sh

Next we need to create the startup script. This script will allow you to get the server starting on reboot etc. Put the following text into the file /etc/init.d/red5 and make the file executable sudo chmod 755 /etc/init.d/red5.

#!/bin/sh
# init script for Red5
# /etc/init.d/red5
 
RED5_USER=root
RED5_HOME=/usr/share/red5
RED5_PROG=red5
 
test -x $RED5_HOME/$RED5_PROG.sh || exit 5
 
case "$1" in
     start)
         echo -n "Starting Red5"
         echo -n " "
         cd $RED5_HOME
         su -s /bin/bash -c "$RED5_HOME/$RED5_PROG.sh &" $RED5_USER
         sleep 2
         ;;
     stop)
         echo -n "Shutting down Red5"
         echo -n " "
         su -s /bin/bash -c "killall -q -u $RED5_USER java" $RED5_USER
         sleep 2
         ;;
     restart)
         $0 stop
         $0 start
         ;;
esac

Now you can start/stop/restart from the command line by using:
sudo /etc/init.d/red5 [start/stop/restart]

Lastly once you've got the server running, you can browse to the test page on your server http://localhost:5080 and you should see:

If you can't see this it and you've confirmed the Red5 server is running it could be a firewall issue. You may need to alter the IPTables on your machine but that's not going to be covered here.

Lastly we need to install the actual streaming application on our Red5 Server. Navigate to http://localhost:5080/installer/, select the oflaDemo and click Install.
To test it installed correctly, navigate to http://localhost:5080/demos/ofla_demo.html (correct the server name in the top right) and hit connect. You should see a list of available videos and a green light in the top right.

Congratulations you're all up and running with a Red5 Server!

The following class shows a very simple example of starting a streaming feed to the server and then streaming the same data back from the server into a Video object on the stage.

The fundamentals are very simple:

• Create a NetConnection object and connect to the server
• Create a NetStream when the connection succeeds and publish the camera feed to the stream as a "record" type

package
{
	import flash.display.Sprite;
 
	import flash.net.NetConnection;
	import flash.net.NetStream;
	import flash.events.NetStatusEvent;
 
	import flash.media.Camera;
	import flash.media.Video;
 
	public class Red5Experiment extends Sprite
	{
		//
		//	Constants
		public static const RED5_URL	: String = "rtmp://SERVERNAME/oflaDemo/test/";
 
		//
		//	Variables
		private var _netConnection	: NetConnection;
		private var _netStream		: NetStream;
		private var _recvStream		: NetStream;
 
		private var _url		: String = RED5_URL;
		private var _filename		: String = "test-red5";
 
		private var _video		: Video;
 
		public function Red5Experiment()
		{
			_netConnection = new NetConnection();
			_netConnection.connect( _url );
			_netConnection.addEventListener( NetStatusEvent.NET_STATUS, netStatusHandler, false, 0, true );
 
			_video = new Video();
			addChild( _video );
		}
 
		////////////////////////////////////////////////////////
		//	FUNCTIONALITY
		//
		private function start():void
		{
			//
			//	Setup the camera
			var cam:Camera = Camera.getCamera();
			cam.setLoopback(true);
			cam.setMode(176,144,15);
			cam.setKeyFrameInterval(10);
			cam.setQuality(0,70);
 
			//
			//	Start publishing the video stream
			_netStream = new NetStream(_netConnection);
			_netStream.addEventListener( NetStatusEvent.NET_STATUS, netStatusHandler, false, 0, true );
			_netStream.attachCamera( cam );
			_netStream.publish(_filename, "record");
 
			//
			//	Grab live stream back from server
			_recvStream = new NetStream(_netConnection);
			_recvStream.play(_filename);
			_video.attachNetStream(_recvStream);
 
			//
			//	Alternatively, Use the local camera feed
//			_video.attachCamera(cam);
		}
 
		////////////////////////////////////////////////////////
		//	EVENT HANDLERS
		//
		private function netStatusHandler( event:NetStatusEvent ):void
		{
			trace( "Red5Experiment::netStatusHandler():"+event.info.code );
			switch ( event.info.code )
			{
				case "NetConnection.Connect.Success":
					start();
					break;
			}
		}
 
	}
}

The files are recorded to a directory within the webapps folder on your server. If you've followed the paths above you'll find the file /usr/share/red5/webapps/oflaDemo/streams/test/test-red5.flv on your server.

You now should have a complete streaming / recording media setup. All running off an open source server!

EDIT: I've created a zip of the sample application files: red5_sampleapplication

I've had a few requests asking about how to interact with the KML once you've loaded it onto the map. It's really quite an easy step once you've got the KML on there but I'll show you how in this simple example.

Firstly if you haven't read the Simple KML Loader post then head over there first. It explains how to get that KML file loaded and displayed on your map.

The objective of this simple example is to show an info window popup when we rollover one of the objects in the kml, showing the name of the kml object in the window.

The code for this example is in our svn:

svn co http://svn.distriqt.com/public/trunk/gmaps/examples/kmlloader/

Make sure you have our SimpleKmlLoader library in your project.

To create the loader, load the kml and have it added to your map:

var _loader:SimpleKmlLoader = new SimpleKmlLoader( _map, true );
_loader.addEventListener( Event.COMPLETE, loader_completeHandler );
_loader.load( _file );
 

Now on the complete handler you can add the interactions:

function loader_completeHandler( _event:Event ):void
{
	// At this point generally this objects array
	//   will simply be the base object of the KML
	addInteraction( _loader.objects );
}
 
/**
 * Add interaction to every object in the array
 */
function addInteraction( _objects:Array ):void
{
	for each (var _object:KmlDisplayObject in _objects)
	{
		_object.interactive = true;
		_object.addEventListener(MapMouseEvent.ROLL_OVER, object_rollOverHandler, false, 0, true );
		_object.addEventListener(MapMouseEvent.ROLL_OUT, object_rollOutHandler, false, 0, true );
 
		// Process any children
		addInteraction( _object.children );
	}
}
 
function object_rollOverHandler( _event:MapMouseEvent ):void
{
	// show an info panel...
	var _object:KmlDisplayObject = KmlDisplayObject(_event.currentTarget);
	_map.openInfoWindow( _object.latLng, new InfoWindowOptions({content:_object.name}) );
}
 
function object_rollOutHandler( _event:MapMouseEvent ):void
{
	_map.closeInfoWindow();
}

Now when you run with this code you should see the name of the kml object appear in the info window when you rollover the object. This is of course a very simple example, and much more can be done with this, but it is a good point to introduce the concept of interactions.

Recently we've been using some of our own tools in other projects and found some room for improvement on the KML Loader we developed. In particular we wanted a simple class that could handle all the processing from the loader, adding the resulting overlays to the google map. Also we needed it to load in some of the styles, such as colours and line types.

So we've expanded our KmlLoader class and provided a few additional utility classes.

Before we get into it, to get the latest version, just checkout from our public svn:

svn co http://svn.distriqt.com/public/trunk/gmaps

The most useful is the SimpleKmlLoader class. This simplifies the loading and display of a kml file to a single line of code.

 new SimpleKmlLoader( _map, true ).load( _file );

Generally you'll probably want to do something more with the kml than just display it, but this is handy for those quick display situations. You'll probably more want to do something like this, adding an event listener for when the file is loaded:

var _loader:SimpleKmlLoader = new SimpleKmlLoader( _map, true );
_loader.addEventListener( Event.COMPLETE, loader_completeHandler );
_loader.load( _file );

The second parameter provided to the constructor is an option to automatically add the objects to the map when the load is complete, so you no longer have to worry about adding the features to the map.

Once the loader has completed you'll have access to all the objects loaded from within the file. Each of the Kml Objects is represented by the KmlDisplayObject class, which has automatically created the appropriate type of map feature to add when required.

The important properties are SimpleKmlLoader.objects which is an array of KmlDisplayObject and then KmlDisplayObject.children contains all the children of that object (again an array of KmlDisplayObject).

import com.distriqt.gmaps.kml.utils.*;
/**
 * Iterates over the objects and traces out the name of
 *   each and recurses into the children of each object
 * @param _objects	An array of KmlDisplayObjects
 * @param _prefix	A string to prefix to the output trace
 */
function traceObjects(
    _objects:Array /* of KmlDisplayObject */,
    _prefix:String = "" ):void
{
	for each (var _object:KmlDisplayObject in _objects)
	{
		trace( _prefix+" "+_object.name );
		traceObjects( _object.children, _prefix + "\t" );
	}
}
 
function loader_completeHandler( _event:Event ):void
{
	traceObjects( _loader.objects );
}
 

The trace output from the function above would look something like the below:

 districts for BSI
	 kangaroo ground
	 kinglake west
	 kinglake
	 ...

There is an example usage of the class in the svn, gmaps/examples/kmlloader/. It will load the kml file shown in the image above.

We've also added some Kml editing and saving tools into the svn which we'll leave those for the subject of another post but feel free to check out the code.

Lately we have been playing around a fair bit with some google flash maps and have been amazed by the power and simplicity of the API. We used it heavily in the ABC Black Saturday site using custom markers with images and even a scrolling grid.

We were faced with another challenge of being able to mark out areas (districts) within Victoria that represented the most affected regions. These regions were sometimes complex and we needed to be able to update them simply and quickly as the need arose. The regions weren't to be displayed directly but used for two major items. Firstly to focus the map on a particular region, by moving the view to the region contained by these districts, and secondly, to assign events/markers to a district by calculating if they were contained within the bounds of the district lines.

The solution ended up being ridiculously simple. We created a shared map on google maps, with shapes defining the districts. We then could export from this online map to kml by grabbing the view in Google Earth link and changing the output parameter from nl to kml. This gave us the map of the districts in a nice kml format.

Once we had the map in kml we needed to load in the objects and create overlays for google maps. Surprisingly there wasn't a simple "load kml" function in google maps, but there are some nice kml parsing utilities in the google map extras library. So we created a kml loader class that loads the kml file, extracts the objects and creates overlays for placement on a google map. Hopefully it can be helpful to others, check it out from the following:

svn co http://svn.distriqt.com/public/trunk/gmaps


Usage:

Firstly create the loader and start the load of your kml file. You'll need to add a listener to the COMPLETE event to process the code on completion.

import com.distriqt.gmaps.kml.utils.*;
 
var kmlLoader:KmlLoader = new KmlLoader();
kmlLoader.addEventListener( Event.COMPLETE, kmlLoader_completeHandler );
kmlLoader.load(  "your-kml-file-location.kml" );

Once the loading is complete you'll have to re-curse through the object list in the loader, adding the objects to your map. Note the "map" variable in the below should be your google map instance.

function kmlLoader_completeHandler( _event:Event ):void
{
	for each (var _object:KmlDisplayObject in KmlLoader(_event.currentTarget).objects)
		addObject( _object );
}
function addObject( _object:KmlDisplayObject ):void
{
	// It may just be a container with child elements
	//    so check if there is an overlay
	if (_object.overlay != null)
	{
		// Here you can add the kml object to your map
		map.addOverlay( _object.overlay );
	}
	// Add the children
	for each (var _child:KmlDisplayObject in _object.children)
		addObject( _child );
}

Let us know if you find it useful.