WidgetRunner

Much Awesomeness

20after4 — Wed, 30 Jul 2008 17:22:24 -0500

I have recently discovered a couple of awesome developments which are worth mentioning:

The Awesome X Window Manager is an active light-weight tiling window manager based on dwm. Similar to wmii or ion but seemingly more advanced and very easy to use. Version 2 is available from Debian and Ubuntu repositories so you can simply apt-get install awesome ... now isn't that awesome?
Google has released an official version of Google Gadgets for Linux. It's still early in development but the code is open source (Under the terms of the Apache License v2.0)... They don't offer pre-packaged binaries, however, it looks reasonably easy to build it. Once I have a few minutes to play I will definitely be talking about the experience. This is especially exciting for me because it's similar to the WidgetRunner project that I dabbled with over a year ago. The documentation mentions XULRunner and Spidermonkey as dependencies so it seems like it's based on the Mozilla platform and that is awesome!

Dragging widgets (Undecorated XUL windows)

20after4 — Mon, 30 Jul 2007 02:19:00 -0500

The following is a simple bit of code that can make a borderless window dragable, currently tested only on Linux. While this may not be needed in most X Windows Managers (due to alt-click dragability) it's still an important part of any desktop widget runtime. In WidgetRunner you can simply include this JavaScript file to provide the functionality automatically.

/* widget.js - shared code used in all widgets.
*/

window.addEventListener("load", startup, false);
var widgetRunner= window.opener.widgetRinner;

function startup() {
	
	window.opener.widgetLoaded(window);
	if (loadWidget) {
		loadWidget();
	}


	var startPos=0;
	var mouseDown = function(event) {
		startPos = [ event.clientX, event.clientY];

	}
	
	var mouseMove = function(event) {
		if (startPos != 0) {
			var newX = event.screenX-startPos[0];
			var newY = event.screenY-startPos[1];
			window.moveTo(newX,newY);
		}
	}
	
	var mouseUp = function(event) {
		startPos=0;
	}

	window.addEventListener("mousedown",mouseDown, false);
	window.addEventListener("mouseup",mouseUp, false);
	window.addEventListener("mousemove",mouseMove, false);
}

I have published a stripped down version of this code as an example on the Mozilla Developer Connection wiki. That document is here: Code_snippets:Windows#Draggable_windows

WidgetRunner

20after4 — Tue, 24 Jul 2007 20:02:29 -0500

WidgetRunner is an open source Desktop Widget platform based on XULRunner. The project aims to create a platform for Desktop Widgets similar to Apple's Dashboard and Yahoo's Konfabulator.

This Project is Obsolete

It's been a while since I worked on this project. If you like the idea of a widget engine based on XULRunner then you might want to take a look at the recently released Google Gadgets for Linux - an open source project that seems to be based on XULRunner. Unlike WidgetRunner, google gadgets will have a lot of visibility and interest due to being an official google project. I strongly suggest that you take a look over their rather than spending time on this obsolete experiment of mine.

Screenshots

WidgetRunner with the Foxkeh Clock Extension:

Source

Source code is now in the SVN repository provided by Google Code. You can visit the google code project page or go directly to the svn repository.

Bugs

Alpha-transparency isn't working on Linux. See screenshot above - the edge of the icon looks jagged.

Borderless XUL windows

20after4 — Tue, 24 Jul 2007 05:56:51 -0500

So I'm trying to make borderless desktop widgets with XULRunner. It's mostly working except for one strange limitation - I can't seem to get the windows to resize to less than 100px in height. If anyone has a clue how to make an XUL window that is smaller than 100px high, please let me know, I'm stumped. Update: I finally got it to work! This involved a combination of omitting width and height attributes from the xul window tag and then calling window.sizeToContent() in the window's load event handler.

Update #2: now I have round, borderless xul windows on linux, however, I don't have alpha blending. The alpha channel on my PNG icon seems to be ignored, see screenshot...