×
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 -)
 
somnathbanik (Talk | contribs)
(Somnathbanik -)
Line 16: Line 16:
 
}}
 
}}
 
==Introduction==
 
==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 deter mine 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|201|Compass using QML]]
 
[[File: CompassQML.png| thumb|201|Compass using QML]]
 +
 
==Implementation==
 
==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.
 
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)===
 
===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.  
+
Let’s first create a circle using [http://doc.qt.nokia.com/4.7/qml-rectangle.html Rectangle] Element as shown in the above figure. This circle will determine the compass outline.  
 
<code css>
 
<code css>
 
Rectangle
 
Rectangle
Line 36: Line 38:
 
     }
 
     }
 
</code>
 
</code>
We add an Image to create the compass needle and rotate the 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 {
Line 49: Line 51:
 
     }
 
     }
 
</code>   
 
</code>   
QML Compass Element  is used to get the change in magnetic north reading in the Compass.  
+
[http://doc.qt.nokia.com/qtmobility-1.2/qml-compass.html QML Compass Element] is used to get the change in magnetic north reading in the Compass.  
 
<code css>
 
<code css>
 
Compass {
 
Compass {
Line 57: Line 59:
 
     }
 
     }
 
</code>
 
</code>
A Text element is  being added to display the magnetic north value of the compass change.  
+
A [http://doc.qt.nokia.com/4.7/qml-text.html Text] element is  being added to display the magnetic north value of the compass change on the device screen.  
 
<code css>
 
<code css>
 
Text {
 
Text {
Line 70: Line 72:
 
     }
 
     }
 
</code>
 
</code>
 
 
  
 
=== WP7 Project (MainPage.xaml)===
 
=== 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.
+
To build a similar interface like Qt, let’s first create a circle  using [http://msdn.microsoft.com/en-us/library/system.windows.shapes.ellipse.aspx Ellipse Class] which defines the outline of the compass.
 
<code xml>
 
<code xml>
 
<Ellipse StrokeThickness="2" x:Name="circle" Width="400" Height="400"  
 
<Ellipse StrokeThickness="2" x:Name="circle" Width="400" Height="400"  
Line 83: Line 83:
 
</Ellipse>
 
</Ellipse>
 
</code>
 
</code>
To create the compass needle we used Line.
+
To create the compass needle we used [http://msdn.microsoft.com/en-us/library/system.windows.shapes.line.aspx Line Class].
 
<code xml>
 
<code xml>
 
<Line  x:Name="line" X1="240" Y1="350" X2="240" Y2="270"  Stroke="{StaticResource  PhoneForegroundBrush}" StrokeThickness="4"></Line>
 
<Line  x:Name="line" X1="240" Y1="350" X2="240" Y2="270"  Stroke="{StaticResource  PhoneForegroundBrush}" StrokeThickness="4"></Line>
 
 
</code>
 
</code>
Now we add the reference Microsoft.Devices.Sensors  and Microsoft.Xna.Framework to  
+
Now we add the reference {{Icode|Microsoft.Devices.Sensors}} to initialize and detect the compass presence in the device.
  initialize and detect the compass presence in the device.
+
 
<code cpp>
 
<code cpp>
 
Compass compass;  
 
Compass compass;  
 
 
if (Compass.IsSupported)
 
if (Compass.IsSupported)
 
             {
 
             {
Line 104: Line 101:
 
                 MessageBox.Show("Device doesn't suport compass");
 
                 MessageBox.Show("Device doesn't suport compass");
 
             }
 
             }
 
 
</code>
 
</code>
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.
+
{{Icode|TimeBetweenUpdates}}  property  will update the compass data in every second.  {{Icode|CurrentValueChanged}} event handler will give the compass value each time there is any change in the compass needle position.  And then we call the {{Icode|Start()}} method to start the compass. The change in compass value is then passed  to the {{Icode|compass_CurrentValueChanged()}} method. Which then pass to a separate thread using {{Icode|Dispatcher.BeginInvoke()}} method.
 
<code cpp>
 
<code cpp>
 
void compass_CurrentValueChanged(object sender, SensorReadingEventArgs<CompassReading> e)
 
void compass_CurrentValueChanged(object sender, SensorReadingEventArgs<CompassReading> e)
Line 112: Line 108:
 
             Dispatcher.BeginInvoke(() => UpdateLine(e.SensorReading));
 
             Dispatcher.BeginInvoke(() => UpdateLine(e.SensorReading));
 
         }
 
         }
 +
</code>
  
</code>
 
 
<code cpp>
 
<code cpp>
 
private void UpdateLine(CompassReading e)
 
private void UpdateLine(CompassReading e)
 
         {
 
         {
         
 
 
             degreeText.Text = e.MagneticHeading.ToString("0");
 
             degreeText.Text = e.MagneticHeading.ToString("0");
 
         
 
 
             line.X2 = line.X1 - (200 * Math.Sin(MathHelper.ToRadians((float)e.MagneticHeading)));
 
             line.X2 = line.X1 - (200 * Math.Sin(MathHelper.ToRadians((float)e.MagneticHeading)));
 
             line.Y2 = line.Y1 - (200 * Math.Cos(MathHelper.ToRadians((float)e.MagneticHeading)));
 
             line.Y2 = line.Y1 - (200 * Math.Cos(MathHelper.ToRadians((float)e.MagneticHeading)));
 
       
 
 
         }
 
         }
 
 
</code>
 
</code>
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.  
+
The {{Icode|MagneticHeading}} gives the magnetic north pole value of the compass and is displayed in a [http://msdn.microsoft.com/en-us/library/system.windows.controls.textblock%28v=VS.95%29.aspx TextBlock]. We also add {{Icode|Microsoft.Xna.Framework}} reference into our project to find out the needle direction using {{Icode|MathHelper}} class.  
 
+
 
+
 
+
 
+
 
+
 
+
==Summary==
+
Like other sensors like Accelerometer, Gyroscope, Compass can also be used to get user’s device movement.
+
+
 
+
  
 
==Source Code==
 
==Source Code==
 
*The full source code  of Qt example is available here: [[File:CompassQML.zip]]
 
*The full source code  of Qt example is available here: [[File:CompassQML.zip]]
 
*The full source code of  WP7 example is available here: [[File:CompassWp7.zip]]
 
*The full source code of  WP7 example is available here: [[File:CompassWp7.zip]]

Revision as of 18:00, 18 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
Devices(s): N8(Nokia Belle), Windows Phone
Compatibility
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
Article
Keywords: Compass, Sensors
Created: somnathbanik (18 Apr 2014)
Last edited: somnathbanik (18 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

241 page views in the last 30 days.
×