Stefan Wick's Weblog - Development with Silverlight, WPF and Tablet PC : Silverlight Streaming

Snipping Pictures with Silverlight

swick — Tue, 18 Dec 2007 20:45:00 GMT

One of my favorite tools on the Tablet PC is the 'Snipping Tool'. I have been using it frequently since the early XP days (back then we shipped it seperately as a Power Toy). Now in Vista, it's part of the main OS and I find myself using it quite often event on my desktop PC.

When I was using the tool recently, I got this idea for a new Silverlight sample app: wouldn't it be cool to snip pieces from various images and put them together as a collage in Silverlight - and then annotate the result with text, drawings and/or handwriting?

Silverlight's imaging and ink APIs make this fairly easy. Here are my results of this effort using Silverlight v1.0 - the sample demonstrates these features:

Select an image from an animated collection of pictures
Snip a piece of the selected image (free-form, rectangle or entire picture) and arrange it on the canvas
Use 'Image Tools' to control zoom, rotation and opacity of individual snippets
Use 'Text Tools' to add/change text annotations
Use 'Ink Tools' to add/change drawings and handwritten annotations
Full screen and embedded mode

Couple of notes and caveats:

The pictures are currently hardcoded (appropriate for the holiday season :-) ), but you can easily change that in the attached source code to use your own pictures or to pull images from the web.
When you launch the app from this blog, it opens up in full screen mode (since this is the best mode to view and use it). You can press the 'Esc' key or use the 'Miscellaneous' menu to go back to embedded mode.
In full screen mode Silverlight disables keyboard input (for security reasons). So if you want to enter some text annotations, please switch to embedded mode.
The 'Create Bitmap' button doesn't do anything in this version. The idea is to invoke some server-side code here to generate a bitmap of your collage. If there is interest in the community, this might be a good topic for a seperate blog post. But then again: if you are on Windows Vista, you can just use the Snipping Tool in the OS, to grab your collage and save it as bitmap :-)

The sample's complete source code is attached to this post. A live version, hosted via Silverlight Streaming, is included below for you try out. Click the button to launch the app:

Ink blogging - using Windows Journal and Silverlight Streaming!

swick — Sun, 04 Nov 2007 21:56:00 GMT

Are you using Windows Journal to jot down your thoughts on your Tablet PC? Did you ever wish to publish your handwritten notes to your blog?

Here is one way to do this: The TabletPC SDK provides a Journal Reader API that provides access to the content of the .jnt file. Now you can read all content and convert it into a 'blog-friendly' format. Since Silverlight offers great ways to present content in an attractive, interactive way, I decided to write a Journal -> Silverlight converter. The result of this test project is now available as SDK sample on microsoft.com/downloads.

The converter is easy enough to use. Just drop down to a command box and run "JntToSilverlight.exe MyNotes.jnt". This will produce a 'MyNotes' folder that contains the resulting Silverlight application. You can test the results now by double-clicking the 'default.htm' file to load the app into your browser.

OK, now how do I get all this onto my blog? Using Silverlight Streaming, it's very easy: just zip it up, upload it to the service and then stick an IFrame into your blog's HTML. See my previous post on this subject.

To summarize the steps:

1) Create a note in Windows Journal

2) Convert note to Silverlight app

3) Upload to Silverlight Streaming service

4) Insert IFrame into blog

This is still a lot of steps and a bit tedious, but it's a proof of concept. Steps 2-4 all have an API they so are automatable and one could create a tool that does all that in one step.

Here is one example of a converted note on my blog (the original .jnt is attached to this post, if you want to compare). Besides flipping through the pages, you can add more ink, move selected content around and erase ink. Also don't miss the full-screen mode and the mouse-wheel zoom feature!

Silverlight Ink SDK Sample - hosted through Silverlight Streaming

swick — Sat, 03 Nov 2007 16:40:00 GMT

With the 'Silverlight Streaming' service you can now invoke a hosted Silverlight application using an IFrame - without any JavaScript! This allows you to embed Silverlight content on sites that do not allow adding JavaScript, as long as they support IFrames. For details refer to this MSDN topic.

To demonstrate this great service, I have taken the Silverlight Ink SDK Sample, uploaded it to Silverlight Streaming and then embedded it on this blog using an IFrame, like this:

The highligthed part is the key: it specifies your Silverlight Streaming application ID and name of your app. For more information about Microsoft Silverlight Streaming, visit http://silverlight.live.com/.

Here is the sample for you to try out: