The Visual Element

Now that we had the backbone code that will parse the XML we could start on the visual side of things. We had the idea of using blocks to represent how long a device had been active. The wider the box the longer the device had been around the area we were collecting data in. So Jon, once again the brighter half of our team, came up with a function that would do this.

function barGen():void {
for (var z:Number = 1; z < device.length; z++) {

var myBar:mcBar = new mcBar();
this.addChild(myBar).name = "myBar" + z;
myBar.y= (z * 8);
var tempX = translateRange(parseInt(Earliest),parseInt(Latest),0,stage.stageWidth,parseInt(Fdetect[z]));
myBar.x = tempX;
myBar.width = (translateRange(parseInt(Earliest),parseInt(Latest),0,stage.stageWidth,parseInt(Ldetect[z])) - tempX);
myBar.height = 5;
}

//getChildByName("myBar" + z)

}
function translateRange(a1: Number, a2: Number, b1: Number, b2: Number, num:Number):Number {
var c:Number = ((num - a1) * (b2 -b1)/(a2 - a1)) + b1;
return c;
}

What this code does is it creates a variable called myBar which takes a movie clip, in this case called mcBar, and produces a new mcBar each time. Each bar represents a particular bluetooth device. Then using translateRage (the created function you can see that essentially maps the numbers) it edits the width of the bars compared to the numbers that have been stored in the Earliest and Latest variables. Thus making the the bar wider depending on the time this particular device has been active. The height of each bar is manually set so all of the bars are the same.

So using some dummy data we managed to get something looking like this:

Our Project: The Beginning

Now that we've decided we are not using Arduino we needed to decide on what we will use for our visual element. We have decided that using flash and actionscript is the way forward. Jon, being the more technical part of the team, has come up with some code that will parse the XML that will be produced by the program we are using:

xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
xmlLoader.load(new URLRequest("data.xml"));

function LoadXML(e:Event):void {
xmlData = new XML(e.target.data);
Parse(xmlData);
}

var address = new Array(); ...

function Parse(Input:XML):void {
var Children:XMLList = Input.item.children();

for each (var Info:XML in Children) {

if (Info.name() == "address") {
address[i] = Info;
}

Fdetect[i] = temp.substring(11,13) + temp.substring(14,16) + temp.substring(17,19);

if (Fdetect[i] <>
style="font-size:78%;">Earliest = Fdetect[i];
}

Apart from parsing the XML this code also picks out data by its tags and puts it into the array you can see. An 'if' statement is used to cycle the array index. The Fdetect part you can see is uses substring to extract the date and time and to put them next to eachother so they are easier to read. The final 'if' statement checks if a date and time is more recent than the currently stored date and time for a particular device. If it is then it replaces the stored value. This allows flash to find the earliest and latest time for all of the data which will prove useful for the visual side of things.

Software Output

As stated in a previous post we have chosen our software that will collect our data. We have no deefinitely chosen our output to be XML that we will then try to parse into flash (more on this coming later). Below is a standard XML output from the software provided to me by Jon: