:::: MENU ::::
May 24, 2012    |       27 comments

Implementing augmented reality using GART

This article will show the details of implementing augmented reality in Windows Phone using Geo Augmented Reality Toolkit (GART). GART enables you to create augmented reality experiences that depend on real geographical locations. It takes care of overlaying Bing maps, your heading, picture/frames from camera and virtual elements that display information about certain points of interest.

In the last article I wrote about GART, I mentioned 6 steps necessary for creating an augmented reality app using GART. Those steps were:

  • Add an ARDisplay control to your Windows Phone page
  • Add the views you want as children of the ARDisplay control
  • Start and stop services when navigating to and from the page
  • Create a collection of ARItem objects (or your own custom type that inherits from ARItem) and include real geolocation
  • Set ARDisplay.Items equal to your new collection
  • Optionally, style the elements

Of course, the first step is missing (or we could call it the step 0) which is creating the Windows Phone project and adding the GART reference. GART can be downloaded here:

http://gart.codeplex.com/releases/view/75331

Windows Phone project needs to be created and GART added to references. Now we can start with the 6 steps and the result would be an app that was shown on this youtube video:

GART Windows Phone demo

Add ARDisplay control

Besides adding the reference to the project, you need to add it on the top of the MainPage.xaml page:

The references need to be added to the MainPage.xaml.cs code file:

Adding the control is really simple. Just put it inside the main grid, usually named LayoutRoot.

And that’s it. This is just the control, but now we need the layers included, too!

Add the views you want as children of the ARDisplay control

The layers, or the views, need to be added in this specific order, otherview you might encounter problems in displaying them all correctly. Just add them as the children of ARDisplay control:

You’ll notice that the OverheadMap layers needs Bing credentials – that’s because GART takes care of the Bing maps for you. VideoPreview gives you the frames from the camera, WorldView gives you the layer for virtual elements, and the HeadingIndicator indicates your heading.

To be able to switch between the layers, you should add four buttons in the ApplicationBar. You can add less in case you’re not using all the layers.

All the buttons have click events, so you need to implement those too. It’s great that GART offers you some helpers to turn on and off layer as easy as possible. You need this in the code behind (MainPage.xaml.cs)

Start and stop services when navigating to and from the page

In the code behind, the MainPage.xaml.cs, you need to start and stop the services:

Create a collection of ARItem objects (or your own custom type)

For the demo I created (the earlier video), I created a CityPlace class that inherits from ARItem expanding it with one more property called Description – it basically just describes the city place that I’m showing.

In the MainPage.xaml.cs I initialize the ObservableCollection and get data (call the method):

GetData method adds a bunch of CityPlace items with real geographical locations and descriptions to the locationsTvrda collection.

This is done for all the objects. I’m showing just one, as an example. Have in mind that GeoCoordinate class has many possible constructors, so you can add the altitude of the specific objects, too. The problem may only be that they are detected only in the radius of 300 yards (around 275 meters).

Bind ARDisplay.Items to your new collection

At the end of the GetData method, I set the ItemsSource of the ARDisplay control to the ObservableCollection:

And that’s it!

Optionally, style the elements

I know I said that we’re done with XAML, but in case you wish to style the virtual elements displayed over the real life objects, you can do it in XAML. For example, the styling used for this demo was this:

Nothing too complicated or difficult!

That’s it! Augmented reality application in 6 easy steps! :)

Like igrali blog on Facebook! Prefer Twitter?

Share the knowledge

27 Comments

  • Reply abhishek |

    Can you describe how can we include the web search results into this program or a web service that does that?

    • Reply Abhishek |

      Thanks a lot I had tried executing the sample Bing example given in Gart but even after adding the DLL file in the project reference I am getting errors of linking should I have to change anything else in the project files.Sorry if it was a silly question but I am a beginner in windows phone.

  • Reply abhishek |

    Error 1 The type or namespace name ‘Net’ does not exist in the namespace ‘System’ (are you missing an assembly reference?) C:UsersAdministratorDesktopgart-63068 (1)GeoARToolkitabhiWindowsPhoneBingARDataRestaurantItem.cs 3 14 BingAR

    i am getting this error when i try to execute the sample bing program after including gart dll in the project references from the solutions explorer

  • Reply Abhishek |

    I was thinking of combining your example with the sample Bing ar but when I create a new class outside the BingAr class the outer class is not able to access the non static methods can u help me out?

  • Reply Jordan |

    Hi,

    This toolkit is amazing and I’m trying to get into WP7 & 8 dev. I’ve followed the steps here (I think) and at the end I can’t compile and build due to three errors. The ‘CityItem’ and ‘BingCredentials’ are not resolving, and the ‘ObservableCollection’ cannot be be found.
    I’ve added the refernces, and added the right ‘using …’ parts, I’m just stuck :(

  • Reply demandSaya |

    Hi

    Thank you igrali for your useful article. I run the sample code quite successfully, the only problem i am facing is that my description is not visible. Only the content is visible. How to solve this issue?

    Thanks

  • Reply Ronak |

    Hi, great article I got the smaple up and running in 5 min and customized it in 10 =)
    but I was just wodnering can the GART toolkit accept 3d objects, just as out of curiosity? have you tried anything like this please let me know

      • Reply Dave |

        Actually I just noticed something there is a project template called XAML with XNA, maybe it the XNA frameworks can render the graphics, such as fbx files, and I can use the standard Xaml to implement GART, It does seem to make sense I guess Ill have to try it to find out =)

        If you have any other suggestions pleaase do let me know.

        Thanks
        Ronak

  • Reply martin |

    Do you know what library nokia used for their augmented reality app? When will it be available for WP8? Thanks for great article

    • Reply igrali |

      Hi Martin

      Good question. I don’t know what they used, but if I had to guess, I’d say that they’ve built a custom solution from scratch, but functionally similar to GART.

      Not sure when GART would become available for WP8, but you can follow gart.codeplex.com to get the latest updates!

  • Reply Thusitha |

    Error 2 Could not load the assembly file:///D:SetupsMobileWindows PhoneGART_1_0_1GART.dll. This assembly may have been downloaded from the Web. If an assembly has been downloaded from the Web, it is flagged by Windows as being a Web file, even if it resides on the local computer. This may prevent it from being used in your project. You can change this designation by changing the file properties. Only unblock assemblies that you trust. See http://go.microsoft.com/fwlink/?LinkId=179545 for more information. AR

    Why is this?

    • Reply igrali |

      Probably when you downloaded GART, it was downloaded in a .zip file. I assume that before unpacking the .zip file, it’s necessary to right click on the zip file and select Properties and then click on Unblock to unblock the downloaded dlls.

  • Reply Pete |

    How do I make it so the city item is a constant size and not variable on the distance from it.

So, what do you think ?