×
Namespaces

Variants
Actions
(Difference between revisions)

QAugmentedReality - Local based augmented reality component

From Nokia Developer Wiki
Jump to: navigation, search
chintandave_er (Talk | contribs)
(Chintandave er -)
hamishwillee (Talk | contribs)
m (Text replace - "<code cpp>" to "<code cpp-qt>")
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Qt]][[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Location]][[Category:Multimedia]][[Category:Symbian]][[Category:Code Snippet]]
+
[[Category:Qt]][[Category:Qt Mobility]][[Category:Qt Quick]][[Category:Location]][[Category:Multimedia]][[Category:Symbian]][[Category:Code Examples]][[Category:Camera]][[Category:Imaging]]
{{Abstract| This article explains how to implement Augmented Reality engine that provides all functionalities to create your own local based augmented reality application like Nokia City Lens.}}
+
{{Abstract|This article describes [http://projects.developer.nokia.com/QAugmentedReality QAugmentedReality], an augmented reality (AR) engine that makes it easy for you to create AR applications like Nokia City Lens in QML.}}
 
{{Note|This is an entry in the [[PureView Imaging Competition 2012Q2]]}}
 
{{Note|This is an entry in the [[PureView Imaging Competition 2012Q2]]}}
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
+
|sourcecode= [http://projects.developer.nokia.com/QAugmentedReality/browser QAugmentedReality] (Nokia Project)
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
+
|installfile= [http://projects.developer.nokia.com/QAugmentedReality/files/QAugmentedRealitySample_installer.sis QAugmentedRealitySample_installer.sis]
 
|devices= Nokia N8, Nokia C7-00
 
|devices= Nokia N8, Nokia C7-00
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
+
|sdk= Qt SDK 1.2
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
+
|platform= Nokia Belle
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
Line 26: Line 26:
  
 
== Introduction ==
 
== Introduction ==
QAugmentedReality is a Augmented Reality engine that provides all functionalities to create your own local based augmented reality application like Nokia City Lens or social applications for example displaying your friends location or your parked car location direction.<br />
+
{{Icode|QAugmentedReality}} is an Augmented Reality engine that provides all functionalities to create your own local based augmented reality application like Nokia City Lens or social applications for example displaying your friends location or your parked car location direction.
Developer just need to setup for each item the longitude, latitude, description text, image and the engine will do the hard work to manage rendering, gps, compass.
+
  
== Summary ==
+
The component built entirely from scratch, inherits all camera features adding [http://doc.qt.nokia.com/qtmobility/location-overview.html GPS], [http://doc.qt.nokia.com/qtmobility-1.2/qml-accelerometer.html Accelerometer] and [http://doc.qt.nokia.com/qtmobility/qml-compass.html Compass] support.
The component built entirely from scratch, inherits all camera features adding [http://doc.qt.nokia.com/qtmobility/location-overview.html GPS], [http://doc.qt.nokia.com/qtmobility-1.2/qml-accelerometer.html Accelerometer] and [http://doc.qt.nokia.com/qtmobility/qml-compass.html Compass] support.<br />
+
 
Anyway the component's strength is the '''model''' support that allows you to easy manage your data to display. To add a '''pin''' into your scene you just need to add a {{Icode|QAugmentedRealityCameraItem}} element to {{Icode|QAugmentedRealityCameraModel}} to obtain a result like below:<br />
+
Developers just need to setup for each item the longitude, latitude, description text, image and the engine will do the hard work to manage rendering, gps, compass. The component's strength is the '''model''' support that allows you to easy manage your data to display. To add a '''pin''' into your scene you just need to add a {{Icode|QAugmentedRealityCameraItem}} element to {{Icode|QAugmentedRealityCameraModel}}. A video of the component in operation is given below:
 
{{#ev:youtube|WFez-3_xp64}}
 
{{#ev:youtube|WFez-3_xp64}}
  
Line 39: Line 38:
  
 
=== .pro ===
 
=== .pro ===
<code cpp>
+
<code cpp-qt>
 
include(QAugmentedReality/AugmentedRealityLibrary.pri)
 
include(QAugmentedReality/AugmentedRealityLibrary.pri)
 
</code>
 
</code>
  
 
=== main.cpp ===
 
=== main.cpp ===
<code cpp>
+
<code cpp-qt>
 
#include <QtGui/QApplication>
 
#include <QtGui/QApplication>
 
#include "qmlapplicationviewer.h"
 
#include "qmlapplicationviewer.h"
Line 174: Line 173:
  
 
== QAugmentedRealityCamera ==
 
== QAugmentedRealityCamera ==
QAugmentedRealityCamera is the component that provide not only the camera display feature, but includes GPS, Accelerometer, and Compass to display Pins on screen and being able to move them depending on watching direction.<br />
+
{{Icode|QAugmentedRealityCamera}} is the component that provide not only the camera display feature, but includes GPS, Accelerometer, and Compass to display Pins on screen and being able to move them depending on watching direction.
 +
 
 
To add a pin you need setup a {{Icode|QAugmentedRealityCameraModel}} for the component.
 
To add a pin you need setup a {{Icode|QAugmentedRealityCameraModel}} for the component.
  
 
== QAugmentedRealityCameraModel ==
 
== QAugmentedRealityCameraModel ==
QAugmentedRealityCameraModel has a {{Icode|pins}} property that have to be filled with {{Icode|QAugmentedRealityCameraItem}} element. <br />
+
QAugmentedRealityCameraModel has a {{Icode|pins}} property that have to be filled with {{Icode|QAugmentedRealityCameraItem}} element.  
You can add {{Icode|QAugmentedRealityCameraItem}} both in a static a dynamic way.
+
 
 +
You can add {{Icode|QAugmentedRealityCameraItem}} statically or dynamically.
  
=== Adding a Pin statically ===
+
=== Adding a pin statically ===
 
<code javascript>
 
<code javascript>
 
QAugmentedRealityCameraModel {
 
QAugmentedRealityCameraModel {
Line 195: Line 196:
 
</code>
 
</code>
  
=== Adding a Pin dynamically ===
+
=== Adding a pin dynamically ===
 
This approach is preferred when fetching data from a database.
 
This approach is preferred when fetching data from a database.
 
<code javascript>
 
<code javascript>
Line 209: Line 210:
  
 
== QAugmentedRealityCameraItem ==
 
== QAugmentedRealityCameraItem ==
QAugmentedRealityCameraItem has the following properties:<br />
+
{{Icode|QAugmentedRealityCameraItem}} has the following properties:
* {{Icode|latitude}}
+
* {{Icode|latitude}} - latitude of the item
* {{Icode|longitude}}
+
* {{Icode|longitude}} - longitude of the item
* {{Icode|message}} - Is the description text displayed inside the pin
+
* {{Icode|message}} - description text displayed inside the pin
* {{Icode|infoBox}} - Is the color of the box drawn on the left of the pin. This is because to give you the possibility to have pins of different color for your own purpose
+
* {{Icode|infoBox}} - the color of the box drawn on the left of the pin. This is because to give you the possibility to have pins of different color for your own purpose
 
* {{Icode|source}} - As for {{Icode|infoBox}} this feature allow you to set an image for your pin. Transparent images are allowed. The {{Icode|infoBox}} background color will be displayed on transparent areas.
 
* {{Icode|source}} - As for {{Icode|infoBox}} this feature allow you to set an image for your pin. Transparent images are allowed. The {{Icode|infoBox}} background color will be displayed on transparent areas.
  
== Shooting Photos ==
+
== Shooting still images ==
The component inherits from a base camera component, the same for QHdrCamera, so is possible to capture photos as a normal camera component. The result image will include the augmented reality items into the scene.<br />
+
The component inherits from a base camera component so is possible to capture photos as with the default camera component. The result image will include the augmented reality items in the scene.
This feature will be improved as soon as possible to be fitable with all resolutions. <br />
+
 
 +
This feature will be improved as soon as possible to be fitable with all resolutions.
 +
 
 
[[File:Ar-201206135237.jpg]] [[File:Ar-201206135324.jpg]]
 
[[File:Ar-201206135237.jpg]] [[File:Ar-201206135324.jpg]]
  
== Earth is not flat ==
+
== Be careful of large distances - the world is not flat ==
Managing pins with very huge distances you can encounter in a strange effect because we are accustomed to watch maps using the [http://en.wikipedia.org/wiki/Mercator_projection Mercator projection]. Let's consider the example showcased on the video above.
+
For pins located a very long way away you may see odd effects. Consider the example showcased on the video above - at certain watching angles Berlin, Tokyo and Melbourne appear close together.
I loaded data with some of the most important cities in the world. Let's consider Milan, where I'm located, Berlin, Tokyo and Melbourne. Watching to Berlin direction being located in Milan you could think that Berlin is located above Milan, Tokyo on the right and Melbourne on the bottom right.<br /><br />
+
[[File:Earth-flat.png]]<br /><br />
+
However this is an error due to [http://en.wikipedia.org/wiki/Mercator_projection Mercator projection] in fact application will show Berlin, Tokyo and Melbourne almost near in watching direction. This happens because the earth has a spherical shape and points in a sphere are located using  [http://en.wikipedia.org/wiki/Polar_coordinate_system polar coordinate system].<br /><br />
+
[[File:Earth-round.png]]<br /><br />
+
In our example happens that the  [http://en.wikipedia.org/wiki/Bearing_%28navigation%29 bearing] between Milan, Berlin, Tokyo and Melbourne and more the very huge distances that occurs, make it the application show these point of interest very near considering the direction watching angle.
+
From my point of view this is not a problem and reflects the real world, but you have to consider this aspect if you plan to manage very huge distances.
+
Anyway in the most common cases you will manage point of interest very near ( few kilometer/miles ) so the effect is reduced or near to zero.
+
  
== Sample Application ==
+
[[File:Earth-flat.png]]
 +
 
 +
This happens because the earth has a spherical shape and points in a sphere are located using  [http://en.wikipedia.org/wiki/Polar_coordinate_system polar coordinate system].
 +
 
 +
[[File:Earth-round.png]]
 +
 
 +
In our example what happens is that the [http://en.wikipedia.org/wiki/Bearing_%28navigation%29 bearing] between Milan, Berlin, Tokyo and Melbourne is quite small - these are therefore shown as close together at some watching angle. This should not be a problem if you're working with objects that are within tens of kilometres or less.
 +
 
 +
== Sample application ==
 
* [http://projects.developer.nokia.com/QAugmentedReality/files/QAugmentedRealitySample_installer.sis QAugmentedRealitySample]
 
* [http://projects.developer.nokia.com/QAugmentedReality/files/QAugmentedRealitySample_installer.sis QAugmentedRealitySample]
 
{{Note|Don't forget to shake the phone for compass calibration or pins will not be displayed correctly}}
 
{{Note|Don't forget to shake the phone for compass calibration or pins will not be displayed correctly}}
  
== Further Improvements ==
+
== Further improvements ==
Improvements that will come as soon as possible:<br />
+
Improvements that will come as soon as possible:
 
+
 
* filter item based on max distance, for example to display just items far less then 150mt
 
* filter item based on max distance, for example to display just items far less then 150mt
 
* At time of writing the '''delegate''' is static. if possible to allow users to create their own delegate
 
* At time of writing the '''delegate''' is static. if possible to allow users to create their own delegate
Line 244: Line 247:
  
 
Despite improvements that will come the component is easy and powerful enough to start creating your local based augmented reality applications and enjoy with them.
 
Despite improvements that will come the component is easy and powerful enough to start creating your local based augmented reality applications and enjoy with them.
<br />
+
 
I'm available for any help about component and opened to suggestions for further improvements.<br />
+
If you have any questions about using the component or suggestions for improvement please add them in the project [http://projects.developer.nokia.com/QAugmentedReality/discussion/forum/1 discussion board].

Revision as of 04:18, 11 October 2012

This article describes QAugmentedReality, an augmented reality (AR) engine that makes it easy for you to create AR applications like Nokia City Lens in QML.

Note.pngNote: This is an entry in the PureView Imaging Competition 2012Q2

Article Metadata
Code Example
Source file: QAugmentedReality (Nokia Project)
Tested with
SDK: Qt SDK 1.2
Devices(s): Nokia N8, Nokia C7-00
Compatibility
Platform(s): Nokia Belle
Symbian
Platform Security
Capabilities: Location, NetworkServices,UserEnvironment,ReadUserData
Article
Keywords: Augmented Reality, Camera, GPS, Compass
Created: galazzo (13 Jun 2012)
Last edited: hamishwillee (11 Oct 2012)

Contents

Introduction

QAugmentedReality is an Augmented Reality engine that provides all functionalities to create your own local based augmented reality application like Nokia City Lens or social applications for example displaying your friends location or your parked car location direction.

The component built entirely from scratch, inherits all camera features adding GPS, Accelerometer and Compass support.

Developers just need to setup for each item the longitude, latitude, description text, image and the engine will do the hard work to manage rendering, gps, compass. The component's strength is the model support that allows you to easy manage your data to display. To add a pin into your scene you just need to add a QAugmentedRealityCameraItem element to QAugmentedRealityCameraModel. A video of the component in operation is given below:


Get Started with QAugmentedReality

  • Download the project from here
  • Include QAugmentedReality directory into your project

.pro

include(QAugmentedReality/AugmentedRealityLibrary.pri)

main.cpp

#include <QtGui/QApplication>
#include "qmlapplicationviewer.h"
 
#include <QtDeclarative>
#include "qaugmentedrealitycamera.h"
 
Q_DECL_EXPORT int main(int argc, char *argv[])
{
QScopedPointer<QApplication> app(createApplication(argc, argv));
 
QmlApplicationViewer viewer;
 
qmlRegisterType<QAugmentedRealityCamera>("QAugmentedRealityCamera", 1, 0, "QAugmentedRealityCamera");
qmlRegisterType<QAugmentedRealityCameraModel>("QAugmentedRealityCamera", 1, 0, "QAugmentedRealityCameraModel");
qmlRegisterType<QAugmentedRealityCameraItem>("QAugmentedRealityCamera", 1, 0, "QAugmentedRealityCameraItem");
qmlRegisterType<QAugmentedRealityCameraDelegate>("QAugmentedRealityCamera", 1, 0, "QAugmentedRealityCameraDelegate");
 
// Resize the root QML element to view size
viewer.setResizeMode(QDeclarativeView::SizeRootObjectToView);
 
// Performance optimization flags
viewer.setAttribute(Qt::WA_OpaquePaintEvent);
viewer.setAttribute(Qt::WA_NoSystemBackground);
viewer.viewport()->setAttribute(Qt::WA_OpaquePaintEvent);
viewer.viewport()->setAttribute(Qt::WA_NoSystemBackground);
viewer.setViewportUpdateMode(QGraphicsView::FullViewportUpdate);
 
 
viewer.setOrientation(QmlApplicationViewer::ScreenOrientationLockLandscape);
viewer.setMainQmlFile(QLatin1String("qml/QAugmentedRealitySample/main.qml"));
viewer.showExpanded();
 
return app->exec();
}


QML

import QtQuick 1.1
import QAugmentedRealityCamera 1.0
 
Rectangle {
id:home
width: 640
height: 360
color:"white"
 
QAugmentedRealityCameraModel {
id:pinsModel
pins: [
QAugmentedRealityCameraItem {
latitude: 41.891033
longitude:12.492599
message:"Rome"
source: ":/images/colosseo.jpg"
},
QAugmentedRealityCameraItem {
latitude: 45.463502
longitude:9.187946
message:"Milan"
source: ":/images/milan.jpg"
},
QAugmentedRealityCameraItem {
latitude: 48.856358
longitude:2.352047
message:"Paris"
infoBox: "#FFAA23"
source: ":/images/paris.jpg"
},
QAugmentedRealityCameraItem {
latitude: 51.50746
longitude:-0.127831
message:"London"
},
QAugmentedRealityCameraItem {
latitude: 52.518728
longitude:13.404465
message:"Berlin"
source: ":/images/berlin.jpg"
},
QAugmentedRealityCameraItem {
latitude: 40.714997
longitude:-74.006767
message:"New York"
source: ":/images/new-york.jpg"
},
QAugmentedRealityCameraItem {
latitude: 35.689649
longitude:139.691048
message:"Tokyo"
},
QAugmentedRealityCameraItem {
latitude: -37.813717
longitude:144.962955
message:"Melbourne"
infoBox: "blue"
}
]
}
 
QAugmentedRealityCamera {
id:camera
anchors.fill: parent
resolution: Qt.size(2592,1456)
model: pinsModel
}
 
Component.onCompleted:{
camera.start(camera.availableDevices[0])
 
pinsModel.append({
"latitude": 45.428094,
"longitude": 9.313946,
"message": "Peschiera Borromeo",
"source": ":/images/bino.jpg"
})
pinsModel.append({
"latitude": -34.603541,
"longitude": -58.381748,
"message": "Buenos Aires",
"infoBox" : "white"
})
 
}
}

QAugmentedRealityCamera

QAugmentedRealityCamera is the component that provide not only the camera display feature, but includes GPS, Accelerometer, and Compass to display Pins on screen and being able to move them depending on watching direction.

To add a pin you need setup a QAugmentedRealityCameraModel for the component.

QAugmentedRealityCameraModel

QAugmentedRealityCameraModel has a pins property that have to be filled with QAugmentedRealityCameraItem element.

You can add QAugmentedRealityCameraItem statically or dynamically.

Adding a pin statically

QAugmentedRealityCameraModel {
id:pinsModel
pins: [
QAugmentedRealityCameraItem {
latitude: 41.891033
longitude:12.492599
message:"Rome"
source: ":/images/colosseo.jpg"
}]
}

Adding a pin dynamically

This approach is preferred when fetching data from a database.

Component.onCompleted:{
pinsModel.append({
"latitude": 45.428094,
"longitude": 9.313946,
"message": "Peschiera Borromeo",
"source": ":/images/bino.jpg"
})
}

QAugmentedRealityCameraItem

QAugmentedRealityCameraItem has the following properties:

  • latitude - latitude of the item
  • longitude - longitude of the item
  • message - description text displayed inside the pin
  • infoBox - the color of the box drawn on the left of the pin. This is because to give you the possibility to have pins of different color for your own purpose
  • source - As for infoBox this feature allow you to set an image for your pin. Transparent images are allowed. The infoBox background color will be displayed on transparent areas.

Shooting still images

The component inherits from a base camera component so is possible to capture photos as with the default camera component. The result image will include the augmented reality items in the scene.

This feature will be improved as soon as possible to be fitable with all resolutions.

Ar-201206135237.jpg Ar-201206135324.jpg

Be careful of large distances - the world is not flat

For pins located a very long way away you may see odd effects. Consider the example showcased on the video above - at certain watching angles Berlin, Tokyo and Melbourne appear close together.

Earth-flat.png

This happens because the earth has a spherical shape and points in a sphere are located using polar coordinate system.

Earth-round.png

In our example what happens is that the bearing between Milan, Berlin, Tokyo and Melbourne is quite small - these are therefore shown as close together at some watching angle. This should not be a problem if you're working with objects that are within tens of kilometres or less.

Sample application

Note.pngNote: Don't forget to shake the phone for compass calibration or pins will not be displayed correctly

Further improvements

Improvements that will come as soon as possible:

  • filter item based on max distance, for example to display just items far less then 150mt
  • At time of writing the delegate is static. if possible to allow users to create their own delegate
  • Provided a customizable delegate the next step is to provide a customizable model
  • qmldir usage

Despite improvements that will come the component is easy and powerful enough to start creating your local based augmented reality applications and enjoy with them.

If you have any questions about using the component or suggestions for improvement please add them in the project discussion board.

184 page views in the last 30 days.
×