7MC Gofer

rudigrobler

5.00/5 (2 votes)

Jun 23, 2010

CPOL

2 min read

27881

7MC Gofer is a Windows Phone 7 based remote control for my Windows Media Center.

A gofer or go-fer (pronounced /'go?f?r/ "Topo") is an employee who is often sent on errands.

Introducing 7MC Gofer

7MC Gofer is a Windows Phone 7 based remote control for my Windows Media Center.

Installing Vista Media Center TCP/IP Controller

Download the Windows 7 version here.

Before we can start, we need a way of controlling our 7MC. Vista Media Center TCP/IP Controller is a small addin for 7MC which hosts an HTTP-like server that accepts simple commands (like button-up, volume, etc.).

Once installed, test the service by navigating to the following URL using your browser (http://localhost:40510/help).

I also created an EXTREMELY simple wrapper for executing commands:

public class MceService
{
    const string endPointServer = "localhost";

    private void ExecuteCommand(string command, params object[] args)
    {
        string requestUriString = string.Format
		("http://{0}:40510/{1}", endPointServer, command);
        foreach (var arg in args)
        {
            requestUriString += "%20";
            requestUriString += arg;
        }

        Console.WriteLine(requestUriString);

        var request = (HttpWebRequest)WebRequest.Create(requestUriString);
        request.Method = "GET";
        request.BeginGetResponse(ExecuteCommandCallback, null);
    }

    static void ExecuteCommandCallback(IAsyncResult result) { }

    public void Goto(string parameter)
    {
        ExecuteCommand("goto", parameter);
    }

    // The reset is removed for brevity
}

This is based on the code demoed by Dan & Clint @ Tech-ed (you have to watch their video).

MVVM Light Toolkit

Download the toolkit here (also read the Get Started).

The last thing we need to cover before we can start is the MVVM Light Toolkit. It’s a GREAT MVVM toolkit created by Laurent Bugnion. I am using this framework for 2 main reasons, locating the ViewModel...

DataContext="{Binding Main, Source={StaticResource Locator}}"

...and hooking up the commands… Here is the command (In my ViewModel):

private RelayCommand backCommand;
public RelayCommand BackCommand
{
    get
    {
        if (backCommand == null)
            backCommand = new RelayCommand(() => 
                {
                    // Do your work here...
                });

        return backCommand;
    }
}

And in the View?

< />Button /> Content />="Back" />>
    < />i:Interaction.Triggers />>
        < />i:EventTrigger /> EventName />="Click" />>
            < />cmd:EventToCommand /> Command />="{Binding BackCommand}" /> / />>
        < />/ />i:EventTrigger />>
    < />/ />i:Interaction.Triggers />>
< />/ />Button />>

MVVM Light Toolkit makes this extremely easy!

Creating a Windows Phone 7 Client

Download the tools here.

Now that we have the basics covered, we can start with the actual application! This is what I have in mind… The main view (which I called the Dashboard offers shortcuts to some of the main capabilities of 7MC, like videos, pictures, music and TV). I also allow you to change the volume (up, down, mute and un-mute). Here is the dashboard:

Once you have actually clicked on option, you will be taken to another view.

This is the direction pad. Navigation is done using simple gestures (Flick up/down/left/right and double-tap).

Here is the code to check for gestures:

private void PhoneApplicationPage_ManipulationStarted
	(object sender, System.Windows.Input.ManipulationStartedEventArgs e)
{
    e.Handled = true;
}

private void PhoneApplicationPage_ManipulationDelta
	(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
{
}

private void PhoneApplicationPage_ManipulationCompleted
	(object sender, System.Windows.Input.ManipulationCompletedEventArgs e)
{
    double x = e.TotalManipulation.Translation.X;
    double y = e.TotalManipulation.Translation.Y;

    // Ugly hack I know...
    var vm = DataContext as MainViewModel;

    if (Math.Abs(y) > Math.Abs(x))
    {
        if (y < -20)
        {
            vm.MceService.Button("up");
        }
        if (y > 20)
        {
            vm.MceService.Button("down");
        }
    }
    else
    {
        if (x < -20)
        {
            vm.MceService.Button("left");
        }
        if (y > 20)
        {
            vm.MceService.Button("right");
        }
    }
}

Very basic, I know… but it works. :)

And as always, here is the code.

Before you start, check out this video:

Coding4Fun- Learn Windows Phone 7 Development by Creating a Robotic T-Shirt Cannon