Creating a web page that's designed for Media Center (part one)

  • Article

Previously I wrote about creating a MCL file to point to a web page so it could be viewed in Media Center.  This time I'm going to explain how to create a web page that is designed for use in Media Center.

Web pages for Media Center need to be designed with a number of factors in mind:

  • The page will be viewed from 10', not 2' foot like a normal page
  • The user may not have a keyboard and mouse - they may just have a remote control
  • The display device might be a TV not a monitor, so the user may be unable to see the edges of your page due to overscan

Lets start by creating a basic page.  Use Notepad (or your text editor of choice) to create a new HTML file that looks like this:

 <HTML>
    <SCRIPT>
    function IsMCEnabled()
    {
        return true;
    }
    </SCRIPT>
    <P>Hello Media Center</P>
</HTML>

Now create a MCL file that points to this new page and place it in "c:\documents and settings\all users\start menu\programs\accessories\media center\media center programs\".  Start up Media Center and in More Programs you should find a link to your page.  Click the link and you'll see your page.  You'll have noticed that you didn't get a warning message about the page not being designed for Media Center when the page was displayed.  That's because we included that little fragment of script.  When Media Center loads the page it checks to see if a function called IsMCEEnabled is defined and calls it to see if it returns true.  If the function returns true then Media Center knows the page has been designed for Media Center and if not it displays that warning message.

So now we have a page that Media Center can easily display.  It doesn't look very good from a distance though, so lets do something about that.  Edit the file and change

 <P>Hello Media Center</P>

to

 <P style="FONT-SIZE: large">Hello Media Center</P>

Now when viewing the page in Media Center the text should be readable from a distance, it's still stuck in the top left corner of the page and might not be visible to a user viewing the page on a TV.  Move it down and to the right slightly by changing the line to be:

 <DIV style="DISPLAY: inline; LEFT: 30px; WIDTH: 208px; 
POSITION: absolute; TOP: 30px; HEIGHT: 32px">
<P style="FONT-SIZE: large">Hello Media Center</P></DIV>

Suddenly it looks much more complex, but all we've done is add a <DIV> tag the specifies a region on the page and displays the text there.  If you use an editor such as Visual Studio you can create these elements automatically by using the HTML Label component in the toolbox.  FrontPage has similar functionality.  View this page in Media Center now and you'll see the text has moved and should be easier to see.

That's enough for part one for now.  The SDK has some samples of HTML pages if you can't wait for part two which will include steps to enable the use of the remote control to navigate a page.