Sorry, this isn't actually a development blog post - it's just me, geeking out at this - http://www.nikkoamerica.com/nhe/dvd_projector_video.html. My GOD, that's so damn geeky, and I want one BADLY.

    To bad they'll never reach Australia.

Ok - many people still have some trouble visualising their interfaces when it comes to writing their MCML. They don't know where to start, or what to do. I'm going to take a page from an MCML application and show you how to 'de-construct' it to figure out how it's made.

The basic trick is to imagine you are drawing the page with a vector graphics program. If you have Adobe Illustrator, Harvard Graphics, or even MS Word, you should be able to make some basic vector graphics. For those who don't have any of these programs, try the open-source project InkScape.

In vector programs, you only have some fairly simple primative objects - boxes, circles, text & graphics - to work with, in a very similar way to MCML. And most of the adjustments you can do to these objects is also similar to MCML, the most important being scaling and rotation.

So if you draw your interface in one of these vector programs, you almost naturally discover how to replicate them in the Media Center Markup Language.

Let's take a look at a basic screen from EMUCenter.

Step 1 - Isolating The Elements

The first thing to do is isolating each seperate element we see on the screen. If it's positioned independently - eg. it's doesn't seem to be physically part of another element on the screen - then we basically draw a 'box' around it. We will want to make a UI for each of these.

By looking at our screen, we can come up with several seperate elements.

   Background Text (saying 'emucenter')

   Filter Bar (top left corner)

   Position Bar (bottom right corner)

   Selected Game Info (bottom center, underneath the selected game)

   Games

If you were drawing these in a vector program, you'd build these items on different layers or, to make them easier to move around and get their positioning right, you'd group them. Everywhere you would put a group or a layer, you build a Panel control, or even more likely a seperate UI.

So each of the sections we isolated above would make perfect UI elements.

Then you attack each UI as a completely seperate, indpendent creature. Remember at all times that there are only really three object types they could possibly be - Text, Graphic and ColorFill. Anything that isn't writing or a solid square of colour is almost certainly a Graphic object - it's as simple as that.

The Background Text:

   The background element is self-evident - we've already looked at how to make these earlier.

The Position Bar:

   The position bar LOOKS as if it's a single item, but with two numbers that change and a slash that stays where it is, you can actually build it out of three seperate Text objects. You can but them together by putting them in a HorzontalLayout.

The Filter Bar:

   The filter bar is similar - single Text objects that appear in a HorizontalLayout, this time with a bit of spacing between them. You'll of course have to put these elements in a Scroller though, to make it scroll, and you'll need to set the LockedPosition, since the selection doesn't actually move - the selection stays still and the options move around it instead.

Selected Game Info:

   Again, three Text objects. This time they are going DOWN the screen, so we need a VerticalLayout.

Games

   No big surprise, it's like the filter bar - Graphic objects (one normal, one inverted and faded by a Clip object), repeated in a Scroller, with a HorizontalLayout.

Of course, there's more work in making the selection work correctly, making your scrollers and repeaters happy etc. But when  you get down to it, it's just a handful of UI's, each with a few text objects or graphic objects. And if you had drawn it, you'd know exactly what you need to do to make the reflections work.

So if you can't visualise it without help, follow this guide and draw your interface in Illustrator, InkScape or it's friends first, and the solution will be much clearer, and you'll have a nice prototype to work off.

   OK, although this isn't about GENERAL Media Center development and is more of a self-serving plug, I'm going to go ahead anyway and show you how to write a plugin for Yougle.

    I get a lot of requests for particular video, audio and (to a lesser extent) picture sources. What many people don't know is that Yougle is extendible - 3rd party developers can write their own sources to add more content to Yougle.

   So I'm going to show you the basics of creating the Yougle source to allow you to browse the Media Center Show podcasts.

   Development of a Yougle source must be done on a Windows Vista installation that has Media Center included - you can use any .NET language, but our example with use C#, the language Yougle Vista itself was written in.

   You also need to have Yougle itself installed.

   Finally, create a new Class Library in the .NET language of your choice.

   Now you need to tell Visual Studio that your program is going to be using some of the classes defined by the Yougle Vista application. You can do this by looking in the ClassWizard, finding the 'References' section, right clicking and choosing 'Add Reference...'.

   The trickiest part of the whole process is coming up. For some reason that I'm sure makes a lot of sense but I don't understand myself, the "References" list in Visual Studio is NOT loaded from the set of assemblies you have in your Global Assembly Cache - they are instead loaded from a completely different location. There are a couple of methods you can use to resolve this particular issue, but the method found here - http://www.devtopics.com/adding-assemblies-to-the-visual-studio-add-reference-dialog/ - isn't bad. You can use this to point to the folder where you have installed Yougle Vista - or, if you can not find the Yougle Vista DLL, you can download it from http://www.push-a-button.com.au/community/index.php?action=tpmod;dl=item47 and put it wherever you like.

   OK - now this is done, and we need to start actually writing our code.

   It just so happens that there's an example project and example code on my website at http://www.push-a-button.com.au/community/index.php?topic=92.0 - this gives you the complete sample code for the Flickr picture source. So copy all of this code and paste it into your application.

   A Yougle Source is basically just a single class - based on the YougleSource class - that you customise to load data from your own provider. There are a couple of functions we need to override to do this properly...

public class MediaCenterShowVid : YougleSource
    {

        public MediaCenterShowVid()
        {
             //Set up all of the details of this source - description, name, picture etc.
        }

        public override bool Load()
        {
             //Load all of the basic category, filter & sort information for the sliders at the top of the screen
        }

        public override bool GetMedia(int page)
        {            
            //Get a list of media (pictures, videos, audio streams etc.)
        }

        public override string Play(string URL)
        {
            //If required, take the URL discovered in the GetMedia call and convert it into something that we can actually download
        }
    }

   And that's it - override those 4 functions, and you're away!

   So how do we do this in the case of the Media Center Show? Well it's actually pretty easy when you get right down to it. Let's do these in order...

   The Constructor

   Nothing too shocking here, really - you use the Load function to set all of the major information about your source, so that Yougle knows what to show in the list of sources.

        public MediaCenterShowPodcast()
        {
             //Set up all of the details of this source - description, name, picture etc.

            _Name = "The Media Center Show";                                    //The name of the source
            _Description = "Watch Ian Dixon's Media Center Show";       //The description of the source
            _Type = YougleSourceType.audio;                                       //The type of media available (picture,video or audio)
            _Rating = YougleSourceRating.children;                              //The maximum audience rating
            _ImageURL = "http://thedigitallifestyle.com/images/albumcoversmall.png";
                                                                                                    //A URL for an image to use  

        }

   The Load Function

   This function is responsible for loading all of the information that appears in the 'pivot bar' at the top of the screen - your sort orders, filters, channels and categories.

   There are TWO pivot bars in Yougle Vista. The top one is called the CATEGORY bar. Each category has one or more OPTIONS to choose from, which are shown on the lower pivot bar.

   As an example, 'Sort' can be a category - with options being 'by popularity', 'by date', 'by views' etc.

   Where there are multiple categories, they work and are reset in a left-to-right manner. For example, let's say the first category was 'sort', the second was 'period' and the third was 'category'. In this case, you can effectively 'add' these three options together (eg. sort="By Popularity", period="Today" and Category="Animals") to create more complex queries - in this case, 'Show Me All Of The Animal Videos That Were Popular Today".

   However, when you change a category value, all of the categories to the RIGHT of that one are reset. For example, if you had the earlier example and changed "period" to "week", the Category would reset to "All".

   Anyway, all of this isn't particularly relevant to us, since we will be getting all of our information from the Media Center Show RSS feeds - and there is only one real sorting option, which is "By Date".

        public override bool Load()
        {
             //Load all of the basic category information for the top of the screen

             //There is only really one sort order - By Date. Add it.
            YougleCategorySet Cat = new YougleCategorySet();
            Cat.Name = "sort";
            Cat.Options.Add(new YougleOption("by date", ""));
            Categories.Add(Cat);
            
            return true;           
        }

   Why bother adding anything at all? Well, Media Center is a troublesome beast some times, and you MUST have at least ONE option in every list - so you have to have at least one category, and each category must have at least one option - or your source will crash.

   The GetMedia Function

   This function is the core of Yougle Vista - it gets the media we want to offer to the user. In this case, it will be offering the users the 40 most recent Media Center shows.

   Each media item is stored in a "YougleMovie" object (yes, I really should have gotten around to renaming this, but it was originally a video-only product), and each YougleMovie object has some basic attributes, such as name, thumbnail image, description and one or more URLs.

   Let's start the function...

        public override bool GetMedia(int page)
        {            
            Movies.Clear();            //ALWAYS do this

   Now, we are getting all of our information from an RSS feed from FeedBurner. ( http://feeds.feedburner.com/TheDigitalLifestyleVideoShow ) - so the very first thing we need to do is actually download the thing...

            HttpWebRequest Request = (HttpWebRequest)WebRequest.Create("http://feeds.feedburner.com/TheMediaCenterShowPodcast");
            HttpWebResponse Response = (HttpWebResponse)Request.GetResponse();
            TextReader Rdr = new StreamReader(Response.GetResponseStream());
            String Content = Rdr.ReadToEnd();
  

   This code downloads the current feed from Feedburner, and loads it into a String called 'Content'.

   RSS feeds are simply XML documents, so we should be able to happily load this feed into a XMLDocument object...

            XmlDocument Doc = new XmlDocument();
            Doc.LoadXml(Content);

            XmlNodeList Items = Doc.GetElementsByTagName("item");

            foreach (XmlNode Vid in Items)
            {
                YougleMovie Movie = new YougleMovie();

                Movie.Name = Vid.Attributes["title"].Value;
                Movie.Description = Vid.Attributes["pubDate"].Value;
                Movie.Thumbnail = http://thedigitallifestyle.com/images/albumcoversmall.png";

   OK - now we have a small issue. We aren't given a DIRECT link to the video in it's own tag. Instead, it's embedded inside the Description tag. On the plus side though, it's the only ".mp3" file in the whole text. So perhaps with a regular expression, we can track it down. ( I use Expresso from Ultrapico, which is an excellent program for creating and debugging .NET style regular expressions, which are slightly different to the Unix/PERL style ones you may be familliar with - get it from http://www.ultrapico.com/Expresso.htm ).

   So the regex that finds the 'mp3' file in the description will be something like...

   http://thedigitallifestyle.com/audio/([^"]*?)"

   Which means we can now use that regex to find the MP3 file. 

undefinedhttp://thedigitallifestyle.com/audio/

                Match Mch = Rg.Match(Vid.Attributes["Description"].Value);
                if (Mch.Success == true) Movie.URLs.Add(new YougleMovieURL(Mch.Groups[1].Value, "video/wmv", true));
               
                Movies.Add(Movie);
            } 

    Of course, it would be much more efficient to create the actual Regex OUTSIDE the 'while' loop, to stop it needing to be created again and again. I've added it there simply because we are doing this step-by-step.

   And finally for the GetMedia function, we return a value. We can return either TRUE or FALSE, with 'True' meaning that there is more content waiting to be downloaded (note how the GetMedia function is passed a 'page' parameter? This is so you can download media in seperate 'pages', the same way you view them on a web page). Since we only have access to a single RSS feed and can't move through it, there won't be any more pages to come - so we return FALSE.

            return false;

        }

       The Play Function

   The play function is basically there to help speed up the process of locating your media. Quite often, the direct link to the actual video file (the downloadable file, or the actual streaming address) isn't quite as straight forward as it could be. For example, YouTube don't actually publish the location of the .FLV files for their videos - they need to be sourced using special techniques or 3rd party tools ( such as http://www.keepvid.com ) to find the file.

   It would take WAY too long to track down all of these direct links as part of the LoadMedia function, so the Play function is called immediately before Yougle is ready to play or download your video.

   If we were writing the Media Center Show video source, we could end up having a more difficult job to do here - because we may have to get a link to the web page on either YouTube or MSN Soapbox for the episode. To translate that into a actual URL to either the video file (avi, flv, wmv or asx) would take a little more work. (Luckily, Ian always offers a Direct Download option too, so it should be easy to write a video downloader!)

   In this case, we have a situation where we have the actual MP3 file for Media Player to use, so this is really easy.

        public override string Play(string URL)
        {
            //Rebuild the original URL...

            String UR = "http://thedigitallifestyle.com/audio/" + URL;

            //'UR' now contains the actual address to the actual MP3 file, which Media Center will play...
            return UR;
        }

   We could have just stored the full URL in our YougleMovie object and simply not overridden this member at all, but I wanted to show you how it works, for possible future projects.

 And we are pretty much done!

 If you have a site you want to work with, but you're having trouble getting direct links to the video or audio files (pictures are usually easy), you'll find that there are a number of websites that have the handy ability to translate web page URL's into video URL's...

   http://max.subfighter.com/flv/downloader.php

   http://www.keepvid.com

To go with the last post topic, Cowboy2007 asked me a question about how to make sub-menu's in MCML. I've discussed the basics of this in the following post, for those who are interested.

http://thedigitallifestyle.com/cs/forums/thread/3835.aspx

There are times when the response from a click is going to take a little while - fetching information from a web page, downloading a file, queuing a video...some of these things take time, and the user doesn't like to have their Media Center 'lock up' while they are waiting for it.

When this happens, it's time to bring out the good old Thread class once again, and start playing.

There are a couple of things you should be aware of though before you write your threaded application.

If you have some experience with Windows Forms applications (and I hope you do - it will make your Media Center development life much easier), you will know that it is impossible to change the text or the appearance of a control from any thread other than the thread the window was opened in (eg. the Application Thread).

The same rule applies to Media Center applications and the FirePropertyChanged function of ModelItem. If you are going to call FirePropertyChanged, it must be from the application thread, otherwise it will fail.

Note that if you call FirePropertyChanged from the wrong thread, you probably won't get an exception like you do with Windows Forms - the notification will be 'lost' and you may start getting erratic behaviour out of your application.

So how do you manage to change a property value then? Well, you create a member function that takes a single parameter of type 'object' (even if you don't USE the parameter, create it) and then call...

Application.DeferredInvoke(<function name>,<parameter>);

The 'Application' object is a global one, and the DeferredInvoke function tells Media Center and the .NET system to run the <function name> function in the APPLICATION's thread, next time that thread is available for a little extra work.

I personally like to make my work even easier, by using the following code in any property that I expect to be accessed from a thread other than the main application thread...

In The Object That Has Properties....

internal void FPC(object Val)

{

    String Value = (String)Val;

     if (Application.IsApplicationThread() == true)

         FirePropertyChanged(Value);

    else

    {

         Application.DeferredInvoke(FPC,Value);

    }

}

The Actual Property Itself... 

string _MyStringValue;

public string MyStringValue

{

      get { return _MyStringValue; }

      set

      {

            _MyStringValue = value;

            FPC("MyStringValue");

      }

};

Because the FPC (which is short for FirePropertyChanged) actually conforms to the format needed to pass to the DeferredInvoke function, it's actually recursive. If you try to set the MyStringValue property, FPC is called.

If FPC detects that it has been called from the application thread (by using the IsApplicationThread() command), it simply calls FirePropertyChanged. If it finds that it isn't in the application's thread, it calls itself again using DeferredInvoke. The 2nd time it runs, it WILL be in the right thread.

This greatly simplifies your programming, because you simply have to make sure that you ALWAYS use the publically exposed property name when you are accessing MyStringValue.

Unfortunately, while this protects you when playing with your own properties that are based on simple type (eg. Int32, String, Bool etc.) it won't help with any type that is already based on ModelItem.

These types - like IntRangedValue, Choice, EditableText, ArrayListDataSet etc. already use FirePropertyChanged internally. So you must ensure that you only actually interact with these classes in the correct Application thread.

Thanks to whoever nominated this blog for the Media Center Show Awards this year.

Make sure you nominate any Media Center applications you've been using or liked - and of course, don't forget to VOTE once the list is final!

http://thedigitallifestyle.com/cs/blogs/ian/archive/2007/10/19/the-media-center-show-award-nominations-on-listas.aspx

This is a reasonably advanced topic, but since I've only just discovered the solution for it, I decided I may as well post it here so people who need the solution can use it.

Large scrollers can sometimes be a problem when you need to do large 'jumps' within them. The best example of this is the 'type-to-search' functionality that you find in the Music menu of Media Center. When you start to type the name of the album, artist etc. with either your keyboard or remote control, you will find that the selection jumps straight to the nearest matching item.

To replicate this in your own application can be troublesome.

Normally, Media Center only has two functions to use to control user navigation. The first is Input.NavigateInto. As we have seen before, every object has an 'Input' class associated with it. 'NavigateInto' requests that the current selection be changed to the object that you are Invoking the command on.

For example, if you had a button, putting the following command inside the UI for the button would result on it getting focus.

   <Invoke Target="[Input.NavigateInto]"/>

For collections though, this isn't all that useful. If you wanted to select a particular item in a scroller, you'd need to put in some complex rules inside the item that check not only that you WANT the focus to change, but also compare the index of the item against the index that is being searched for. It's possible - but it's slightly ugly.

There's an easier function though. The Repeater item has a special function called NavigateIntoIndex (see http://msdn2.microsoft.com/en-us/library/bb189530.aspx ). This is a very similar function to NavigateInto, but this time allows you to pass an index number. The repeater will then set the focus to the appropriate index element.

NOTE: Be careful when setting up complex events with these particular functions. Unlike a Windows session, when navigation events like clicks and focus changes are all queued up, Media Center does not queue navigation events. So if you try to fire off two or more NavigateInto or NavigateIntoIndex calls at once, one or more of them may be 'lost'.

To work around this problem, use Timers to offset the calls to NavigateInto. For example, make the first one happen immediately and then make the others happen at 1/10th of a second intervals - or whatever works well for you.

There's one major drawback with NavigateIntoIndex and NavigateInto though. Scrollers and repeaters work together to optimise the objects on screen. Part of this optimisation is only creating the actual repeated item when it becomes nessicary to create it. So for example, if you have 100 items in your list but never scroll past the 10th item, the 100th item will never actually be created as an MCML object.

So let's say you were in your own version of the Music section, you were exploring 'Ace of Base' and decided that you wanted to look for 'ZZ Top'. If you had 100 different artists, but only 12 were on the screen, calling NavigateIntoIndex with a parameter of '100' simply wouldn't work, because as yet, the 100th index does not actually exist.

You can tweak the repeaters 'Prefetch' attribute - which chooses how many item the repeater 'pre-loads', but then you are enforcing a strict maximum possible length of your search, which not only means you are just delaying the problem, but pre-loading hundreds or even thousands of entries isn't just time consuming, it can crash your Media Center application.

So what's the trick? Well, it's not too difficult, it's just got some kinda sketchy documentation.

Each scroller has a ScrollingData attached. If you check out the documentation - http://msdn2.microsoft.com/en-us/library/bb189586.aspx - you'll find that it has a 'scroll' method. The documentation says that it takes a parameter that "is the amount to scroll". This is a little misleading. Does it mean in pixels? Pages? Centimeters?

Well, if you have focusable items in your scoller, the measurement is actually in focusable items. So by calling the Scroll method on the ScrollingData object with a parameter of 5, you will scroll forward five elements.

Because you are now moving the SCROLLER rather than trying to move the focus on the repeated item itself, the repeater now has the opportunity to create the MCML objects, which allow it to focus on them properly.

The only catch is that unlike NavigateIntoIndex, Scoll is a relative movement. So if you are on the 1st item, scrolling with a parameter of 4 will take you to the 5th item. If you are on the 6th position, a value of 4 will take you to the 10th item.

So if your repeater is based on a Choice object, remember to factor in the Choice.ChosenIndex as part of your calculation for the amount you need to scroll by.

I've started a new Open Source project, in the hope that other people are interested in contributing to it.

Installing Media Center addins is a bit of an annoyance. You've got this really pretty Media Center interface, but for people who are trying to use it simply as a home-theatre experience, installing an addin means getting out the keyboard and mouse. Even worse, once you've got the thing installed, if there's an update or a patch for your addins, you've got to leave the Media Center experience to find, download and install them - and User Account Control will be jumping up, which means you can't automate the process from the addin itself.

This is where Addinistrator comes in. It's goal is to perform a number of functions that weren't addressed by the SDK because of it's focus. The SDK is great when it comes to creating your app, but Media Center isn't all that friendly when it comes to deploying and maintaining the app (although Charlie Owen and Aaron Stebner from Microsoft are making excellent improvements to the Media Center SDK applications to make installations much simpler).

Addinistrator will also allow you run-time access to your own Start menu strip (if you have one), meaning that you can re-order and even create new entries on-the-fly to suit your users needs.

Future features may include Start Strip management, a More Programs strip and, most importantly - the ability to browse for and install Media Center applications without the need to leave the Media Center experience.

If you want to contribute, please feel free to visit http://www.codeplex.com/addinistrator

Another sandbox-related discussion (a new user, Jeff, is having some trouble wrapping his head around the MCML concept, so I thought I'd post the assistance I'm giving him).

This is about scope in MCML. I know I've covered this in the past, but this will just expand on my previous points.

Basically, this is all about the question of "I've got this nice little button UI - how do I change the text on it from another UI, or from C#?"

The first thing you need to understand is that each UI is a closed control - you can NOT access the various parts of one UI from another one. So although your button may contain a graphic, a text control and a bunch of other parts, only the button is actually going to be able to make changes to those components - nothing else can.

   Every object can only contain rules that effect ITSELF or it's IMMEDIATE CHILDREN. It can't even access it's own grand-childen.

   And if you don't quite follow the 'children' concept, it quite simple - if a UI contains another UI, that can be considered it's child. So - for example - your main UI contains your various panels that you are showing or hiding. Those panels contain buttons - those buttons would be the child of the panel, and the grandchild of the base UI.

Base

      Menu

            Button1, Button2, Button3 etc.

      Panel 1

            Button1, Button2, Button3

      Panel 2

            Button1, Button2, Button3

Each of these is a seperate UI, where Base is the first UI in the file, Menu is a main menu and Panel 1 and Panel 2 are panels containing buttons.

So, to cover this...

If you wanted to change the text inside your buttons, you could only do this with a <Set> tag inside the button itself. No other UI can access the internal parts (eg. text objects, graphics etc.) of your buttons.

If you wanted to set a property that changes a property in the FIRST element in a UI (which is almost always a panel or clip object) then you can do it from the PARENT. For example, Panel2 can change the Visible, Alpha, Scale, Position and other properties of each one of it's buttons.

If you want to do anything else, you will need to use a property value, such as a Choice, Command, cor:String, RangedValue or any other shared property, and you'll need to have rules inside the button UI to deal with the property changing.

   I've been helping someone out on the Media Center Sandbox, and I thought one of his questions were fairly relevant to someone who is starting to play with MCML development and their own classes.

   He was basically asking 'should the properties I use in my .NET program be the Media Center classes (like Choice, ArrayListDataSet etc.) or standard .NET components, such as List?

   Some of these topics are covered in earlier posts, but this is just a summary for those who may be a little confused.

   If you have a property that is going to return something complex - for example, another object that itself has properties - you should always use a Media Center type (if there is a suitable one) or build your own class based on ModelItem.

So if you are just trying to send a string or an integer, use the String and Integer types - these will be fine.

If you are choosing an element from a list, always use Choice one of the Ranged items. If you have a list of options, always use ArrayListDataSet, or a class of your own that is based on ModelItem.

But this rule only applies to the properties you expose to Media Center. You don't use them for internal values, since most of the ModelItem based classes are not thread safe and will cause exceptions should you use them outside the parent thread.

The reson for this is kinda complicated (see my previous posts for some information on how ModelItem works), but basically, 'ModelItem' allows you to notify Media Center that a property has changed, meaning all of your UI rules will be checked. Without basing your class on ModelItem and calling FirePropertyChanged where appropriate, changing a property in any complex object will mean that Media Center will simply miss it - your UI will never update properly.

   So the basic rule is:

       Simple Properties and Internal Variables: Standard .NET Classes

       Complex Properties: Media Center Classes

Ian Dixon has kindly donated the developer forum to let us all discuss the topics I'm covering on this blog. So if you have any questions, want to discuss possible features for TriviaCenter or even post code and suggestions, please feel free to jump in.

And if you want a little bit of a chat about Media Center development in general, feel free to vent your frustrations or express your joy here. And of course any expressions of your new-found love for me will also be accepted ;)

Please read the 'Welcome Aboard' post though - this is not intended to be a replacement for the Media Center Sandbox forums. If you are going to ask a development question, please try to ask those that are based on the MCMLookalike libraries, TriviaCenter or my other posts here - if it's about something else, you'll get a much faster reply from the sandbox.

Feel like joining in? follow this link to the forums!

[Update: Link fixed]