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