Demystifying Scale in Media Center Hosted HTML Applications
One of the common areas of confusion I see when working with Online Spotlight partners is the concept of UI scaling for their applications in Media Center. This is a bit of a mind shift for designers and developers familiar with the rest of the Windows world where higher resolutions give you more screen real estate. The Media Center UI always scales and a basic goal 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 SDK topic Handling the Lower Resolution of a Media Center Extender Session (also found in the SDK sample HTML) which makes use of the Media Center OnScaleEvent API.
Note: This sample code in the SDK uses the following...
JScript: body.style.zoom=vScale
HTML: <body id="body">
...which might be slightly confusing to the novice developer. We are referencing an object in HTML, which is referred to by its 'id' attribute (reference 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 super specific and avoid confusion...
JScript: document.all.id_body.style.zoom=vScale
HTML: <body id="id_body">
2) DON'T 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 puppy. If you are a super geek and want to try and create your own scaling be forewarned you will inevitably be tripped up trying to account for Media Center objects which scale independently of the onScaleEvent (the developer has zero control over this) as well as the nuances of accounting for any other myriad resolutions outside of true 4:3 or 16:9. We've done the hard work for you and the solution you implement is at most 11 lines of JScript plus an ID attribute on the body element of HTML.
3) 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 (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 recently put together a design template (JPEG here or Adobe Illustrator format here) showing the location of these items for Media Center 2005 if you take the smallest possible windowed mode (Width x 270) into account.
5) Specifically design for widescreen aspect ratios. The world is slowly, but surely, changing to widescreen aspect ratios (which I like BTW since *every* DVD I have ever purchased is the widescreen version :-). For example, the Reuters application does this *really* nicely by giving you an extra column of videos when viewed in a widescreen aspect ratio (16:9 screenshot here and 4:3 screenshot here).
For those of you *really* interested in how the scaling works 'behind the scenes' here are the nitty-gritty details...
The vScale argument passed when Media Center calls the onScaleEvent function in the developers 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
As you can see from the complexity, there is good reason to *not* try and reinvent the wheel (see item #2 above). The sample code for this post illustrates the nitty gritty details. Commenting (or not) one line of code will show you the calculations (with NO scaling) or values returned when scaling occurs.
