×
Namespaces

Variants
Actions
(Difference between revisions)

Augmented Reality using GART on Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
Vaishali Rawat (Talk | contribs)
(Vaishali Rawat - - Changes in Code Behind File)
hamishwillee (Talk | contribs)
m (Text replace - "[[Category:Silverlight" to "[[Category:XAML")
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Windows Phone]][[Category:Windows Phone 7.5]][[Category:Silverlight]]
+
[[Category:Windows Phone]][[Category:Windows Phone 7.5]][[Category:XAML]]
 
{{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= <!-- Devices tested against - e.g. ''devices=Nokia Lumia 800'') -->
Line 9: Line 9:
 
|platform= Windows Phone 7, 7.5
 
|platform= Windows Phone 7, 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, some APIs are available in Windows Phone. A couple of them are GART and [http://slartoolkit.codeplex.com/ SLARToolkit]. In this article, we will make use of [http://gart.codeplex.com/ GART].
+
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: You can not test the sample code provided by GART in emulator, the functionality will not be shown.
+
{{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 38: Line 38:
  
 
==Summarizing the functionalities provided by ''SimpleAR project''==
 
==Summarizing the functionalities provided by ''SimpleAR project''==
The sample code ''SimpleAR project'' does the following things for us.
+
The sample code ''SimpleAR project'' illutrates the following features,
 
* Capturing the camera view
 
* Capturing the camera view
 
* Showing the current location using Bing Maps
 
* Showing the current location using Bing Maps
Line 44: Line 44:
 
* Adding/Deleting labels (3 labels maximum in the default sample code, but you may add more) from the view
 
* Adding/Deleting labels (3 labels maximum in the default sample code, but you may add more) from the view
 
* Rotating 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. <br>
+
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: To understand more about this project, please go through the documentation [http://gart.codeplex.com/documentation here].
+
{{Note|To understand more about this project, please go through the documentation [http://gart.codeplex.com/documentation here].}}
  
 
== Understanding the Design Page ==
 
== Understanding the Design Page ==
Line 71: Line 71:
 
</code>
 
</code>
  
Via 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 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).  
  
 
<code xml>
 
<code xml>
Line 84: Line 84:
 
</code>
 
</code>
  
Above, 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, 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
 
* VideoPreview - to show the camera view
 
* OverheadMap - to show the Bing Maps
 
* OverheadMap - to show the Bing Maps
Line 93: Line 93:
  
 
==Code Behind==
 
==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 know "How to customize the sample code provided by GART".
+
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:
 
Still if we try to summarize, the main points would be:
Line 161: Line 161:
  
 
== Changes in Code Behind File==
 
== Changes in Code Behind File==
* Declare an ObservableCollection<ARItem> type object like:
+
* Declare an ObservableCollection<ARItem> type object like:
 
<code csharp>
 
<code csharp>
 
private ObservableCollection<ARItem> locationsCollection;
 
private ObservableCollection<ARItem> locationsCollection;
Line 269: Line 269:
 
== 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.
 +
[[Category:Code Examples]]

Revision as of 04:27, 10 April 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 7.1
Compatibility
Platform(s): Windows Phone 7, 7.5
Windows Phone 7.5
Dependencies: Geo Augmented Reality Toolkit
Article
Created: Vaishali Rawat (24 Dec 2012)
Last edited: hamishwillee (10 Apr 2013)

Contents

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.

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.

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.

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 AppId 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.

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.

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.

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>

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.

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.

227 page views in the last 30 days.
×