Benjii Me

What is Gadgeteer? – Getting Started

Benjii — Tue, 21 Feb 2012 15:36:12 +0000

Whether you’ve just purchased a Gadgeteer like me, or you’re just curious, this post will give you some quick links and helpful tips to get started.

What is Microsoft .NET Gadgeteer?

Really cool plug’n’play style hardware for programmers.

Starting with a mainboard and a power module, you can connect an awesome array of modular components to form some cool little electronic projects. Check out the Gadgeteer Homepage for examples of cool projects, the latest news and more delicious Gadgeteer related information.

What do I buy?

I bought the FEZ Spider Starter Kit from GHI Electronics which includes a wide range of goodies including:

FEZ Spider Mainboard
Display T35 Module (3.5″ with touchscreen)
USB Client DP Module (with USB cable)
Camera Module
2x Multicolor LED Module (DaisyLink)
2x Button Module
Ethernet J11D Module
SD Card Module
USB Host Module
Extender Module
Joystick Module
10cm IDC cables (included with modules).
Assorted IDC Cable Pack:
- 4x 5cm IDC cables
- 3x 20cm IDC cables
- 1x 50cm IDC cable

There are a few other kits, as well as a large range of really cool modules like wifi, bluetooth, temperature and light sensors, the list goes on…

Once I have one, what do I do?

Make sure you have Visual Studio 2010 or Visual C# 2010 Express (the free one)
Download and install the .NET Micro Framework 4.1 SDK
Download and install the SDK for your particular hardware. Check out this Getting Started Guide if you’re unsure. If you’re using the same starter kit as me then you can download it from here: http://www.tinyclr.com/support/

OK, let’s build something

The best way to start off is to follow the Building your first .NET Gadgeteer Device tutorial which will introduce you to the basics (very important). It is specific to the kit I bought, but the concepts are the same.

I was worried for a short while as I thought my camera module was broken. I was getting really blurry, erratic images displaying on my touch screen. It turns out that no, it was just out of focus, and the correct focus was a bit fiddly to get (you have to unscrew the lens a little bit), until I found out how to stream bitmaps to the display instead of just taking pictures.

Michael Dodaro has a cool post about storing streamed bitmaps to SD. As a challenge, try extracting just the code you need to get the camera streaming to the display, it will help you focus the camera properly and get you on your way to building cool new projects.

Once I’ve created something, I’ll post about my adventures to get there.

Using Multiple Application Bars in Windows Phone Development

Benjii — Mon, 12 Dec 2011 13:32:33 +0000

You know when you select multiple emails and the application bar swaps out for a different one? No? We’ll get ready to learn. This trick looks much better than enabling and disabling menu items on your application bar and is dead simple to achieve.

Step 1: Create your Application Bars

Make sure you have the shell namespace reference at the top of your PhoneApplicationPage:

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

Create your application bars and add them to your page resources using the following XAML. I’ve created three, naming them “DefaultAppBar”, “SiungleSelectionAppBar” and “MultiSelectionAppBar”.

Step 2: Use Code to Swap Between Them

Firstly, we need to set a default application bar to load with the page. We can do this by adding the following code to the constructor:

ApplicationBar = (Microsoft.Phone.Shell.ApplicationBar)Resources["DefaultAppBar"];

It’s actually the exact same code to change the application bar to one of our other ones. Check out the following code I use to swap between them when my list fires a selection changed event:

if (list.SelectedItems.Count == 1)
{
    ApplicationBar = (Microsoft.Phone.Shell.ApplicationBar)Resources["SingleSelectionAppBar"];
}
else if (list.SelectedItems.Count > 1)
{
    ApplicationBar = (Microsoft.Phone.Shell.ApplicationBar)Resources["MultiSelectionAppBar"];
}
else
{
    ApplicationBar = (Microsoft.Phone.Shell.ApplicationBar)Resources["DefaultAppBar"];
}

That’s it. You’ll also notice that when you change application bars, it uses a cool swoosh down and then back up animation. All for free.

Continuum Transition for Windows Phone Silverlight Toolkit

Benjii — Mon, 07 Nov 2011 15:16:23 +0000

You know that cool swooshing transition you get when you click an email on your Windows Phone? Now you too can make use of that awesome transition using only the Silverlight Toolkit and this handy dandy Continuum Transition class.

Step 1 – Go get the Silverlight Toolkit!!

As always, I suggest you use Nuget to include it, but feel free to download it from Codeplex

Step 2 – Let’s See How to Use It

The actual continuum transition class is pretty big for a blog post, so I’ll show you how to use it first and then you can copy the Continuum Transition class after that.

If you are already using the Silverlight Toolkit transitions using code, then this should hopefully be familar:

private void ListBox_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
    var selectedElement = (sender as ListBox).ItemContainerGenerator.ContainerFromIndex(lstSeeding.SelectedIndex) as FrameworkElement;

    var navOutTransition = new NavigationOutTransition();
    navOutTransition.Forward = new ContinuumTransition(ContinuumTransitionMode.ContinuumForwardOutStoryboard, selectedElement);

    var navInTransition = new NavigationInTransition();
    navInTransition.Backward = new ContinuumTransition(ContinuumTransitionMode.ContinuumBackwardInStoryboard, selectedElement);

    PhoneApplicationPage phoneApplicationPage =
    (PhoneApplicationPage)(((PhoneApplicationFrame)Application.Current.RootVisual)).Content;

    TransitionService.SetNavigationOutTransition(phoneApplicationPage, navOutTransition);
    TransitionService.SetNavigationInTransition(phoneApplicationPage, navInTransition);

    NavigationService.Navigate(new Uri("/DetailPage.xaml", UriKind.Relative));
}

I’ve used a listbox’s selection changed event as an example, as this is the most common scenario. To break it down, firstly we get the selected item’s framework element. This is the containing element that we are going to animate, in this case a list item.

Next, we setup the actual transitions using the awesome continuum transition class. The first parameter is the type of transition you are making and the second is the element you wish to animate.

After this, we obtain our phone application page and assign the transitions to the transition service.

Once we have done that we can navigate as per normal and the page will automatically transition for you!

Step 3 – Copy the Continuum Transition Class

The code in full is below. It is hosted on Github so you can be confident the below code is up to date.

Also please note the actual storyboards have come from the awesome guys at Clarity Consulting. There is an especially useful post about transitions you should go read right now.

namespace BenjiiMe.Animation
{
    public class ContinuumTransition : TransitionElement
    {
        public const string ContinuumElementPropertyName = "ContinuumElement";
        public const string ContinuumModePropertyName = "Mode";

        public FrameworkElement ContinuumElement
        {
            get { return (FrameworkElement)GetValue(ContinuumElementProperty); }
            set { SetValue(ContinuumElementProperty, value); }
        }

        public ContinuumTransitionMode Mode
        {
            get { return (ContinuumTransitionMode)GetValue(ModeProperty); }
            set { SetValue(ModeProperty, value); }
        }

        public static readonly DependencyProperty ContinuumElementProperty =
           DependencyProperty.Register(ContinuumElementPropertyName, typeof(FrameworkElement), typeof(ContinuumTransition), new PropertyMetadata(null));

        public static readonly DependencyProperty ModeProperty =
            DependencyProperty.Register(ContinuumModePropertyName, typeof(ContinuumTransitionMode), typeof(ContinuumTransition), null);

        public ContinuumTransition() { }
        public ContinuumTransition(ContinuumTransitionMode mode)
        {
            Mode = mode;
        }
        public ContinuumTransition(ContinuumTransitionMode mode, FrameworkElement element)
        {
            Mode = mode;
            ContinuumElement = element;
        }

        public override ITransition GetTransition(UIElement element)
        {
            Storyboard storyboard = null;
            if (Mode == ContinuumTransitionMode.ContinuumBackwardInStoryboard)
                storyboard = XamlReader.Load(ContinuumBackwardInStoryboard) as Storyboard;
            else if (Mode == ContinuumTransitionMode.ContinuumBackwardOutStoryboard)
                storyboard = XamlReader.Load(ContinuumBackwardOutStoryboard) as Storyboard;
            else if (Mode == ContinuumTransitionMode.ContinuumForwardInStoryboard)
                storyboard = XamlReader.Load(ContinuumForwardInStoryboard) as Storyboard;
            else if (Mode == ContinuumTransitionMode.ContinuumForwardOutStoryboard)
                storyboard = XamlReader.Load(ContinuumForwardOutStoryboard) as Storyboard;

            ContinuumElement.GetTransform<CompositeTransform>(TransformCreationMode.CreateOrAddAndIgnoreMatrix);

            SetTargets(new Dictionary<string, FrameworkElement>()
                {
                    { "LayoutRoot", element as FrameworkElement },
                    { ContinuumElementPropertyName, ContinuumElement }
                }, 
                storyboard);

            return new Transition(element, storyboard);
        }

        public void SetTargets(Dictionary<string, FrameworkElement> targets, Storyboard sb)
        {
            foreach (var kvp in targets)
            {
                var timelines = sb.Children.Where(t => Storyboard.GetTargetName(t) == kvp.Key);
                foreach (Timeline t in timelines)
                    Storyboard.SetTarget(t, kvp.Value);
            }
        }

        internal static readonly string ContinuumForwardOutStoryboard =
        @"
            
        ";

        internal static readonly string ContinuumForwardInStoryboard =
        @"
            
                                 Storyboard.TargetName=""LayoutRoot"">
                
        ";

        internal static readonly string ContinuumBackwardOutStoryboard =
        @"
            
                                           Storyboard.TargetName=""LayoutRoot"">
                
                                 Storyboard.TargetName=""LayoutRoot"">
                
        ";

        internal static readonly string ContinuumBackwardInStoryboard =
        @"
            
        ";
    }

    public enum ContinuumTransitionMode
    {
        ContinuumForwardOutStoryboard,
        ContinuumForwardInStoryboard,
        ContinuumBackwardOutStoryboard,
        ContinuumBackwardInStoryboard
    }
}

            view raw
            ContinuumTransition.cs
            This Gist brought to you by GitHub.

Welcome to the bottom of the post, please spread the word about this transition to better the Windows Phone platform for everyone

How to Use the Long List Selector for Windows Phone Mango

Benjii — Sun, 09 Oct 2011 14:25:43 +0000

One of the cool new controls in the Silverlight Toolkit for Windows Phone Mango is the Long List Selector. This post will show you how to get one looking nice, complete with alphabetised grouping.

Step 1: Make sure you have the Silverlight Toolkit referenced

The best way to do this is via Nuget:

or directly from Codeplex:

Step 2: Drop that bad boy onto the page

Paste the following XAML where you would like to use the control.

You’ll notice we need to implement a few templates, these include:

ItemTemplate – Each actual list item
GroupItemsPanel – The panel that holds the popup overlay for selecting a new group
GroupHeaderTemplate – The item at the beginning of each group in the list
GroupItemTemplate – The individual items inside the popup overlay

The first two I’ve included above for simplicity, this includes the item template (which you will need to create yourself) and the group items panel, in which I’ve used a wrap panel. The second two templates we will add to the resources section of the page as follows:

You now have all the XAML you need to rock a kick ass selector like the below screenshots:

Step 3: Sweet XAML bro, but how do I bind data?

Excellent question, you cant just bind a list of items to the itemsource with a long list selector. What you need is the following class and linq queries.

public class Group : IEnumerable
{
    public Group(string name, IEnumerable items)
    {
        this.Title = name;
        this.Items = new List(items);
    }

    public override bool Equals(object obj)
    {
        Group that = obj as Group;

        return (that != null) && (this.Title.Equals(that.Title));
    }

    public override int GetHashCode()
    {
        return this.Title.GetHashCode();
    }

    public string Title
    {
        get;
        set;
    }

    public IList Items
    {
        get;
        set;
    }

    public bool HasItems
    {
        get
        {
            return Items.Count > 0;
        }
    }

    public Brush GroupBackgroundBrush
    {
        get
        {
            if (HasItems)
                return (SolidColorBrush)Application.Current.Resources["PhoneAccentBrush"];
            else
                return (SolidColorBrush)Application.Current.Resources["PhoneChromeBrush"];
        }
    }

    #region IEnumerable Members

    public IEnumerator GetEnumerator()
    {
        return this.Items.GetEnumerator();
    }

    #endregion

    #region IEnumerable Members

    System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
    {
        return this.Items.GetEnumerator();
    }

    #endregion
}

The group class is fairly simple, and is mostly just a container with a title and a list of items. What makes it handy are the other properties that it provides to the long list selector, such as the background colour and hit test (whether or not a group item can be clicked).

The idea is we are going to bind a list of groups to our long list selector. Check out the following code and then meet me on the other side for an explanation.

var allTorrents = (from torrent in model
                select new TorrentListItemViewModel(torrent));

var emptyGroups = new List>()
{
    new Group("#", new List()),
    new Group("a", new List()),
    new Group("b", new List()),
    new Group("c", new List()),
    new Group("d", new List()),
    new Group("e", new List()),
    new Group("f", new List()),
    new Group("g", new List()),
    new Group("h", new List()),
    new Group("i", new List()),
    new Group("j", new List()),
    new Group("k", new List()),
    new Group("l", new List()),
    new Group("m", new List()),
    new Group("n", new List()),
    new Group("o", new List()),
    new Group("p", new List()),
    new Group("q", new List()),
    new Group("r", new List()),
    new Group("s", new List()),
    new Group("t", new List()),
    new Group("u", new List()),
    new Group("v", new List()),
    new Group("w", new List()),
    new Group("x", new List()),
    new Group("y", new List()),
    new Group("z", new List())
};

var groupedTorrents = (from t in allTorrents
                group t by t.GroupHeader into grp
                orderby grp.Key
                select new Group(grp.Key, grp));

lstMain.ItemsSource = (from t in groupedTorrents.Union(emptyGroups)
                orderby t.Title
                select t).ToList();

We start off by fetching the data I need and creating a list of my item view models (TorrentListItemViewModel). Next I create a base list of groups that I want to appear on my screen, regardless of whether or not they have data.

Next I turn my flat list of torrents into a list of groups based on the first letter of their name. The magic coming from the GroupHeader property on my view model, which i’ve shared below:

public string GroupHeader
{
    get
    {
        switch (Name.ToLower().Substring(0,1))
        {
            case "a": return "a";
            case "b": return "b";
            case "c": return "c";
            case "d": return "d";
            case "e": return "e";
            case "f": return "f";
            case "g": return "g";
            case "h": return "h";
            case "i": return "i";
            case "j": return "j";
            case "k": return "k";
            case "l": return "l";
            case "m": return "m";
            case "n": return "n";
            case "o": return "o";
            case "p": return "p";
            case "q": return "q";
            case "r": return "r";
            case "s": return "s";
            case "t": return "t";
            case "u": return "u";
            case "v": return "v";
            case "w": return "w";
            case "x": return "x";
            case "y": return "y";
            case "z": return "z";
            default: return "#";
        }
    }
}

Basically I calculate on the fly which group the torrent belongs to based on it’s Name property, defaulting to symbol if no letter is found.

Lastly I Union together the list of torrent groups and empty groups to create a fully filled list of groups that I bind to the long list selector’s ItemsSource property.

That should be all you need to create an alphabetical long list selector. A bit long winded in places, but it does the job nicely.

Step 4: Where else can I get info?

Please check out the silverlight toolkit’s sample project for a succinct and easy to follow piece of sample code for the long list selector and other cool controls.

Using the MVC-Mini-Profiler with Entity Framework

Benjii — Tue, 26 Jul 2011 04:07:56 +0000

The MVC Mini Profiler is an awesome tool that can help you reduce your page load times by showing you exactly how long each action, database query, view and even partial view took to load. It can be a little tricky to get right, especially using Entity Framework, but if you follow these steps you should be up and running in no time.

Step 1: Nuget it Baby

Install-Package MiniProfiler" src="http://benjii.me/wp-content/uploads/2011/07/image_5.png" width="445" height="92" />

If you haven’t used Nuget yet, now would be an excellent time to start as it makes adding references to third party assemblies a breeze. Click the link above to go to the package page to find out more.

By the time you’re done with this step, you should end up with a reference to the mini profiler in your project.

Step 2: Hook it up

To get the profiler profiling all we need to do is add the following to our Global.asax.cs:

protected void Application_BeginRequest()
{
    if (Request.IsLocal)
    {
        MiniProfiler.Start();
    }
}

protected void Application_EndRequest()
{
    MiniProfiler.Stop();
}

Adding the check for Request.IsLocal means that the profiler will only run when the site is loaded locally. Feel free to add your own check’s. It’s usually handy to check for a cookie or an admin login, to see performance on a production website.

Step 3: Add the includes (and you’re finished)

Add this quick line of code to your _layout view or at the end of your head section. This adds the necessary javascript and css to keep it neat and tidy in the corner.

@MvcMiniProfiler.MiniProfiler.RenderIncludes()

By this point you can fire up your web pages and watch the pretty profiler in action, however it will be a bit bare. Read on to add extra bits and pieces to your fancy new profiler.

Step 4 (Optional): I want SQL profiling!

Very good sir, the profiler supports quite a number of database providers. I’m going to focus on using Entity Framework, as that’s where I had the most trouble. Luckily the good community at Stack Overflow have done the leg work here so we can benefit from their genius. Simply use the following code to retrieve your DB context:

public static T GetProfiledContext() where T : System.Data.Objects.ObjectContext
{
    var conn = ProfiledDbConnection.Get(GetStoreConnection());
    return ObjectContextUtils.CreateObjectContext(conn);
}

public static DbConnection GetStoreConnection() where T : System.Data.Objects.ObjectContext
{
    return GetStoreConnection("name=" + typeof(T).Name);
}

public static DbConnection GetStoreConnection(string entityConnectionString)
{
    // Build the initial connection string.
    var builder = new EntityConnectionStringBuilder(entityConnectionString);

    // If the initial connection string refers to an entry in the configuration, load that as the builder.
    object configName;
    if (builder.TryGetValue("name", out configName))
    {
        var configEntry = WebConfigurationManager.ConnectionStrings[configName.ToString()];
        builder = new EntityConnectionStringBuilder(configEntry.ConnectionString);
    }

    // Find the proper factory for the underlying connection.
    var factory = DbProviderFactories.GetFactory(builder.Provider);

    // Build the new connection.
    DbConnection tempConnection = null;
    try
    {
        tempConnection = factory.CreateConnection();
        tempConnection.ConnectionString = builder.ProviderConnectionString;

        var connection = tempConnection;
        tempConnection = null;
        return connection;
    }
    finally
    {
        // If creating of the connection failed, dispose the connection.
        if (tempConnection != null)
        {
            tempConnection.Dispose();
        }
    }
}

Just call the GetProfiledContext Method with your entities class like so:

var context = GetProfiledContext();

Finally, we need to add this snippet to our web.config to allow for the DbProviderFactories class to do it’s job properly:

Note that this config is for assembly version 1.6.0.0, in future you may need to change this number.

That’s it! You should now see some sql load times to your page load times, and if you click the link it will show you the queries generated, duplicate queries and other sql goodies.

Step 5 (Optional): I want Automatic Controller, View and Partial Profiling!

Well have you come to the right place. Just the other day Sam Saffron posted about automatic controller and view profiling and it couldn’t be simpler. Create these two classes:

ProfilingActionFilter.cs

public class ProfilingActionFilter : ActionFilterAttribute
{
    const string stackKey = "ProfilingActionFilterStack";

    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        var mp = MiniProfiler.Current;
        if (mp != null)
        {
            var stack = HttpContext.Current.Items[stackKey] as Stack;
            if (stack == null)
            {
                stack = new Stack();
                HttpContext.Current.Items[stackKey] = stack;
            }

            var prof = MiniProfiler.Current.Step("Controller: " + filterContext.Controller.ToString() + "." + filterContext.ActionDescriptor.ActionName);
            stack.Push(prof);

        }
        base.OnActionExecuting(filterContext);
    }

    public override void OnActionExecuted(ActionExecutedContext filterContext)
    {
        base.OnActionExecuted(filterContext);
        var stack = HttpContext.Current.Items[stackKey] as Stack;
        if (stack != null && stack.Count > 0)
        {
            stack.Pop().Dispose();
        }
    }
}

ProfilingViewEngine.cs

public class ProfilingViewEngine : IViewEngine
{
    class WrappedView : IView
    {
        IView wrapped;
        string name;
        bool isPartial;

        public WrappedView(IView wrapped, string name, bool isPartial)
        {
            this.wrapped = wrapped;
            this.name = name;
            this.isPartial = isPartial;
        }

        public void Render(ViewContext viewContext, System.IO.TextWriter writer)
        {
            using (MiniProfiler.Current.Step("Render " + (isPartial ? "partial" : "") + ": " + name))
            {
                wrapped.Render(viewContext, writer);
            }
        }
    }

    IViewEngine wrapped;

    public ProfilingViewEngine(IViewEngine wrapped)
    {
        this.wrapped = wrapped;
    }

    public ViewEngineResult FindPartialView(ControllerContext controllerContext, string partialViewName, bool useCache)
    {
        var found = wrapped.FindPartialView(controllerContext, partialViewName, useCache);
        if (found != null && found.View != null)
        {
            found = new ViewEngineResult(new WrappedView(found.View, partialViewName, isPartial: true), this);
        }
        return found;
    }

    public ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache)
    {
        var found = wrapped.FindView(controllerContext, viewName, masterName, useCache);
        if (found != null && found.View != null)
        {
            found = new ViewEngineResult(new WrappedView(found.View, viewName, isPartial: false), this);
        }
        return found;
    }

    public void ReleaseView(ControllerContext controllerContext, IView view)
    {
        wrapped.ReleaseView(controllerContext, view);
    }
}

Finally, add this snippet of code to your Global.asax.cs – Application_Start() method to hook it up:

// Add Profiling Action Filter (mvc mini profiler)
GlobalFilters.Filters.Add(new ProfilingActionFilter());

// Add Profiling View Engine (mvc mini profiler)
var copy = ViewEngines.Engines.ToList();
ViewEngines.Engines.Clear();
foreach (var item in copy)
{
    ViewEngines.Engines.Add(new ProfilingViewEngine(item));
}

RegisterGlobalFilters(GlobalFilters.Filters);

References and More Information

Enjoy your brand new MVC Mini Profiler. Many thanks go to the following collection of awesome links that I’ve sourced the different code snippets from. Be sure to check them out for extra details and clarity.

The MVC Mini Profiler Home Page

Scott Hanselman’s post about using the MVC Mini Profiler

Stack Overflow solution to the EF connection problem

Stack Overflow inspiration for web config changes

Sam Saffron’s post on Automatic Controller and View Profiling

Scrollfixed Sidebar Tutorial with jQuery

Benjii — Sun, 05 Jun 2011 14:20:32 +0000

With the unveiling of my brand new blog theme, you may notice a cool little quirk that appears every time you scroll past the header. That’s right not only does the sidebar follow you, but it also pops up a cool mini version of my main header. This post will describe the surprisingly difficult time I had getting my head around the usage of the position fixed css property.

A little bit of CSS

The CSS for this isn’t actually the hard part, see below:

#wrapper
{
    margin: 0 auto;
    min-width: 1000px;
    width:80%;
    max-width:1400px;
    overflow:hidden;
    position:relative;
}
aside
{
    padding-top:30px;
    overflow: hidden;
    width: 300px;
    float: right;
    clear: none;
}
aside.fixed
{
    position:fixed;
    top:0;
}

Here I include the fluid width for the wrapper, and set the sidebar to it’s regular place of floated right with 300px width. Simple. The tricky part comes when trying to position the sidebar with a fixed position. Little did I know that position relative has no effect on the position fixed child. Position fixed is always relative to the viewport.

jQuery to the Rescue

Luckily for us, jQuery makes this a very simple problem to fix. At the same time we detect if the sidebar has scrolled far enough, we’ll also measure the correct position for the left property of the sidebar. Thus solving the problem forever. Take a look:

$(document).ready(function () {

    var $sidebar = $("aside"),
        $window = $(window),
        offset = $sidebar.offset();

    var bodyRight = $("#wrapper").offset().left + $("#wrapper").width();

    $window.scroll(function () {
        if ($window.scrollTop() > offset.top) {
            $("aside").addClass("fixed");
            $("aside").css("left", bodyRight - $("aside").width());
            $(".miniHeader").slideDown("fast");
        } else {
            $("aside").removeClass("fixed");
            $(".miniHeader").slideUp("fast");
        }
    });

});

Here you’ll notice that we calculate the correct position of the sidebar, then if the window has scrolled far enough, we apply the class and position. You’ll also notice I slide down the mini header. It was just hiding with display none.

These simple pieces of code result in quite a snappy looking sidebar if I do say so myself

TwitLinkz Wp7 App – Summarizing a Twitter Feed Near You!

Benjii — Tue, 24 May 2011 13:57:09 +0000

TwitLinkz takes your favourite twitter feeds, pulls out the links and summarizes the articles for you. It’s as simple as that.

If you source your up to the minute news from twitter, Twitlinkz is a great way to browse the headlines.

Available in the marketplace now, TwitLinkz is free and is set to change the way you get your real-time information.

What does it actually do?

Here’s the step by step:

Follow a twitter feed like #wp7, @benjii22 or “Australia”
TwitLinkz searches the twitter feed for any links that were posted
TwitLinkz fetches and summarizes the articles
You enjoy a list of headlines with article summaries relevant to you

Future Features

I love building Windows Phone 7 apps, so you guys can expect these features to land on your doorstep just as soon as you can say, “Why the hell did he put a z on the end…”

Save your articles for later with Instapaper and other exciting web apps
Push Notifications and Live Tiles
Sign in with twitter for more personalised use

Download TwitLinkz Now, It’s Free!

Torrential – uTorrent WP7 App – Version 1.3 Available Now!

Benjii — Sun, 08 May 2011 09:15:04 +0000

After taking a while to explore other ventures, I’ve finally come back strong with a gleaming new update to Torrential, the WP7 uTorrent Remote Control App.

The update is now with Microsoft so you should be receiving it soon, but while we wait, let’s check out what I’ve done:

Live Tiles

Expect to see these tiles hitting your home screen during the course of this week. At the moment they’ll be swapping out intermittently during downloads, but you should be able to select your preferred version next release.

EzTv Integrated Search

Just like the Isohunt integrated search you’ve come to know and love, you can now search EzTv for your favourite goodies while on the run.

Favourite Websites

Tired of navigating to the same websites every time you want to download a new torrent? So was I, so now you can save your favourite websites and navigate to them with ease.

There’s also a couple of performance updates in there helping speed things up.

As always you can Request a New Feature thanks to the awesome people at Uservoice.

A Brand New Set of Live Tiles for Torrential Coming Soon

Benjii — Thu, 05 May 2011 15:02:51 +0000

Last week I was asked to provide the live tiles for my application to put towards a “Wall of Live Tiles” display that Microsoft will be showing off in an upcoming event for Windows Phone 7. I was more than happy to join the wall, but my tiles weren’t exactly the greatest looking things in the world. I’d like to say they were “practical” but really I was just being lazy. Either way I needed to come up with some new tiles, and fast. Here are the results of my spree in my favourite accent colours:

Expect these bad boys to be hitting your copy of Torrential soon.

Push Notifications in Windows Phone 7 – #3 Push that Notification

Benjii — Sat, 23 Apr 2011 05:02:00 +0000

Finally we arrive at the thrilling conclusion to my push notifications miniseries. This time we will actually push a notification to a device we have previously recorded.

Posts in the series:

Code on the device – This will handle everything you need to put into your wp7 app
Code on the server – This will handle receiving and storing your user’s device URIs on the server
Push that Notification – This will handle actually pushing notifications

Step 1 – Create a Project to do the Pushing

When we left off, we had created a WP7 App Project and a WCF Rest Service Project. Now we need to create a Windows Service or Console Application to run on the server, pushing notifications when it is necessary. So that we can see the results of our pushing easily, I’ve opted to create a Console Application.

Step 2 – Copy this Super Useful Notifications Class

If you take a quick look at this code, you’ll see that we are simply sending some XML to a URI given to us by Microsoft. We picked up the URI in my last post, so read back if you haven’t got one yet. Regardless, here’s the code:

public class PushNotifications
{
    public string SendToast(string uri, string text1, string text2)
    {
        string template =
	        "" +
	        "" +
	            "" +
	                "{0}" +
	                "{1}" +
	            "" +
	        "";

        string toastXML = string.Format(template, text1, text2);

        HttpWebRequest sendNotificationRequest = (HttpWebRequest)WebRequest.Create(uri);

        sendNotificationRequest.Method = "POST";
        sendNotificationRequest.Headers = new WebHeaderCollection();

        sendNotificationRequest.ContentType = "text/xml";
        sendNotificationRequest.Headers.Add("X-WindowsPhone-Target", "toast");
        sendNotificationRequest.Headers.Add("X-NotificationClass", "2");

        byte[] notificationMessage = new UTF8Encoding().GetBytes(toastXML);
        sendNotificationRequest.ContentLength = notificationMessage.Length;

        using (Stream requestStream = sendNotificationRequest.GetRequestStream())
        {
            requestStream.Write(notificationMessage, 0, notificationMessage.Length);
        }

        // Sends the notification and gets the response.
        HttpWebResponse response = (HttpWebResponse)sendNotificationRequest.GetResponse();
        string notificationStatus = response.Headers["X-NotificationStatus"];
        string notificationChannelStatus = response.Headers["X-SubscriptionStatus"];
        string deviceConnectionStatus = response.Headers["X-DeviceConnectionStatus"];

        return notificationStatus;
    }

    public string SendLiveTile(string uri, string backgroundImageUrl, string title, int count)
    {
        string template =
            "" +
            "" +
                "" +
                    "{0}" +
                    "{1}" +
                    "{2}" +
                "" +
            "";

        string tileXML = string.Format(template, backgroundImageUrl, count.ToString(), title);

        HttpWebRequest sendNotificationRequest = (HttpWebRequest)WebRequest.Create(uri);

        sendNotificationRequest.Method = "POST";
        sendNotificationRequest.Headers = new WebHeaderCollection();

        sendNotificationRequest.ContentType = "text/xml";
        sendNotificationRequest.Headers.Add("X-WindowsPhone-Target", "token");
        sendNotificationRequest.Headers.Add("X-NotificationClass", "1");

        byte[] notificationMessage = new UTF8Encoding().GetBytes(tileXML);
        sendNotificationRequest.ContentLength = notificationMessage.Length;

        using (Stream requestStream = sendNotificationRequest.GetRequestStream())
        {
            requestStream.Write(notificationMessage, 0, notificationMessage.Length);
        }

        // Sends the notification and gets the response.
        HttpWebResponse response = (HttpWebResponse)sendNotificationRequest.GetResponse();
        string notificationStatus = response.Headers["X-NotificationStatus"];
        string notificationChannelStatus = response.Headers["X-SubscriptionStatus"];
        string deviceConnectionStatus = response.Headers["X-DeviceConnectionStatus"];

        return notificationStatus;
    }
}

There are a few things to note with the above code. First of all, the XML should be used exactly as is. I’ve heard of a few people having trouble because they missed a capital letter, or didn’t have all of the correct parameters.

Secondly, pay close attention to the headers we are sending. The X-WindowsPhone-Target header sets the type of notification we are pushing (Toast, Live Tile or Raw) and the X-NotificationClass header sets how quickly the notification will be delivered. I’ve only ever seen people use the most urgent value.

You can find some more info about the above code from How To: Send a Push Notification for Windows Phone

Lastly, to see if our message was successfully received by Microsoft’s servers, pay attention to the three headers we receive back from our web call. I pass the X-NotificationStatus back as it gives the best indicator of whether or not the notification worked.

I encourage you to take a look at the Push Notification Service Response Codes for Windows Phone to get an idea of the kinds of responses you could receive.

Step 3 – Push that Notification!

Just as an example, I’m going to setup our console app so that it pushes a notification to the last device added to our database whenever you press “P”. Check out the code:

public class Program
{
    static void Main(string[] args)
    {
        Console.WriteLine("Welcome to the sample push notification server");

        Console.WriteLine("Running... Press enter to exit");

        bool running = true;
        while (running)
        {
            var key = Console.ReadKey(true);

            if (key.Key == ConsoleKey.Enter)
            {
                running = false;
            }
            else if (key.Key == ConsoleKey.P)
            {
                using (var context = new WP7AppDBEntities())
                {
                    // First try to find an existing device
                    var device = (from d in context.Devices
                                    orderby d.Added descending
                                    select d).FirstOrDefault();

                    if (device != null)
                    {
                        PushMessage(device.URI, "Success", "We sent you a message!");
                    }
                }
            }
        }
    }

    static void PushMessage(string uri, string mainText, string secondaryText)
    {
        Console.WriteLine(DateTime.UtcNow.ToString("dd/MM/yyyy hh:mm:ss ") + "Ready to Push Message - " + mainText);

        if (!string.IsNullOrEmpty(uri))
        {
            try
            {
                PushNotifications p = new PushNotifications();
                var pushresult = p.SendToast(uri, mainText, secondaryText);

                Console.WriteLine(DateTime.UtcNow.ToString("dd/MM/yyyy hh:mm:ss ") + "Push Notification Sent: " + pushresult);
            }
            catch (Exception ex)
            {
                Console.WriteLine(DateTime.UtcNow.ToString("dd/MM/yyyy hh:mm:ss ") + "Error pushing toast notification: " + ex.Message + " - " + ex.StackTrace);
            }
        }
    }
}

Essentially the above code waits for you to press “P”, pulls the most recently added device from the database we setup earlier and then sends a toast message to the device. I’ve also added some Console.Writes around the place so you can see what’s going on.

You can also use the above code to send a Live Tile update to a device, but that’s a blog post for another day.