×
Namespaces

Variants
Actions
(Difference between revisions)

Augmented Reality using GART on Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
croozeus (Talk | contribs)
m (Croozeus - - Code Behind)
pavan.pareta (Talk | contribs)
(Pavan.pareta - - Understanding the Design Page)
 
(14 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Windows Phone]][[Category:Windows Phone 7.5]][[Category:Silverlight]]
+
[[Category:Location on Windows Phone]][[Category:Camera on Windows Phone]][[Category:Code Examples]][[Category:XAML]][[Category:Windows Phone 7.5]]
 
{{Abstract|This article explains how to run the sample code provided by [http://gart.codeplex.com/ GART (Geo Augmented RealityToolkit)] in Windows Phone. It will also let you know how to customize their sample code.}}
 
{{Abstract|This article explains how to run the sample code provided by [http://gart.codeplex.com/ GART (Geo Augmented RealityToolkit)] in Windows Phone. It will also let you know how to customize their sample code.}}
  
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
|sourcecode= [[Media:SimpleAR.zip‎]]  
+
|sourcecode= [[Media:SimpleAR.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= <!-- Devices tested against - e.g. ''devices=Nokia Lumia 800'') -->
+
|devices= Nokia Lumia 920<!-- Devices tested against - e.g. ''devices=Nokia Lumia 800'') -->
|sdk= Windows Phone 7.1 <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
+
|sdk= Windows Phone 8/7.1 <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
|platform= Windows Phone 7, 7.5
+
|platform= Windows Phone 8/7.0/7.5
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= Geo Augmented Reality Toolkit<!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
+
|dependencies= Geo Augmented Reality Toolkit<!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only -->  
+
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|creationdate= 20121224
 
|creationdate= 20121224
|author= [[User:Vaishali Rawat]]
+
|author= [[User:Vaishali Rawat]]
 
}}
 
}}
  
Line 28: Line 28:
 
Augmented Reality means placing some virtual object(s) on to the real view of the world. We can place any image, attach video or audio on a real world view to modify/duplicate the actual view of the world. To know more about Augmented Reality, you may go through the [http://en.wikipedia.org/wiki/Augmented_reality Wikipedia].
 
Augmented Reality means placing some virtual object(s) on to the real view of the world. We can place any image, attach video or audio on a real world view to modify/duplicate the actual view of the world. To know more about Augmented Reality, you may go through the [http://en.wikipedia.org/wiki/Augmented_reality Wikipedia].
  
To implement Augmented Reality, couple of APIs are available for Windows Phone. Some of them are [http://gart.codeplex.com/ GART]and [http://slartoolkit.codeplex.com/ SLARToolkit]. In this article, we will make use of GART APIs.
+
To implement Augmented Reality, couple of APIs are available for Windows Phone. Some of them are [http://gart.codeplex.com/ GART]and [http://slartoolkit.codeplex.com/ SLARToolkit]. In this article, we will make use of GART APIs.
  
{{Note|It is not possible to test the sample code provided by GART in the emulator, you need a WP device for testing.}}
+
{{Note|It is not possible to test the sample code provided by GART in the emulator, you need a WP device for testing.}}
  
 
==Downloading & Running the sample code provided by GART ==
 
==Downloading & Running the sample code provided by GART ==
Line 36: Line 36:
 
* Unzip the ''Samples file'' into your workspace and import the project named "'''SimpleAR'''"
 
* Unzip the ''Samples file'' into your workspace and import the project named "'''SimpleAR'''"
 
* Build the project and try to run it on device to check what it does.
 
* Build the project and try to run it on device to check what it does.
 +
 +
{{Note| If you are trying to build this project in Windows Phone 8, then en error might come that GART.dll is not available. To overcome this problem, simply Unblock this dll file from the Properties of it and then try to rebuild the solution again. Problem should be solved. }}
  
 
==Summarizing the functionalities provided by ''SimpleAR project''==
 
==Summarizing the functionalities provided by ''SimpleAR project''==
Line 54: Line 56:
 
     </phone:PhoneApplicationPage.Resources>
 
     </phone:PhoneApplicationPage.Resources>
 
</code>
 
</code>
This sample app makes heavy use of the Bing Maps to show the locations on the map. For this, a key and an AppId has been allocated above.
+
This sample app makes heavy use of the Bing Maps to show the locations on the map. For this, a {{Icode|Key}} and an {{Icode|ApplicationId}} has been allocated above.
  
 
<code xml>
 
<code xml>
Line 71: Line 73:
 
</code>
 
</code>
  
Using the above code, four ApplicationBarIconButton and two ApplicationBarMenuItems are placed. Each of the icon button or menu item is associated with its event handlers which will carry out their corresponding tasks (as mentioned above).  
+
Using the above code, four {{Icode|ApplicationBarIconButton}} and two {{Icode|ApplicationBarMenuItems}} are placed. Each of the icon button or menu item is associated with its event handlers which will carry out their corresponding tasks (as mentioned above).  
  
 
<code xml>
 
<code xml>
Line 84: Line 86:
 
</code>
 
</code>
  
In the above snippet, ARControls:ARDisplay is the main control in which four views have been placed. These four views will act as the children of the parent control - ARDisplay. The views used are:
+
In the above snippet, {{Icode|ARControls:ARDisplay}} is the main control in which four views have been placed. These four views will act as the children of the parent control - {{Icode|ARDisplay}}. The views used are:
* VideoPreview - to show the camera view
+
* {{Icode|VideoPreview}} - to show the camera view
* OverheadMap - to show the Bing Maps
+
* {{Icode|OverheadMap}} - to show the Bing Maps
* WorldView - to place the virtual things or we can say to actually implemented the Augmented Reality in our app
+
* {{Icode|WorldView}} - to place the virtual things or we can say to actually implemented the Augmented Reality in our app
* HeadingIndicator - to show you the headings (if any)
+
* {{Icode|HeadingIndicator}} - to show you the headings (if any)
  
The Bing credentials are provided with the OverheadMap view to use the Bing Maps.
+
The Bing credentials are provided with the {{Icode|OverheadMap}} view to use the Bing Maps.
  
 
==Code Behind==
 
==Code Behind==
Line 96: Line 98:
  
 
Still if we try to summarize, the main points would be:
 
Still if we try to summarize, the main points would be:
* Started the AR service in OnNavigatedTo()
+
* Started the AR service in {{Icode|OnNavigatedTo()}}
* Will stop the service in OnNavigatedFrom()
+
* Will stop the service in {{Icode|OnNavigatedFrom()}}
* The four ApplicationBarIconButtons will do their corresponding tasks.
+
* The four {{Icode|ApplicationBarIconButtons}} will do their corresponding tasks.
* On pressing "Add Location" menuItem, we are generating three instances of ''ARItem'' type providing them the ''Content'' value and ''GeoLocation'' value. These three instances are added one by one into the ARDisplay control via
+
* On pressing "Add Location" {{Icode|menuItem}}, we are generating three instances of {{Icode|ARItem}} type providing them the {{Icode|Content}} value and {{Icode|GeoLocation}} value. These three instances are added one by one into the {{Icode|ARDisplay}} control via
 
<code csharp>
 
<code csharp>
 
ARDisplay.ARItems.Add(item);
 
ARDisplay.ARItems.Add(item);
 
</code>
 
</code>
  
The ARItem class originally is defined as:
+
The {{Icode|ARItem}} class originally is defined as:
 
<code csharp>
 
<code csharp>
 
   public class ARItem : ObservableObject
 
   public class ARItem : ObservableObject
Line 118: Line 120:
 
</code>
 
</code>
  
* On pressing "Clear Location" menuItem, the already added ARItem instances are cleared using
+
* On pressing "Clear Location" {{Icode|menuItem}}, the already added {{Icode|ARItem}} instances are cleared using
 
<code csharp>
 
<code csharp>
 
ARDisplay.ARItems.Clear();
 
ARDisplay.ARItems.Clear();
Line 129: Line 131:
  
 
==Changes in Design Page==
 
==Changes in Design Page==
We will add two more menuItems named ShowCustomizedMenu and ClearCustoizedMenu via:
+
We will add two more {{Icode|menuItems}} named {{Icode|ShowCustomizedMenu}} and {{Icode|ClearCustoizedMenu}} via:
 
Inside Application Bar:
 
Inside Application Bar:
 
<code xml>
 
<code xml>
Line 136: Line 138:
 
</code>
 
</code>
  
Inside ARDisplay control:
+
Inside {{Icode|ARDisplay}} control:
 
<code xml>
 
<code xml>
 
  <ARControls:WorldView x:Name="WorldView"  ItemTemplate="{StaticResource CityItem}"
 
  <ARControls:WorldView x:Name="WorldView"  ItemTemplate="{StaticResource CityItem}"
Line 161: Line 163:
  
 
== Changes in Code Behind File==
 
== Changes in Code Behind File==
* Declare an ObservableCollection<ARItem> type object like:
+
* Declare an {{Icode|ObservableCollection<ARItem>}} type object like:
 
<code csharp>
 
<code csharp>
 
private ObservableCollection<ARItem> locationsCollection;
 
private ObservableCollection<ARItem> locationsCollection;
Line 200: Line 202:
 
</code>
 
</code>
  
Above, we have used a new class named ''Places'' which we will derive from ARItem like shown below:
+
Above, we have used a new class named {{Icode|Places}} which we will derive from {{Icode|ARItem}} like shown below:
 
<code csharp>
 
<code csharp>
 
namespace SimpleAR
 
namespace SimpleAR
Line 265: Line 267:
 
</code>
 
</code>
  
The above declared class ''Places'' is derived from ARItem, also we have added two new string items into the class named ''Description'' and ''Rating''. While constructing the instance of Places class, if either of the two new member variables values will be changed then only they will be reflected.
+
The above declared class {{Icode|Places}} is derived from {{Icode|ARItem}}, also we have added two new string items into the class named {{Icode|Description}} and {{Icode|Rating}}. While constructing the instance of {{Icode|Places}} class, if either of the two new member variables values will be changed then only they will be reflected.
  
 
== Running and Testing the customized sample code==
 
== Running and Testing the customized sample code==
 
Now build the project and run it. Try to press the "show customization effect" menu item and you should be able to see the effects.
 
Now build the project and run it. Try to press the "show customization effect" menu item and you should be able to see the effects.

Latest revision as of 13:49, 23 August 2013

This article explains how to run the sample code provided by GART (Geo Augmented RealityToolkit) in Windows Phone. It will also let you know how to customize their sample code.

WP Metro Icon Multimedia.png
SignpostIcon XAML 40.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone 8/7.1
Devices(s): Nokia Lumia 920
Compatibility
Platform(s): Windows Phone 8/7.0/7.5
Windows Phone 7.5
Dependencies: Geo Augmented Reality Toolkit
Article
Created: Vaishali Rawat (24 Dec 2012)
Last edited: pavan.pareta (23 Aug 2013)

Contents

[edit] Introduction

Augmented Reality means placing some virtual object(s) on to the real view of the world. We can place any image, attach video or audio on a real world view to modify/duplicate the actual view of the world. To know more about Augmented Reality, you may go through the Wikipedia.

To implement Augmented Reality, couple of APIs are available for Windows Phone. Some of them are GARTand SLARToolkit. In this article, we will make use of GART APIs.

Note.pngNote: It is not possible to test the sample code provided by GART in the emulator, you need a WP device for testing.

[edit] Downloading & Running the sample code provided by GART

  • Go to this page and download the Samples.
  • Unzip the Samples file into your workspace and import the project named "SimpleAR"
  • Build the project and try to run it on device to check what it does.

Note.pngNote: If you are trying to build this project in Windows Phone 8, then en error might come that GART.dll is not available. To overcome this problem, simply Unblock this dll file from the Properties of it and then try to rebuild the solution again. Problem should be solved.

[edit] Summarizing the functionalities provided by SimpleAR project

The sample code SimpleAR project illutrates the following features,

  • Capturing the camera view
  • Showing the current location using Bing Maps
  • Showing a virtual circle embedding a cone which reflects the direction in which the device is moving
  • Adding/Deleting labels (3 labels maximum in the default sample code, but you may add more) from the view
  • Rotating the view

The virtual circle embedding a cone can be shown directly on the view provided by the camera or on maps. This circle can be made visible/invisible as well depending on the requirements.

Note.pngNote: To understand more about this project, please go through the documentation here.

[edit] Understanding the Design Page

The resources part of the design page of the SimpleAR project would be like:

 <phone:PhoneApplicationPage.Resources>
<maps:ApplicationIdCredentialsProvider x:Key="BingCredentials" ApplicationId="AsoYwOquow1D9inkw-YSN1iYJ7xPqmsKHvKPUZP_7B_swwwPTbdEDyoF_gibHtpT" />
</phone:PhoneApplicationPage.Resources>

This sample app makes heavy use of the Bing Maps to show the locations on the map. For this, a Key and an ApplicationId has been allocated above.

    <phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar>
<shell:ApplicationBarIconButton x:Name="RotateButton" IconUri="/icons/appbar.rotate.png" IsEnabled="True" Text="rotate" Click="RotateButton_Click"/>
<shell:ApplicationBarIconButton x:Name="HeadingButton" IconUri="/icons/appbar.heading.png" IsEnabled="True" Text="Heading" Click="HeadingButton_Click"/>
<shell:ApplicationBarIconButton x:Name="MapButton" IconUri="/icons/appbar.map.png" IsEnabled="True" Text="map" Click="MapButton_Click"/>
<shell:ApplicationBarIconButton x:Name="ThreeDButton" IconUri="/icons/appbar.3D.png" IsEnabled="True" Text="3D" Click="ThreeDButton_Click"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem x:Name="AddLocationsMenu" Text="add locations" Click="AddLocationsMenu_Click" />
<shell:ApplicationBarMenuItem x:Name="ClearLocationsMenu" Text="clear locations" Click="ClearLocationsMenu_Click" />
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Using the above code, four ApplicationBarIconButton and two ApplicationBarMenuItems are placed. Each of the icon button or menu item is associated with its event handlers which will carry out their corresponding tasks (as mentioned above).

    <Grid x:Name="LayoutRoot">
<ARControls:ARDisplay x:Name="ARDisplay" d:LayoutOverrides="Width">
<ARControls:VideoPreview x:Name="VideoPreview" />
<ARControls:OverheadMap x:Name="OverheadMap" CredentialsProvider="{StaticResource BingCredentials}" />
<ARControls:WorldView x:Name="WorldView" />
<ARControls:HeadingIndicator x:Name="HeadingIndicator" HorizontalAlignment="Center" VerticalAlignment="Center" />
</ARControls:ARDisplay>
</Grid>

In the above snippet, ARControls:ARDisplay is the main control in which four views have been placed. These four views will act as the children of the parent control - ARDisplay. The views used are:

  • VideoPreview - to show the camera view
  • OverheadMap - to show the Bing Maps
  • WorldView - to place the virtual things or we can say to actually implemented the Augmented Reality in our app
  • HeadingIndicator - to show you the headings (if any)

The Bing credentials are provided with the OverheadMap view to use the Bing Maps.

[edit] Code Behind

We will not go in detail to understand the code behind file here not only because it's already mentioned in the documentation section on the GART site but the main focus of this article is to understand "How to customize the sample code provided by GART".

Still if we try to summarize, the main points would be:

  • Started the AR service in OnNavigatedTo()
  • Will stop the service in OnNavigatedFrom()
  • The four ApplicationBarIconButtons will do their corresponding tasks.
  • On pressing "Add Location" menuItem, we are generating three instances of ARItem type providing them the Content value and GeoLocation value. These three instances are added one by one into the ARDisplay control via
ARDisplay.ARItems.Add(item);

The ARItem class originally is defined as:

   public class ARItem : ObservableObject
{
public ARItem();
 
public object Content { get; set; }
public GeoCoordinate GeoLocation { get; set; }
public Vector3 RelativeLocation { get; set; }
public Action<ItemCalculationSettings, ARItem> WorldCalculation { get; set; }
public Vector3 WorldLocation { get; set; }
}
  • On pressing "Clear Location" menuItem, the already added ARItem instances are cleared using
ARDisplay.ARItems.Clear();

It is suggested to understand the code till this point so that you can try running the app on device as we are going to customize this example in the next section.

[edit] Customizing the Sample Code

Now we will customize the sample code by showing some texts and an image at some location. The image will be a static image embedded in the project. The text strings would be: "Place Name Here", "Description Here" and "Rating Here". To show them on some location we have used the current location of the device itself.

[edit] Changes in Design Page

We will add two more menuItems named ShowCustomizedMenu and ClearCustoizedMenu via: Inside Application Bar:

 <shell:ApplicationBarMenuItem x:Name="ShowCustomizedMenu" Text="show customization effect" Click="ShowCustomizedMenu_Click" />
<shell:ApplicationBarMenuItem x:Name="ClearCustoizedMenu" Text="clear customization effect" Click="ClearCustoizedMenu_Click" />

Inside ARDisplay control:

 <ARControls:WorldView x:Name="WorldView"  ItemTemplate="{StaticResource CityItem}"

Above, we are attaching a style template like:

      <phone:PhoneApplicationPage.Resources>
<maps:ApplicationIdCredentialsProvider x:Key="BingCredentials" ApplicationId="AsoYwOquow1D9inkw-YSN1iYJ7xPqmsKHvKPUZP_7B_swwwPTbdEDyoF_gibHtpT" />
 
<DataTemplate x:Key="CityItem">
<Border BorderBrush="Black" BorderThickness="4" CornerRadius="8" Background="#FF003847" Width="320">
<StackPanel Margin="4">
<TextBlock x:Name="NameBlock" TextWrapping="NoWrap" Text="{Binding Content}" FontSize="38" VerticalAlignment="Center" Margin="0,0,4,0" d:LayoutOverrides="Width" Grid.Column="1" TextTrimming="WordEllipsis"/>
<TextBlock x:Name="DescriptionBlock" TextWrapping="Wrap" Text="{Binding Description}" FontSize="24" VerticalAlignment="Center" Margin="0,0,4,0" d:LayoutOverrides="Width" Grid.Column="1" TextTrimming="WordEllipsis" MaxHeight="168"/>
<TextBlock x:Name="RatingBlock" TextWrapping="Wrap" Text="{Binding Rating}" FontSize="22" VerticalAlignment="Center" Margin="0,0,4,0" d:LayoutOverrides="Width" Grid.Column="1" TextTrimming="WordEllipsis" MaxHeight="168"/>
<Image x:Name="Img" Source="{Binding Image}" Width="150" Height="150"/>
</StackPanel>
</Border>
</DataTemplate>
 
</phone:PhoneApplicationPage.Resources>

[edit] Changes in Code Behind File

  • Declare an ObservableCollection<ARItem> type object like:
private ObservableCollection<ARItem> locationsCollection;
  • Initializing it in the constructor like:
locationsCollection = new ObservableCollection<ARItem>();
  • We will declare new event handlers like:
        private void ShowCustomizedMenu_Click(object sender, EventArgs e)
{
GetData();
}
private void ClearCustoizedMenu_Click(object sender, EventArgs e)
{
ARDisplay.ARItems.Clear();
}
private void GetData()
{
Uri uri = new Uri("/SamplePic.png", UriKind.Relative);
BitmapImage imgSource = new BitmapImage(uri);
 
// Start with the current location
GeoCoordinate current = ARDisplay.Location;
 
locationsCollection.Add(new Places()
{
GeoLocation = new GeoCoordinate(current.Latitude,current.Longitude),
Content = "Place Name Here",
Description = "Description Here",
Rating = "Rating Here",
Image = imgSource
});
ARDisplay.ARItems = locationsCollection;
}

Above, we have used a new class named Places which we will derive from ARItem like shown below:

namespace SimpleAR
{
public class Places: ARItem
{
private string description;
private string rating;
private BitmapImage image;
 
public string Description
{
get
{
return description;
}
 
set
{
if (description != value)
{
description = value;
NotifyPropertyChanged(() => Description);
}
}
}
 
public string Rating
{
get
{
return rating;
}
 
set
{
if (rating != value)
{
rating = value;
NotifyPropertyChanged(() => Rating);
}
}
}
 
public BitmapImage Image
{
get
{
return image;
}
 
set
{
if (image != value)
{
image = value;
NotifyPropertyChanged(() => Image);
}
}
}
}
 
}

The above declared class Places is derived from ARItem, also we have added two new string items into the class named Description and Rating. While constructing the instance of Places class, if either of the two new member variables values will be changed then only they will be reflected.

[edit] Running and Testing the customized sample code

Now build the project and run it. Try to press the "show customization effect" menu item and you should be able to see the effects.

This page was last modified on 23 August 2013, at 13:49.
391 page views in the last 30 days.