Create Desktop Widget Using Embedded IE Browser

• Download source files - 93.7 Kb
• Download demo project - 95.5 Kb

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.

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

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,

   • Component-Based Development with Visual C#

     By Wiley Technology Publishing

   • Using MSHTML Advanced Hosting Interfaces

     By Nikhil Dabas

   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,

   C#

   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.

   C#

   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.

   C#

   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.

   C#

   #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.

   C#

   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

   • Automatic Command Line Parsing in C#

     By Ray Hayes

4. Move the window while dragging in the client area

   Method used is from,

   • George Shepherd's Windows Froms FAQ

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

   C#

   #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.