A few weeks ago at Remix Australia I launched an open source project called Eventr which is a reference application for using Silverlight’s deep zoom technology. Check out the sample application here.

The project is composed of the SuperDeepZoom control, an adaptable wrapper around the MultiScaleImage control (which is how Deep Zoom is implemented in Silverlight) – and a sample application which hosts the control and handles the data loading, templates and general behaviour).

Together the SuperDeepZoom control and host application can do some pretty cool things – think of this project as Hard Rock Cafe Memorabilia deep zoom on steroids – but you get all the code!

You can :

• Use fully templatable[sic] individual image overlay templates. Zoom in on an image and see data about that image overlaid on top. Hell, even show video as you zoom in to the image if you like!
• Show general overlays. Zoom in and see data up the side or across the bottom about the screen… a bit like zooming in to an image in the Hard Rock demo.
• Filter the images by pre-defined categories…
• Track your progress as you navigate around the control. Send a personalised “fly-though” to a friend using deep linking. See the fly through on the screen (press F on yours, or load one through the URL).
• Keep simple metrics of image views… show a count of most popular images.
• Rotate and ad, cause ad impression for each separate image view.
• … plus much much more.

MultiScaleImages can be made up from a set of individual sub images – allowing the individual images to be re-arranged by the control at run time… this is how the SuperDeepZoom control can show overlay data that is linked to the viewed image, and also how it arranges the images when the control is resized or a filtered image list is selected.

The SuperDeepZoom control supports templated overlays for both image data and also fly though viewing. Fly through view allows you to see your path through the composition (press F)- which can be passed in from the URL (for deep linking from a friend). You can easily manipulate the fly through/overlay templates to your liking. You pass the templates in to the control from your XAML and it handles the rest.

The templated overlay is a special ItemsControl where each of its items are overlaid directly over the corresponding sub image. This means you can show text, video, anything(!) over the images – its entirely up to the template.

The SuperDeepZoom control concentrates on looking after the actual MultiScaleImage, aligning the overlays etc, fly through, sub image arrangement etc – but it does not try and handle the application stuff: Controls to start/stop slideshows, back and next buttons, zoom in and out buttons, filter lists etc. The other thing the SuperDeepZoom control doesn’t handle is the overlay data source.

Overlay Data

As you zip between images in the deep zoom composition the control keeps track of which images you are looking at. It notifies the host application when an image is zoomed enough – “hey, they are looking at an image”. What’s especially cool is what else it can give the host app.

Your host app can load in any POCO (plan on C# object – classes etc) in to the SuperDeepZoom control and associate it with a particular sub image. When the user zooms in on an image, the control hands this object back to the host application… it can then be shown using a template with databinding or what ever you like!

The same goes for the per image overlays. Each item in the image overlay ItemsControl is associated with one of your data objects… they are then shown using the ItemTemplate that you feed in from the host app – it’s so easy to change around this template, and also to add more functionality to the objects themselves (i.e. customisation is sweeet).

This all means that the SuperDeepZoom control manages only the MultiscaleImage, aligning overlays etc – all the rest is handled through databinding and events from the control in your host application.

Composing deep zoom …erm… compositions

Included in the project is a tool which you can use to suck in a directory of images and automatically output a deep zoom composition compatible with the SuperDeepZoom control (i.e. it has sub images, rather than being one big deep zoomable image).

Usage

Usage of the SuperDeepZoom control is pretty simple… at it’s most basic level you can just drop it in, configure the path to the deep zoom composition and start using it.

The real fun comes when you start databinding values, customising templates and passing in your own data.

Pulling apart the sample application is your best bet for quickly getting up to speed on this stuff, but for posterity I’ll run through the basic set up for relatively simple deep zoom application. In coming posts I will describe in more detail how to go about customising overlays and other cool bits.

Getting set-up

Start off by creating a new Silverlight application in Visual Studio – ensure you create a web site with it as you will need somewhere to host the deep zoom composition.

Next, you’ll need to download the source code from the Codeplex project here. Once you have that, include the SuperDeepZoom project in your solution and add a project reference to it by right clicking on References in your Silverlight project and select Projects tab…

Creating some deep zoom imagery

Before you can start you need something to deep zoom. Fire up the Eventr source code and start the DZCollectionCreator project (sorry not compiled in the distro ). From here you can select an input directory to source your images from (JPG or PNG should be okay). Select an output directory. Once the process completes (should be pretty quick, about 2 seconds per image) navigate to the output directory and copy the entire contents. Next cruise to the directory of your *web* project and create a folder (call it MyDeepZoomComp) or something, and copy the stuff in. There will be a heap of files (far more than the number of images you input). This is part of the magicery behind how deep zoom works.

Now you have something to zoom.

Why not use deep zoom composer? This tool uses the deep zoom composition API internally, but it automatically lays out the images for you… saving you time!

Getting something going

We’ll now insert the SDZ control in to your page. First you’ll need to include a namespace to the control:

<UserControl x:Class="EventrSampleRunThrough.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

    xmlns:sdz="clr-namespace:SuperDeepZoom;assembly=SuperDeepZoom"

    >

	<Grid x:Name="LayoutRoot" Background="White">

    </Grid>
</UserControl>

I also took out the width and height properties so the control will fill the browser window.

With the SDZ namespace in you’ll be able to insert the control.

<sdz:SuperDeepZoom x:Name="sdz" DeepZoomSource="../SampleDeepZoom/output.xml"/>

This is pointing to a deep zoom comp in the root of the web site in the SampleDeepZoom folder. Note this path is relative to the Silverlight XAP package, which is usually stored in ClientBin – hence the ../ on the front (the SDZ control has some smarts to calculate relative paths).

Run your app! you will see you fully functional deep zoom composition, complete with double click to zoom and mouse wheel support! Too easy eh?

More to come

I’ll be blogging a lot more on this project over the coming weeks and months (as time permits!). Next time I will describe how to make some simple overlays (complete with your own custom data).

Until then, I hope you enjoy my little project, and please keep those comments flowing with your ideas and suggestions

P.S. A big thanks to the delicate genius himself Michael Kordahi for helping me get this off the ground

EDIT: We’ll be giving away not one but two Expression Studio Suites worth over $1K each!

Come along and see Sketchflow and Blend 3 in all their glory!

Sketchflow Shane Morris, Microsoft

Don’t know what Sketchflow is? Then read this!. Okay, now tell me you dont want Shane, MS UX Evangelist, to run through it live!

Expression Blend 3 – What’s new? – Mahesh Krishnan, Readify

Expression Blend 3 improves upon the goodness of Blend 2 SP 1 by providing a whole heap of new features and more importantly, the ability to create applications for Silverlight 3. The list of new enhancements is long – Lots of improvements to the way you use the tool, Improvements to how XAML, C# and VB.NET files are edited, Support for importing Adobe Photoshop and Illustrator files, Skinning enhancements, Enhancements for animation, Sample data generation, etc, etc.

Mahesh Krishnan will run through these changes in a fast demo based session (without using Powerpoint!) The session is targeted at both Designers and Developers, so don’t miss out

About the speaker: Mahesh Krishnan, works as Senior Consultant at Readify and blogs at http://blogesh.wordpress.com. He has previously presented at a number of user group meetings, codecamps and Tech.Ed

We meet @ the Microsoft Theatre, Level 5, 4 Freshwater Place, Southbank. Be there from 6!

Use the registration tool on the SDDN site.

Another #auremix passes, but this time we have video for all those that weren’t able to attend!

Check out http://www.microsoft.com/australia/remix/videos/default.aspx for all the sessions from Remix Australia.

If you are watching my session (the Silverlight 3 Super Session) then you may be interested in the sample code so you can sing along at home

Overall Remix was a great event – the most value I find is talking to peeps in the hallways and after party. It’s always great to hear what others are doing and to join ideas and thoughts.

Will most definitely see you there again next year!

At Remix Australia 09 one of the demos I showed was of a 3d wall with lots of images which would then extrude in to 3d space.

I’ve taken that demo and updated it a little so you can now load and show any image as a set of separate 3d tiles which can be moved around independently of one another.

Have a look at the app running here: Tile image and place tiles in to 3d space thingo.

<Sample Code>

Split image and 3d-ify

</Sample Code>

The cool part here is using the new WritableBitmap to create the tiles. Open up CrazyNoPurposeWrapImage3dThingo.cs and check out the way the code loops through rows and columns and renders potions of the source image in to tiles using WritableBitmap.Render, modifying the translate transform to move the source portion around.

bm.Render(imgWriteTemp, new TranslateTransform() { X = -cx, Y = -cy });

The 3d stuff I’ll explain another day

Enjoy!

I’ve been a bit quiet blogging lately – because I’ve been working on three great apps for Remix Australia 09!

Download the sample app that I use throughout my Silverlight demo @ Remix Australia 09 here.

Video of the session will be posted soon after the event, so stay tuned!

<Sample Code>

Silverlight 3 Super Session Code

</Sample Code>

The main Solution is located in RemixDemos/RemixDemos.sln.

BTW, don’t expect too many comments in the reference app. Any commenting I’ve done in the last month has gone in to the eventr Codeplex app!

I’ll be blogging more on the eventr Deep Zoom app on Codeplex in coming weeks and months.

I really hope you enjoy these apps!

Cheers,

Jordan.

Just a short post.
The other day I was having some trouble debugging the start up of a Silverlight 3 OOB application. The problem was well and truly gone before I could attach to the application from Visual Studio.

If you didn’t realise, you can attach VS to your OOB app by attaching to the appropriate sllauncher.exe instance.

As stated though, you will miss out on any start up problems you are trying to debug.

My (hacky) work around was to wack this in my start up code… I wacked it in MainPage.xaml.cs, but I can’t see any reason this won’t work in App.xaml.cs:

while (!Debugger.IsAttached)
{
    Thread.Sleep(100);
}

This code will basically hang the app until you attach your debugger! Just make sure you don’t let this one in to production

Miguel has been very organised and has another SDDN meeting off the ground in Sydney!

From Miguel’s blog:

“Next Tuesday, June 2 at 6:30 at Microsoft in Sydney (1 Epping Road, North Ryde NSW) we will have the SSDN Sydney’s June Meeting. This time Tatham Oddie will be talking about the new Out of Browser features in Silverlight 3 and Sergey Klementiev will presenting “LOB applications in Silverlight Lap around middle tier”. You will also have the opportunity to win a copy full of Expression 2 Suite and the best of all network amongst your Silverlight peers. So don’t miss it.”

Register on the site.

See you there!

Miguel has been hard at work organising our first ever virtual SDDN meeting!

It’s on May 18, 2009 at 9:00 pm Sydney Time.

See Miguel’s Blog for more details!

Link to the meeting will be released today hopefully.

The other day I had a problem where a slider had five distinct values and the user would drag the slider to their selection. An example of this would be a question like “From 1 to 5, please select how much you like puppies”. Of course, everyone would answer 5 to that question but that’s not the point… When a user clicked the slider (as opposed to dragging the thumb), the slider change would work fine, and the slider would go to the right place. The problem was that when the dragged the slider to change the value they could drag it to an intermediary value. Small change was 1 and large change was 1, but the could select 1.1393938… which would leave the slider sitting in a position between 1 and 2 somewhere.

The answer was to jump in to Silverlight Spy and have a bit of a hunt around the Slider code. I pulled out some of the code and created a new class inherited from Slider, and now when I drag it snaps to the right positions!

The code here is not complete, it doesn’t properly support IsDirectionReversed or Vertical sliders, but you could quite easily fix it for your own purposes.

Basically, just create a new control and inherit from Slider, then override the method as below.

Keep in mind, this to me is a fairly hacky approach

public class MySlider : Slider
    {
        protected override void OnValueChanged(double oldValue, double newValue)
        {
            int val = Convert.ToInt32(Math.Round(newValue));        

            Thumb ElementHorizontalThumb = GetTemplateChild("HorizontalThumb") as Thumb;

            double maximum = base.Maximum;
            double minimum = base.Minimum;

            double num3 = val;
            double num4 = 1.0 - ((maximum - num3) / (maximum - minimum));

            RepeatButton ElementHorizontalLargeDecrease = GetTemplateChild("HorizontalTrackLargeChangeDecreaseRepeatButton") as RepeatButton;
            RepeatButton ElementHorizontalLargeIncrease = GetTemplateChild("HorizontalTrackLargeChangeIncreaseRepeatButton") as RepeatButton;

            Grid grid = GetTemplateChild("HorizontalTemplate") as Grid;

            if (grid != null)
            {

                if ((grid.ColumnDefinitions != null) && (grid.ColumnDefinitions.Count == 3))
                {
                    grid.ColumnDefinitions[0].Width = new GridLength(1.0, GridUnitType.Auto);
                    grid.ColumnDefinitions[2].Width = new GridLength(1.0, GridUnitType.Star);

                    if (ElementHorizontalLargeDecrease != null)
                    {
                        ElementHorizontalLargeDecrease.SetValue(Grid.ColumnProperty, 0);
                    }
                    if (ElementHorizontalLargeIncrease != null)
                    {
                        ElementHorizontalLargeIncrease.SetValue(Grid.ColumnProperty, 2);
                    }
                }
                if ((ElementHorizontalLargeDecrease != null) && (ElementHorizontalThumb != null))
                {
                    ElementHorizontalLargeDecrease.Width = Math.Max(0.0, num4 * (base.ActualWidth - ElementHorizontalThumb.ActualWidth));
                }
            }
        }

    }

The main crux of this is that I first round the value, then pass it in as “num3″ which is then used to calculate the real position of the thumb slider.

As I said, a bit hacky, but it works nice!

I checked the Slider for a property that might turn it in to this mode, but couldn’t see anything… I think it would be a nice addition to the in built slider control.

The speaker and session lists for REMIX09 have been posted. Check out the speakers here and the session list (and registration link) here.

My session, the “Silverlight 3 Super Session” is first up, so come along and check it out!

REMIX09 is on June 11 at Star City in Sydney.