Click here to Skip to main content
11,495,493 members (63,922 online)
Click here to Skip to main content

Daily Dilbert: A Sidebar gadget for Windows Vista

, 20 Mar 2007 CPOL 242.7K 1.2K 87
Rate this:
Please Sign up or sign in to vote.
Daily Dilbert is a simple Windows Vista sidebar gadget which delivers the daily dilbert cartoon on your desktop

DISCLAIMER

This gadget is provided only for educational purposes and does not endorse in any way for using the gadget to view Dilbert cartoon strip on your Vista sidebar, for personal or commercial use. If you want to see the daily cartoon strip you need to go to the website www.dilbert.com. All Dilbert cartoon related images are copyrighted materials © Scott Adams, Inc.

Introduction

With the broadest ever release of Microsoft Vista World wide, 2007 opens the door to an era of gadget development. Gadgets are small, light weight but powerful applications which stay on the Windows Vista Sidebar. The coolest thing about a gadget is that it is not dependent on any particular language or technologies, and you don't need to be a rocket scientist to create a gadget. Basic knowledge of HTML and Javascript is enough for that, but you can also program in any Microsoft language for windows/web to extend a gadget. Once you know the basic rules of gadget development, only sky is the limit for productivity and innovations.

This article describes a simple Windows Vista Sidebar Gadget which delivers the Daily Dilbert cartoon to your desktop.

There is a RSS Feed available from feedburner.com which gives you the contents of the daily dilbert in a form of an xml file. The idea behind, is to read that file, parse the content and display it beautifully in your sidebar. The user can view cartoons for last 5 days. The benefit is, for all those (like me) who want to start there day with the Dilbert strip, don't have to go to the website or even open the feed, to see it. Just click on the date in the sidebar gadget and a flyout window will show you the cartoon of the day.

This article also discusses five common features of Sidebar gadget development:

  1. Create: A simple gadget with minimum files
  2. Use of Ajax: Read an XML file from a website (RSS feed) Get and parse the RSS Feed for the Dilbert cartoon from http://feeds.feedburner.com/tapestrydilbert
  3. Parse XML : Extract the path of the image
  4. Rich Display: The gadget's look and feel
  5. FlyOut: A simple implementation of Windows Sidebar Flyout to display the image

In Action

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

DailyDilbert in Action

Lets Begin

Create a simple Gadget

To create a no-gimmick gadget you need just two files, an html file (main.html) and an xml file for configuration (gadget.xml), both of these files need to be inside a folder DailyDilbert.Gadget which should be placed inside Windows Sidebar/Gadgets folder

An HTML can be just a simple html with some text and a height: 200px; width: 130px; to accomodate in the size of the Gadget window

An XML file (manifest) with the name Gadget.xml is necessary to be in the same folder with the following format

Tag

Description

<name>

Name of the gadget as it appears in the gadget selection box

<author>

Name of the person who wrote the gadget, Author

<copyright>

Copyright information, including name and copyright date

<description>

Description of the gadget and what it does

<icon>

Name of the icon file, the graphic displayed in the gadget selection box

<code>

Name of the HTML file that makes up your gadget.

<website>

Web site associated with the gadget.

More information from this link

No rocket science here , name of the gadget "Daily Dilbert" as seen above, namespace basically to group more than one gadget (reserved for future use) you can write here "mynamespace". MinPlatformVersion. Required. The expected value is "1.0."

You have the icon.png which will be displayed at the "Add gadget" Window below and the logo.png which will be displayed near the copyright section in the right bottom corner of the "Add gadget" Window. dragicon.png which will be used when the Gadget is dragged inside the "Add Gadget" Window. The base type gives the type of application you have in the sidebar here we have HTML.

"Permission" controls the amount of permission in the gadget. A "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. <permission> tag and <type> tag will be more flexible in future version of gadget development.

Normally a Gadget will have these files

Gadget Manifest An XML file defining the gadget properties, including name, icon and description
HTML file Defines the core code for the gadget
HTML settings file Exposes gadget settings for the user to change
Images, Script and Style Sheets For use in the HTML
Icon For use in the gadget picker

Here is the overview of the architecture

Architecture overview

You can get more details on these here

That said, let's build our gadget now as per the initial idea Daily Dilbert. More information on elements of sidebar manifest can also be found here

Images Used

When you create a sidebar gadget one of the important things you might want to take care is , the look and feel

Icon The Drag Icon About form Logo Background

These are the images used for the gadget

Get the RSS Feed

Once you have your gadget images ready , i created an html file main.html and a gadget.xml file with the configuration below The html file will have five elements "DIV" to get the feed data

The Feed for the Gadget

We have the URL which we call using an MSXML2.XMLHTTP object the core of the AJAX till the feed gets loaded. Here is the magial javascript for this

function getRSS() {
    loading.innerText = "Connecting...";                    
    rssObj = new ActiveXObject("Msxml2.XMLHTTP");
    rssObj.open("GET", "http://feeds.feedburner.com/tapestrydilbert", true);
    rssObj.onreadystatechange = function() {
        if (rssObj.readyState === 4) {
            if (rssObj.status === 200) {    
                loading.innerText = "";                
                rssXML = rssObj.responseXML;
                page = 0;
                parseRSS();
                if (chkConn) { clearInterval(chkConn); }
            } else {
                var chkConn;
                loading.innerText = "Unable to connect...";                
                chkConn = setInterval(getRSS, 30 * 60000);
            }
        } else {
            loading.innerText = "Connecting...";
        }
    }    
    rssObj.send(null);
}

Now since we have the feed we need to create a flyout out of the image in the feed. Here is the parseRSS function which does this.

Here is how it looks when you click on a standard feed weekdays a sunday clip will be different.

function parseRSS(page) {
    if (!page) { page = 0; }
    start = page * 5;
    end = (page * 5) + 5;
    rssItems = rssXML.getElementsByTagName("item");
    rssTitle = null; rssAuthors = null; rssSummary = null; rssLink = null;
    
    if (end > rssItems.length)
    {
    end = rssItems.length
    }
    for (i=start; i<end; /> rssItems.length)
        {
        }
        else
        {
        rssTitle = rssItems[i].firstChild.text;
        rssSummary = rssItems[i].getElementsByTagName("description"); 
        rssSummary = rssSummary[0].text;
        var position_http=rssSummary.indexOf('http');
        var position_gif=rssSummary.indexOf('.gif');
        var position_jpg=rssSummary.indexOf('.jpg');
        var position_img =0;
        System.Gadget.Flyout.file = "DilbertFlyout.html";
        
        if (position_gif >0)
        {
        position_img=position_gif-position_http;
        }
        else
        {
        position_img=position_jpg-position_http;
        }
        rssItem= Mid(rssSummary,position_http,position_img + 4);
        
        cell = i - (page * 5);
        document.getElementById("cell" + (cell)).innerHTML = '



<div onclick="showFlyout(\'' + rssItem + '\');" align="center">      '
                             + Mid(rssTitle,10,25) + '
</div>
';//'+ cell + '::' + i + '::' + page + '::' + start + '::' + end + '
        document.getElementById("cell" + (cell)).title = 
                                                 "Click to show/hide";
        }
    }
    
}

What we do is check and parse the image string from the description tag of the feed and set the size of the flyout window accordingly. A sunday strip is a JPEG and a normal weekday image is a gif image with different sizes as you can see above. Once you have the feed and the image URL you call a function which creates the Dilbert in the Flyout Window

function BuildDilbertOfTheDay()
{

    try
        {
        document.write('<"+System.Gadget.Settings.read(sURL)+" />');
        }
        catch(e)
        {
        }   
}

more information on the flyout here

To resize the flyout we need a small onload function on the flyout.html Body Onload event

function startUpPage() {
 //Resize the page
 document.body.style.width 
                     = System.Gadget.document.parentWindow.myWidthVariable;
 document.body.style.height 
                     = System.Gadget.document.parentWindow.myHeightVariable;
}

Daily Dilbert in Action: A cartoon clip for sunday

References

Article History

  • Jan 31, 2007: First published
  • Feb 05, 2007: Minor revisions
  • Feb 06, 2007: Revised contents
  • Feb 11, 2007: Added disclaimer after discussing with Scott Adams
  • Feb 15, 2007: Fixed the Dockhide bug as reported by Rama Krishna Vavilala

And thanks

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author


Comments and Discussions

 
QuestionGreat Article Pin
Hua Yujun10-Oct-12 18:42
memberHua Yujun10-Oct-12 18:42 
Generalattractive one Pin
thatraja15-Jan-10 23:57
memberthatraja15-Jan-10 23:57 
GeneralClick2Find Pin
Shaun Wilde1-Dec-09 11:13
memberShaun Wilde1-Dec-09 11:13 
GeneralShow/Hide the gadget sider bar control from the other application. Pin
rbashok25-Sep-09 7:20
memberrbashok25-Sep-09 7:20 
General5 out of 5. I like it! Pin
Charlito_2-May-08 18:56
memberCharlito_2-May-08 18:56 
GeneralRe: 5 out of 5. I like it! Pin
Quartz.30-Jun-08 15:38
mvpQuartz.30-Jun-08 15:38 
NewsGET THE LATEST 2.2 VERSION Pin
Quartz.13-Oct-07 17:41
memberQuartz.13-Oct-07 17:41 
GeneralStrip list remains empty Pin
Jan Henning6-Sep-07 6:22
memberJan Henning6-Sep-07 6:22 
GeneralRe: Strip list remains empty Pin
peskyp10-Sep-07 5:22
memberpeskyp10-Sep-07 5:22 
GeneralRe: Strip list remains empty Pin
aandonian6-Oct-07 5:00
memberaandonian6-Oct-07 5:00 
AnswerRe: Strip list remains empty Pin
Quartz.13-Oct-07 17:41
memberQuartz.13-Oct-07 17:41 
GeneralRe: Strip list remains empty Pin
Quartz.13-Oct-07 17:41
memberQuartz.13-Oct-07 17:41 
GeneralRe: Strip list remains empty Pin
Jan Henning14-Oct-07 4:49
memberJan Henning14-Oct-07 4:49 
GeneralThis can't install on vista versions other then english Pin
madguy300123-May-07 2:23
membermadguy300123-May-07 2:23 
GeneralAmong the Top 5 in Windows Live Gallery Pin
The Jedi1-Apr-07 9:19
memberThe Jedi1-Apr-07 9:19 
GeneralRe: Among the Top 5 in Windows Live Gallery Pin
Quartz.2-Apr-07 15:13
memberQuartz.2-Apr-07 15:13 
NewsVERSION 1.3 :: Visited links Bug fixed Pin
Quartz...27-Mar-07 5:02
memberQuartz...27-Mar-07 5:02 
NewsVersion 1.2 Available Mini ME and Visited links Pin
Quartz...22-Mar-07 10:27
memberQuartz...22-Mar-07 10:27 
GeneralFYI: Mentioned on MSDN blogs Pin
Michael Dunn16-Mar-07 19:42
mvpMichael Dunn16-Mar-07 19:42 
GeneralRe: FYI: Mentioned on MSDN blogs [modified] Pin
Quartz...16-Mar-07 20:49
memberQuartz...16-Mar-07 20:49 
QuestionIntellisense Pin
Leowu10-Mar-07 22:33
memberLeowu10-Mar-07 22:33 
AnswerRe: Intellisense Pin
Quartz...10-Mar-07 23:19
memberQuartz...10-Mar-07 23:19 
NewsSoapbox Video Gadget Pin
Quartz...7-Mar-07 16:13
memberQuartz...7-Mar-07 16:13 
GeneralRe: Soapbox Video Gadget Pin
WillemM8-Mar-07 2:09
memberWillemM8-Mar-07 2:09 
GeneralVery Cool!! Pin
Matt Newman3-Mar-07 19:41
memberMatt Newman3-Mar-07 19:41 
GeneralRe: Very Cool!! Pin
Quartz...3-Mar-07 20:48
memberQuartz...3-Mar-07 20:48 
QuestionAdd a "history" link colour? Pin
Paul Tallett26-Feb-07 21:32
memberPaul Tallett26-Feb-07 21:32 
AnswerRe: Add a "history" link colour? Pin
Quartz...27-Feb-07 6:48
memberQuartz...27-Feb-07 6:48 
AnswerRe: Add a "history" link colour? Pin
Quartz...22-Mar-07 10:32
memberQuartz...22-Mar-07 10:32 
GeneralNice sample Pin
WillemM24-Feb-07 3:50
memberWillemM24-Feb-07 3:50 
GeneralRe: Nice sample Pin
Quartz...25-Feb-07 13:20
memberQuartz...25-Feb-07 13:20 
QuestionRun or not run? Pin
coresolution23-Feb-07 6:21
membercoresolution23-Feb-07 6:21 
AnswerRe: Run or not run? Pin
Quartz...23-Feb-07 7:45
memberQuartz...23-Feb-07 7:45 
GeneralNice but a few JS errors Pin
Rama Krishna Vavilala15-Feb-07 10:12
mvpRama Krishna Vavilala15-Feb-07 10:12 
AnswerRe: Nice but a few JS errors Pin
Quartz...15-Feb-07 10:52
memberQuartz...15-Feb-07 10:52 
AnswerRe: Nice but a few JS errors Pin
Quartz...15-Feb-07 11:17
memberQuartz...15-Feb-07 11:17 
GeneralGood stuff :-) Pin
Nishant Sivakumar15-Feb-07 9:29
mvpNishant Sivakumar15-Feb-07 9:29 
GeneralRe: Good stuff :-) Pin
Quartz...15-Feb-07 9:41
memberQuartz...15-Feb-07 9:41 
GeneralExcellent!!! Pin
kirtand10-Feb-07 4:33
memberkirtand10-Feb-07 4:33 
GeneralRe: Excellent!!! Pin
Quartz...10-Feb-07 9:06
memberQuartz...10-Feb-07 9:06 
GeneralArgh,,,permissions error Pin
jcui8-Feb-07 19:24
memberjcui8-Feb-07 19:24 
AnswerRe: Argh,,,permissions error Pin
Quartz...8-Feb-07 20:53
memberQuartz...8-Feb-07 20:53 
GeneralRe: Argh,,,permissions error Pin
jcui9-Feb-07 18:38
memberjcui9-Feb-07 18:38 
GeneralRe: Argh,,,permissions error Pin
Quartz...9-Feb-07 20:18
memberQuartz...9-Feb-07 20:18 
GeneralIf you have VS 2005 Pin
Quartz...9-Feb-07 20:30
memberQuartz...9-Feb-07 20:30 
GeneralBackground image missing Pin
spantos7-Feb-07 0:35
memberspantos7-Feb-07 0:35 
AnswerRe: Background image missing Pin
Quartz...7-Feb-07 8:00
memberQuartz...7-Feb-07 8:00 
GeneralRe: Background image missing Pin
badr zrari16-Feb-07 14:12
memberbadr zrari16-Feb-07 14:12 
GeneralRe: Background image missing Pin
Quartz...16-Feb-07 15:21
memberQuartz...16-Feb-07 15:21 
GeneralRe: Background image missing Pin
badr zrari16-Feb-07 16:56
memberbadr zrari16-Feb-07 16:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150520.1 | Last Updated 20 Mar 2007
Article Copyright 2007 by Raj Lal
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid