.NET Micro Framework (Archive)

Basic overview of Widget System

You see them more and more, on phones, computers, MP4 players, etc. Widgets. And I think it’s logical becouse the user can now choose what he or she has on her display.

I tought it would be usefull to have some sort of Widget system on .NET Micro Framework. An example: a termostat has multiple sensors for humidity, min/max/current temperature, etc. Some users find the humidity very important but others are more interested in the minimum temperature. With Widgets they can choose what to see directly.

UIElements:

I’ve build a basis for a Widget system in a demo application. It consists of three main base UIElements:

• WidgetCanvas
  Based on the normal Canvas it provides absolute positioning of child elements. It has a DispatcherTimer that helps the Widgets start and stop moving.
• WidgetIcon
  This element provides the icon’s on the left part of the screen. It automaticly loads the Widget Icon from the Widget Type and creates a new Widgets instance on StylusDown.
• Widget
  Base class for Widgets that can be used to build Widgets. Provides methods for moving Widget, Icon used for WidgetIcon.

User experience:

As the movie below shows new Widget Instances are created on StylusDown on one of the icons. The new Widget is automaticly moveable. When released the new instance settles down on the screen.

To move a Widget press down on it and hold it until the Widget gets movable. Drag it to the desired location and move stylus back up again.

To remove  a Widget release the Widget on the icon bar. It automaticly is released.

Known issues:

Altrough it works quite well it has this considirations:

• As the StylusDown is used for moving you should use the StylusUp event and check if Moving property is false.
• The StylusUp event is not always triggered. This happens when releasing your finger very gentely. Maybe this is becouse the X/Y parameters of this release are outside window (guess).
• There is only one screen supported. It could be usefull to have multiple screens that the user can switch between.

Usage example:

// Create new canvas
MainCanvas = new WidgetCanvas()
{
Width = SystemMetrics.ScreenWidth,
Height = SystemMetrics.ScreenHeight
};

// Add icons for new Widgets
MainCanvas.AddWidgetIcon(typeof(ClockWidget));
MainCanvas.AddWidgetIcon(typeof(DateWidget));
MainCanvas.AddWidgetIcon(typeof(WeatherWidget));

Widgets on ChipworkX:

Widgets on Tahoe II:

Download:

You can download the Visual Studio 2008 solution of the demo program:
MFWidgets.zip