If you want a great primer on Media Center features, check out the Windows XP Media Center Edition 2005 Reviewers Guide (2.66 MB Adobe PDF).

Categories: Media Center | Comments [0] | # | Posted on Saturday, April 30, 2005 6:35:46 AM (GMT Daylight Time, UTC+01:00)   

Generally speaking, we want to select colors from the web palette which are TV safe for our Media Center Hosted HTML applications.  For additional information see TV-Safe Colors in the Media Center Software Development Kit (SDK).  A couple of my favorite design tools are Adobe Illustrator and Photoshop, which make it pretty easy to select these TV safe web colors using the Color Picker.

1) Double-click the fill or stroke color selection box in the toolbox or Color palette.

2) Make sure the Only Web Colors checkbox is checked and then select your colors in the range where no single color in the RGB gamut is less than 51 or greater than 204.

3) Although it's usually not necessary, just to be super safe about the colors chosen you can run the Filter --> Video --> NTSC Colors filter and watch for color shifts in your chosen pallette.

Categories: Media Center Application Design | Comments [0] | # | Posted on Friday, April 29, 2005 6:01: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...


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

'Nuff said -- find the show.


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)   
Categories: Media Center | Comments [0] | # | Posted on Wednesday, April 20, 2005 5:13:09 AM (GMT Daylight Time, UTC+01:00)   

The author of Fun with DVR-MS is back with another fantastic article about developing Media Center Add-Ins.

Stephen Toub discusses writing background add-ins for Windows XP Media Center 2005, and demonstrates how to write an add-in that allows a user to enter a time code on the remote control, causing Media Center to jump to that location in the current media playback.

The article also includes a basic Hello World providing a foundation upon which you can build other Media Center Add-Ins.

Check out Time Travel with Windows XP Media Center.

Categories: Media Center | Comments [0] | # | Posted on Wednesday, April 20, 2005 3:16:42 AM (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)   

Bill Linzbach (a fellow NASCAR fan here on the west coast) was complaining of a headache, so I decided to cheer him up.  I thought he was taking pictures with his new camera -- boy, was I wrong...

Get Down, Get Funky, Get Loose

So, does this rank up there with Star Wars Kid or Steve Ballmers Developer! Developer! Developer!...?

And before you ask, I don't do bachelorette parties...

Categories: Video | Comments [0] | # | Posted on Monday, April 18, 2005 7:24:08 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).


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

JScript: body.style.zoom=vScale

...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


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)   

So, I'm in Los Angeles, Washington, DC this coming week and Charlotte, NC the following.

Anybody want to get together and have a geek dinner (or its lighter weight cousin, after geek dinner drinks)?

Here are the evenings I will *probably* be available...

Los Angeles: Tuesday, April 5

Washington, DC: Thursday, April 7 or Friday April 8

Charlotte, NC: Monday, April 11

I might be able to drag along some others from the eHome team to join us.

Leave comments here if you want to get together...

Categories: Geek Dinner | Comments [3] | # | Posted on Saturday, April 2, 2005 1:38:51 AM (GMT Daylight Time, UTC+01:00)   

Many thanks for Ian Dixon for putting together this podcast, and special kudos to Richard Cardran and Mike Petrusis of Zetools for coming along for the ride.  It was fun -- let's do it again sometime Ian.

Categories: Media Center | Comments [1] | # | Posted on Friday, April 1, 2005 7:23:12 PM (GMT Daylight Time, UTC+01:00)   
RSS 2.0
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