Using Accelerometer in Qt and WP7

Comments

Hamishwillee - A few suggestions

Another fairly useful article thanks! I've added some more references.

Main suggestion for improvement is that in both cases there is no starCenter definition - a beginner won't know how you've linked your sensor information to change the UI.

hamishwillee 10:31, 30 April 2012 (EEST)

Log in or Join to leave comments.

This article demonstrates how to access the device accelerometer sensor in Qt Quick and WP7.

See Also

{{{1}}}

Article Metadata

---

Code Example

Source file: Media:AccelerometerQML.zip Media:AccelerometerWP7.zip

---

Tested with

SDK: Windows Phone SDK 7.1, Qt SDK 1.2

Devices(s): N8 (Nokia Belle)

---

Compatibility

Platform(s): Windows Phone 7.5, Symbian^3

Device(s): Sensors

---

Platform Security

Signing Required: Self-Signed

---

Article

Keywords: Accelerometer, Sensors

Created: somnathbanik (11 Apr 2012)

Last edited: hamishwillee (30 Nov 2012)

Introduction

This article shows how to access and use the accelerometer in both Qt and Windows Phone 7.5. For Qt we will use the QML Accelerometer Element which is a part of QtMobility 1.x and for Windows Phone we will use the reference Microsoft.Devices.Sensors to get access to the Accelerometer.

Qt	Windows Phone
Accelerometer in Qt	Accelerometer in WP7

Note: The static images above do not show off the apps very well. Please try it on a device.

Implementation

First create an empty project for both Qt and WP7.

Qt Project (MainPage.qml)

To use the QML Accelerometer we need to import QtMobility into our project.

import QtMobility.sensors 1.2

Next we add the Accelerometer element to our QML file; this can be referenced using its id.

         Accelerometer {
             id: accel
             active:true   
         }

We set the active property of the Accelerometer Element to true to start the sensor. In this case this will happen as soon as the QML file is loaded (when the app launches). The accelerometer may get values faster than we need so in this case we're using a Timer to read the accelerometer's readings (another approach would be to average values over a period):

  Timer {
              interval: 500;
              running: true;
              repeat: true
              property real xValue;
              property real yValue;
              onTriggered: {
                  xValue = accel.reading.x - accel.accelX;
                  yValue = accel.reading.y - accel.accelY;
                  if (Math.abs(xValue) > 0.3) {
                      accel.accelX = -accel.reading.x
                  }
                  if (Math.abs(yValue) > 0.3) {
                      accel.accelY = accel.reading.y
                  }
              }
          }

The Image position is changed with its x and y value, which can be obtained using the getX() and getY() functions.

function getX() {
                 var newX = centerX + accel.accelX  / -1 * centerX
                 if ((newX - starCenter) < 0) {
                     return 0
                 }
                 else if ((newX + starCenter) > parent.width) {
                     return parent.width - 2 * starCenter
                 }
                 return newX - starCenter;
             }
 
             function getY() {
                 var newY = centerY + accel.accelY / -1 * centerY
                 if ((newY - starCenter) < 0) {
                     return 0
                 }
                 else if ((newY + starCenter) > parent.height) {
                     return parent.height - 2 * starCenter
                 }
                 return newY - starCenter;
             }

This will show us how the value of Accelerometer changes with the help of an Image.

Windows Phone 7 Project (MainPage.xaml)

For Windows Phone first we add the reference Microsoft.Devices.Sensors to get access to the Accelerometer. First we create an instance of the Accelerometer and the DispatcherTimer.

Accelerometer accel = new Accelerometer();
DispatcherTimer timer;

The Timer and the Accelerometer are started in the constructor. A handler AccelerometerReadingChanged event is added.

timer = new DispatcherTimer();
            timer.Interval = TimeSpan.FromMilliseconds(30);
            timer.Tick += new EventHandler(timer_Tick);
 
            accel.ReadingChanged += new EventHandler<AccelerometerReadingEventArgs>(AccelerometerReadingChanged);
            accel.Start();
            timer.Start();

UpdateImagePos method gets the event and calculated and updated the position of the image.

void UpdateImagePos(AccelerometerReadingEventArgs e)
        {
            timerX = e.X;
            timerY = e.Y;        
 
            Star.Margin = new Thickness(getX(), getY(), (width - (getX() + Star.Width)), (height - (getY() + Star.Height)));         
        }

We use getX() and getY() method similar to Qt for calculating the x and y position of the image.

double getX()
        {
            var newX = centerX + accelX / -1 * centerX;
 
            if ((newX - starCenter) < 0)
            {
                return 0;
            }
            else if ((newX + starCenter) > width)
            {
                return width - 2 * starCenter;
            }
            return newX - starCenter;
        }
 
        double getY()
        {
            var newY = centerY + accelY / -1 * centerY;
 
            if ((newY - starCenter) < 0)
            {
                return 0;
            }
            else if ((newY + starCenter) > height)
            {
                return height - 2 * starCenter;
            }
            return newY - starCenter;
        }

Source Code

• The full source code of Qt example is available here: File:AccelerometerQML.zip
• The full source code of WP7 example is available here: File:AccelerometerWP7.zip