Silverlight, WPF and .NET Subscribe via RSS
Photo of Alan Cobb
About me:   I'm a Silverlight 4, WPF (Windows Presentation Foundation) and .NET programmer based in Northern California, USA.   See more about the Silverlight presentations I have been giving here.

I'm currently available for work.  Send me an email at the address here and we can talk about your project. 
My Silverlight debugging talk at SV Code Camp - Slides and demo code
By: Alan Cobb Date: 2008-Nov-09 22:55

Modified on 2008-Nov-16: (See notes added about Vista at the end)

Here are my PowerPoint slides and demo code used in my Silverlight Debugging presentation at the 2008 Silicon Valley Code Camp at Foothill College on Saturday November 8, 2008.  The demo code is three separate VS2008 solutions in a ZIP file.  They were built with the SL2RTW Silverlight Tools for VS2008+SP1.  Below are screen shots of two of those demo apps.

Little Silverlight "bootstrap" loader
demo (loads bigger Silverlight app).
Performance demo (MaxFrameRate).

Thanks for coming!

Alan Cobb

--------------------------------------------------------------------------
2008-Nov-16: Some added notes about problems on Vista:

During my Code Camp session on 2008-Nov-08 I was running on XP.  Afterward I tried re-building and re-running the demos under Vista.  I ran into two problems worth mentioning:

1) After you download the ZIP file containing these demos, Vista (or XP too depending on your settings) is suspicious of any of the files in the ZIP.  You will get warnings from VS2008 when you try to build the demo projects.  To prevent those warnings, do the following:  Right click on the ZIP file in Windows Explorer.  At the bottom of the "General" tab in Vista there should be an "Unblock" button.  Press the "Unblock" button and the warnings for this particular ZIP file will stop.

2) Getting Fiddler to spy on traffic to localhost when running on Vista:
One standard trick to allow Fiddler to spy on HTTP traffic to localhost is to add a "." at the end of localhost.  For example:  http://localhost.:4444/LittleLoaderAppTestPage.html  When I tried that on Vista I got an error message from Fiddler. In order to make the "localhost." trick work on Vista I needed to change one of Fiddler's settings.  Specifically: Tools / Fiddler Options / General tab. Uncheck the "Enable IPv6" checkbox.  I don't know why that works, but it did for me.  I learned about this Vista fix here.

Comments [0]  |  debugging | Silverlight #  
Tweaking the NBCOlympics.com Silverlight video player to run full screen
By: Alan Cobb Date: 2008-Aug-17 10:54

Summary:
This post discusses one short-coming of the NBCOlympics.com Silverlight video player and shows a simple CSS tweak you can make to force the video to completely fill the IE7 browser window, even when running full screen on a big monitor.

Stock player before tweaking.
(Fixed-size 848x480 pixel video)
After CSS tweaked to force full-screen.

Some people have criticized [1] [2] aspects of the Silverlight "HD" video player that NBC is using to show the Olympics on the Internet (only available in North America). One of the biggest irritations is that there is no stock way to make the video window fill a large monitor. This has led some people to erroneously suspect this may reveal a technical limitation in Silverlight's ability to "stretch" video.

Since I have been working on my own SL video player demo app, and since I'm interested in SL debugging, I looked at the site's code to see if it could be "coaxed" into full screen mode. It turns out that just changing two lines of CSS styling is all it takes to go full screen.  If you only want to see the "how to tweak" details, you can skip the following "why?" section.

Background: Why no full screen mode?
If all it takes to go full screen is changing two lines of CSS, then clearly the fixed 848x480 video window was a deliberate design decision. Why would Microsoft and NBC make that choice? Tom Taylor of Microsoft has offered at least a partial explanation. He says one factor was that when you scale the video to fill a larger screen the compression artifacts are more apparent. That is true. Another, probably more important, factor is: "...restrictions placed on the usage of full screen video by the IOC".  Tom says it is "absolutely false" that NBC made the choice out of fear that a "too good" player might undermine their cash cow of conventional TV broadcasts of the Olympics. Whether that's true or not, some early reports suggest the large amount of video on the NBC site actually helps increase the TV audience (at least with a somewhat neutered SL player).

Tom says "most people have 1024x768 monitors or less", but according Browser News, "~91% of page accesses" come from browsers with resolutions of 1024x768 and higher.  Even if the average user is still at 1024x768, it isn't that hard to create a liquid layout that adapts as well to 800x600 resolution as to 2560x1600.  One of the biggest attractions of Silverlight and WPF for me as a developer is that they are vector based (highly scalable), and have strong support for liquid layouts.

Workarounds:
Regardless of why they chose a "small" fixed layout, how can we get the scalable, full-screen behavior that many of us want?

Simple non-programmer fixes:
Actually, the simplest ways to get full-screen behavior don't require any programming: As discussed in the same silverlight.net forum thread, one solution is to just temporarily drop your display resolution down to 1024x768. The disadvantage is that it also forces the OS and all your other programs down to that low resolution too.

Probably the best fix is to download Firefox 3 (ironic from MS's point of view) and use its "zoom in" mode to expand the Olympics video to full screen. Unfortunately, IE7's own "zoom in" mode has an issue that prevents it from working well in this case. Yes, IE7 will zoom in on the video, but the banner ad on the same page periodically shifts to the right for some reason, pushing part of the video out of view.

More technical fixes:
Since this is a technical blog, and most of us are "devs", we'll look for a more programmer-level fix. Actually, both the following fixes are quite simple once you know what to tweak.

Technique #1: Add a personal style sheet rule:
For this one I just added the following CSS rule to the personal style sheet I use with IE:

#videoPlaybackHost
{       width: 105% !important;   /* Stock player uses fixed 1002px */
        height: 200% !important;  /* Stock player uses fixed 524px */
}

The CSS "id selector" #videoPlaybackHost refers to the DIV element holding the Silverlight control that displays the video.  I've replaced the fixed 1002 pixel width with a width of 105%.  That makes the video stretch to fill the entire width of the browser window, regardless of how small or large you make it.  What a concept! :)  Although the 200% height seems odd, that was what worked on my 1600x1200 display.  You can tune those percentages, or switch to large fixed numbers like a 1000px height, to suit your particular monitor size.

After you create or edit the custom style sheet, you need to restart IE7.  Also, when the smaller browser pop-up window that holds the video appears, you need to press the "ENLARGE VIDEO" button on the player and press F11 to make that browser window border resizable.

Technique #2: Create a "bookmarklet" to tweak the DIV style to full screen:
This second technique was suggested by "slyi" on the Silverlight forums.  Although creating a personal style sheet is easy, this is even easier (thanks slyi).  I had never created a "bookmarklet" before, but it was simple enough.  For those of you who haven't used bookmarklets, the basic idea is to use the text of a little Javascript program as the href address in a hyperlink / bookmark.  When you click the link, instead of openning another web page, your few lines of Javascript run.  

First create a regular favorite (IE) or bookmark (FF).  Then right click on the favorite and select "properties".  Now paste the following single long line of Javascript into the URL field:

javascript:var o1=document.getElementById('videoPlaybackHost'); o1.style.width='105%'; o1.style.height='200%';void(null)

Finally, once the video player window is open and you have clicked the "ENLARGE VIDEO" button, you just click the bookmarklet containing the above code and it will force the video to fill the browser window.

One problem is that the video player window normally opens with just a title bar, but no menus and hence no bookmarklets/favorites to click.  To get around that in IE7 you can copy the URL at the top of the video window into the address bar of a full browser window.  Or just click this URL to a random video to get you into the player.  Now your bookmarks menu should be available.

Doing the analysis with IE Developer Toolbar or Firebug:
I used the IE Developer Toolbar (IEDT) add-on with IE to come up with the above simple CSS fix.  You can use Firebug on Firefox to do the same thing.  IEDT and Firebug both show you the element tree for the host HTML page.  You can browse down to the nested DIVs containing the Silverlight control and interactively tweak their CSS styles!  


This screen shows IEDT in action, after I have tweaked the DIV's width and height on-the-fly.  And yes, they really do have cheerleaders at the Olympics.

The more conventional "full screen" mode of Silverlight:
Finally, although I like this liquid layout technique for going "full screen", Silverlight also supports a more literal full screen mode, where the Silverlight app can immediately jump to fill the entire screen without any surrounding browser chrome.  There is a whole section in the documentation about it.  Most other Silverlight video players offer that capability.  Like this player sample on CodePlex

Alan Cobb

Comments [2]  |  debugging | Silverlight | video #  
A more debuggable Silverlight.js :
By: Alan Cobb Date: 2007-Oct-20 19:40

The main point of this article is to make my reformatted, more debuggable version of Silverlight available to other people for download:

      For 2007-09 v1.0 SDK:  Silverlight_DebugPretty_V10.js 
      For 2007-09 v1.1 SDK:  Silverlight_DebugPretty_V11.js

Background and explanation:
As you probably know, Silverlight.js is a helper file that all Silverlight applications are required to use when starting up.  To make it download faster it has been "minified" into a single line of JavaScript 7000+ characters long.  That's OK for production use, but it makes the source code unusable for debugging.  For debugging you want to be able to use Visual Studio to single step through readable, understandable source code and look at variable values and stack traces.


The 2007-07 version of the Silverlight SDK included such a reformatted Silverlight.js (even including some descriptive comments [gasp!]), but I couldn't find one in the 2007-09 versions of the SDK.  So I made the ones linked to above. 

To do the reformatting ("pretty printing") I started with a free trial copy of the commercial Polystyle code-reformatter product.  That turned the single JavaScript line into about 400 readable lines, with proper indenting.  I followed that with a little hand editing to visually separate the individual methods with lines of asterisks.  One could go even further and add some descriptive comments.

Once you are a old hand at JavaScript and Silverlight you probably won't spend much time looking at Silverlight.js.  But if you are like me, with a background in C# and C++ you may initially find JavaScript's behavior somewhat "odd" and mysterious.  It can be instructive to single step through the startup code in Silverlight.js.  See how one of the first steps is to "instantiate" all the methods of the Silverlight object so they can be called later?

Minification and obfuscation:
I found out via petemounce on the Silverlight Forum (see: http://silverlight.net/forums/t/5697.aspx) that there are tools available specifically for the task of minimizing the size of ("minifying") your JavaScript or HTML.  See: http://www.julienlecomte.net/blog/2007/08/13/introducing-the-yui-compressor/

This is closely related to the task of obfuscation, in which you try to make your code harder to reverse engineer.  Deliberately debugger-unfriendly.  See: http://yuiblog.com/blog/2006/03/06/minification-v-obfuscation/

Comments [5]  |  Silverlight | debugging #  
Copyright 2014 Alan Cobb:  www.alancobb.com    Subscribe: Subscribe via RSS
Theme by Alan Cobb, based on dasBlog calmBlue.
newtelligence dasBlog 2.3.9074.18820
Page rendered: 2014-Jul-29 01:40 CA, USA Time
dasBlog logo
Search
Admin Login