marketing company nyc marketing chicago los angeles seo company marketing miami

Arduino -> Flash serial data transmission

First foray into hardware programming and it turns out trying to get Arduino data into Flash is trickier than expected. A couple of options seem to be available:

1) Using a third party lib such as as3glue which takes the hassle out of making the two platforms communicate.
or
2) Awkwardly handle the serial transmissions manually with attention to buffering all the received data.

The first approach is straightforward to get up and running thanks to this post on KasperKamperman.com or see here. The second approach needs more thought in order to ensure all data is received correctly. If you want to be able to data from the Arduino without using an extra library, read on.

In AS3 we use the Socket class with the readUTFBytes() method and socketData event to get the information from serial. You can the Socket class documentation in the AS3 reference here. The socketData event fires when data is sent to the socket. But the event can be fired multiple times meaning data is often split up and needs to be reconstructed in Flash to get the correct variables. This has been noted in this post by iestyn, who also mentions that AS2 behaves more predictably. As this is probably a fairly standard buffering issue for hardware programming it is presumably applicable across a range of platforms.

In this demo the Arduino writes data to the serial and Flash reads it and stores it in an array called values. The values array is periodically output using a timer. The data is just an integer counter so it easy to see when the data is correctly received by Flash (i.e. in the correct order and without missing values).

Download the zip of the Arduino to Flash code here.

Note: You must correctly configure SerProxy by editing the SerProxy.cfg to be set to the right COM port (in my case 5333). Make sure the AS3 is using the same port number in the Socket constructor.

To run the demo:
1.) Upload the Arduino code
2.) Start SerProxy.exe
3.) Compile the Flash

I’ve used Flash CS3 Pro (Flash 9) and a Arduino Duemilanove (arduino-0018).

The Arduino code:

//MapToPixel.com
//31 July 2010
//Prints an incremental counter values to the Serial
//port separated by commas "," with an "e" to
//signify the end of the line. Uploading this to the
//Arduino and monitoring the serial port should
//give something like:
//1,2,3e4,5,6e7,8,9e10,11,12e13,14,15e16,17,18e

int count = 0;

void setup()
{
  Serial.begin( 9600 );
}

void loop()
{
   count = count + 1;
   Serial.print( count );
   //Use a comma to so the data can be split
   Serial.print( "," );

   //And again...
   count = count + 1;
   Serial.print( count );
   Serial.print( "," );

   //Once more...
   count = count + 1;
   Serial.print( count );
   //But this time print an E to signify the end of the line
   Serial.print( "e" );

   delay( 500 );
 }

The AS3 code:

import flash.events.*;
import flash.net.Socket;
import flash.utils.Timer;
import flash.events.TimerEvent;

trace("Starting Arduino to Flash demo...");

var socket:Socket = new Socket("localhost",5333);
var count:int = 0;

//lineBefore is a temporary store of an incomplete data line found in the buffer not yet saved to the final values list
var lineBefore:String;

//buffer used to store data from socket
var buffer:String;

socket.addEventListener(ProgressEvent.SOCKET_DATA, socketBufferHandler);

//Global storage of final values
var values:Array = new Array();

function socketBufferHandler(event:ProgressEvent):void {
	var eol:Number;

	//Read the socket data into the buffer
	buffer = socket.readUTFBytes(socket.bytesAvailable);

	//Sometimes the socket maybe emtpy so first check it's not null
	if (buffer != null) {
		//Now check if the end of line flag is present in this data string
		eol = buffer.indexOf('e');
		if (eol == -1) {
			//The end of line flag was not found...
			//so save this buffer data to a global variable so we can access it later
			lineBefore = buffer;
		} else {
			//The end of line flag was found...
			//so substring the data to get the values before the end of line flag
			var buff2 = buffer.substring( 0, eol);

			//Can now start to think about saving the data...
			//but we need to check if there is any data left from a previous firing of this event handler (i.e. stored in lineBefore)
			if (lineBefore == null) {
				//No outstanding data to save from previous event handler
				//Save this to the global array of data
				values[count] = buff2;
				count++;
			} else {
				//There is some outstanding data from before. Save this data as well as the new stuff
				values[count] = lineBefore + buff2;
				count++;
				//Now set lineBefore to null to ensure it is not used again (results in duplicates of data)
				lineBefore = null;
			}
			//Set buffer to null to make sure it's clear for the next event
			buffer = null;
		}
	//trace(values.length);
	}
//trace(values[values.length-1]);
} //End socketBufferHandler

var myTimer:Timer = new Timer(2000, 1000);
myTimer.addEventListener(TimerEvent.TIMER, timerHandler);
myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, completeHandler);

function timerHandler(e:TimerEvent):void{
	trace("values are \n" + values);
}

function completeHandler(e:TimerEvent):void {
	trace("timer complete");
}

myTimer.start(); 

GISRUK 2010 Rate My Place

I presented the Rate My Place project at the GISRUK 2010 conference at UCL a few weeks ago. The slides are now up on SlideShare. A demo video of the system is also available here or see below.

Rate My Place

Rate My Place, which has been in the works for some time, is now out on the Web. The project is essentially a Facebook application (see the FB profile here: here) allowing users to rate areas on a map with a spray can tool. The application has been developed with Jeremy Morley and is run through the University of Nottingham (Centre for Geospatial Science) and Ordnance Survey Research.

The idea of the project is to extract people’s perceptions of geographic boundaries in order to capture geographic data. The spray can tool is operated by the user to mark out areas on the map according to whether to their rating – “love”, “like”, “dislike” or “hate”. This creates an extent which the user associates with a placename. This extent is then aggregated in real-time into both an average rating map overlay and also stored individually in a database. Individual extents can then later be extracted and combined together to give a collaborative definition of a neighbourhood.

Like Flickr Shapefiles, Rate My Place is concerned with vernacular geography. While not only helping to further understanding of people’s geographic knowledge, this kind of data can be used to build other systems. Personalised or local search algorithms can integrate these perceptions to provide more relevant results.

Currently, the application is currently set up to allow users to rate areas of Europe but could be extended further. The only real constraint is disk space and some fairly hefty/lengthy processing time to generate blank tiles of the areas.

Flickr Shapefiles browser

I’ve revised my Flickr Shapefiles program to allow greater user interaction. This new version allows the user to query the Flickr Shapefiles dataset using a bounding box and selection of the appropriate place type (Neighbourhood, Locality, Region, Country, Continent). I’ve also changed the base mapping. The previous version of the project used the Microsoft Hybrid base map but I’ve now replaced this with my own Cloudmade style.

Using the bounding box it’s possible to browse the Shapefiles available for an area quite easily. However marking out a large area can generate a huge list of Shapefiles particularly in more populated areas. Hence loading times might be quite long at more zoomed out scales and may slow down some machines. I’ve put some fairly rudimentary stops to avoid using larger scale Flickr place types at smaller map scales.

Some example images…

paris

europe

africa

Click the image below to start the full application. The AS3 code will appear here at some point soon but it needs a bit of a tidy up first…

Wonderfl

Wonderfl is free online editor and compiler of AS3 code. The site incorporates a basic but functional development environment for users to write/paste their own programs or to edit (“fork”) code submissions of others. Although AS3 apps can already be created without paying for Flash or Flex Builder (a free Flex compiler is available from Adobe), the site offers a very useful environment for quickly testing ideas and finding code examples.

Some extra AS3 libraries are already included on the system and extra ones can be requested or submitted. I requested ModestMaps, Umap and Google Maps for Flash a few weeks back which were added within a few days and I’ve now got around to uploading my FlickrShapefiles example. You can find it here.

Hello FlickrShapefiles…

Flickr Shapefiles are a set of polygons generated from the geo-tags of photos on Flickr. Using the names assigned by people to their own images the dataset offers boundaries of loads of places around the world. The code.flickr blog has more info and details of their generation. The idea is that using people’s tags of locations to form boundaries gives a large dataset of where people think particular places are.

The Boundaries project uses Flick Shapefiles to show neighbourhoods and their neighbouring places. Other than that there isn’t a huge amount of examples on the web.  I’ve put together an example that uses ModestMaps and the Flickr API to display the Shapefiles in Flash. The polygons are retrieved using a bounding box query to the Flickr API, decoded from JSON, drawn and may be identified with a mouse hover.

It’s work in progress and a bit buggy in places but I’m hoping to add in some other useful features in future like a link to download a particular Shapefile. The aim is to eventually enable the entire viewport to be covered with the Flickr polygons. A couple of issues need to be overcome. Firstly, the Flickr API has a maximum bounding box size stopping the retrieval of many polygons. This should be straightforward to address by making multiple requests. Secondly, there will probably be performance issues arising from drawing so many Shapefiles, but that’s why I chose to use Flash over JS – it should be possible to draw more polygons efficiently.

A bit more detail on the code…
The program uses the flickr.places.placesForBoundingBox call of the Flickr API. This returns the information of places within a bounding box for a particular place type (neighbourhood, locality, county, region, country, continent). I’ve hard-coded it to neighbourhood scale for the moment, although zooming out to a country-level and moving outside cities does seem to load smaller scale areas. WOEIDs (Where on earth IDs) are used to display and identify places. The code also demonstrates how to get point (uses a custom class: CrossMarker.as) and polygon markers working ModestMaps. A zip of the AS3 files and .fla is available here and I hope to add the project to wonderfl soon.