AddThis Social Bookmark Button

Print

An Introduction to Developing Software for Microsoft Windows XP Media Center Edition 2005

by Michael Earls
03/08/2005

At a recent consumer electronics show, Bill Gates suggested that the Media Center PC would be the centerpiece for combining online entertainment sources with existing video sources. As Sean Alexander (a product manager for Media Center) later suggested, Windows Media Center Edition will be the "hub for whole-home entertainment." Windows XP Media Center Edition has been around for a few years, but we're just now starting to see the entertainment industry open up to the new ways in which consumers will experience their digital lifestyles. Most of the future experience for consumers has yet to be imagined. Microsoft has created a phenomenal platform upon which these ideas can take shape, and they've made it accessible to the average consumer. You no longer have to be a computer wizard to set up a system for recording your favorite television shows, watching your favorite movies, browsing family photos, or listening to your favorite music with your home entertainment system.

Windows XP Media Center Edition allows you to do those things today. However, that's just the beginning of the story for the hub of whole-home entertainment. In addition to creating the Media Center operating system, Microsoft has also opened it up so that software developers can control every aspect of the experience using the Windows XP Media Center Edition Software Development Kit (SDK). This article will introduce the reader to Media Center as a development platform and will show the reader how to write a simple HTML application, install it on the Media Center computer, and demonstrate how to interact with the media session.

The Ten-Foot User Experience

One of the most important things to consider when creating a user interface for Media Center is that the user will most likely interact with your application using what is known as the "10' Experience." This refers to the idea that the user will be sitting ten feet away from the screen and will interact with your application using only the remote control. This has an enormous impact on how you create your user interface. In addition, you will need to carefully consider how you expect the user to enter data into your application. Without access to a keyboard, your user will not be too excited about a user interface that requires large amounts of data entry. In addition, your text should be displayed using very large fonts with a crisp face. The default interface for MCE looks like Figure 1 below:

Screen shot.
Figure 1. The Media Center user interface

The Media Center SDK includes alternate user interface elements that help make it easier for the user to select information. It also includes code to demonstrate how to use the Triple-Tap keypad control. "Triple-tap" refers to using the number keys on the remote to enter letters. It gets its name because (almost) all of the numbers have three letters associated with them.

Related Reading

Home Hacking Projects for Geeks
By Eric Faulkner, Tony Northrup

Navigation in your application also needs to be very simple, and should support left, right, up, down, enter, page up, page down, and back operations, as these are the simplest interactions that the user can perform with the Media Center remote. At no time should you require a keyboard or a mouse, as these devices are not supported on Media Center Extenders. If your application requires keyboard and mouse input in the normal course of execution, then you should drop the ten-foot experience and switch to the traditional two-foot experience (a Windows forms application running on a standard computer monitor). Another option would be to support the features that require keyboard and mouse only on the main PC and display a special message to users attempting to use your application on a Media Center Extender. The SDK includes sample code to detect whether or not your application is running on an extender device.

Getting Started

Download and install the SDK on your Media Center computer. (It is recommended that you use a development machine to do this, as it's generally not a good idea to install development tools on your "production machine.")

Applications for Media Center can be broken down into three distinct categories:

  • HTML
  • .NET add-ins
  • MSAS applications (standalone processes supporting the Media State Aggregation Service interface)

This article is going to focus on developing an HTML application, since it is the easiest to develop.

Writing an HTML MCE Application

The best way to get started writing an HTML application is by making a copy of the HTML Templates directory included with the SDK. Once you've copied this folder, open up the default.html file in your IDE. The first thing you should notice is the inclusion of the Main.css file. As its name suggests, it is the main CSS file for the templates. The CSS included with the SDK templates does not provide a user interface that is consistent with the rest of the Media Center interface, so you'll need to make changes to this CSS if you want a more consistent look. (Paul Jordan has created a blue theme for Media Center 2004, but it does not work with the latest 2005 edition.)

Here is a simple "Hello World" application that displays two buttons. This is a modified version of the Default.htm found in the SDK HTML samples. Copy and paste this code into your favorite HTML editor.

<html>
  <head>
    <title>MCE HTML Sample</title>
    <link rel="STYLESHEET" type="text/css" href="Main.css">
      <script src="BasicFunctions.js" type="text/javascript"></script>
      <script src="Scrolling.js" type="text/javascript"></script>
      <script src="MoveFocus.js" type="text/javascript"></script>
  <script>
  function pageLoadFunctions()
  {
    setBGColor("#666666");
    checkSVP();
    setCounter();
    setArray();
    startFocus();
  }
 
  function doSelect()
  {
    var text = ""
    switch(oCurFocus.id)
    {
        case "btnInfo":     text = "Test button 1";     break;
        case "btnMute":     text = "Test button 2";
          break;            
    }
    if (text != "") 
    {
       document.getElementById("lblResult").innerText=text;
    }
          }
  </script>
  </head>
  <body id="body" MCFocusStart="btnInfo" 
Onload="pageLoadFunctions()" 
Onkeydown="onRemoteEvent(window.event.keyCode)">
    <!-- Start span used as stand-in for Shared Viewport -->
    <span style="position: absolute; top: 0; left:  0; 
  height:
    100%;"> <table style= "position: absolute; top: 0; left: 
    0; height:
    100%;" cellspacing="0" cellpadding="0"> <tr> <td valign= "bottom" 
    height= "100%">
      <span id="SVP" style= "width: 308; height: 216;
       vertical-align: bottom" MCFocusable= "true"></span>
        </td>
          </tr> </table> </span>
            <!-- End span used as stand-in for Shared Viewport -->
        <span
      id="title"
    class=
    "text1" style= "position: absolute; top: 94; left: 345; 
    width: 610;">
    <strong>Hello, World</strong> </span> 
    <!-- Item counter at lower right. 
    Displays only if button menu is scrollable --> 
    <span id= "itemCounterSpan" style="font: 20pt Arial; 
    color: #f2f2f2; width: 610; Height:
    42; text-align: right; display: block;
     position: absolute; top: 644; left: 119;"> 
     <span id= "counterNum">1</span> of  
     <span id= "counterTotal"></span> 
     <span id= "arrowUp" class= "arrowUp" onclick="pageUpDown('up')"></span>
      <span id= "arrowDown" class="arrowDown" onclick= "pageUpDown('down')"></span>
      </span> <!-- End item
      counter
    at
    lower right --> <!-- Start of "scrolling" span
    --> <span id= "scrollspan" MCScrollable= "true"
    style= "position: absolute; top:
    138; left: 332; width: 400; height: 485; overflow:
     hidden"> <table id= "listTable"
      border="0" cellpadding="0" cellspacing="3"> <tr>
       <td
        ID=
          "lblResult" class="text1"></td>
        </tr>
        <tr>
          <td ID="btnInfo" class="button2" MCFocusable="true">
          Media Information
          </td>
        </tr>
        <tr>
          <td ID="btnMute" class="button2" MCFocusable="true">
          Mute
          </td>
        </tr>
      </table>
    </span>
  </body>
</html>

Notice also the JScript files included in the header. The SDK includes JScript files that provide some very useful functions:

  • BasicFunctions.js: Provides functions that allow you to change the background color, respond to remote control events, determine if the code is running in a Media Center Extender, and a few other basic functions.

  • Scrolling.js: Provides functions that assist with scrolling items in span tags in response to page up, page down, and arrow events from the remote.

  • MoveFocus.js: This script file contains functions for automatically navigating between span elements that are tagged with the MCFocusable = 'true' attribute. Without this script file, navigation of your pages becomes virtually impossible for users who do not have a mouse.

  • Hilite.js: These scripts cause focusable items to become highlighted upon selection.

  • Spinner.js: Contains code to enable the use of spinner controls for selecting items from a rotating list using the remote control.

  • TextInput.js: Functions that move focus to and from text input areas in response to user navigation.

  • iFrameContentFocus.js: Functions that move focus between an element in an iFrame to an element in the parent page.

Refer to the Media Center SDK for more information on the scripts included with the HTML templates.

Save the file as HelloWorld.htm in the directory that you copied in the previous step. In order to run this application from Media Center, we need to register it with the system. We do this by creating an XML file using a custom schema outlined in the SDK.

Let's create an XML file that contains the information Media Center needs to execute our Hello World application. Copy and paste the code below into the new XML file:

<application
  url=".\HelloWorld.htm"
         name="Hello, World"
        />

Save this file as HelloWorld.mcl. The .mcl file extension is mapped to Media Center and will cause Media Center to load the application when executed from Explorer. Save a shortcut to the .mcl file in the following location (you can right-click and drag the .mcl file to the Start button and navigate to the location, then release and choose "Create Shortcut"):

Start->All Programs->Accessories->Media Center->Media Center Programs

When you launch Media Center (you'll need to restart it if it's already loaded), you'll see "Hello, World" listed in the "More Programs" section. Then, open your application from the "More Programs" section. When you select it from the list, it'll load your application and allow you to navigate the two buttons that were created. Because we included the shared viewport code in our Hello World application, we can see any media that's currently playing on the bottom left of the screen. To test this, play a recorded TV show. Then, open your application from the More Programs section. You should now see the live TV program in the shared view port (Figure 2). Click on the buttons and you'll see the text for each one in our results pane.

Screen shot.
Figure 2. The shared viewport shows the currently playing media in our sample.

Let's go a step further and get information about a song that is currently playing. Add the following JavaScript to the top script block:

var MCE;
var res;

function ShowMediaInformation()
{
  var mediaInfo;
  mediaInfo = "Title: ";
  mediaInfo += MCE.Experience.MediaProperty("TrackTitle");
  res.innerText = mediaInfo;
}

Replace the doSelect() method with the following:

function doSelect()
{
  var  text = ""
  switch(oCurFocus.id) { 
    case "btnInfo":
      ShowMediaInformation();
      break;
    case "btnMute": MCE.AudioMixer.Mute = !MCE.AudioMixer.Mute; 
    res.innerText = MCE.AudioMixer.Mute ? "Mute" : "";
      break;            
  }
}

Add the following code to the pageLoadFunctions function:

MCE = window.external.MediaCenter();
res = document.getElementById("lblResult"); 

Start up Media Center and play a song from your music collection. Then start your application and test out the new functionality. Notice that we asked Media Center to display a MediaProperty named TrackTitle. The media property name will vary depending on the type of media currently playing, so you may need to detect the type before going after the information.

Screen shot.
Figure 3. Media Information for the currently playing media.

Conclusion

Creating applications for Windows XP Media Center Edition 2005 is easy to do. Because it uses .NET, HTML, JavaScript, and ActiveX, you can use skills that you probably already have to develop exciting new uses for your whole-home entertainment hub. In addition, all of the technologies are well documented, so you can easily find answers to your problems on the Internet. In addition, there is a newsgroup dedicated specifically to developers writing applications for Windows XP Media Center Edition.

This article only skimmed the surface of what you can develop with Media Center. Download the SDK and browse through the sample applications it provides to learn more about developing a .NET add-in or an application that responds to the Media State Aggregation Service.

More Information

Michael Earls is a Microsoft technology solutions consultant working for Magenic Technologies.


Return to ONDotNet.com.