Display Picture Metadata in your Silverlight 2.0 Deepzoom Application

As i promised 2 days ago here’s my post about how to display metadata of sub images in your Silverlight Deepzoom Application. I already typed this post yesterday but because of a stupid mistake i lost my post and now I have to type it again :( (but I think I’ll make it a bit shorter)

To start building your Silverlight 2.0 deepzoom application download Deepzoom Composer from Microsoft here. This tool works quite easy. just add some images in the “import” mode then drag them on your screen in the “compose” mode and then export your deepzoom Project.

If you want to be able to identify the different sub images in your Multiscaleimage object check the “Create Collection” checkbox.

deepzoomComposerCollection

After exporting this will be the result:

deepzoomexport

Now to load up this collection of pictures into your own project take a look at this weblog, there is a really good explanation on which steps to take and after you did all those steps i’ll explain how to show metada of the different subimages in the deepzoom application.

So if you are at this point you should have your own working deepzoom application and you want to add picture metadata to your project. If not go back to this weblog or try one of these.

The only way of identifying the different sub images in the big multiscaleimage is by the Z-Order of the different images. So how do you know which image has what Z-Order you ask? thats where the generated SparseImageSceneGraph.xml comes in which was generated by the Deepzoom Composer.

<SceneNode

  <FileName> P1000558.JPG</FileName

  <x>0,235460826165879</x>

  <y>0,00108692916410255</y

  <Width>0,218281177677285</Width>

  <Height>0,144923888547009</Height

  <ZOrder>2</ZOrder>

  <Description>Uitzicht van hotelkamer</Description>

</SceneNode>

 

As you can see i added my own Description element to every SceneNode in the generated xml so we can use it in our project. We’ll use this xml file to query the ZOrder of the subimage and get the description as a result with the use of Linq.

To do this we’ll first have to open the xml file in our code behind page from the page.xaml.cs.

deepZoomObject.Loaded += delegate(object sender, RoutedEventArgs e)

{

    _xmlImageMetadata = XDocument.Load(“SparseImageSceneGraph.xml”);

};

 

After that we’ll add code to display the metadata when the mouse moves over a sub image in the multiscaleimage.

deepZoomObject.MouseMove += delegate(object sender, MouseEventArgs e)

{

    if (mouseButtonPressed) 

    {

        mouseIsDragging = true

    }

    else 

    {

        ImageName.Text = GetMetadata(e.GetPosition(deepZoomObject)); 

    }

    lastMousePos = e.GetPosition(deepZoomObject);

};

 

Then we add the function GetMetadata which queries the xml file and gets the description from it.

private string GetMetadata(Point point)

{

    Point p = deepZoomObject.ElementToLogicalPoint(point); 

    int subImageIndex = SubImageHitTest(p);

    if (subImageIndex >= 0) 

    {

        var q = from c in _xmlImageMetadata.Elements(“SceneGraph”).Elements(“SceneNode”

        where ((string)c.Element(“ZOrder”)) == (subImageIndex + 1).ToString()

        select (string)c.Element(“Description”); 

        if (q != null)

       

            return q.Single();

       

        else

            return “”

    }

    else 

        return “”;

}

 

This function uses the function SubImageHitTest which I copied from this weblog:

int SubImageHitTest(Point p)

{

    for (int i = 0; i < deepZoomObject.SubImages.Count; i++) 

    {

        Rect subImageRect = GetSubImageRect(i); 

        if (subImageRect.Contains(p))           

            return i; 

    } return -1;

}

 

Rect GetSubImageRect(int indexSubImage)

{

    if (indexSubImage < 0 || indexSubImage >= deepZoomObject.SubImages.Count)        

        return Rect.Empty;

    MultiScaleSubImage subImage = deepZoomObject.SubImages[indexSubImage]; 

    double scaleBy = 1 / subImage.ViewportWidth;

    return new Rect(-subImage.ViewportOrigin.X * scaleBy, -subImage.ViewportOrigin.Y * scaleBy, 1 * scaleBy, (1 / subImage.AspectRatio) * scaleBy);

}

 

if you build and start your application now you should be able to see your added metadata when you mouseover a sub image in the MultiscaleImage.

My working example can be found here: http://www.vdcruijsen.net/projects/SilverlightDeepzoom/test.html

sourcecode can be downloaded here:

(you’ll have to add your own deepzoom object since i removed that from the zip file)

 

Happy Coding!

 

Geert van der Cruijsen

kick it on DotNetKicks.com

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Build your own Silverlight 2.0 Deepzoom application and host it with “Silverlight Streaming”

A few weeks back on MIX'08 Microsoft showed us a stunning demo including new technologies like Seadragon and Silverlight 2.0.

This demo showed us the collection of memorabilia at Hardrock Cafe. The demo can be found at http://memorabilia.hardrock.com/

This demo really got my attention and after some searching on the internet i found out i wasn't the only one. There are hundreds of blogposts by people showing how you can build this for yourself and guess what: it's really easy!

I've spend some days in the weekend and this evening building my own version of a Silverlight Deepzoom Application. Most of my code is "borrowed" or copied from other blog posts which i'll list at the bottom of this post. My goal was to also be able to show metadata at the pictures and after some research it wasn't to hard to do this either. Since i didn't find any other blog posts who explained how to show metadata with your pictures i'll make a seperate blogpost about this tomorrow.

I've put some of my last vacation photo's online in my own deepzoom test application at: http://www.vdcruijsen.net/projects/SilverlightDeepzoom/test.html (source also linked on that page)

Download Source: 

As i said before i won't go explaining the code in this post because i'm gonna do that tomorrow in a separate post where i'll explain how to add metadata to your deepzoom application. if you want more information about Silverlight and Deepzoom check out the following links:

how it works: http://blogs.msdn.com/jaimer/archive/2008/03/31/a-deepzoom-primer-explained-and-coded.aspx

lots of how-to's: http://projectsilverlight.blogspot.com/

more info on silverlight 2.0 http://weblogs.asp.net/scottgu/archive/2008/02/22/first-look-at-silverlight-2.aspx

Another cool thing i found out is that Microsoft is offering is a hosted environment for your silverlight applications. You can get up to 10GB of free space at Silverlight Streaming: http://silverlight.live.com/

You can upload your Silverlight manifest files + other resource files like video's to Silverlight Streaming and you can link your silverlight object on your own page. The silverlight object in my own example is also hosted at Silverlight Streaming.

If you have any questions or recommendations about this subject please dont hesitate to send me a mail about it.

Geert van der Cruijsen

kick it on DotNetKicks.com

 

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

SharePoint Workflow running in a different context as the host sharepoint site

On my current project I ran into a problem with a custom SharePoint workflow because the workflow sometimes failed to run and sometimes it worked like a charm. When I cancelled a workflow which gave an error and restarted it by hand it finished without any problems.

When I looked in the SharePoint logfiles what was causing my workflows to crash it showed that the workflow couldn’t find values for some settings in the web.config. I couldn’t think off any reason why the workflow couldn’t read these settings about 50% of the times a workflow was started.

The workflow I created is automatically started after the change of an item in a specific document library. After some testing I found out that all workflows that I started by changing the item with the sharepoint webinterface worked fine but the items that were changed by an external source (a custom webservice I created but also the biztalk SharePoint Adapter webservice) crashed with the error that they couldn’t read the web.config.

The webservices that are causing the workflow to crash are in a different sharepoint webapplication and thus use a different web.config. When I added my settings in the web.config of this webapplication the workflows stopped crashing.

So it seems that the WF workflows are running in the process which changed the item in the sharepoint list which caused the workflow to start instead of the standard w3p process of SharePoint which I thought always was the case.

Happy coding!

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Volta or Silverlight 2.0

Last Wednesday evening we had a presentation at the Avanade Netherlands office about Volta and what Volta could do for us in the future. The demo in the presentation showed us the possibilities that Volta can bring to software developing on the web. After this presentation we had a cool discussion about the question if Volta will really make it to the daily life of web based software development.

In my opinion with my current knowledge about Volta is that a lot of pro’s of Volta are also taken away by using Silverlight 2.0 on the client instead of html/javascript. I’ll sum up most pro’s of using Volta and then compare then to the use of Silverlight 2.0. Ofcourse most things said in this post are just my current ideas and opinions on the 2 projects which are far from complete products today.

 

 

 

Some pro’s on volta are: Dynamic/easy switching of the place where code is being executed. You can add a single line of code in a class and make it completely run on the client instead of on the server. If you want your code to run on the client Volta will generate javascript from your .net code after it’s compiled to the IL.

This power of volta makes it easy to just generate all your javascript instead of writing it all by yourself. Everyone knows writing/debugging loads of javascript can be a pain in the ass so of course it’s nice to program in C# or any other .net language you like. You can even set breakpoints on the c# code which you created and step through this when you are actually running generated javascript at that time.

Volta can also generate javascript which is compatible with the browser which is doing the current request so you don’t have to think about cross browser compatibility anymore.

All in all at the time Volta will be a fully grown product you can write your whole web application in 1 language instead of also having to write javascript to get your fancy web 2.0 look and feel on your web app.

After seeing the presentation about Volta I thought the only big feature Volta can bring is the possibility to dynamically change parts of code to run on the client or server. The other nice features are also brought to us with Silverlight 2.0 which makes it possible to write C# for the client side instead of javascript. In my opinion Silverlight even has more and better options to do this because  you have more powerfull tools in the Silverlight runtime which make it possible to make even fancier tools then you can in Javascript. One big example of something Silverlight can do which javascript will never do is that you can make real statefull apps instead of the stateless pages you’ll keep building in Javascript. Opening sockets to the server will never been done by javascript while it is easy to do in Silverlight 2.0

 

So if javascript is going away in both cases what does Volta bring that silverlight can’t handle? The only big thing that is left is changing your code to run on the server/client by adding a line of code to your class. Ofcourse this can be a really powerfull thing but in my opinion this wont be used that often and especially not in enterprise applications where my focus on my job is at.

In my opinion Silverlight 2.0 can become a really big revolution on the web IF and only IF Microsoft does everything it can to get the silverlight plugin on ALL pc’s as soon as possible (ofcourse after Silverlight 2.0 is released) The plugin has to be available for every browser no matter what OS. No matter what type of computer. Desktop or mobile. Everyone with Linux and Firefox or Windows and IE will have to get this plugin which has same functionality. So in my opinion Microsoft should develop the plugin for all browsers instead of only for windows+IE and let the moonlight project reverse engineer this plugin for a plugin that runs on linux. Volta instead of Silverlight doesn’t have this problem because the javascript code that’s being generated already runs on all sort’s of browsers on all OS’es.

We’ll have to see what the future brings but my money is on Silverlight being installed on 95% of all pc’s in a year or 2 so we don’t have to generate Javascript but can just make flashy c# code on the client.

Another option can also be that Volta will be generating Silverlight code instead of javascript so we get the best of both worlds :)

Do you have a different opinion? Please let me know in a comment!

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter