In this recipe, our final recipe for our chapter on Maps and GPS, we will be using the inbuilt device compass to determine your heading. We'll present that heading using an image of an arrow to represent the direction visually.
Complete source code for this recipe can be found in the /Chapter 3/Recipe 7 folder.
Complete source code for the Exercise Tracker application built in this chapter can be found in the /Chapter 3/Exercise Tracker folder.
Add the following code to your app.js
file, just before you perform a win1.open() method call at the end of the file:
//this image will appear over the map and indicate our
//current compass heading
var imageCompassArrow = Titanium.UI.createImageView({
image: 'images/arrow.gif',
width: 50,
height: 50,
right: 25,
top: 5
});
win1.add(imageCompassArrow);
//how to monitor your heading using the compass
if(Titanium.Geolocation.hasCompass)
{
//this is the degree of angle change our heading
//events don't fire unless this value changes
Titanium.Geolocation.headingFilter = 90;
//this event fires only once to get our intial
//heading and to set our compass "arrow" on screen
Ti.Geolocation.getCurrentHeading(function(e) {
if (e.error) {
return;
}
var x = e.heading.x;
var y = e.heading.y;
var z = e.heading.z;
var magneticHeading = e.heading.magneticHeading;
accuracy = e.heading.accuracy;
var trueHeading = e.heading.trueHeading;
timestamp = e.heading.timestamp;
var rotateArrow = Titanium.UI.create2DMatrix();
var angle = 360 - magneticHeading;
rotateArrow = rotateArrow.rotate(angle);
imageCompassArrow.transform = rotateArrow;
});
//this event will fire repeatedly depending on the change
//in angle of our heading filter
Titanium.Geolocation.addEventListener('heading',function(e) {
if (e.error) {
return;
}
var x = e.heading.x;
var y = e.heading.y;
var z = e.heading.z;
var magneticHeading = e.heading.magneticHeading;
accuracy = e.heading.accuracy;
var trueHeading = e.heading.trueHeading;
timestamp = e.heading.timestamp;
var rotateArrow = Titanium.UI.create2DMatrix();
var angle = 360 - magneticHeading;
rotateArrow = rotateArrow.rotate(angle);
imageCompassArrow.transform = rotateArrow;
});
}
else
{
//log an error to the console if this device has no compass
//older devices such as the iphone 3g don't have this
Titanium.API.info("No Compass on device");
//you can uncomment this to test rotation when using the emulator
//var rotateArrow = Titanium.UI.create2DMatrix();
//var angle = 45;
//rotateArrow = rotateArrow.rotate(angle);
//imageCompassArrow.transform = rotateArrow;
}We are first creating an imageView and setting its image property to our arrow image. Initially, this will face towards the top of the screen, and will indicate north. This imageView is then added to our Window object. The heading source code for this recipe is performing two similar tasks: one gets our initial heading and the second fires on set intervals to get our current heading. When the heading is obtained for either the current position or the new position, we use the magneticHeading property to determine the angle (direction) in which we are facing, and use a simple transformation
to rotate the arrow in that direction.
Note
Don't worry if you don't understand what a 2D matrix is, or how the transformation is performing the rotation of our image! We will be covering transformations, rotations, and animations in Chapter 7, Creating Animations, Transformations and Understanding Drag-and-Drop.