We created Veronicas Radio as a demo for one of the Windows Media Center Mix 06 talks to show off the flexibility of the new UI framework (Media Center Markup Language) we had in the works for Windows Vista. It was eventually cut from the talk because we created the Q sample application (a podcast client) which was much more feature rich.

Little historical fact: The experience is so named because Veronica Law, a Program Manager at the time with the Windows Media Center team requested we create a way to listen to a couple of internet radio stations -- so it was literally "Veronicas' radio" -- and the name stuck.

We made this application available for a short time to those who wanted to install using a command line interface (in other words, not very user friendly). Basically, it's a mash up of a couple of samples we would later publish in the Windows Media Center SDK -- specifically FunHelix.mcml and ObjectModelMediaCenterEnvironmentPlayMediaAudio.mcml in the Windows 7 version if you want to follow along.

A fan of Windows Media Center recently emailed me…

"I have Vista Media Center [upgraded from XP] and have recently been clearing out programs I no longer use. One I did use [and loved the look and style of] was Veronicas Radio.  However, it no longer works.  I think the website which was hosting the associated files was the The Media Center Sandbox pages but the page displayed in the .xml file no longer exists."

In response I dusted off and modified the markup, updated some of the radio stations (including KIRO FM 97.3 to be able to listen to Seattle Sounders FC soccer games), deployed to my web server and created an installer. This applet works for both Windows Vista and Windows 7 and is a web application – the installer only registers the URL with Windows Media Center.

http://retrosight.com/samples/veronicasradio/windowsvista/Setup-en-us.msi

I also remembered a small applet we thought about shipping within the Extras Library for Windows 7 called Time + Date but ultimately cut due to time constraints. This was inspired by the memory of my parents calling a local telephone number (using a rotary phone no less) to get the current time and temperature.

The screen shot shows it running with the Sanskrit language selected in Windows and is another good example of a simple copy+paste from SDK samples (RulesChanged.mcml, TransformersDateTimeTransformer.mcml and ObjectModelMediaCenterBackgroundModes.mcml) to come up with something fairly useful. This applet works with only Windows 7 and like Veronicas Radio is a web application.

http://retrosight.com/samples/timeanddate/windows7/Setup-en-us.msi

In the process of getting these experiences out there I began to remember some of things we wanted to do like the 5.x releases of the SDK back in 2007. It has been nearly a year since I ended my involvement with Windows Media Center so thought it fitting to celebrate that wonderful product and platform by putting a small package of things together for developers which echoes some of those post shipping plans. It’s a sort of curtain call I’m referring to as the ‘Windows Media Center SDK for Windows 7 Addendum’ although it’s not officially from Microsoft.

http://retrosight.com/samples/windowsmediacentersdk/6/Addendum.zip

Included in the zip file is…

  • A couple of new and updated loose MCML samples (mostly to fix up the URLs to the defunct play.mediacentersandbox.com).
  • Source code for the Sample Explorer application you find in the Extras Library after installing the SDK as well as the desktop browsing tool. This is a good example of one approach for creating a testing / automation framework for your own application.
  • Source code for Animation Explorer and Preview Tool Launcher desktop tools. The Preview Tool actually has a pretty robust automation model itself and this source shows you how to take full advantage for your own authoring tools.
  • Templates and source code for the Visual Studio 2008 templates included with the SDK. Follow the instructions in Readme.txt for use with Visual Studio 2010.
  • Web Application Installer Template used to create the installers for the above applets. They are fully compatible with the InstallApplication Method in Windows 7 and can be used to craft installers for http://madeformediacenter.com/m4mc/.
  • You can dig into the readme for more details on these resources.

Enjoy…!



Categories: Media Center Markup Language | Media Center SDK Code Sample | Windows 7 | Windows Media Center | Windows Vista | Comments [1] | # | Posted on Wednesday, April 14, 2010 5:24:38 AM (GMT Daylight Time, UTC+01:00)   

Update: I just read this post in my news aggregator and some of the formatting didn't make the translation. For best evaluation you should probably look at this post in your web browser at http://blog.retrosight.com/DocumentationWhichDoYouLikeBetter.aspx.

I'm willing to bet Jeff Atwood has an opinion about this given his recent post Escaping From Gilligan's Island. We've been having an internal debate on how to best document steps to create applications -- mostly so folks find it easy to get it right the first time (hence the hat tip to Jeff's post).

I'd like to get your opinion on which of the following set of steps you find easier to follow (A or B) -- these steps are based on the Visual C# 2005 Express Edition Integrated Design Environment if you would like to try them out for real.

A - Create a strong name key file and add to the project assembly

1.       In the Solution Explorer pane, right-click the project and click Properties.

2.       Click the Signing tab, select the Sign the assembly check box.

3.       In the Choose a strong name key file list, click New.

4.       In the Key file name box, type a name.

5.       Optionally, select the Protect my key file with a password check box and enter a password for the key file.

6.       Click OK.

7.       On the File menu, click Save All.

8.       On the Build menu, click Build Solution to build the project assembly with the strong name key file.

B - Create a strong name key file and add to the project assembly

1.       Select the project in the Solution Explorer pane.

2.       Select View > Property Pages from the menu.

3.       In the Properties window:

a.       Select the Signing tab.

b.      Check the box labeled Sign the assembly.

c.       Click on the Choose a strong name key file drop-down list and select <New...>.

d.      In the Create Strong Name Key dialog:

                                                               i.      Enter a key file name

                                                             ii.      Optionally provide a password for the key file.

                                                            iii.      Click OK.

4.       Select File > Save All from the menu.

5.       Select Build > Build Solution from the menu to build the project assembly with the strong name key file.



Categories: Media Center SDK Code Sample | Software Development Kit | Windows Media Center | Comments [7] | # | Posted on Friday, June 22, 2007 5:53:03 AM (GMT Daylight Time, UTC+01:00)   

A year ago I became so busy with 'other stuff' here at work I stopped my regular practice of blocking off time on Friday afternoons to do nothing but generate sample code, solve problems with our SDK docs, ponder deeper technical issues which can't be tackled with the typical interruptions of a busy team or respond to community requests or issues.

Coding Friday is back from 1:00 - 6:00 PM PST.

It started last week. And I'm going to do something unprecedented (well, at least for me). Taking a page out of Robert Scoble's book, here is my contact information...

email: charlieo@microsoft.com
phone: (425) 707-7818
im: charlie_owen@hotmail.com
skype: retrosight

Give me a ring during Coding Friday hours -- let's chat about Windows Media Center development.



Categories: Media Center | Media Center Application Design | Media Center SDK Code Sample | Comments [1] | # | Posted on Thursday, July 27, 2006 6:09:34 AM (GMT Daylight Time, UTC+01:00)   

Giovanni beat me to the punch getting some screenshots of the Mix06 build of Q. One thing I want to clarify (which Giovanni did in his original post and a later follow up): Q is not a shipping feature of Windows Vista -- it is a sample application for which source code will ship with the Windows Media Center Software Development Kit for Windows Vista.

Update: News is traveling fast, and it's the wrong news. I'm pretty amazed at how much the story gets subtly changed with each retelling. I'm linking to some here so they will hopefully clarify their posts before the hype machine gets going: Microsoft Podcast Client - or Mix06 Myth?, Les clients podcasts chez Microsoft, Microsoft Podcasting Client, Microsoft Demontstates New Podcast Client At MIX06.

Several folks (internal and external) have asked for screenshots, so here they are along with a description of the experience...

Intro Animation

A really cool launch animation occurs when you first start Q. Approximately 15 images of various types of electrical circuit schematics rush at you (transparent, so you see multiple layers at once) which pivot on the center midway through. This is followed by the Schematic logotype flying from behind you. The electrical schematics are framed in the square of the Schematic logotype as it comes into view. All of this happens in about 6 seconds. This animation is 100% Media Center Markup Language (MCML) and PNG files. Proving the Model + View separation which is a pillar of developing in the Windows Media Center Presentation Layer, Schematic created this animation independently of the development work on the Q:Helix and other application elements following. We checked their MCML into the source tree as is -- zero changes.

Channels Page

The Schematic logo at the end of the intro animation 'falls back' after about a second to reveal the background and Channels page, followed by the Q:Helix rotating down into place, locking on the first item in the list. The helix is center locking so all items rotate into the center of the application. We think this makes the app pretty usable because the user only has to look at one location for focus -- it doesn't bounce around like a series of stacked buttons (Windows Media Center uses a similar paradigm, but it's not exclusively locked to a single position).

As you move up and down in the list, the current Title and Description zooms back away from you into infinity while the next Title text flies in from the right and Description text flies in from the bottom. Meanwhile, the background is animated with the RSS logo randomly 'melting' down the screen (kind of Matrix-y like). There are a couple of alpha blended layers here -- the small animated RSS logos are alpha blended in front of the Channel text on the left side as well as the background.

Items Page

Selecting a Channel, in this case the American Experience podcast, will navigate you to the items for that channel with an elegant crossfade into a different background and a slightly different Q:Helix animation (faster, zooms toward you a bit, and has an extra spin or two which happens really fast).

Selecting an Item will result in the audio or video playing. If audio, we animate with an alpha blend between the image provided with the item and a blue RSS logo. If video, we start playback in place of the image provided with the item. The video element will move just like an image in the Q:Helix. Selecting the currently playing video will take it full screen.

A big THANKS to the following folks who helped us pull this together from scratch in a very short time (about 3 weeks to implement once we had the conceptual designs, all the while keeping focus on our day jobs).

Peng Lee, Kevin Hosmann and Robert Perrine from Schematic who designed the Q:Helix navigational concept and opening animation, as well as coding of the opening animation. They also provided the background images which seem to be animated, but are in fact static images -- brilliant!

I approached Stephen Toub about this project and asked if he could provide the code-behind for the RSS feeds in about a week. The next morning we had solid, working code ready to wire up to MCML. 'Nuff said.

And finally, Mark Finocchio (you get to meet Mark face:face in an upcoming Channel9 video, btw). Originally I was going to do the UI implementation (MCML) for this project with his help as needed. My time then became consumed helping get portions of the JoeB keynote ready, leaving me with zero time to give to Q. I asked Mark if he wouldn't mind stepping in and helping us out by creating the balance of the MCML. As with Stephen, the bulk of the MCML was complete the next day, and Mark continued to introduce elegant touches up until the Friday before Mix06. Really, 'nuff said.

We hope to release the Q app with Beta 2 so you can us the app (rather than relying on screenshots and low res video caps) and tell us what features and improvements you would like to see.



Categories: Media Center SDK Code Sample | Q | Comments [3] | # | Posted on Friday, March 24, 2006 4:01:34 AM (GMT Standard Time, UTC+00:00)   

Well, it's time to get started on the project we want to demo at Mix06. We are going to put together a podcast / videoblog client for Media Center written as a Media Center Add In with the user interface coded in Media Center Markup Language (MCML).  Chances are this puppy will be released 'out into the wild' at some point.

What favorite features do you want us to include?



Categories: Media Center Application Design | Media Center SDK Code Sample | Mix | Comments [9] | # | Posted on Thursday, February 9, 2006 2:33:20 AM (GMT Standard Time, UTC+00:00)   

[This is mostly a placeholder page for documenting tools for developing apps in Media Center for Windows Vista -- stay tuned.]

Visual C# 2005 Express Edition

Use Custom XSD Files for IntelliSense in Visual Studio 2005



Categories: Media Center | Media Center Application Design | Media Center SDK Code Sample | Comments [1] | # | Posted on Friday, December 2, 2005 6:10:42 AM (GMT Standard Time, UTC+00:00)   

We will continue to support the Hosted HTML development model even though new things are coming down the pipe for Media Center in Windows Vista. We posted a couple of resources for those who will continue to push the envelope for HTML applications in Media Center.

Developing Services and Applications for Microsoft Windows® XP Media Center Edition 2005 is designed to provide an in depth, yet high level overview of developing an experience for Media Center in Hosted HTML.

The Powerpoint Presentation Overview of the Windows XP Media Center Edition 2005 SDK is a companion piece with a bunch more visuals. It also delves briefly into Media Center Add Ins as well as the Click To Record features. It's perfect to give your design and development groups an introduction to creating experiences for Media Center.



Categories: Media Center Application Design | Media Center SDK Code Sample | Comments [8] | # | Posted on Friday, November 11, 2005 4:02:41 PM (GMT Standard Time, UTC+00:00)   

I've been using this puppy for the last few months to create Media Center Add In applications. It's great!

http://msdn.microsoft.com/vstudio/express/visualcsharp/

You can also get all of the Express Editions (Web Developer, Basic, C#, C++ and J#) as handy-dandy CD IMG files at http://msdn.microsoft.com/vstudio/express/support/install/.

Enjoy!



Categories: Media Center Application Design | Media Center SDK Code Sample | Comments [0] | # | Posted on Monday, November 7, 2005 8:31:50 PM (GMT Standard Time, UTC+00:00)   

I posted a couple of quick samples / tools you might find handy...

onRemoteHandler.zip contains a complete onRemoteEvent handler which traps all of the remote control buttons passed into hosted HTML applications. Well, almost all -- I didn't explicitly include the 'More Information' button because we don't really recommend you leverage that button.

KeyPress.zip is a utility function which will present a Media Center dialog for each button press passed into hosted HTML applications.  I've used this in the past to confirm my remote control presses were actually being passed into the pages if experiencing some weird behavior.  It's especially helpful if you are using frames and you need to validate the button presses are being passed from parent to child.



Categories: Media Center SDK Code Sample | Comments [1] | # | Posted on Saturday, October 1, 2005 6:08:45 AM (GMT Daylight Time, UTC+01:00)   

Donate To American Red Cross Hurricane Relief To Enter Raffle for a Copy of Visual Studio 2005

I really love what Ian Dixon is doing -- his show is an invaluable resource for me. I listen to every one he puts out there and if you are a Media Center developer you should as well.  The show notes are quite detailed allowing me to instantly review portions of the show after I have listened to it's entirety.

Ian and I spent about 40 minutes together last week chatting about the SDK, programmatic access to the EPG, the Click To Record API and a host of other things.  This show goes pretty deep into some of the technical details compared to The .NET Show or Channel9 Part I and Part II videos.

So without further adieu...

The Media Center Show #23

Enjoy!



Categories: Media Center | Media Center Application Design | Media Center SDK Code Sample | Comments [1] | # | Posted on Wednesday, September 7, 2005 3:58:36 PM (GMT Daylight Time, UTC+01:00)   

Charlie: Shut up, the camera adds 10 pounds
John: Oh, so how many cameras are actually on you?

Lights, camera, action...

Join myself, John Canning and Michael Creasy in the Microsoft Studios with Robert Hess for The .NET Show featuring Windows XP Media Center Edition.  We have some great demos of the Media Center user interface, third party extensibility applications and code walkthroughs by Michael. This show is a great primer if you've been wondering about your developer opporuntities on the Media Center platform

Be sure to check out the hilarious 'Diversionary Tactics' clip in between the show segments. You'll never look at the Channel9 Guy the same way again. :-)



Categories: Media Center | Media Center Application Design | Media Center SDK Code Sample | Comments [1] | # | Posted on Saturday, August 13, 2005 4:02:45 AM (GMT Daylight Time, UTC+01:00)   

I'm embarking on a fun project this week.  I'm going to start coding a Media Center Add In with the following features...

  1. Background Add In.
  2. Polls RSS feeds according to an OPML file.
  3. Retrieves new posts from those RSS feeds.
  4. Schedules TV recordings based on Click To Record document enclosures in the post.

I've got a couple of reasons...

  • I want to get back to C# and managed code.  HTML + JScript has been fun, but it's SO last decade.
  • This could be an interesting scenario.  We've got podcasts and videoblogs, what about a TVLog...?
  • This could lead to even more interesting scenarios -- breaking news alerts...?
  • Perhaps this could lead to a super-simple podcasting downloader?
  • Exercise our SDK documentation for Media Center Add Ins in order to give feedback to our product team.
  • Have an ongoing project to discuss here in the blogosphere (to date, most of my posts have been single topics).

I'm off to a great start -- just finished coding an Add In which takes this XML (learn more about the Click To Record Feature)...

<clickToRecord xmlns="urn:schemas-microsoft-com:ehome:clicktorecord">
 <body>
  <programRecord isRecurring="false">
   <program>
    <key field="urn:schemas-microsoft-com:ehome:epg:program#title">Star Trek: The Next Generation</key>
   </program>
  </programRecord>
 </body>
</clickToRecord>

...and schedules a recording of a single show via this C# code in an On Demand Add In (learn more starting at About Media Center Add Ins)...

void IAddInEntryPoint.Launch(AddInHost host)
{
 try
 {
  string strClickToRecordXML = string.Empty;
  Television objTV = host.Television;
  XmlDocument xmlDoc = new XmlDocument();
  xmlDoc.Load("ClickToRecord.c2r");
  strClickToRecordXML = xmlDoc.InnerXml;
  objTV.ScheduleRecording(strClickToRecordXML);
  host.HostControl.Dialog("Completed ScheduleRecording Method Call", "Success", 1, 0, false);
 }
 catch(Exception ex)
 {
  host.HostControl.Dialog(ex.Message,"Exception",1,5,false);
 }
}

So, I have a couple of questions for the readers of this blog...

  1. Are there any additional features you might like to see in this Add In?
  2. Do you have pointers to great documentation on consuming RSS in managed code which might be helpful?


Categories: Media Center | Media Center SDK Code Sample | Comments [10] | # | Posted on Thursday, August 4, 2005 6:27:37 AM (GMT Daylight Time, UTC+01:00)   

Do you want to test your extensibility application for widescreen compatibility without a widescreen monitor?

If yes, then...

  1. Click Start --> Run.
  2. Type 'C:\windows\eHome\ehshell.exe /widescreen'.
  3. Click the OK button.
  4. Using the mouse, click the 'Restore Down' button to run Media Center in a window rather than full screen.

Voila, a 16:9 implementation of Media Center.



Categories: Media Center | Media Center Application Design | Media Center SDK Code Sample | Comments [9] | # | Posted on Thursday, July 21, 2005 10:30:41 PM (GMT Daylight Time, UTC+01:00)   

A very common question developers and designers have is when to use the Shared Viewport or Custom Viewport in a Media Center application.  The sample code associated with this post illustrates how to create a Custom Viewport (and comment one line of code to get a Shared Viewport).

Download the Sample Code

To answer, we can list out the differences between the two, view screenshots of the implementations and understand their intended usage and limitations.

Shared Viewport

  • Non-customizable media window.
  • Always located at the lower left.
  • Contains two types of content...
    • Video (Figure 1)
    • Audio Song Title, Cover Art (Figure 2)
  • The Shared Viewport is the default playback experience for the PlayMedia or PlayMediaEx method calls.
  • Can take and lose focus.
  • Can be hidden while media playback continues.
  • The dimensions or aspect ratio of the Shared Viewport CANNOT be changed.
  • The user can select the Shared Viewport to go full screen with the experience.
  • The Shared Viewport is always shown when the user leaves an extensibility application and returns to Media Center with a media experience playing.
  • Use a Shared Viewport when the current media experience is secondary in nature to the other content on the page.

Shared Viewport with Video Source

Figure 1 - Shared Viewport with video source (click to see larger version).

Shared Viewport with Audio Source

Figure 2 - Shared Viewport with audio source (click for larger version).

Custom Viewport

  • Fully customizable media window
  • Contains video content only (Figure 3)
    • Can show for audio content, but the only thing you get is a black square or rectangle.
  • Can take or lose focus.
  • Can be hidden while media playback continues.
  • The dimensions or aspect ratio of the Custom Viewport CAN be changed.
    • Height
    • Width
    • Aspect Ratio
  • You can position the Custom viewport anywhere on screen.
  • You must use the HideCustomViewPort event to persist the Custom Viewport between pages.
  • Use a Custom Viewport when the content is highly relevant to other metadata or action items on the page.

Custom Viewport with Video Source

Figure 3 - Custom Viewport with video source (click for larger version).



Categories: Media Center Application Design | Media Center SDK Code Sample | Comments [0] | # | Posted on Thursday, June 30, 2005 6:15:21 AM (GMT Daylight Time, UTC+01:00)   

Download the Sample Code

A very frequent question we get is this...

How can I get access to the built in Media Center Electronic Programming Guide so I can tune to a particular show or channel directly from my application?

Microsoft has abstracted the EPG information in such a way to make it fairly easy to tune to a particular TV channel or show without having access to the human readable data or having to maintain a database themselves for each individual user with the unique one:one mapping of channel numbers and broadcasts.

The almost-as-frequent followup question is...

Why can't I just search and manipulate the data itself?

The data itself is locked up tight due to licensing issues.  For what it is worth I personally wish this were different.  However, I do like the fact we can still leverage the EPG to make really great and well integrated applications for hybrid TV / internet experiences at the same time we respect the metadata owner rights.  No baby thrown out with the bath water this time. :-)

Use the FindProgram and / or FindService methods in conjunction with the PlayMedia or PlayMediaEx method to find and tune to shows or broadcast channels.  The key lines of sample code in each...

FindProgram

var arrayProgram = objMCE.FindProgram("Little House on The Prairie",true);

'Nuff said -- find the show.

FindService

var arrayService = objMCE.FindService("DSCP", "");

DSCP = Discovery Channel (Pacific).  The call signs are generally determined by the broadcast channel owner and are finite in each locale (for example, the Discovery has DSCP for West Coast and DSC for all other time zones in the United States).



Categories: Media Center SDK Code Sample | Comments [0] | # | Posted on Wednesday, April 27, 2005 8:03:17 PM (GMT Daylight Time, UTC+01:00)   

Download the Sample Code

Many experiences designed for Media Center require additional client side code installations (for example: ActiveX controls).  Interacting with a setup program launched from Media Center typically requires the user to respond to at least one Windows security warning and setup wizards designed to be used with a keyboard and mouse.

The Media Center API provides a special method called CreateDesktopShortcut which aids transition from Media Center to a web browser and interaction by keyboard and / or mouse.  Media Center displays the following dialog when developers invoke the CreateDesktopShortcut method.  The option for 'Open Website in Browser' is not shown on Media Center Extenders.

Here is the outline for a typical installation which the sample code illustrates…

  1. Detect if the needed components are installed.  If not, inform the user of the prerequisite and continue.
  2. Determine the version of Media Center.  [Media Center 2004 doesn’t include the CreateDesktopShortcut method, so slightly different handling is needed.]
  3. Determine if the user is at the Media Center PC or connecting via remote desktop (including Media Center Extender).
  4. If on a remote desktop connection, determine if from a Media Center Extender.  Media Center Extender users will need to return to the Media Center PC to install components.
  5. Make sure you exit DirectX exclusive mode in Media Center before launching the external browser window or setup program.
  6. For Media Center 2005 users (including those on a Media Center Extender) call the CreateDesktopShortcut method to launch a browser window (on the Media Center Extender this method will prompt them to create a shortcut on the desktop).
  7. For Media Center 2004 users, load the installation web page directly in Media Center (make sure you have the IsMCEEnabled function in the page to avoid the ‘Not Designed for Media Center’ warning).
  8. Give great, easy to follow instructions for the install, including directions so the consumer can easily get back to the Media Center experience after the install.


Categories: Media Center SDK Code Sample | Comments [0] | # | Posted on Tuesday, April 19, 2005 10:15:14 PM (GMT Daylight Time, UTC+01:00)   

One of the common areas of confusion I see when working with designers and developers is user interface scaling for third party applications in Media Center. This is a bit of a mind shift for designers and developers familiar with the rest of the Windows XP world where higher resolutions give you more screen real estate. The Media Center UI always scales and a basic objective for third party applications is to scale as well.

Here are some guidelines designers and developers can follow...

1) Copy-and-paste the sample code in the Windows XP Media Center Edition Software Development Kit (SDK) topic Handling the Lower Resolution of a Media Center Extender Session which makes use of the Media Center OnScaleEvent API (this code can also be found in the sample HTML resource as part of the offline version if the SDK).

[aside]

Note: The sample code in the SDK uses the following...

JScript: body.style.zoom=vScale
HTML:

...which might be slightly confusing to the novice developer. We are referencing an object in HTML by referring to its 'id' attribute (see the zoom Attribute | zoom Property page at MSDN). If you do use the sample code, you will need to be sure to sync the JScript with the body element id.  The sample code for this post uses the following to be specific and avoid confusion...

JScript: document.all.id_body.style.zoom=vScale
HTML:

[/aside]

2) Do not try to reinvent the wheel by coming up with your own paradigm for scaling.  It's hard to get more fault tolerant (or more elegant) than using DHTML to place objects and elements with absolute positioning on a page and then scaling the whole. If you are super geeky and want to try and create your own scaling, be forewarned: you will inevitably run into issues trying to account for Media Center objects which scale independently of the onScaleEvent as well as the nuances of accounting for the myriad resolutions other than true 4:3 or 16:9.

3) Do design the hosted HTML experience for 1024 x 768 (4:3) and 1366 x 768 (16:9) with extra image information for the background to the right and bottom to account for the usually slight variations in aspect ratio.  All of the scaling in Media Center is based on 4:3 or 16:9 aspect ratios.  It's not worth the time or effort to account for other resolutions (like 1280 x 1024 which is close to, but not exactly 4:3).

4) Account for the mouse navigation / transport controls (which don't scale) and Shared Viewport / volume indicator (which do scale) in your designs by making sure all actionable elements are not obscured by these Media Center features.  I put together a design template showing the location of these items for Media Center 2005 in the smallest possible windowed mode to assist the designer and developer.

Media Center Design Template (JPEG)
Media Center Design Template (Adobe Illustrator)

The design template is based on 360 x 270 so when focusable / actionable elements in your page are scaled down to this size the mouse nav / transport controls won't interfere with the navigation of the service / application.  I'm not suggesting a certain percentage of users run Media Center in a window at this resolution but designing the experience for this resolution is the only way to account for 100% of the Media Center usage paradigms.

Here are some screen shots to illustrate use of the design template...

Screenshot 360 x 270 window for Media Center showing the sample code with mouse nav / transport bars.
Screenshot 360 x 270 window showing Online Spotlight as an example of elegant and functional design with a bunch of actionable elements on a page.
Screenshot Design template superimposed on a screen shot of the sample code, showing how the two correlate.
To show the constant (non-scaling) size of the mouse navigation and transport control feature within Media Center:
   Screenshot 500 x 375
   Screenshot 640 x 480
   Screenshot 800 x 600

Here are a couple of Photoshop files allowing you to quickly evaluate potential designs against the mouse nav / transport constraints. Take screenshots of the comps or experience and resize to 360 x 270 (4:3) or 480 x 270 (16:9) and paste the result into a layer underneath the design template (making sure to center).

360 x 270 (PhotoShop PSD)
480 x 270 (PhotoShop PSD)

5) Specifically design for widescreen aspect ratios.  The world is slowly, but surely, changing to widescreen aspect ratios.  For example, the Reuters application does this *really* nicely by giving you an extra column of videos when viewed in a widescreen aspect ratio

Reuters in 4:3 Mode
Reuters in 16:9 Mode

6) You don’t need to design for action safe / title safe in your application. Media Center works in conjunction with the video drivers to make sure most over scan issues are properly handled. Interactive TV shops will find this different compared to other platforms, but rest assured this statement is true.

For those of you really interested in how the scaling works 'behind the scenes' here are the nitty-gritty details.  The sample code for this post illustrates the scaling mechanisms in Media Center outlined below.

The vScale argument passed when Media Center calls the onScaleEvent function in the JScript is always the smaller of the following calculations:

document.body.clientWidth / 1024
document.body.clientHeight / 768

When the document.all.[body id].style.zoom is applied via the onScaleEvent function the following will always be returned when Media Center is running in a windowed mode or native full screen resolutions of exactly 4:3 and 16:9 aspect ratios:

For standard aspect ratio of 4:3 (C:\WINDOWS\eHome\ehshell.exe)
   document.body.clientWidth = 1024
   document.body.clientHeight = 768

For widescreen aspect ratio of 16:9 (C:\WINDOWS\eHome\ehshell.exe /widescreen)
   document.body.clientWidth = 1366
   document.body.clientHeight = 768

When in full screen mode the following will be returned if not running in Media Center native full screen resolutions of 4:3 or 16:9 aspect ratios:

For standard aspect ratios (those similar to 4:3, 1280 x 1024 for example):
   document.body.clientWidth = 1024
   [Calculated Value] document.body.clientHeight = [Actual document.body.clientHeight] * 1024 / [Actual document.body.clientWidth]

For widescreen aspect ratios (those similar to 16:9, 1280 x 800 for example):
   [Calculated Value] document.body.clientWidth = [Actual document.body.clientWidth] * 768 / [Actual document.body.clientHeight]
   document.body.clientHeight = 768



Categories: Media Center Application Design | Media Center SDK Code Sample | Comments [1] | # | Posted on Tuesday, April 5, 2005 8:00:42 PM (GMT Daylight Time, UTC+01:00)   

Media Center Hosted HTML

Detect the Media Center Version and Remote Experience in Client Side JScript
http://blog.retrosight.com/PermaLink,guid,f0271b1a-b349-488e-a99f-12cbf5cef39a.aspx

Using Media Center Dialog, DialogEx, and DialogNotification in HTML
http://blogs.msdn.com/charlieo/archive/2004/10/22/246176.aspx

Scaling for Media Center Third Party Experiences + Design Template
http://blog.retrosight.com/PermaLink,guid,9cc857a9-997a-418b-8cf9-cf119fc208ab.aspx

Creating a web page that's designed for Media Center (part one)
http://blogs.msdn.com/mcreasy/archive/2004/02/23/78723.aspx

Using FindService and PlayMedia to change the TV channel in Media Center
http://blogs.msdn.com/mcreasy/archive/2004/03/09/86707.aspx

Using FindProgram and FindService to Tune to Shows or Channels
http://blog.retrosight.com/PermaLink,guid,e03eb3d9-cb03-44ca-b892-498a45bc8639.aspx

Hello World - Media Center Dialogs
http://blogs.msdn.com/mcreasy/archive/2004/03/02/82782.aspx

Combining PlayMedia, onPlayStateChange, PlayState, MediaProperty and MediaProperties
http://blogs.msdn.com/charlieo/archive/2004/11/19/267090.aspx

Remote Control Handler Template and Key Press Tool
http://blog.retrosight.com/PermaLink,guid,e87c3911-3cbe-48e7-b2c5-c38aca2c158f.aspx

Media Center Add-In

MSDN Article with In-Depth Coverage of the DVR-MS Format (Fun with DVR-MS)
http://msdn.microsoft.com/smartclient/default.aspx?pull=/library/en-us/dnxpmce/html/dvr-ms.asp

How To Build An Add-In For Windows Media Center Edition 2005
http://blogs.msdn.com/mcreasy/archive/2004/10/12/241449.aspx

Show Dialogs in Microsoft XP Media Center UI from an External Application
http://www.codeproject.com/dotnet/mceexternaldialog.asp

Building .NET Add-Ins for Windows Media Center Edition
http://www.ondotnet.com/pub/a/dotnet/2005/04/05/mce_part2.html

Time Travel with Windows XP Media Center
http://msdn.microsoft.com/smartclient/default.aspx?pull=/library/en-us/dnxpmce/html/positionchangeraddin.asp

Installation

Installing applications on Media Center
http://blogs.msdn.com/mcreasy/archive/2005/02/17/375600.aspx

Installing Components for Hosted HTML Applications
http://blog.retrosight.com/PermaLink,guid,7b06ef43-efff-4579-90a9-4039cf9c883d.aspx

Sample Applications

MCE-YAC, version 0.51 (some good fixes)
http://www.updegrave.com/weblog/ethan/archive/2005/02/20/256.aspx



Categories: Media Center SDK Code Sample | Comments [0] | # | Posted on Sunday, February 27, 2005 6:31:12 AM (GMT Standard Time, UTC+00:00)   
RSS
RSS 2.0
Search
Sign In | All Content © 2014 Charlie Owen

This is a personal weblog. The opinions expressed here represent my own and not those of my employer.


Powered by newtelligence dasBlog 2.3.9074.18820