Augmented Reality#2: Is that picture level?

by CameronM 14. October 2011 08:33

A while ago I wrote a post about creating a simple spirit-level using the Accelerometer in Windows Phone 7. In the Mango release a number of things have changed with the way the Accelerometer API is accessed and how its’ results are returned. There has also been one huge new feature released in Mango that takes the simple spirit-level app to a whole new level. Of course I am speaking about the VideoBrush control, which enables access to the live video feed from the device.

As I pondered potential uses of Augmented Reality, my mind drifted back to the spirit-level application and I began to think about how useful it would be to be able to stand back from an object and determine if it was level. I mean, you have to admit it is easier to stand back from your newly hung photo frame and check that it is level than to simply guess.  Ok, you may be able to place your trusty spirit-level (or WP7) against a photo frame and test that it is level, but what about when you are standing in the Louvre and suddenly realise that the Mona Lisa looks a little crocked? I don’t think those burly security guards are going to let you walk up and put your phone on top of the frame.

The first thing you will notice when dealing with the Accelerometer in Mango is that there is no ReadingChanged event. According to MSDN, this has been replaced by the CurrentValueChanged event. The next thing you’ll notice is that the CurrentValueChanged event expects a SensorReadingEventArgs parameter instead of the AccelerometerReadingEventArgs parameter we utilised in our code for Windows Phone 7. In the Mango release, Microsoft have decided to standardise the way developers access the ever increasing range of sensors – including the Accelerometer, Compass, Gyroscope and Motion.

//display the video feed

PhotoCamera m_camera = new PhotoCamera();

this.videoBrush.SetSource(m_camera);

 

//start the Accelerometer

sensor.CurrentValueChanged +=new EventHandler<SensorReadingEventArgs<AccelerometerReading>>(sensor_CurrentValueChanged);

sensor.Start();

Thankfully, all of these changes result in only a handful of changes to the original Windows Phone 7.0 code. One thing the Mango 7.5 code takes advantage is, especially when dealing with 3D objects, is the XNA framework. This is evident by that fact that the EventArgs returned by the CurrentValueChanged event no longer refer to X,Y,Z, but to a XNA object called Vector3 (Microsoft.Xna.Framework.Vector3). Again, a small change to our previous code enables us to visualise in which direction the device is tilted, just like a real spirit-level.

void sensor_CurrentValueChanged(object sender, SensorReadingEventArgs<AccelerometerReading> e)

{

    Dispatcher.BeginInvoke(() => MyReadingChanged(e));

}

void MyReadingChanged(SensorReadingEventArgs<AccelerometerReading> e)

{

    //use the XNA Vector3 object to access X,Y,Z

    Microsoft.Xna.Framework.Vector3 moved = e.SensorReading.Acceleration;

    BallTransform.X = -e.SensorReading.Acceleration.Y * (Track.Width - Ball.Width);

}

Tags: , , ,

Windows Phone 7 | WP7

Augmented Reality#1: Display The Live Video Feed

by CameronM 4. October 2011 05:53

There are loads of interesting Augmented Reality (AR) apps doing the rounds on all smartphone platforms and now, Microsoft has given developers all the tools they need to build great AR apps for the Mango release of Windows Phone.

The first step in creating the next big augmented reality app is to display the live video feed. Before the Mango release, the only interaction developers had with the camera was using the CameraCaptureTask, which I covered in an earlier post. The CameraCaptureTask only lets you start the built-in camera app and wait for it to send back the results to your app.

With the new features in Mango, you can access the feed directly from the camera, with only a few lines of code. All you need to do is set the source of the VideoBrush control to the devices camera.

To start, add a Rectangle to your MainPage XAML and set it’s Fill to a VideoBrush.

 

<Rectangle>
    <Rectangle.Fill>
        <VideoBrush x:Name="videoBrush"/>
    </Rectangle.Fill>
</Rectangle>

In the code behind, add a using statement for Microsoft.Devices and the in either the Loaded or OnNavigatedTo method, set the source of the VideoBrush to the PhotoCamera class.

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

    PhotoCamera m_camera = new PhotoCamera();

    this.videoBrush.SetSource(m_camera);

}

Compile and run the app in the emulator and you’ll see an exciting black square moving around on a white background. Don’t worry, on a real device you will see the actual camera feed.

Now, if you are lucky enough to have a real Windows Phone 7 device and you have upgraded to Mango, you will find the results were less than ideal. In fact, the results were about 90 degrees off ideal! Yes that’s right, the code that everyone is flogging off as being able to display the live camera feed displays the resulting video 90 degrees off what it should be. It’s all very interesting and art-nouveau, but in terms of AR apps, it’s rubbish.

Thankfully it’s very easy to fix the problem. All you need to do is apply a transformation to the VideoBrush used to fill the Rectangle.

<Rectangle>
    <Rectangle.Fill>
        <VideoBrush x:Name="videoBrush">
            <VideoBrush.RelativeTransform>a
                <CompositeTransform CenterX="0.5" CenterY="0.5" Rotation="90" />
            </VideoBrush.RelativeTransform>
        </VideoBrush>
    </Rectangle.Fill>
</Rectangle>

This will rotate the camera feed so that what you expect to see through the viewfinder is actually what you get.

This is of course only the first step to creating a fully fledge AR application that will combine the digital and real world in ways you only dreamed of, but it is a huge step forward compared to the old CameraCaptureTask days.

This code is not only useful for augmented reality, but with a small amount of work you can use any number of the existing launcher and chooser tasks in WP7 to create apps that show that real-world camera feed behind whatever tasks you need to perform.

In the next few posts we’ll look at building a simple email and sms tool that uses the camera feed so that users can see where they are going while writing that all important email.

Tags: ,

Windows Phone 7 | WP7

Adding Tap animation to the HubTile

by CameronM 1. October 2011 10:18

In the previous post we looked at how you can use the HubTile control from the Windows Phone Toolkit to perform various navigation tasks. 

One thing you may have noticed is that when you tap the HubTile, it doesn't move like the Live Tiles on the Windows Phone Start Screen. The easy fix for this is to add a TiltEffect, a component of the same Toolkit to the HubTile. The TiltEffect is an easy way to add that slight 'wiggle' you expect when pressing items in the ListView, so it seems like the perfect candidate. 

There are a number of ways to add TiltEffect to the HubTile, but by far the easiest is to add it directly to control, such as in the example below;

<toolkit:HubTile 
        toolkit:TiltEffect.IsTiltEnabled="True"
        Title="Sam" 
        Message="Yosemite Sam" 
        Source="/Assets/Images/Yosemite-Sam.jpg" 
        Background="{StaticResource PhoneAccentBrush}"
        Tap="HubTile_Tap"/>

If you run the page and test the HubTile you'll notice that the animation does not appear to work. That's because for some reason, the HubTile is not included in the list of items that TiltEffect applies to. Thankfully, the solution is easy. In your code-behind you can manually add the HubTile to the TiltableItems list.

public MainPage()
{
    InitializeComponent();
 
    TiltEffect.TiltableItems.Add(typeof(HubTile));
 
}

Tags: , , ,

Windows Phone 7 | WP7

Responding to Windows Phone Toolkit HubTile Events

by CameronM 30. September 2011 14:54

In a previous post we looked at how to include the metro-styled HubTile to your Windows Phone app. In this post, we'll discover how to perform an action when the user taps the tile. 

The HubTile contains an event named Tap, which is triggered whenever the users touches the tile. This event can be handled in your code-behind to perform a task, such as navigating to a new page in your app. 

XAML

<toolkit:HubTile  
        Title="Sam"  
        Message="Yosemite Sam"  
        Source="/Assets/Images/Yosemite-Sam.jpg"  
        Background="{StaticResource PhoneAccentBrush}" 
        Tap="HubTile_Tap"/>

Code Behind

private void HubTile_Tap(object sender, System.Windows.Input.GestureEventArgs e) 
{ 
    NavigationService.Navigate(new Uri("/DatailsPage.xaml"UriKind.Relative)); 
}

This solution works fine if you have a single HubTile, but what about if you have more than one HubTile, which really is the point of the control in the first place? 

The good news is that there are a number of way you can handle multiple HubTile on a single page. Firstly, you could create separate handlers for each Tap event, like in the example below.

XAML

<toolkit:HubTile  
        Title="Sam"  
        Message="Yosemite Sam"  
        Source="/Assets/Images/Yosemite-Sam.jpg"  
        Background="{StaticResource PhoneAccentBrush}" 
        Tap="HubTile1_Tap"/> 
<toolkit:HubTile  
        Title="Bugs"  
        Message="Bugs Bunny"  
        Source="/Assets/Images/Bugs-Bunny.jpg"  
        Background="{StaticResource PhoneAccentBrush}" 
        Tap="HubTile2_Tap" 
    Margin="12,0,0,0"/>

Code Behind

private void HubTile1_Tap(object sender, System.Windows.Input.GestureEventArgs e) 
{ 
    NavigationService.Navigate(new Uri("/DatailsPage1.xaml"UriKind.Relative)); 
} 
  
private void HubTile2_Tap(object sender, System.Windows.Input.GestureEventArgs e) 
{ 
    NavigationService.Navigate(new Uri("/DatailsPage2.xaml"UriKind.Relative)); 
}

This gives you a nice separation of concerns and makes it clear exactly what is going on, but it also means there's a lot of code.

Another option is to use the single event handler, but to somehow identify the actually HubTile that was tapped. The sender object in the HubTile Tap event is the HubTile that was tapped, so it is relatively easy to cast the sender but to a HubTile and retrieve whatever values you want to uniquely identify the HubTile.

The code below shows how easy it is to retrieve the HubTile's Title value and then use it in a switch statement to perform a different action for each HubTile.

private void HubTile_Tap(object sender, System.Windows.Input.GestureEventArgs e) 
{ 
    HubTile tile = (HubTile)sender; 
    MessageBox.Show(tile.Title); 
  
    switch(tile.Title) 
    { 
        case "Sam": 
            NavigationService.Navigate(new Uri("DetailsPage1.xaml",UriKind.Relative)); 
            break; 
        case "Bugs": 
            NavigationService.Navigate(new Uri("DetailsPage1.xaml",UriKind.Relative)); 
            break; 
    } 
}

Tags: , ,

Windows Phone 7 | WP7

Using the Windows Phone Toolkit HubTile control

by CameronM 27. September 2011 08:41

In the August 2011 release of the Windows Phone Toolkit a handy little control has been released that makes it easy to created rotating tiles similar to those that come on the Windows Phone start screen. In this demo, we'll cover how to add a HubTile control to your app and describe the various components of the HubTile. 

First off, follow the instructions on CodePlex (http://silverlight.codeplex.com/) to install the Windows Phone Toolkit and create a new Windows Phone project in Visual Studio.

On the page where you want to use the HubTile, add an XML Namespace entry for the Toolkit.

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

The code to add a single HubTile to the page is as follows;

<toolkit:HubTile  
    Title="Sam"  
    Message="Yosemite Sam"  
    Source="/Assets/Images/Yosemite-Sam.jpg"  
    Background="{StaticResource PhoneAccentBrush}" />

Basic Properties

Title - Appears on both the front and flip-side of the tile (Sam) 

Message - Appears at the top of the flip-side of the tile (Yosemite Sam) 

Source - The image to display

Behaviour 

The HubTile cycles through a number of states as shown in the image below. These include displaying only the Source image, a split view of the Source and Title, the front-side view of the Title in large font and the flip-side view. 

 

Obviously, one HubTile on it's own is not that exciting, but by wrapping a number of HubTiles in one of the XAML containers, such as a Grid or StackPanel, you'll soon be on the way to creating a Start Screen-like experience in your own app.

 

Tags: , ,

Windows Phone 7 | WP8

Getting Started with Starter Kit for Schools

by CameronM 20. September 2011 06:00

Chris Koenig has just authored a nice little starter kit designed specifically for building a Windows Phone app that displays information about a school.

Once you have downloaded the latest package from github you should extract the zip file, which contains the sample project. Launch Visual Studio and open the MySchoolApp project from the C# folder. Build and run the application to check that everything compiles.

A quick read of the descriptionframe.html instructions located in the description folder is also helpful, as it lays out how to go about changing the default settings.

Most of the data is contained within the app's Data folder, so it's going to be a little painful to update, but certainly it's a good start. A more robust approach would be to create a WFC web service that would feed the relevant data. Having said that, unless your school, college or university changes every other day, the static content will probably suffice.

Adding a new set of links

The app also contains a number of collections of links that can be used to launch the browser and display some online content. Out of the box these are saved in Links.xml and Athletics.xml. It is pretty easy to add more link collections by creating and modifying a copy of these files.

For example you could create Arts.xml to showcase the Arts and Cultural aspects of your school.

This might then contain XML such as shown below:

<links>

  <link>

    <url>http://contosouniversity.net</url>

    <title>Top Arts News</title>

  </link>

  <link>

    <url>http://contosouniversity.net</url>

    <title>Choir News</title>

  </link>

  <link>

    <url>http://contosouniversity.net</url>

    <title>Orchestra News</title>

  </link>

  <link>

    <url>http://contosouniversity.net</url>

    <title>Theatre News</title>

  </link>

</links>

Modify the ViewModel

The next step is to wire up the code so that you can use these links on the MainPage. To do this you need to make a few changes to the MainViewModel.cs file, located in the ViewModels folder.

First create a new property to expose your list of Arts related links

public ObservableCollection<Link> ArtsLinks { get; private set; }

Modify the constructor to instantiate a new instance of this property

this.ArtsLinks = new ObservableCollection<Link>();

Finally, modify the parseLinkFile method and include the code to load the links from Arts.xml.

parseLinkFile("/Data/Arts.xml").ForEach(x => ArtsLinks.Add(x));

Add a new PanoramaItem

To display the new list of Arts links, open MainPage.xaml and copy the existing athletics PanoramaItem. You can then modify this code to point to our newly created ArtsLinks.

<controls:PanoramaItem Header="arts">
    <ListBox x:Name="artsListBox" 
                Margin="0,0,-12,0" 
                ItemsSource="{Binding ArtsLinks}" 
                ItemTemplate="{StaticResource LinkDataTemplate}" 
                SelectionChanged="ListBox_SelectionChanged"/>
</controls:PanoramaItem>

Compile and run the app to see your new Arts links.

Tags: , ,

Windows Phone 7 | WP7

Building a Windows Phone 7 Look-a-like

by CameronM 13. September 2011 07:26

After viewing some of the fan-mail for Sahas Katta's WP7 resume, I decided to check out just how hard it would be to build a WP7/Metro inspired website. While both Sahas' and my own attempts are not exactly perfect mirrors of the Windows Phone 7 end-user experience, it was certainly an interesting experiment.

Has your boss already bought you an Android? Are you stuck with an iPhone? Do you really wish you could experience a Windows Phone without parting with your hard-earned cash?

Well here is your solution. Take a look at this Windows Phone 7 (Mango-release) inspired site .

The site is constructed using some screenshots from the WP7 emulator and the layout is true to the actual device - trust me, I have spent enough time developing for WP7 that I know these proportions off-by-heart.

 

WP7 Inspired Site

Tags: , ,

ASP.NET | C# | WP7

WP7 Mango Features #4: ShareStatusTask

by CameronM 10. September 2011 06:55

Ok, so it has only been a few weeks since I signed up for my first twitter account, and yes that was only after some very serious persuasion by Emily, the Spotlight2011 Program Manager, but I couldn’t help but have a play with the new Windows Phone Mango release Social Tasks.

The ShareStatusTask does nothing when running under the emulator, this is because is relies on the social networks you have linked to your phone’s Live account. Obviously, the emulator does not have a Live account associated with it, so you really need to test this out on a real phone.

private void Button_Click(object sender, RoutedEventArgs e)

{

    //the sharestatustask will not work in the emulator as it needs your social network account details

    ShareStatusTask shareStatusTask = new ShareStatusTask();

    shareStatusTask.Status = "Testing some great features for our mango release";

    shareStatusTask.Show();

}

I did, and I can report that after clicking the button on the app, a screen containing both the message and a list of social networks to post to was displayed. The user can easily select one or more of the social networks, such as Live, Twitter and Facebook. By default, all networks are selected, so you simply need to unselect the accounts you don’t want to post to. The user can also change the text being sent, or even cancel posting the status update. As with the EmailComposeTask in NoDo we see Microsoft continuing the policy that the user must always have the ability to cancel or amend the message before it is sent, making sure that any app you install won’t start randomly messaging everyone you know. 

Anyway, here are the results from posting an update to Twitter using the TrafficmateWP account.

Tags: , , , ,

WP7

WP7 Mango Features #3: Bing Search

by CameronM 8. September 2011 16:14

While on the subject of all things Bing and following on from recent posts on the new Bing Maps Tasks available to developers in the Windows Phone Mango release, I noticed another feature, called the SearchTask, is still alive and well from WP 7.0.

Although I hadn't needed to use the SearchTask previously, after a brief experiment I realised that this is another easy way to access some of the great Bing features on Windows Phone. The SearchTask, as the name suggests, launches the newly revised Bing Search app – you know the app that always stars when you accidently hit the ‘search’ button on your phone! This time however, as a developer you can actually launch this app and set the search string so that the user is taken straight to the relevant results.

private void Button_Click(object sender, RoutedEventArgs e)
{
    SearchTask search = new SearchTask();
 
    search.SearchQuery = "Brisbane restaurants";
    search.Show();
}

Tags: , ,

WP7

WP7 Mango Features #2: BingMapsDirectionTask

by CameronM 1. September 2011 06:02

In the previous post I covered the new Bing Maps Tasks available to developers in the Mango release for Windows Phone. In that post I showed you how to use the search task to located business or point of interest matching your search term. In this post we will cover the other new feature, the BingMapsDirectionTask. Again this is a huge time-saver for anyone who has ever tried to use the Bing Maps API and built a ‘get directions’ page from scratch. 

Follow the instructions in the previous post to get started. Once you have all the references sorted, create a new button and code its OnClick event to the following. 

The BingMapsDirectionsTask requires either the start or end location to be explicitly set, and it will use the device location for the one you do not specify. Of course in the emulator, you will want to set both values.

As with the BingMapsTask, you only require a few lines of code to gain access to all the goodness of the built-in Bing Maps application.

private void Button_Click(object sender, RoutedEventArgs e)

{

    BingMapsDirectionsTask directions = new BingMapsDirectionsTask();

    //your must specify either the start or end locations

    //if you leave one of these empty, Bing will use the current location

    //if using the emulator simply specify both start and end

    directions.Start = new LabeledMapLocation("Home", new GeoCoordinate(-27.31063, 152.99032));

    directions.End = new LabeledMapLocation("Work", new GeoCoordinate(-27.46868, 153.02105));

    directions.Show();

 

}

 

One interesting thing I noticed after accidently swapping a few numbers in the Start lat/long was that I ended up on Stradbroke Island. Not deterred by my error, Bing actually directed me to the ferry terminal and even included a helpful message ‘check the timetable’.

Tags: , ,

WP7