×
Namespaces

Variants
Actions
(Difference between revisions)

Creating Compass in Qt and Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
somnathbanik (Talk | contribs)
(Somnathbanik -)
hamishwillee (Talk | contribs)
m (Hamishwillee - Minor tidy up)
Line 1: Line 1:
[[Category:Windows Phone]][[Category:Qt Quick]][[Category:Code Examples]][[Category:Code Snippet]][[Category:Porting]]
+
[[Category:Windows Phone]][[Category:Qt Quick]][[Category:Code Examples]][[Category:Porting]][[Category:Location]]
 
{{Abstract|This article demonstrates how to create a Compass in Qt  and WP7.}}
 
{{Abstract|This article demonstrates how to create a Compass in Qt  and WP7.}}
 
{{ArticleMetaData
 
{{ArticleMetaData
 
|sourcecode= [[Media: CompassQML.zip]] [[Media: CompassWp7.zip]]<!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|sourcecode= [[Media: CompassQML.zip]] [[Media: CompassWp7.zip]]<!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|devices= N8(Nokia Belle), Windows Phone  <!-- Devices tested against - e.g. ''devices=N95, N8'') -->
+
|devices= N8 (Nokia Belle), Windows Phone  <!-- Devices tested against - e.g. ''devices=N95, N8'') -->
|sdk= [http://www.developer.nokia.com/Develop/Windows_Phone/Tools/ Windows Phone SDK 7.1]
+
|sdk= [http://www.developer.nokia.com/Develop/Windows_Phone/Tools/ Windows Phone SDK 7.1], Qt SDK v1.2
|platform= WP7.1, Symbian^3 OS  <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
+
|platform= WP7.1, Symbian^3
|devicecompatability=  Sensors <!-- Compatible devices e.g.: All* (must have internal GPS) -->
+
|devicecompatability=  All with compass sensors in platform
 
|signing= Self-Signed <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|signing= Self-Signed <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= sensors <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= sensors <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
|keywords= Compass, Sensors<!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
+
|keywords= Compass, Sensors
|id= <!-- Article Id (Knowledge base articles only) -->
+
|creationdate= 20120416
|creationdate= 18th April, 2012<!-- Format YYYYMMDD -->
+
|author= [[User:somnathbanik]]
|author= [[User:somnathbanik]] <!-- Display as link [[User:username]] -->
+
 
}}
 
}}
 
==Introduction==
 
==Introduction==
In this article we will create a Compass  in QML using [http://doc.qt.nokia.com/qtmobility-1.2/qml-compass.html QML Compass Element] which is a part of  [http://doc.qt.nokia.com/qtmobility-1.2/index.html QtMobility 1.x] and  for WP7 we will use [http://msdn.microsoft.com/en-us/library/microsoft.maps.mapcontrol.navigation.compass.aspx#feedback Compass Class].  This is a magnetic compass used to determine the direction of the earth’s magnetic north pole.
+
In this article we will create a Compass  in QML using [http://doc.qt.nokia.com/qtmobility-1.2/qml-compass.html QML Compass Element] which is a part of  [http://doc.qt.nokia.com/qtmobility-1.2/index.html QtMobility 1.x] and  for WP7 we will use [http://msdn.microsoft.com/en-us/library/microsoft.maps.mapcontrol.navigation.compass.aspx#feedback Compass Class].  This is a magnetic compass used to determine the direction of the earth's magnetic north pole.
  
 
[[File: CompassQML.png|thumb|none|201px|Compass using QML ]]
 
[[File: CompassQML.png|thumb|none|201px|Compass using QML ]]
Line 38: Line 37:
 
     }
 
     }
 
</code>
 
</code>
We add an [http://doc.qt.nokia.com/4.7/qml-image.html Image] to create the compass needle and rotate the [http://doc.qt.nokia.com/4.7/qml-image.html Image] with  its degrees(angle) and orientation.
+
We add an [http://doc.qt.nokia.com/4.7/qml-image.html Image] to create the compass needle and rotate the [http://doc.qt.nokia.com/4.7/qml-image.html Image] with  its degrees (angle) and orientation.
 
<code css>
 
<code css>
 
Image {
 
Image {

Revision as of 04:32, 19 April 2012

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
SDK: Windows Phone SDK 7.1, Qt SDK v1.2
Devices(s): N8 (Nokia Belle), Windows Phone
Compatibility
Platform(s): WP7.1, Symbian^3
Windows Phone 8
Windows Phone 7.5
Device(s): All with compass sensors in platform
Platform Security
Signing Required: Self-Signed
Capabilities: sensors
Article
Keywords: Compass, Sensors
Created: somnathbanik (16 Apr 2012)
Last edited: hamishwillee (19 Apr 2012)

Contents

Introduction

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 determine the direction of the earth's magnetic north pole.

Compass using QML

Implementation

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.

Rectangle
{
id:circle
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 on the device screen.

Text {
id:degreeText
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 Class which defines the outline of the compass.

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

To create the compass needle we used Line Class.

<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 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);
compass.Start();
}
else
{
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 needle 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 is displayed in a TextBlock. We also add Microsoft.Xna.Framework reference into our project to find out the needle direction using MathHelper class.

Source Code

188 page views in the last 30 days.
×