Click here to Skip to main content
Click here to Skip to main content

Create Desktop Widget Using Embedded IE Browser

, 14 Nov 2003
Rate this:
Please Sign up or sign in to vote.
Desktop Widgets are small applications that provide frequently used functions such as an alarm clock, a text box linked to Google etc. They can also decorate the desktop. This article will describe a way to create desktop widgets on PCs using embedded IE browser.

Sample Image - DesktopWidget.jpg

Introduction

Desktop Widgets are small applications that provide frequently used functions such as an alarm clock, a calculator, a text box linked to Google etc. They can also decorate the desktop.

On Mac OS, there is a famous desktop widget engine, Konfabulator. It lets users create widgets using JavaScript. On PC, there is a widget engine too, DesktopX. And there is also a Java based platform independent desktop widget scripting engine, DeskBlox. They both are very good commercial software.

This article will describe another way to create desktop widgets on PC using embedded IE browser. It can turn HTML pages, Flash movies, Java applets and ActiveX controls etc. into desktop widgets. Very easy to use and free.

Ideas and Requirements

The Internet Explorer is not only a web browser, but also a powerful platform to display image files, HTML pages, Flash movies, Java applets and ActiveX controls and execute JavaScript. It is the perfect host for desktop widget applications.

But if opened the normal IE window that has title, scroll bars and thick border as desktop widget, the desktop would look very ugly. Therefore IE must be embedded into a container program to make it look like merged into the desktop. See figure 1.

figure 1 - IE as widget

Figure 1.

But sometimes we do want to see the widget name in window title and access functions from the menus, so we can show and hide the window title similar to the way Windows Media Player does. That is when mouse enters the widget, show title and menu, when mouse leaves the widget then hide them. See figure 2.

figure 2 - Show/Hide title

Figure 2

On the left, the widget container has the mouse moved in, on the right is the container without mouse.

The white area is the embedded IE browser. Around it there is a light gray border. This is a very important area that acts like a handler to let the user drag or move the widget. Of course, its color can be customized to be the same as that of the desktop to visually hide this area.

Here is the summary of requirements for the container program.

  • Have an embedded IE browser without scroll bar and out 3D border
  • Automatic show or hide window title and menu, like Windows Media Player
  • Can define the window size, border color and file to be loaded into IE
  • Can be dragged and placed on the desktop

Design Details

  1. Embed and Customize IE browser

    To choose C# to code is not because only C# can do this job, actually it can be done in Delphi and VB6/VC++ as well. Maybe this widget container in unmanaged code is better in terms of deployment. But I happened to have downloaded Borland C# Builder personal version, a very nice tool, and most importantly I found the references for customizing embedded IE browser from Code Project. They are,

    These two articles demonstrate how to remove scroll bar and 3D border by implementing the IDocHostUIHandler interface and they have sample code as well.

    From the source zip of Nikhil Dabas's article, we can find the required MsHtmHstInterop.dll, but not mshtml.dll. It can be found from the famous RSS aggregator SharpReader's deployment package. Named partial.mshtml.dll, it is a better, compact version of mshtml.dll; good enough to only access the IDocHostUIHandler interface and the IHTMLDocument2 interface.

    I have included these two DLLs in the source download of this article. By referencing to them, we can use them like,

    using mshtml;
    using MsHtmHstInterop;

    Of course before using them, you should have already created a WinForm with IE ActiveX control on it and some menus...

    Next is to implement the IDocHostUIHandler interface on the main form.

    public class Form1 : System.Windows.Forms.Form, IDocHostUIHandler
    {
        #region IDocHostUIHandler implementation
        ....
        #endregion
    }

    The code in the region IDocHostUIHandler implementation is same as the code from Nikhil Dabas's article, except a little difference in function GetHostInfo.

    void IDocHostUIHandler.GetHostInfo(ref _DOCHOSTUIINFO pInfo)
    {
       pInfo.dwFlags |= ( 0x08 /*DOCHOSTUIFLAG_SCROLL_NO*/ |      
                          0x04 /*DOCHOSTUIFLAG_NO3DBORDER*/
      
       );
    }

    The two magic numbers do all customization tricks we need that are to remove scroll bars and 3D border.

  2. Show or Hide window title and menu

    Pretty straight forward, in the mouse enter event show title and menu and in the mouse leave event, hide the title delayed; that means not to hide immediately, but through a timer giving it a 3 seconds to avoid the title disappearing suddenly.

    To hide the title and menu is to set new value to the WinForm's Region property. The method also can be used to create irregular shaped window.

    #region show / hide title
      private void Form1_MouseLeave(object sender, System.EventArgs e)
      {
       this.timer1.Enabled = true;
      }
      private void Form1_MouseEnter(object sender, System.EventArgs e)
      {
       showTitle();
       this.timer1.Enabled = false;
      }
      private void hideTitle()
      {
       GraphicsPath gPath = new System.Drawing.Drawing2D.GraphicsPath();
       int hh = (this.Height - this.ClientSize.Height);
       gPath.AddRectangle(new RectangleF(10, 
            hh, this.Width-20, this.Height-hh-10));
       this.Region = new System.Drawing.Region(gPath);
      }
      private void showTitle()
      {
       GraphicsPath gPath = new System.Drawing.Drawing2D.GraphicsPath();
       gPath.AddRectangle(new RectangleF(0, 0, this.Width, this.Height));
       this.Region = new System.Drawing.Region(gPath);
      }
      private void timer1_Tick(object sender, System.EventArgs e)
      {
       hideTitle();
       this.timer1.Enabled = false;
      }
      #endregion
  3. Parsing command line parameters

    Here is a simple code to handle a simple pattern.

       for (int ii = 0; ii < args.Length && args[ii][0] == '-'; ++ii)
       {
        if (args[ii].Equals("-html") && ii + 1 < args.Length)
        {
         htmlfn = args[++ii];
        }
        else if (args[ii].Equals("-width") && ii + 1 < args.Length)
        {
         try
         {
          ww = Convert.ToInt32(args[++ii]);
         }
         catch {}
        }
       
        ......
       }
    

    It can read parameter value pair in a form of -param value,

    e.g. -html clock.htm -width 200 -height 150

    We can also use some existing more powerful command line parsing tool, such as

  4. Move the window while dragging in the client area

    Method used is from,

    Concept is to switch the mouse hit to WM_NCLBUTTONDOWN by using Win32 APIs.

      #region move window while drag in the client area
      private void Form1_MouseDown(object sender, 
              System.Windows.Forms.MouseEventArgs e)
      {
       ReleaseCapture();
       SendMessage(Handle, WM_NCLBUTTONDOWN, HTCAPTION, 0);
      }
      public const int WM_NCLBUTTONDOWN = 0xA1;
      public const int HTCAPTION = 0x2;
      [DllImportAttribute ("user32.dll")]
      public static extern int SendMessage(IntPtr hWnd, 
                         int Msg, int wParam, int lParam);
      [DllImportAttribute ("user32.dll")]
      public static extern bool ReleaseCapture();
      #endregion

Up to now we have had all solutions to handle the four major requirements.

Build the application

You can download the source file to build with Borland C# Builder. In case of using VS.NET, you need to create a project and add the WinForm.cs to the project and set reference to MsHtmHstInterop.dll and partial.mshtml.dll manually.

If you don't want to compile the source, then just open the demo zip and start to create desktop widgets.

Build the Widgets

After the coding fun, more fun time to create widgets.

  • Right click DesktopWidget.exe to create a shortcut
  • Rename the shortcut to Calculator
  • Right click the shortcut, select properties menu to set command line parameters -height 240 -width 250 -html html\cal.htm -bgcolor #000080
  • Launch the widget by double clicking the shortcut

Repeat for every widget.

Note: usage of command line parameter

  • -height : to define the height of the widget window
  • -width : to define the width of the widget window
  • -bgcolor : to define the border, better to be same as your desktop color
  • -html : HTML file name to be loaded

I didn't create attractive looking widgets, but just went here to grab two widgets quickly, calendar and clock to prove the concept of this article. If you put pictures and animations into the HTML, the widgets will be more prettier for sure.

Conclusion

IE is the perfect host for desktop widget applications. By tweaking its UI, we created a generic widget container. Next time when visiting http://www.dynamicdrive.com/, http://www.jars.com/ or http://www.flashkit.com/ or many other web sites, if you find interesting DHTMLs, Flash movies, Java applets, ActiveX controls, you then can make them widgets on your desktop using the program in this article. Have fun.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Yiyi Sun
Architect
Canada Canada
No Biography provided

Comments and Discussions

 
QuestionError when build the project using VS.NET and open html page with embedded ActiveX controls Pinmembermohanafy221-Feb-13 0:37 
GeneralPlease clarify the first step PinmemberYourBarber30-Jun-10 11:55 
Generalwidget PinmembergeoNeo_10-Mar-09 20:25 
GeneralEmbedding flash (SWF), xml DHTML (please expalin) Pinmembershizlemanizle_15-Mar-09 2:57 
GeneralBorders and Scroll Bars PinmemberGav_Roberts2k518-May-06 12:27 
GeneralLink to desktop Pinmemberfranjorge3-May-06 7:39 
GeneralPlease explain PinmemberCoolASL13-Dec-05 20:12 
GeneralIf you get an error regarding AxShDocVw when you compile, do this... Pinmemberrusky8-Apr-05 17:18 
Generalan example PinmemberGiles Bradshaw30-Nov-03 2:42 
GeneralQuick Alternative: Active Desktop PinmemberAdam Byrne18-Nov-03 23:36 
If you're just going to use a HTML page, you could display it as a Desktop Item (if you have Active Desktop enabled).
 
  • Right-Click your desktop
  • Select "New Desktop Item..."
  • Type the URL in to the Location textbox (i.e. html\cal.htm )
  • Click OK
     
    If Active Desktop is not enabled, I think you can enable it by checking the "Show Web content on my Active Desktop" checkbox in Display Properties' "Web" tab. Not 100% though.
     
    -adam
  • GeneralRe: Quick Alternative: Active Desktop PinmemberRobert Kolodziejczyk19-Nov-03 3:56 
    GeneralRe: Quick Alternative: Active Desktop PinmemberYiyi Sun19-Nov-03 4:38 
    GeneralRe: Quick Alternative: Active Desktop PinmemberAdam Byrne20-Nov-03 2:08 
    GeneralRe: Quick Alternative: Active Desktop PinmemberYiyi Sun19-Nov-03 4:27 
    Generalsource code link is broken PinmemberNelsonKL17-Nov-03 11:29 
    GeneralRe: source code link is broken PinmemberYiyi Sun17-Nov-03 12:24 
    GeneralInteresting.. PinmemberRocky Moore16-Nov-03 17:36 
    GeneralRe: Interesting.. PinmemberYiyi Sun17-Nov-03 4:16 

    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
    Web04 | 2.8.141220.1 | Last Updated 15 Nov 2003
    Article Copyright 2003 by Yiyi Sun
    Everything else Copyright © CodeProject, 1999-2014
    Layout: fixed | fluid