Blog


Adding speech recognition to your WP8 app

To add speech recognition to our app we will be using the newly released version of the Windows Phone toolkit (release June 2013) – which adds a nice new control called SpeechTextBox (that does exactly what you think). You can get the latest build using NuGet or you can download the source from CodePlex.

Once you’ve referenced the toolkit in you project all you are left to do is add the control:

<toolkit:SpeechTextBox SpeechRecognized="SpeechTextBox_SpeechRecognized" />

Handling the SpeechRecognized event is not necessary. I’ve left it there just to point out that you can choose what you want to do with the speech recognition result. The event comes with a SpeechRecognizedEventArgs parameter which allows you to check the level of confidence for the recognized phrase and also get details about the phrase semantics.




Periodically update your live tiles using ScheduledTaskAgent

I’ve covered in a previous post how to create wide tiles for your Windows Phone 7 application. Now it’s time to bring them to life. The easiest way to do so is by using a ScheduledTaskAgent. To create one go ahead and add a new project to your solution and from the project templates list choose ‘Windows Phone Scheduled Task Agent’.

Before we go any further – go ahead and add this new (task agent) project as a reference in the main application project.

This will create for you a class called ‘ScheduledAgent’ which inherits ‘ScheduledTaskAgent’. You can leave the constructor of the class and the exception handler as they are. The method that interests us is ‘OnInvoke’. This is the method that will be called for us periodically for as long as the agent is running.

This is the method in which we will update our live tile. Let’s say we update our tile from a RSS feed. So the first thing we need to do is download our feed.

protected override void OnInvoke(ScheduledTask task)
{
    WebClient client = new WebClient();
    client.DownloadStringCompleted += (s, e) =&gt;
        {
            DownloadStringCompleted(s, e);
            NotifyComplete();
        };
    client.DownloadStringAsync(new Uri(&quot;http://blogs.windows.com/windows_phone/b/windowsphone/rss.aspx&quot;));
}

Once downloaded, deserialize it, take the first (latest) item and use the title and image to update your live tile.

private void DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
    if (e.Error == null)
    {
        StringReader stringReader = new StringReader(e.Result);
        XmlReader xmlReader = XmlReader.Create(stringReader);
        SyndicationFeed feed = SyndicationFeed.Load(xmlReader);

        var latestArticle = feed.Items.FirstOrDefault();
        var tile = ShellTile.ActiveTiles.FirstOrDefault();
        if (tile != null)
        {
            var tileData = new FlipTileData();
            tileData.Title = &quot;Windows Phone Blog&quot;;

            var content = latestArticle.Title.Text + &quot; - &quot; + latestArticle.Summary.Text;
            var image = latestArticle.Links.FirstOrDefault(l =&gt; l.MediaType != null &amp;&amp; l.MediaType.Contains(&quot;image&quot;)).Uri;

            tileData.BackContent = content;
            tileData.BackgroundImage = image;

            tileData.WideBackContent = content;
            tileData.WideBackgroundImage = image;
            tile.Update(tileData);
        }
    }
}

Pay attention to where I call NotifyComplete()! This method releases all the resources used by the agent. It is important to call this method because otherwise the task will never end and thus will never start again. It is also very important to call it when everything is done – in this particular case in the DownloadStringCompleted event, after updating the live tiles.

This leaves us with only one thing left to do: registering the scheduled task. We will do this in the Application_Launching event (found in App.xaml.cs).

private void Application_Launching(object sender, LaunchingEventArgs e)
{
    var taskName = &quot;WindowsPhoneBlogSTA&quot;;
    PeriodicTask periodicTask = ScheduledActionService.Find(taskName) as PeriodicTask;
    if (periodicTask != null)
        ScheduledActionService.Remove(taskName);

    periodicTask = new PeriodicTask(taskName) { Description = &quot;Periodic task to update the tile of &lt;your app&gt;.&quot; };
    try
    {
        ScheduledActionService.Add(periodicTask);
        #if DEBUG
            ScheduledActionService.LaunchForTest(taskName, TimeSpan.FromSeconds(30));
        #endif
    }
    catch (InvalidOperationException) { }
}



Creating wide tiles for your Windows Phone 7 app

I’ve recently come across an article in the Nokia Developer Wiki about creating live tiles (including wide tile) for both Windows Phone 7 and Windows Phone 8 by writing a single piece of code that works in both versions of the OS.

To do this you will need to use the MangoPollo library which you can easily get from NuGet. The library uses reflection to create your live tiles depending on the OS version the app is running in. Creating your tiles is easy:

var tile = ShellTile.ActiveTiles.FirstOrDefault();
if (tile != null)
{
    var tileData = new FlipTileData();
    tileData.Title = "Start Debugging";

    tileData.BackContent = "switch to windows phone, we've got candy";
    tileData.BackgroundImage = new Uri("Assets/tileBackground.png", UriKind.Relative);
    tileData.BackBackgroundImage = new Uri("Assets/tileBackBackground.png", UriKind.Relative);

    tileData.WideBackContent = "switch to windows phone, we've got candy";
    tileData.WideBackgroundImage = new Uri("Assets/wideTileBackground.png", UriKind.Relative);
    tileData.WideBackBackgroundImage = new Uri("Assets/wideTileBackBackground.png", UriKind.Relative);

    tile.Update(tileData);
}

That’s all you need to do. Both the normal and wide live tiles should now be available when resizing the tile of your app. Now all that’s left for you to do is to update it.

Also, one thing that wasn’t so obvious for me – you can use absolute URIs for the tile images. eaning that you can give as a source a image directly from the internet and the OS will download and cache it for you.

tileData.WideBackgroundImage = new Uri("http://cdn.marketplaceimages.windowsphone.com/v8/images/0a539106-8940-4898-99c2-744cbc7a6097?imageType=ws_icon_small", UriKind.Absolute);



Insolated Storage Settings Helper for Windows Phone

Decided that I’d share a really simple helper class that I often use in my Windows Phone apps. It’s called IsolatedStorageSettingsHelper and it only has three methods:

  • T GetItem<T>(string key) – gets the object with the specified key from the IsolatedStorageSettings. If there isn’t an object with that key it will return null. If the object is not of the type specified then it will return a new instance of T.
  • void SaveItem(string key, object item) – saves the item passed as a parameter in the IsolatedStorageSettings using the specified key.
  • void SaveItems(Dictionary<string, object> items)  – used for saving multiple items at once. All the items in the dictionary are saved in the IsolatedStorageSettings with their respective keys.

This is not much, but that’s all I ever needed for my apps. Hope it will be of help. Code below.

public class IsolatedStorageSettingsHelper
{
   public static void SaveItem(string key, object item)
   {
      IsolatedStorageSettings.ApplicationSettings[key] = item;
      IsolatedStorageSettings.ApplicationSettings.Save();
   }

   public static void SaveItems(Dictionary<string, object> items)
   {
      foreach (var item in items)
         IsolatedStorageSettings.ApplicationSettings[item.Key] = item.Value;
      IsolatedStorageSettings.ApplicationSettings.Save();
   }

   public static T GetItem<T>(string key)
   {
      T item;
      try
      {
         IsolatedStorageSettings.ApplicationSettings.TryGetValue<T>(key, out item);
      }
      catch (InvalidCastException ice)
      {
         return default(T);
      }
      return item;
   }
}



FIX: Firefox tabs having strange colors in Windows 8

This graphics glitch is a known bug in Firefox running on Windows 8. It appears to manifest only on machines that run on nVidia graphics cards and it is caused by the browser using hardware acceleration.

The fix is simple – disable hardware acceleration from your browser’s settings menu and the strange colors will be gone – and so will be your browser’s hardware acceleration unfortunately. But that’s all we can do until the bug gets fixed.

You can track the issue on bugzilla here: https://bugzilla.mozilla.org/show_bug.cgi?id=686782

And just in case you can’t find the menu where to disable hardware acceleration: open the options window (Firefox – Options or Tools – Options) – Advanced – General – and here uncheck the ‘Use hardware acceleration when available’ checkbox. That’s it.




AdMob crashing Windows Phone apps. What is the alternative?

Not long ago I’ve published my first app using the devcenter developer account and not the global publisher – and just a couple of days later (or should I say weeks) I started noticing crash reports for my app.  Downloaded the stack trace data in hope that I could find out where the issue was but no luck – it gave me almost no info about the cause. All I know is that it has something to do with the browser.




Mobile HTML5 and jQuery webinar week

There’s a series of 3 webinars coming up two weeks from now about HTML5 and jQuery and how you can take advantage of them in building apps across multiple browsers, platforms and devices.

The three webinars will take place on 19, 20 and 12 of June at 11:00 AM EDT and will last for 1 hour and 15 minutes:

  • Getting Started with HTML5 & jQuery – June 19th
  • Working with Data Using igDataSource – June 20th
  • Building a Real World App – June 21th

Presenting will be Angel Todorov and Jason Beres.

Registration is free and can be done by following this link. You can also find more details about the event by visiting HTML5/jQuery Webinar Week.




Windows 8 and Secure Boot – What if your PC doesn’t support it?

So today, while (by mistake) attempting to upgrade my Windows 7 to Windows 8 I ran into a compatibility check with 6 errors including one that states:

Secure Boot isn’t compatible with your PC

At first it gave me the creeps thinking that I won’t be able to install Windows 8 although the Consumer Preview ran just fine (with a few exceptions) but then, a couple of searches later, I realized that this won’t be a problem at all. Secure Boot is a feature that you can just skip and everything will work just fine.




8bit Google Maps for NES

Google has long neglected one of the most popular and best sold devices ever – but all that ignorance ends today as Google releases their first NES product: Google Maps 8bit for NES.

The product has all of the features you got used to on the desktop version, including the street view:

  • search for a street or place
  • directions from one place or another
  • voice search
  • street view
  • and the ability to save routes and locations

All this is made possible by Google’s cloud which is converting

For a quick trial head over to http://maps.google.com/ and click on the quest button at the top-right of the screen. Or watch the video above.




3D Animations Using Pure CSS3

What determined me to write this post and a few others was this page (works in Chrome and Safari only). Amazing what you can do by using only CSS. So, let’s take a look under the hood – the css for that effect looks like this:

#movieposters li { display:inline; float:left;
	-webkit-perspective: 500; -webkit-transform-style: preserve-3d;
	-webkit-transition-property: perspective; -webkit-transition-duration: 0.5s; }
#movieposters li:hover { -webkit-perspective: 5000; }
	
#movieposters li img { border:10px solid #fcfafa; -webkit-transform: rotateY(30deg);
	-moz-box-shadow:0 3px 10px #888; -webkit-box-shadow:0 3px 10px #888;
	-webkit-transition-property: transform; -webkit-transition-duration: 0.5s; }
#movieposters li:hover img { -webkit-transform: rotateY(0deg); }

Kind of messy. But if we strip out the borders and shadows and arrange the code a bit, you’ll see it’s actually not that complicated.

#movieposters li { 
	display:inline; float:left;
	-webkit-perspective: 500; 
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property: perspective; 
	-webkit-transition-duration: 0.5s; 
}

#movieposters li:hover { 
	-webkit-perspective: 5000; 
}
	
#movieposters li img { 
	-webkit-transform: rotateY(30deg);
	-webkit-transition-property: transform; 
	-webkit-transition-duration: 0.5s; 
}
#movieposters li:hover img { 
	-webkit-transform: rotateY(0deg); 
}

As you can see what’s being done are basically two transitions:

  • a perspective transition on the list item from a value of 500 to a value of 5000 on hover with a duration of 0.5s
  • and a rotate transform transition on the image inside the list item, with the same duration, from 30 degrees to 0 degrees

You can play with the values and see what other nice effects you can obtain. Maybe even leave a comment with a link to the nice effect that you’ve obtained.

Making it work in Firefox

Now what really intrigued me was the fact that it didn´t work in Firefox. Why? After doing a couple of searches on Google the answer became obvious, -webkit- commands are for webkit-based browsers while Firefox requires commands prefixed with -moz-. I guess I should’ve known that already…

So I’ve added new lines for each command and replaced the -webkit- with -moz- thinking that it will work. It did, except for the fact that it had no animation. Couple of searches later and still no answer, so in the true spirit of a developer I typed in stackoverflow.com and asked my question. A couple of hours later I had my first answer and fortunately it held the solution to my problem (check it out here if you want). The transition-property had to be a -moz- property as well. Simple properties like transform or perspective don’t work like they do in webkit so I had to use -moz-transform and -moz-perspective instead.

So here’s the complete CSS code that I’ve ended using:

#movieposters li { 
	display:inline; float:left;
	-webkit-perspective: 500; 
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property: perspective; 
	-webkit-transition-duration: 0.5s; 
	-moz-transition-duration: 0.5s; 
	-moz-perspective: 500; 
	-moz-transform-style: preserve-3d;
	-moz-transition-property: -moz-perspective; 
}

#movieposters li:hover { 
	-webkit-perspective: 5000; 
	-moz-perspective: 5000; 
}
		
#movieposters li img { 
	-webkit-transform: rotateY(30deg);
	-webkit-transition-property: transform; 
	-webkit-transition-duration: 0.5s; 
	-moz-transition-duration: 0.5s; 
	-moz-transform: rotateY(30deg);
	-moz-transition-property: -moz-transform; 				
	width: 210px;
}

#movieposters li:hover img { 
	-webkit-transform: rotateY(0deg); 
	-moz-transform: rotateY(0deg);
}

Also, you can check out a demo here: 3D CSS Animation