Mark Schmidt's Abode : animation

Creating .NET Sidebar Gadgets...The Easy Way

markhsch — Tue, 17 Jul 2007 10:17:00 GMT

So you want to create a Vista Sidebar gadget and you want to use .NET to do so. While it is certainly possible, it does have a few hurtles to jump. 2 of the major hurdles include assembly registration and gadget uninstallation. Let me explain:

First off, let me explain the typical setup of a gadget. Skip this paragraph if you already know. A gadget consists of a main HTML page with corresponding image and javascript supporting files. Each gadget also can optionally use a separate HTML file for settings. Each HTML file can utilize the gadget API provided by Sidebar. All the files and the gadget information itself is described using an XML file. This file contains information such as the gadget name, author, support URL, main gadget HTML filename, etc... Now, if you want to use a .NET UserControl, you have to register it as a COM server and embed it using the IE AcitveX object embedding mechanism. Easier done than said. OK, with that out of the way, let's continue.

The ideal situation is to have a user download your gadget from http://gallery.live.com and have the gadget install for you (Sidebar uses the .gadget file extension for this purpose). However, since you're not following a traditional installation path, you don't have the ability to register your assembly for COM so that it can be embedded within the HTML file your gadget uses. The current workaround is to create a Windows Shell Scripting object and manually add the registry entries each time your gadget is loaded. I won't display the code here because frankly it's somewhat ugly and susceptible with error. To further compound the problem, you have to create the registry entries in either HKCU or HKLM depending on whether the user is an administrator or not. Well, if you manage to do that, you're good to go. Of course, next time you create another gadget, you'll have to do it all again (ok, just a cut-n-paste and GUID changes but....still a pain).

The 2nd issue that occurs when trying to create a .NET based Sidebar gadget is gadget uninstallation. This is the main issue that I've seen people just can't seem to figure out (until now that is...be patient and read on. Don't skip to the end). Once your gadget is installed and running, a user should be able to open the Add Gadget window (click the + sign on top of Sidebar), right click on your gadget and select Uninstall. Sidebar then removes any instances from the Sidebar and attempts to delete the gadget files. Here's the problem (and I can't get too specific). Even though the gadget is removed from the Sidebar, the .NET assembly is still loaded within the Sidebar process. Sidebar therefore cannot remove the files and will display an error message. The 2 options you have are to restart the Sidebar or to wait a certain amount of time (I forget, but it's awhile...like 10 or 20 minutes). Not ideal for users is it.

While some developers might just think it'll be ok to let the uninstallation failure slide, you should know that when you submit your gadget to http://gallery.live.com, it will fail since it doesn't uninstall.

So, what's a developer to do? I ran into this same problem with my ScreenSaver gadget. To that end, I now present the .NET Sidebar Gadget creator (link at bottom). This is an application that will make creating a .NET based Sidebar gadget extremely easy. Wouldn't it be nice if all you had to do was (after creating your .NET control of course) fill out a few form fields, click a button and be finished? It is now. The application itself should be fairly self-explanatory when you run it. The main sticky point is that you obviously need a .NET assembly containing a UserControl that will be the main UI of your gadget (if need be, I can post the source code for the BouncingBall gadget that is included as a sample for the application).

Run the application, browse to your assembly, fill out the required information and click the Build button. The .NET Sidebar gadget creator will then reflect on the assembly and extract control information, generate HTML, JavaScript and the gadget XML files and place everything in the destination directory you specify. Here's a screenshot:

Download the application, try it out and let me know if it works/doesn't work for you.

Here's the link: NetSBHostCreator.exe

UPDATE: There is a problem with UAC. I think I have a working solution but I need to test a little more to make sure everything works fine. I'll post an updated solution soon followed closely by source code.

My Screen Saver Vista Sidebar Gadget

markhsch — Wed, 28 Feb 2007 22:20:00 GMT

For some reason, I'm drawn to creating things that are just cool while not altogether useful (see my Animated Activity Designer post, though one could argue that it may in fact be useful). To that end, I decided to create a Vista Sidebar gadget that displays a screen saver of your choosing. Vista has some good screen savers that it shipped with and I've embedded screen savers before (in fact, I show how to do it in one of my books).

So go ahead and grab it from the Windows Live Gallery (link below). If enough people clamor and beg, I will post the source code. Here's a quick rundown of what I did:

1. Create a .NET User Control
2. Embed a screen saver in the user control whenever the ScreenSaverPath property is set (and the control is visible)
3. Create the HTML page for the sidebar (sidebar controls use Javascript and HTML in case you didn't know already)
4. Embed the UserControl in the HTML page (using COM interop naturally)
5. Create a settings page that also uses COM Interop. The settings page calls a .NET component that I wrote that simply returns a collection of screen saver paths on the local system.
6. Create the installation in Javascript. I had to get some help for this one. Basically, I do what regasm does by using the WSHShell object to set registry entries. I found some code on the Internet to help.

Here's a screenshot of it in action using the Ribbons screensaver:

Here's the link:

Screen Saver Vista Sidebar Gadget

Stop Motion Animation using Windows Movie Maker

markhsch — Fri, 26 Jan 2007 20:59:57 GMT

So I got bored a few nights ago and decided to see if I can do some stop motion animation using my wife's Nikon D70 and Windows Movie Maker. After I imported all the pictures I took of my kids (somewhere around 100) into Windows Movie Maker, I went into options and changed the default time to display pictures in the movie when I drag and drop them. The default is 5 seconds and I changed it to 0.25 seconds. I then did a CTRL-A to select all my pictures and dropped them all on the timeline. I then added a beginning title, transition and end credits. It was topped off with a little music. The whole movie making process took around 5 minutes. So without further ado, here's the link:

The Amazing Crazy Race

Windows workflow foundation animated activity designer source

markhsch — Fri, 22 Sep 2006 23:23:00 GMT

As I mentioned in my last post, I have uploaded the Animated Activity Designer for use in your own project. A common question I can anticipate being asked is "Why?". So, here's why I created it and my reason as to why you may want to use something like this.

First off, the reason I wanted to try to created animated activities within the Windows Workflow designer was merely to see if it was possible. I knew that I could override OnPaint so I pretty much already knew it was going to be possible (otherwise I probably wouldn't have gone down the path). The second reason is simply because as a guy that loves cool eye candy in UI's, I just had to do it.

So why would you ever want to create an animated activity? Let's say you create an application that hosts the Windows Workflow Designer. Let's also assume that this application is used by your customers. You present them with the designer surface and within a Toolbox like panel, you have your set of custom activities they can use. If pictures are worth a thousand words, then an animation with 10 frames is worth 10,000 words.

The actual code for this is really simple which is also why it only took a couple of hours to get it up and running. Since it is so easy, I won't waste your time explaining it (but feel free to ping me if you have any questions).

Download the code right here: AnimatedActivityDesigner.zip

To see it in action, open the solution in Visual Studio, build it and then open workflow1.cs in the designer.

Enjoy!

To see the video better, right click and select Zoom -> Full Screen

P.S. The activities you see in the project and in the video are simply placeholders. They do not actually do anything.