The making of: Deep Zoom Zermatt, explore the super high resolution panoramas of the famous Swiss mountains

Article
10/12/2009

It is a while that I was not blogging and one reason was that I was quite busy in building this cool solution and of course 300 other tasks.

At the end of July I came up with the idea, for the 20th Anniversary of Microsoft Switzerland, to build a Multi touch solution based on SL3 and Windows 7 as a showcase for our latest technology.

With enough luck and some skills it did come up better than what I have hoped. Of course being a passionate photographer did help too.

Now, it is finally live, publicly available on MSN and soon at www.myswitzerland.com and www.zermatt.com:

https://rubrik.ch.msn.com/reportagen/zermatt.aspx

If you click on the info button at the bottom of the Silverlight solution

you can learn the whole process involved in creating these super high res panoramas.

But as a Developer you may be interested to learn a bit more on how the Silverlight solution was created.

I started with the SL HDView solution created by Eric Stollnitz and available as source code on codeplex: https://research.microsoft.com/en-us/um/redmond/groups/ivm/HDViewSL/ and transformed it on a SL3 app that would fit my needs. One cool feature worth mentioning is that this player has the possibility to render 360 panoramas, something not available out of the box by Silverlight deep zoom implementation.

For this blog post I thought it would be useful to point out the new Silverlight 3 features that I took advantage of for this app:

Multi-touch on Windows 7
- In Silverlight 3 you can listen to multitouch events through Touch.FrameReported but for this solution we just needed the zoom gesture:

The cool part is that W7 and IE are recognizing this gesture as zoom and sends it to Silverlight as MouseWheel event. So I had nothing to do in particular to make it run on a Windows 7 multi touch devices.

Here running on a large 42’’ Full HD Multitouch Windows 7 compatible screen distributed in Switzerland by www.inputech.ch:

Mousewheel native support

In SL2 you can catch MouseWheel event but only though the HTML bridge with the big disadvantage that it would not work in full-screen.
In SL3 you can handle, in manage code, the Mousewheel event making it usable in full-screen a key scenario for kiosk applications

 this.MSI.MouseWheel += delegate(object sender, MouseWheelEventArgs e)

      double zoomFactor;

      if (e.Delta > 0)

              zoomFactor = 1.2;

      else

              zoomFactor = .80;

      Zoom(zoomFactor, e.GetPosition(this.MSI));

};

Effects
- A small refinement I added was a shadow effect on toolbar buttons. View that the buttons are transparent it is much easier to do it with effects than to create your own shadows:

``` alt
 <Grid.Effect>
```

  
  

``` 
       <DropShadowEffect/>
```

  
  

``` alt
 </Grid.Effect>
```

Animation Easing

With touch people also expect some sort of inertia and fluidity in the UI. The MultiScaleImage control already have inertia but for the Info part of the app I added an elastic ease to make it a bit cooler

 <Storyboard x:Name="infoBoxAni">

             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="infoBox" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

                 <EasingDoubleKeyFrame KeyTime="00:00:00" Value="-396.269"/>

                 <EasingDoubleKeyFrame KeyTime="00:00:01.5000000" Value="-6.632">

                     <EasingDoubleKeyFrame.EasingFunction>

                         <ElasticEase EasingMode="EaseOut" Oscillations="1"/>

                     </EasingDoubleKeyFrame.EasingFunction>

                 </EasingDoubleKeyFrame>

             </DoubleAnimationUsingKeyFrames>

         </Storyboard>

GPU acceleration
- The solution contains a 720p HD 360 video that runs continuously on the start screen. Plus we layer on top elements with transparency making the solution quite heavy in CPU usage. For the kiosk version we enabled GPU acceleration and we can save up to 30-40% in CPU usage.
  
  Remember that you need to opt in for hardware acceleration:
  
  <param name="EnableGPUAcceleration" value="true" />
  
  And with this code you can enable for the elements that you want the GPU to take care:
  
  <MediaElement CacheMode="BitmapCache" Margin="0" ……………
  
  Last you can check which part is hardware accelerated with this parameter:
  
  <param name="enableCacheVisualization" value="true"/>
  
  Attention the parts not colored in red or green are the one HW accelerated, in this case the video:

Style BasedOn and runtime changeable

We have a Style that inherits from another Style with the sole goal to make the button bigger on the Kiosk solution, making it more touch friendly (especially if you have big fingers:-)). Basically with a startup parameter you can control if you want the button big or not at runtime.

Style inheritance:

         <Style x:Key="largeButtonTemplate" TargetType="Button" BasedOn="{StaticResource smallButtonTemplate}">

             <Setter Property="Height" Value="150"/>

             <Setter Property="Width" Value="150"/>

         </Style>

 Change it at runtime:

 if (App.IsKiosk)

                 foreach (FrameworkElement fe in ToolbarPanel.Children)

                     fe.Style = (Style)App.Current.Resources["largeButtonTemplate"];

Out of Browser experience
- For the fan of this solution we offer the possibility to install it locally and run it out of browser. A snap to do it with SL3

If you want to see live how it was developed I will show some pieces in my Silverlight 3 Overview session at Shape: https://www.microsoft.com/switzerland/shape/Default.aspx

Have fun exploring the Matterhorn!

Ciao

Ronnie Saurenmann

The making of: Deep Zoom Zermatt, explore the super high resolution panoramas of the famous Swiss mountains

Additional resources