Sunday, June 29, 2008

DeepZoom sample ported to Silverlight 2 Beta 2

I have been planning to do this for some time now but finally managed to squeeze some time for this activity. I am going to leave the previous posts as-is so that the folks with Beta 1 can look at the previous sample.



It was a relatively straightforward exercise but one thing I noticed is that msi.Width/Height doesn't work properly in Beta 2, but luckily msi.ActualWidth/ActualHeight works! I also used the new tagging format (Metadata.xml) that the latest DeepZoom Composer generates.

I will post the source code in the next post.
The source code has been uploaded and can be found here. Note that the disclaimer from this post still holds!

13 comments:

David said...

Can you please post the code to this greate control. I would like to use it on my site.

Regards,
David

Donavon West said...

I've noticed that Full Screen does not work properly. This happens in my project too. Do you have a fix for this?

Wilfred Pinto said...

Donavon,

Full Screen works great for me, both on Firefox v2.0.0.14 and IE 6 SP2 (Windows XP). In fact, it seems like they fixed the full screen issue that I noticed in Beta 1.

What issues are you seeing? Can you try a different browser? If it doesn't work for you, I recommend posting this issue on the silverlight.net forums.

Regards

Wilfred

kanc said...

hi wilfred!

would you be so kind and send me a code of this sample? i am having some hard time trying to arrange subimages...

also, have you tried rotating subimages in msi? that would be a great feature.. i am trying to get it work by rotating the entire border of msi.

thank you!

-matija kancijan

Wilfred Pinto said...

The source code is now available. Let me know if there are any issues.

Matija,

It is currently not possible to rotate sub images in the MultiScaleImage control. I tried to apply the rotate transform to the entire msi (since it is possible!) to see how it behaves and the images didn't show up. It didn't throw an error though.

Sorry I couldn't help you here.

Wilfred

kanc said...

Hi wilfred!

I have also tried to rotate the entire msi and images disappeared, so i got around this by using border.

<Border x:Name="msiborder" BorderThickness="0,0,0,0" Margin="0,0,0,0" BorderBrush="#FF9F9F9F" Background="#FF000000" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="Auto" RenderTransformOrigin="0.5,0.5" Grid.RowSpan="2" Grid.ColumnSpan="1">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform x:Name="msiborderkut" Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>

<MultiScaleImage x:Name="msi" MinHeight="480" MinWidth="640" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,0" >
<MultiScaleImage.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform x:Name="msirkut" Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</MultiScaleImage.RenderTransform>
</MultiScaleImage>
</Border>

so the in c# code i do this:

void rotateright()
{
this.msiborderkut.Angle += 90;
this.msiborder.Margin = new Thickness(370, -370, 370, -370);
}


(hard coded for now, but it works)

but i am having some problem with adjusting mouse position i guess coordinates are messed up after rotate..

can you help me with this?

thank you!

-matija kancijan

Wilfred Pinto said...

Matija,

I am assuming the issue you are alluding to is that dragging the images doesn't quite work right. If this is true, try this

Replace
dragOffset = e.GetPosition(this);
with
dragOffset = e.GetPosition(this.msi);
in
msi.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)

Looks like you just discovered a bug!

Let me know if this works for you. If not, let me know exactly what doesn't work and I will investigate...

Regards

Wilfred

kanc said...

Hi Wilfred!

thank you for your response,
yes i was having problems while draging images. this is my solution. will try your suggestion..

-matija kancijan

//globals
double offsetx = 0;
double offsety = 0;
//-------------------------------
this.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
{
offsetx = this.lastMousePos.X;
offsety = this.lastMousePos.Y;
}
//-------------------------------
this.MouseMove += delegate(object sender, MouseEventArgs e)
{
if (mouseIsDragging)
{
//---------------------------------------------------------------
Point newOrigin = new Point();

if (this.msiborderkut.Angle == 0)
{
newOrigin.X = currentPosition.X - (((e.GetPosition(msi).X - dragOffset.X) / msi.ActualWidth) * msi.ViewportWidth);
newOrigin.Y = currentPosition.Y - (((e.GetPosition(msi).Y - dragOffset.Y) / msi.ActualHeight) * msi.ViewportWidth);
}
if (this.msiborderkut.Angle == 90)
{
newOrigin.X = currentPosition.X - (((e.GetPosition(msi).X - offsetx) / msi.ActualWidth) * msi.ViewportWidth);
newOrigin.Y = currentPosition.Y - (((e.GetPosition(msi).Y - offsety) / msi.ActualHeight) * msi.ViewportWidth);
}
if (this.msiborderkut.Angle == 180)
{
newOrigin.X = currentPosition.X - (((e.GetPosition(msi).X - offsetx) / msi.ActualWidth) * msi.ViewportWidth);
newOrigin.Y = (currentPosition.Y - (((e.GetPosition(msi).Y - offsety) / msi.ActualHeight) * msi.ViewportWidth));
}
if (this.msiborderkut.Angle == 270)
{
newOrigin.X = currentPosition.X - (((e.GetPosition(msi).X - offsetx) / msi.ActualWidth) * msi.ViewportWidth);
newOrigin.Y = currentPosition.Y - (((e.GetPosition(msi).Y - offsety) / msi.ActualHeight) * msi.ViewportWidth);
}

msi.ViewportOrigin = newOrigin;
}
}
//-------------------------------

void rotateright()
{
double sirina = this.msiborder.Width;
double visina = this.msiborder.Height;
double pozx = this.msiborder.RenderTransformOrigin.X;
double msix = this.msi.ViewportOrigin.X;
double msix2 = this.msi.Margin.Left;
double actualh = this.msi.ActualHeight;
double actualw = this.msi.ActualWidth;


this.msiborderkut.Angle += 90;

if (this.msiborderkut.Angle == 360)
{
this.msiborderkut.Angle = 0;
this.msiborder.Margin = new Thickness(0, 0, 0, 0);
}
if (this.msiborderkut.Angle == 90)
{
this.msiborder.Margin = new Thickness(370, -370, 370, -370);
}
if (this.msiborderkut.Angle == 180)
{
this.msiborder.Margin = new Thickness(0, 0, 0, 0);
}
if (this.msiborderkut.Angle == 270)
{
this.msiborder.Margin = new Thickness(370, -370, 370, -370);
}

_lastMousePos = new Point(0, 0);
msi.ViewportOrigin = new Point(0, 0);
msi.ViewportWidth = 1.0;

}

Cammer said...

Hi Wilfred:

Would like to try this out! Any chance you could update the code to Silvelight's 2.0 release?

Wilfred Pinto said...

Cammer, Check out the newer posts. You will find the link to the updated source code.

Cammer said...

Wilfred:

I have the most current version of Silverlight but am not able to view this sample in the browser. I receive a Silverlight download dialog in the upper left-hand corner. Is there a security setting I should be checking?

Thanks -

Wilfred Pinto said...

Cammer, I tried it on a computer which didn't have Silverlight installed and it worked fine. I did get the Silverlight download dialog but after I downloaded Silverlight and installed it, the page rendered fine! Are you able to access any other sites like http://silverlight.net/showcase/? You might also want to post your issue to the Silverlight.net forum in case this issue persists. There are a bunch of really nice people out there who are eager to help.

Regards

Deepa said...

Hi All,

Is anyone able to type into the Filter textbox in full screen mode? I am not able to do so on any browser.

Wilfred, any pointers on how to fix that issue for full screen mode?

Thanks a lot for the great sample.