Revision as of 17:46, 18 April 2012 by somnathbanik (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Creating Compass in Qt and Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

This article demonstrates how to create a Compass in Qt and WP7.

WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
Devices(s): N8(Nokia Belle), Windows Phone
Platform(s): WP7.1, Symbian^3 OS
Windows Phone 8
Windows Phone 7.5
Device(s): Sensors
Platform Security
Signing Required: Self-Signed
Capabilities: sensors
Keywords: Compass, Sensors
Created: somnathbanik (18 Apr 2014)
Last edited: somnathbanik (18 Apr 2012)



In this article we will create a Compass in QML using QML Compass Element which is a part of QtMobility 1.x and for WP7 we will use Compass Class. This is a magnetic compass used to deter mine the direction of the Earth’s magnetic north pole.

Compass using QML


Let’s create an empty project for both Qt and WP7. First we will work on Qt project and then will move on to WP7 project.

Qt Project (MainPage.qml)

Let’s first create a circle using Rectangle Element as shown in the above figure. This circle will determine the compass outline.

width: 250
height: 250
color: "transparent"
border.color: "green"
border.width: 3
radius: width*0.5
anchors.centerIn: parent

We add an Image to create the compass needle and rotate the Image with its degrees(angle) and orientation.

Image {
id: arrowImage
anchors.bottom: circle.verticalCenter
anchors.horizontalCenter: circle.horizontalCenter
height: circle.paintedHeight / 2
fillMode: Image.PreserveAspectFit
source: "upload.png"
rotation: -degree - orientationAngle
transformOrigin: Item.Bottom

QML Compass Element is used to get the change in magnetic north reading in the Compass.

Compass {
id: compass
active: true
onReadingChanged: {mainPage.degree = compass.reading.azimuth; }

A Text element is being added to display the magnetic north value of the compass change.

Text {
text: degree + " °N"
color: platformStyle.colorNormalLight
font.pixelSize: 35
anchors.top: parent.top
anchors.topMargin: 60
anchors.right: parent.right
anchors.rightMargin: 30

WP7 Project (MainPage.xaml)

To build a similar interface like Qt, let’s first create a circle using Ellipse which defines the outline of the compass.

<Ellipse StrokeThickness="2" x:Name="circle" Width="400" Height="400" 
Margin="0,90,0,0" Fill="Black">
<SolidColorBrush Color="{StaticResource PhoneAccentColor}" />

To create the compass needle we used Line.

<Line  x:Name="line" X1="240" Y1="350" X2="240" Y2="270"  Stroke="{StaticResource  PhoneForegroundBrush}" StrokeThickness="4"></Line>

Now we add the reference Microsoft.Devices.Sensors and Microsoft.Xna.Framework to

  initialize and detect the compass presence in the device.
Compass compass; 
if (Compass.IsSupported)
compass = new Compass();
compass.TimeBetweenUpdates = TimeSpan. FromSeconds(1);
compass.CurrentValueChanged += new EventHandler<SensorReadingEventArgs<CompassReading>>(compass_CurrentValueChanged);
MessageBox.Show("Device doesn't suport compass");

TimeBetweenUpdates property will update the compass data in every second. CurrentValueChanged event handler will give the compass value each time there is any change in the compass position. And then we call the Start() method to start the compass. The change in compass value is then passed to the compass_CurrentValueChanged() method. Which then pass to a separate thread using Dispatcher.BeginInvoke() method.

void compass_CurrentValueChanged(object sender, SensorReadingEventArgs<CompassReading> e)
Dispatcher.BeginInvoke(() => UpdateLine(e.SensorReading));
private void UpdateLine(CompassReading e)
degreeText.Text = e.MagneticHeading.ToString("0");
line.X2 = line.X1 - (200 * Math.Sin(MathHelper.ToRadians((float)e.MagneticHeading)));
line.Y2 = line.Y1 - (200 * Math.Cos(MathHelper.ToRadians((float)e.MagneticHeading)));

The MagneticHeading gives the magnetic north pole value of the compass and displayed in the TextBlock. To find out the needle direction we used MathHelper class.


Like other sensors like Accelerometer, Gyroscope, Compass can also be used to get user’s device movement.

Source Code

174 page views in the last 30 days.