When Written: June 2008
It has been a busy, frustrating, yet interesting and rewarding time these last couple of months. It all started when I decided to write my own ‘Deep Zoom’ web application using Silverlight as promised in my last article. With early beta code sometimes by waiting a couple of weeks before you start to code you are rewarded, as I was in this case. I fully expected to have to write a lot of code to handle the mouse events so that user could zoom in and out and scroll around the displayed ‘Deep Zoom’ image. Whilst working out how best to write this code a new version of the ‘Deep Zoom’ composer was released.
This version helpfully wrote this code for me and built a Silverlight 2.0 project to boot! Excellent, “this project is going to be a breeze”, I thought. Silly me. This was a project using early beta technology with beta development tools, what could possibly go wrong? Well just about everything it seemed, complete reinstalls of Visual Studio service pack 1, the Silverlight add-in for Visual Studio and the Silverlight SDK. That fixed one bug, but the bug that caused me two days of messing about was still there. When developing a Silverlight application in VS2008, the design pane is apparently a preview pane only, even though it says ‘design’ and the cursor changes as you try and drop a control on to it! Apparently this is known about and will be fixed in later builds, but what a lot of time it wasted; I thought it was being caused by a bad install of the Silverlight tools.
Silverlight applications are normally designed in ‘Expressions Blend’ and this was also updated from the March preview to the June Preview whilst I was writing my application. With all these fun and games whilst developing applications in Silverlight you might be wondering why bother? ‘Deep Zoom’ , which I have written about in some detail before, is one such ‘trick’; the other is data binding. Now before you either yawn at the thought of yet another way to access data in a Microsoft product, or more likely start to rant that the last thing we need is more syntax to learn to do the same job, this data binding is different, very different!
Apparently data binding has been built into Silverlight and WPF from the lowest level up and as such almost every object on a page can be databound, either to a traditional data source or, much more excitingly, to any other object. So what does this mean? Imagine that you want a slider control on a page to alter the angle of an object, perhaps a pointer on a dial? With previous technologies you would write some event code so when the slider value changed you then would redraw the other object at a different angle. With WPF / Silverlight you just databind the ‘Rotate Transform’ method to the value property of the slider. It’s as simple as that! You could go further and have a graphical pointer which moved in response to the value in a text box.
It was at just such a demonstration that I first learned about this use of databinding. This demonstration was given by Josh Twist from Microsoft. The presentation and code are available for download at (http://www.thejoyofcode.com/Thanks_to_NxtGenUG_WPF_and_Databinding_bits_and_pieces.aspx) . After the presentation there was such a buzz in the audience of developers and lots of talk as to what might be achieved using this technique. It was refreshing to see a developer produce a nice looking set of graphics as we watched, rather than coming up with the usual rather lame excuse of ‘I’m not a designer’ so we have to put up with a red square and a blue circle and a couple of text boxes as a demonstration of a cool way to designing a UI. Come on guys you have pre-written code snippets in your demo so why not give us some decent design so we can really see what can be achieved. All developers and designers know that it’s in the detail that a project sinks or swims.
This demonstration was one of many at the rather fun Fest08, the annual event of the NxtGen user group ( NXTGenUG ). I was invited as a guest of one on the founder members, Richard Costall who I met in Vegas at the Microsoft Mix08 conference. This non-profit user group was set up in 2006 and has currently approximately 200 members. Its aim is to help developers stay up to date with the latest technologies coming from Microsoft. Not a bad idea with the steady bombardment that comes out from Redmond. Where NXTGen aims to be different is the large element of fun that hallmarks their events. The atmosphere was a refreshing one of relaxed, fun and very sociable, quite different from a lot of ‘geek fests’ I have been to. Oh and there was free pizza!. I would really recommend that you check these guys out (http://www.nxtgenug.net/ ) . I have decided to pay up and join, perhaps I’ll see you there.
So back to my efforts at coming up with a real world Silverlight / ‘Deep Zoom’ application. This year, in Beijing, shortly after the Olympics Games the first World Mind Sports Games will be held, these will consist of Chess, Go, Draughts and of course Bridge. Now regular readers will know that I am involved with the World Bridge Federation on various projects. This year it is their 50th anniversary, so I thought it might be fun to take some 500 old photos in their archive and produce a ‘Deep Zoom’ application to display these on the web. As usual I couldn’t just stop at just a basic ‘Deep Zoom’ application! I used our Design house ( www.untitledmedia.co.uk ) to come up with a fun ‘Steam Punk’ style interface for it with an animation of cogs etc. So let’s take a look at what is involved in creating such a Silverlight application. Talk about a learning curve! More like a vertical take off! Please bear in mind that we are going to be using beta software which I can almost guarantee will crash, usually at the most inconvenient time, so save and backup regularly, and preferably install these beta development tools on a virtual machine so that you don’t mess up your main development setup.
First you need a collection of images that you want to display and allow your users to zoom into. The higher resolution the better and tiff are supported as well as bmp and the usual jpg. Now download a copy of the free ‘ DeepZoom’ Composer from (http://www.microsoft.com/downloads/details.aspx?FamilyID=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en) the current version at the time of writing is 0.9 but this may have changed by the time you read this article. The big advantage of this over the previous versions is that it will create a Silverlight application with a lot of the mouse control code written for you which will save you a lot of work.
Open the ‘Deep Zoom’ Composer and select ‘New Project’. I suggest you select a location for your project on a local hard disc rather than a network drive as it will be much quicker when the time comes to run the export routine. Now select ‘import’, point it to the folder containing the images you want to use, click OK, and wait as the images are copied to the project folder. Now comes the fun bit. Go to ‘compose’ and drag each image onto the design workspace; you can be as creative as you like with resizing and overlapping the images as you go. You can even auto arrange the images to a grid but this makes for a boring layout, as you have this flexibility it’s good to use it. You can also add tags to the images which can be accessed in code later, however any keywords stored in the meta data of your images will not be imported, a bit of a shame that. ‘Deep Zoom’ applications are at their most impressive with high resolution images and, or lots of images so this composition process can take some time. I aimed to use some 500 images and after two hours had only laid out half of them when the program crashed and I lost my work! Yes, I know what I said earlier about saving regularly, but I didn’t, and paid for my over confidence.
So after having a stroll around the garden to calm down, I sat down and eventually finished laying out my images the way I wanted them. Now hit export and select ‘Silverlight Application’ and wait again as the composer program does it’s stuff. What is going on is your masterpiece is being cut up into a series of tiles which ‘Deep Zoom’ will use to compose the zoomed in images the user selects. Obviously this cutting up of the images can take some time so be patient. The application will also build a preview web page for you so you can try out your application in a browser.
Once this is done just point a browser that supports Silverlight to the html file generated in your project. This will be called something like ‘myprojectnameTestPage.html’ and your composite image will appear if Silverlight is installed. If not it will prompt you to install it, restart your browser ( very annoying that ) and then you should be able to zoom in and out of your image with the mouse wheel and to be able to drag it around with the left mouse button and dragging the mouse. That is fine as far it goes but you could do so much more. Remember this is a Silverlight application and so all sorts of wonderful graphical effects can be achieved, so let’s have a go. Rather than just cover the coding basics I thought I would also explain how to add graphical fills to objects as it took me a little bit of puzzling so I thought you might find it useful to know so your application has a chance of looking good.
To develop a Silverlight application you need to edit XAML and the two main Microsoft ways to do this is with Expressions Blend and Visual Studio 2008. Before we cover these, I discovered another tool at the excellent NXTGen Fest 08 ( did I mention the free pizza? ). This development tool called Kaxaml is a free download from ( www.kaxaml.com ). Its developer Robby Ingebretsen has done an excellent job in building a lightweight XAML development environment with immediate preview capabilities. Whilst it’s no Visual Studio, I find it a great tool for quickly trying out that bit of code and instantly seeing the results. So back to the Microsoft tools. Ideally you will need Visual Studio 2008 with SP1 and Silverlight Tools Beta 2 for Visual Studio. This will enable you to have full intellisense for coding and also full debugging capabilities for your Silverlight application. However as I painfully discovered you cannot currently use the design panel in Visual Studio to design a Silverlight application. For this, you need Expressions Blend, the current version is Expressions Blend 2.5 June 2008 Preview. So download this, run it and when it asks you which project you want, navigate to your previously created ‘Deep Zoom’ project. The project files are compatible between Blend and Visual Studio 2008 so you can switch between them as you want. You can edit the XAML directly in Blend or use the graphical design tools to build your application, but when it comes to adding code you need Visual Studio.
With your ‘Deep Zoom’ project opened in Blend, in the design panel will display a very unexciting white box. I though it would be rather fun to have an elliptical ‘porthole’ through which the web user can view the images, so to do this first select the rectangle tool and draw a box over the whole area; don’t worry about getting just right as you can resize it later. You will find it easier to see what you are doing if you select a fill colour for this rectangle. Great, now you have a black box, not much improvement yet. Now select the ellipse tool and drag an ellipse in the middle of your black box to about the right size. Now holding down the shift key, select your black box, so that both the ellipse and the black box are selected. Now go to the edit | combine menu and choose ‘subtract’, and lo and behold an elliptical ‘hole should appear in your black box. It would be good at this point to preview your magnificent work so far. In theory selecting ‘Test application’ should open a browser and display your Silverlight – Deep Zoom application, however I found that this preview didn’t always work for some reason ( beta software again I suspect). A more reliable way of testing is to select ‘build project’ and point your browser to the html file that ‘Deep Zoom’ composer generated when it produced the Silverlight application. So far, so good, but we want it to look nicer than that. Find an image in your collection that will do for the background for your ‘Deep Zoom’ viewer as we shall call this application, perhaps some sort of texture? This is no simple ‘drag and drop’ job but is not difficult when you know how. Use the Project | add existing item and navigate to this image. This will add the image to your project. Next drag this image to your design area preferably somewhere away from your main design. Now you can create a ‘ImageBrush resource’ with this image. Select Tools | Make Brush Resource | Make ImageBrush Resource.
Once you have done this you can select your black box with a hole in it and select ‘Brush Resource’ in the Brushes panel and voila! Your boring box not only still has its elliptical hole in it but now is no longer black but has a nice graphic applied to it. So it’s starting to look a little better now. One of the reasons for developing an application in Silverlight could well be the ease of achieving animation. I thought it would be rather cool to have some rotating cogs as you zoomed in or out with the mouse wheel. The principal here is to wire up the angle property of the cog image to the Zoom function. So first we need a suitable image and because our image of a cog had spokes, we needed a transparent image for the background to show through. The first choice for this would be a transparent gif, except that Silverlight Blend does not support gif files (aargh!). After a little experimentation we found that .png files worked fine. The first stage in doing this is to enable RotateTransform on the object, this is done in the XAML code of your Silverlight application, within the Image tag
<Image.RenderTransform>
<RotateTransform x:Name="TCog1"/>
</Image.RenderTransform>
I have also given the RotateTransform for that image a unique name which will make it easier to access it in my code. Now in the page.xaml.cs code page we need to add the following code to the function that handles the Zoom. In the generated code generated by the Deep Zoom composer look for the code ‘public void Zoom(double zoom, Point pointToZoom )’ and add:
if (ZoomFactor >= 1.2)
{
TCog1.Angle = TCog1.Angle - 12;
}
else
{
TCog1.Angle = TCog1.Angle + 12;
}
The reason for the ‘else’ section is so the cog rotates in a different direction depending on whether you are zooming in or out.
There, job done! If you want to take a look at my work, please goto http://www.ecats.co.uk/wbfphotos The rest is up to yours or your designer’s creative abilities. As you can see getting a basic ‘Deep Zoom’ application to work is no longer difficult. So why did it take me so long? Well apart from the development tools crashing and the fun of finding out the way to achieve the rotation there are several nice little bugs that will trip you up along the way! Take for example setting the origin for the rotation. With a circular object the obvious point of rotation is the centre, which would be defined as 0,0. Sounds reasonable, but not in the case of Blend it seems. An origin of 0,0 will cause the whole object to move around your background tracing a large arc, hardly optimal. However if you set the origin to 0.5,0.5 it works fine although with the ‘centre’ being a bit ‘off centre’ the cog seems a little wobbly. Just one of the many things with developing with Beta products that makes life so interesting and fun !
Article by: Mark Newton
Published in: Mark Newton