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: