Soapbox Video Gadget

• Download Source code for the Gadget - 193 Kb
• Install the latest Gadget to your sidebar- 193 Kb
• Sample of favorite video list (xml file)- 45 Kb (right click, Save as.. and click open in Gadget Settings -> Video Feeds dropdown -> shared favorites)

Introduction

When I first started sidebar gadget development¹, I found gadgets cool and innovative. But the more I learned about them, the more I realized their usefulness. Gadget development provides a whole new platform, becoming more productive in ways unimagined. On one hand, it's a mini web application which can host a web page, call a web service, and use AJAX to read an RSS feed. On the other, it can interact with the Windows API using the power of .NET languages. Wow! That's the best of both the worlds, wouldn't you agree?

The most important factor is the unique way in which a gadget provides the interaction between the web, Windows and users. In this example I try to utilize this, to give user the "Power of Videos" in the sidebar. Check the architecture below.

To hold your interest, here is how it looks in the sidebar.

About the gadget: The power of videos

Before I start, I must warn you: this gadget is quite addictive. Indulge yourself only during your spare time.

There are a number of RSS Feeds available from the Soapbox on MSN Video Beta page which give you the contents of the videos uploaded by the users. Some of the more interesting ones are: "Most Popular Videos", "Most Rated videos", and "Most Recent Videos". There is even a feed for "Videos By Tag" available, which we will use for searching videos. The idea behind this is to use those regularly updated feeds to show the user the video of his choice on the sidebar. If you want to know the basic barebones required to create a gadget, please refer to my first article Daily Dilbert . This article is actually an extension of that first article; I try to explain only those extra features which can be used to refine a gadget further:

1. Create a gadget which can play a video in the flyout
2. How to take care of paging when you read an XML file
3. Settings and Search Videos
4. Add video to "Favorite List"
5. Create, read, update, & delete local XML file from Sidebar Gadget (new)
6. Some tips in general

The architecture overview

Let's Begin

Create a video Gadget

A standard XML file with the name Gadget.xml is required as shown below:

More information about this is available here

The name of the gadget is "Soapbox @ MSN" (as seen above). The namespace is basically to group more than one gadget (reserved for future use), which you can write in "mynamespace". MinPlatformVersion. Required. The expected value is "1.0."

"Permission" controls the amount of permission in the gadget. "Full" permission is required if you want to access a webpage through the gadget. With these two files you can deploy and test your gadget in the sidebar. The <permission> tags and <type> tags will be more flexible in future versions of gadget development.

Our Video Gadget will have these files

Gadget.xml	An XML file defining the gadget properties, including name, icon and description
main.html	the Main HTML page
main.js	The core code/script for the gadget
Settings.html	Exposes gadget settings for the user to change
Settings.js	Script for the Settings file
soapboxFlyout.html	The html file which will be used in Flyout window
Icon, images etc	For use in the gadget selection box

You can get more details on these here

Get the RSS Feed

The Main.html file will have five elements ("DIV") to get the feed data: cell0, cell1 etc. We can show the videos as a list of five videos (below) or single video.

The Feed for the Gadget

We have the URL which we call using the MSXML2.XMLHTTP object. This is the core of the AJAX until the feed gets loaded. Here is the magical JavaScript for this:

function getRSS() 
{
    document.getElementById("mylogo").Title = 
        System.Gadget.Settings.
        read("feedText");

    try
    {
        error.style.visibility = "hidden";

        loading.style.visibility = "visible";
        rssObj = new ActiveXObject("Msxml2.XMLHTTP");
        rssObj.open("GET",
            System.Gadget.Settings.read("videoFeed") , true);
        rssObj.onreadystatechange = function() {
            if (rssObj.readyState = == 4)
            { if (rssObj.status == 200) 
            { loading.innerText = ""; 
            error.innerText = ""; 
            error.style.visibility= "hidden"; 
            loading.style.visibility = "hidden"; 
            rssXML = rssObj.responseXML; 
            page = 0; 
            parseRSS();
            if 
                (chkConn) { setInterval(getRSS, 60 * 60000); 
            loading.style.visibility = "hidden";
                }
            } 
            else 
            {
                var chkConn;
                loading.style.visibility = "visible";
                chkConn = setInterval(getRSS, 30 * 60000);
            }
            } else {
                loading.style.visibility = "visible";
            }
        }    
        rssObj.send(null);
    }
    catch(err)
    {
        loading.style.visibility = "hidden";
        error.innerText = "   Service not available";
        error.style.visibility = "visible";
    }
}

Service Not available

As you can see, if there is an error while connecting the feed or an error in the internet connection, we want to show the "Service not available" screen.

Parse the XML File

Here is the portion of the RSS Feed for a single item in the XML file and the corresponding "partial" ParseXML file to give you an idea of what we are doing with the feed.

function parseRSS(page) 
{
    rssItems = rssXML.getElementsByTagName("item");
    rssTitle = null; rssAuthors = null; rssDescription = null; 
    rssLink = null;
            
    rssTitle = escape(rssItems[i].firstChild.text);
    rssLink =rssItems[i].getElementsByTagName("guid")[0]
    .firstChild.nodeValue;
    rssViews = rssItems[i].getElementsByTagName("vidAt:playCount")[0]
    .firstChild.nodeValue;
    rssDateUpdate = rssItems[i].getElementsByTagName("vidAt:pubDate")[0]
    .firstChild.nodeValue;
    rssRatingValue = rssItems[i].getElementsByTagName("vidAt:rating")[0]
    .firstChild.nodeValue;
    rssDuration = rssItems[i].getElementsByTagName("vidAt:duration")[0]
    .firstChild.nodeValue;
    rssVDescription= escape(rssItems[i].getElementsByTagName
    ("vidAt:description")[0].firstChild.nodeValue);
    rssDescription=rssItems[i].getElementsByTagName("description")[0]
    .firstChild
    .nodeValue;
    myTitle = unescape(rssTitle)
    myTitle1 = myTitle.substr(0,16);
    myRatingTip = "Rating: " + rssRatingValueFormated2 + ", 
        View: " 
    + rssViews + ", Duration: " + rssDurationFormated ;
    
    document.getElementById("cell" + (cell)).innerHTML = 
        "onclick="
    showFlyout(\'' + rssTitle + '\',\'' + rssVDescription + '\',
    \'' + rssLink + '\',\'' + rssImage + '\',\'' + rssRImage + '\',\'' 
    + rssViews + '\',
    \'' + rssDateUpdate + '\',\'' + rssDurationFormated + '\',
    \'' + rssRatingValueFormated2 + '\');" >
}

Since we have the feed required, we can create a flyout from the video. This is the showFlyout function, which is created dynamically and is used to pass all the parameters from the item to the flyout page.

function showFlyout(sTitle,sDescription,sGuid, sImage, sRImage,sView,
    sDateUpdate,sDuration,sRatingFormated)
{

    if (System.Gadget.Settings.read("sTitle")==sTitle)
    {
    System.Gadget.Settings.write("sTitle", "myTitle");
    hideFlyout();
    }
    else
    {
        System.Gadget.Settings.write("sTitle", sTitle);
        System.Gadget.Settings.write("sView", sView);
        System.Gadget.Settings.write("sDateUpdate", sDateUpdate);
        System.Gadget.Settings.write("sGuid", sGuid);
        System.Gadget.Settings.write("sDescription", sDescription);
        System.Gadget.Settings.write("sImage", sImage);
        System.Gadget.Settings.write("sRImage", sRImage);
        System.Gadget.Settings.write("sRatingFormated", 
            sRatingFormated);
        System.Gadget.Settings.write("sDuration", sDuration);
        System.Gadget.Flyout.file = "soapboxFlyout.html";
        System.Gadget.Flyout.show = true;
    }
}

Other Settings for the Gadget

Apart from the settings which are set on the showFlyout function, there are other settings which can be managed by the user. The user can search under "Video" or select from one of the Video feeds.

Once we have all the settings, we Build the video object in the flyout window.

function BuildVideoObject()
{
    try
    {
        if (System.Gadget.Settings.read("videoSize") 
            =="large")
        {
        Video_HtmlString  = '‹OBJECT id="VIDEO" 
            width="640" height="480" '; 
        }
        else 
        {
        Video_HtmlString  = '‹OBJECT id="Body1" 
            width="320" height="240" '; 
        }    
    Video_HtmlString += 'style="position:absolute; left:0;top:0;"';
    Video_HtmlString += 'CLASSID="CLSID:6BF52A52-394A-11d3-B153-"';
    Video_HtmlString += 'type="application/x-oleobject" 
        VIEWASTEXT›';
    Video_HtmlString += '‹PARAM NAME="URL" VALUE="';
    Video_HtmlString += 
        "http:/soapbox.msn.com/StreamingUrl.aspx?vid=" 
    + System.Gadget.Settings.read("sGuid");
    Video_HtmlString += '"›‹param NAME="stretchToFit" 
        VALUE="1"›';
    Video_HtmlString += '‹param name="AutoSize" 
        value="1"›
    ‹PARAM NAME="SendPlayStateChangeEvents" 
        VALUE="True"›';
    Video_HtmlString += '‹PARAM NAME="AutoStart" 
        VALUE="True"›';
    Video_HtmlString += '‹PARAM name="uiMode" 
        value="none"›';
    Video_HtmlString += '‹PARAM name="PlayCount" 
        value="9999"›';
    Video_HtmlString += '‹/OBJECT›';
    document.write(Video_HtmlString);
    }
    catch (err)
    {
     document.write("Problem with the machine's Windows Media 
         Player");
    }
} 

More information on the flyout is available here

Paging

Since XML files can have hundreds of items, we need to be able to page it. So we add a DIV item in the main.html file with the following:

‹div id="tbar" title=""›
‹table width="100%" height="100%"  border="0" cellpadding="2" cellspacing="0" 
ID="Table2"›
‹tr align="center" valign="middle"›
    ‹td width="12" class="arrow" onclick="chPage(-999);" align="right"›
    «‹/td›
    ‹td width="12" class="arrow" onclick="chPage(-1);" align="right"›
    ‹b›‹‹/b›‹/td›
    ‹td class="sub" id="pageNum"›1/1‹/td›
    ‹td width="12" class="arrow" onclick="chPage(+1);" align="left"›
    ‹b››‹/b›‹/td›
    ‹td width="12" class="arrow" onclick="chPage(+999);" align="left"›
    »‹/td›
‹/tr›
‹/table›
‹/div›

A Change page function will Parse the content of items to that page.

function chPage(off) 
{
    try
    {

        if (System.Gadget.Settings.read("listview"))
        {
            if (rssItems.length < 100) 
            {
                myval = Math.ceil (rssItems.length/5);
            }
            else
            {myval = 20;}
        }
        else
        {
            if (rssItems.length < 100) 
            {
                myval = rssItems.length;
            }
            else
            {myval = 100;}
        }


        if (off === -999)
        {
            off = myval-page;
        }
        if (off === 999)
        {
            off = myval-page-1;
        }

        try
        {
            if (((page + off) > -1) && ((page + off) < myval)) 
            {
                page = page + off;
                parseRSS(page);
            } else if ((page + off) === myval) 
            {
                page = 0;
                parseRSS(page);
            } else if ((page + off) === 0) 
            {
                page = myval;
                parseRSS(page);
            }
        }
        catch (err)
        {
        }
    }
    catch (err)
    {
    }
}

Make you own Favorite Videos List

Now with each video you will see a plus icon in the bottom, so you can add the video to your favorites list.

A portion of the code behind

function addtoFavorites(sGuid)
{

  var variableName = "userprofile";
  var mytext ="Testing";
   
  try
            {       
   var variableName = "userprofile";
   xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
   xmlDoc.async="false";
   xmlDoc.load(System.Environment.getEnvironmentVariable
   (variableName) + "\\Videos\\SoapBoxFavorites.xml");
   xmlObj=xmlDoc.documentElement;
   rssAddItems = xmlObj.getElementsByTagName("channel");
   rssAddedItems= xmlObj.getElementsByTagName("item");
   var varAlreadythere = false;


  if (rssItems[i].getElementsByTagName("guid")[0]
     .firstChild.nodeValue == sGuid)
    {
    if (!varAlreadythere)
     {
       rssAddItems[0].appendChild(rssItems[i]);
      }
     break;
     }
                  
xmlDoc.save(System.Environment.getEnvironmentVariable
(variableName) + "\\Videos\\SoapBoxFavorites.xml");

When you click on the "Add to Favorite" icon it will add the XML feed information for that video from the online feed to a local XML file.

%userprofile%/Video/soapboxfavorites.xml

Here are the new settings to view your favorite videos. Select "My Favorite Videos" to see the bookmarked videos.

If any "My Favorites" are selected, the gadget will read from the local XML file.

A portion of the code behind

 if (System.Gadget.Settings.read("feedText").indexOf("My favorite") >=0)
 {
 try
 {
  var variableName = "userprofile";
  var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
  xmlDoc.load(System.Environment.getEnvironmentVariable(variableName)
     + "\\Videos\\SoapBoxFavorites.xml"); 
  rssXML=xmlDoc; 
  parseRSS();
  }

By default, the "My Favorite Video" list will show nine videos from the "Current Featured Feed".

Create the XML file for the first time from "Current Featured Feed".

A portion of the code behind

 var variableName = "userprofile"
 var SoapboxFavoritesPath = System.Environment.getEnvironmentVariable
  (variableName) + "\\Videos\\SoapBoxFavorites.xml";
  
 rssObj = new ActiveXObject("Msxml2.XMLHTTP");
 rssObj.open("GET",System.Gadget.Settings.read("videoFeed"),true);
 rssObj.onreadystatechange = function() 
 {
 if (rssObj.readyState === 4) 
 {
 if (rssObj.status === 200) 
 {                                
 try 
  { 
   System.Shell.itemFromPath(SoapboxFavoritesPath); 
   return; 
  } 
  catch (notFound) 
  {
  var stream = new ActiveXObject("ADODB.Stream");                     
  stream.Type = 1;
  stream.Open();
  stream.Write(rssObj.responseBody);
  stream.SaveToFile(SoapboxFavoritesPath, 2);
  stream.Close;
  stream = null;
  } 

You can also remove the video from the Video list. Select My Favorite video, and then you can see the "Remove icon" after each video in the gadget.

The code behind Remove

function removefromFavorites(sGuid)
{

   var variableName = "userprofile";
   var mytext ="Testing";
               
   xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
   xmlDoc.async="false";
   xmlDoc.load(System.Environment.getEnvironmentVariable
   (variableName) + "\\Videos\\SoapBoxFavorites.xml");
   xmlObj=xmlDoc.documentElement;
   rssRemoveItems = xmlObj.getElementsByTagName("item");

     if (rssRemoveItems[i].getElementsByTagName("guid")
         [0].firstChild.nodeValue==sGuid)
        {
        var lastNode=rssRemoveItems[i];
        var delNode=xmlObj.firstChild.removeChild(lastNode);
        xmlDoc.save(System.Environment.getEnvironmentVariable
          (variableName) + "\\Videos\\SoapBoxFavorites.xml");
        mytext = "Deleted and Saved";
        break;
        }
 }

And we are done.

Tips in general

• To resize a windows media player to a custom width, set the ‹param name="AutoSize" value="1"›
• Any exceptions in a sidebar gadget main window should be handled with the "Service Not Available" screen, with information icon as shown above
• Whenever you use a JavaScript function, encapsulate it inside a try catch statement to avoid surprises
• Escape(^) and unescape(^) are nice little JavaScript functions for URL encoding and un-encoding when you need to pass URL's, etc. as parameters to the flyout window
• The HTML code for < is "&laquo;" , << is "&lsaquo;" , >> is "&rsaquo;" and > "&raquo;"
• To check whether a file exists in a local folder use System.Shell.itemFromPath(Path) inside try catch
• For a timer functionality, use the setinterval⁴ method
• For multiple language support, create a folder for that language (e.g. 'IT-CH', if the language is it-ch Italian Switzerland) and copy all files from the 'EN-US' folder to the new created folder (language codes ^)
• Check design concepts and usage pattern⁵

In Action

Soapbox Gadget in Action : Size: 400 X 360 in flash player

References

1. Daily Dilbert : A Beginner's Gadget
2. Soapbox at MSN Videos
3. MicrosoftGadgets.com sidebar development
4. Windows setinterval
5. Design concepts and usage pattern

Article History

• Mar 07, 2007: First published
• Mar 08, 2007: Added support for flash player
• Mar 09, 2007: changed "check for updated feed" 30 minutes
• Mar 11, 2007: Added architecture diagram
• Mar 20, 2007: Create "My Favorite Videos"
• Mar 23, 2007: Save your favorite video list to share
• Mar 23, 2007: Open shared favorite video list (added sample)
• Apr 02, 2007: Updated search string
• Apr 11, 2007: Updated & added some defaults

And thanks

For coming so far! I hope you find this useful, and give me a vote/comment if you do and take care.

You must Sign In to use this message board.

FAQ  Noise Tolerance Very HighHighMediumLowVery Low  Search Messages    Layout Expand All MessagesThread ViewNo Javascript (slow)No Javascript Preview    Per page 102550

Msgs 1 to 25 of 36 (Total in Forum: 36) (Refresh) FirstPrevNext

Gadget doesn't find my favorites XML in Videos folder klxz79 22:08 28 Apr '07   I believe the problem is that it's looking to the C:/ drive for the Videos folder under my user name but I've set up Vista to relocate my videos folder to my other hard drive (F:/)therefore it's not finding it. I've labeled the XML to SoapBoxFavorites.xml in the videos folder with no luck. This should be a simple fix but I'm a big noob when it comes to computer programming so I couldn't fix it. Sign In·View Thread·PermaLink Re: Gadget doesn't find my favorites XML in Videos folder Quartz. 5:04 2 May '07   Thanks for the message, You can still open your favorite shared list by selecting "Shared Favorite" in the drop down and Browse your xml file. I will check with the issue given. i will suggest Try putting the SoapboxFavorite.xml in the %UserProfile%/Videos folder , Userprofile is the the username folder in vista Best Omit Needless Words - Strunk, William, Jr. Vista? Cryptography Next Generation (CNG) here Sign In·View Thread·PermaLink Congratulations Dr.Luiji 7:30 25 Apr '07   winner of the Vista Gadget Competition. Good job. Sign In·View Thread·PermaLink 5.00/5 (1 vote) Re: Congratulations [modified] Quartz. 13:17 25 Apr '07   Thanks Dr. Luiji, I think you predicted that, in one of your comments earlier And ofcourse your vote remember[^] did not go wasted thanks Omit Needless Words - Strunk, William, Jr. Vista? Touch Screen Explorer with Pen Flicks here Sign In·View Thread·PermaLink Time to get Vista Tarakeshwar Reddy 4:57 17 Apr '07   Great job, Looks really nice. I should possibly get vista installed on my PC and start programming on that. Sign In·View Thread·PermaLink 4.20/5 (2 votes) Re: Time to get Vista Quartz. 5:16 17 Apr '07   Thanks for the message ! Do check it out when you get vista , and let me know your comments Omit Needless Words - Strunk, William, Jr. Vista? Touch Screen Explorer with Pen Flicks here Sign In·View Thread·PermaLink 1.00/5 (1 vote) Re: Time to get Vista Tarakeshwar Reddy 5:37 17 Apr '07   You got my 5 on that Sign In·View Thread·PermaLink 1.00/5 (1 vote) good one phantomaccess 14:59 29 Mar '07   too sad i dont have vista yet to try it.... manohar Sign In·View Thread·PermaLink 1.00/5 (1 vote) Re: good one Quartz... 14:11 30 Mar '07   thanks , do let me know when you get a chance to try it Omit Needless Words - Strunk, William, Jr. Vista? Photoshop Preview Handler here Sign In·View Thread·PermaLink Share your VideoList Quartz... 16:01 24 Mar '07   In the latest version, i have added an option to Share your videoList i have also added a sample videoList file to download and test , do let me know what you guys think about that ? adios Omit Needless Words - Strunk, William, Jr. Vista? VideoGadget here Sign In·View Thread·PermaLink 5.00/5 (1 vote) Errors! JoeIsTheMan 8:11 14 Mar '07   I got lots of JS errors. Didn't run on my Vista PC (Business Edition) All Things Joe Sign In·View Thread·PermaLink 1.00/5 (3 votes) Re: Errors! Quartz... 8:23 14 Mar '07   JoeIsTheMan wrote: I got lots of JS errors There may not be any JS errors because each of the function i have encapsulated in try catch i will appreciate if you can add some more light on the type of errors Omit Needless Words - Strunk, William, Jr. Vista? VideoGadget here Sign In·View Thread·PermaLink install gadget into sidebar by program myang58 2:51 13 Mar '07   Hi, is there any sample code to install gadget into sidebar by program? Sign In·View Thread·PermaLink Re: install gadget into sidebar by program Quartz... 7:03 13 Mar '07   myang58 wrote: to install gadget into sidebar by program Install gadget by program is similar to a plain copy Copy xyz.gadget file from user location to %userprofile%/AppData\Local\Microsoft\Windows Sidebar\Gadgets with administrative rights, which is required in "AppData" folder Omit Needless Words - Strunk, William, Jr. Vista? VideoGadget here Sign In·View Thread·PermaLink Re: install gadget into sidebar by program myang58 17:33 13 Mar '07   copy files only install gadget into gallary, Is there any way to add to sidebar? Sign In·View Thread·PermaLink Re: install gadget into sidebar by program Quartz... 7:45 14 Mar '07   my best guess would be call Shell something like run path/xyz.gdaget with -h parameter Also check here[^] i am not able to make it run but i can clearly see the register/unregister gadget button in the screenshot Omit Needless Words - Strunk, William, Jr. Vista? VideoGadget here Sign In·View Thread·PermaLink Message from the MSN Soapbox Team Quartz... 4:30 12 Mar '07   Yesterday i got a mail from a guy from the soapbox team at msn video "Amazing Soapbox Gadget! I have wasted the last hour watching videos. Great implementation… Our team couldn’t have done it any better. You should submit it to the Gadgets Directory.. http://gallery.live.com/submit.aspx?l=1 Soapbox-Team " now that makes a day Omit Needless Words - Strunk, William, Jr. Vista? VideoGadget here Sign In·View Thread·PermaLink 5.00/5 (3 votes) Excellent!!! kirtand 12:51 10 Mar '07   I love the way you make it look so simple and so elegant!!! kudos!!! KDE Sign In·View Thread·PermaLink 5.00/5 (1 vote) Re: Excellent!!! Quartz... 16:28 10 Mar '07   thanks Kirtan Omit Needless Words - Strunk, William, Jr. Vista? Soapbox Videogadget here Sign In·View Thread·PermaLink woww krishnacc 7:09 9 Mar '07   interesting,informative explanation.it works great and great entertainment also krishnacc Sign In·View Thread·PermaLin