Microsoft's Deep Zoom Technology Allows for Powerful User Experience

Closely tied to the Silverlight Pivot Viewer I discussed in my previous blog post, is Microsoft's Deep Zoom technology. Deep Zoom enables users to pan and zoom around a high resolution image, or in the case of how we use it for the Appleton Compassion Project Virtual Exhibit, navigate a large collection of images.

Deep Zoom accomplishes this by using a process similar to Google/Bing maps. There are layers to the image, so one layer can show the entire collection with very small sizes for the images. The images are also broken up into tiles, so as you go to higher resolution images, it may be broken up into several tiles so you do not have to load the entire image. As you zoom closer into the document, you are navigating to layers that are deeper and deeper in the collection, with increasing image resolution and will be loading a tile that is a subset of the image. Microsoft has a nice picture of this and an accompanying description at their MSDN site.

Deep Zoom consists of several XML based files. The first is the Deep Zoom image (DZI). This file is essentially an XML file that contains the layers and tile information for a given image. The Deep Zoom image creation process creates a directory for each image, this directory will then have the layers, and images that are broken into tiles. For example, in testing that we did, a single image taken with a home digital camera that is 4 MB in size, was broken up into 12 sub folders, each containing tiled images. One image created 12 directories and 238 files. For the Appleton Compassion Project, the collection of 10,000+ art pieces has created nearly one million files!

The second deep zoom file type is the Deep Zoom Collection (DZC). This file essentially is the high level collection that points to the DZI files. The Silverlight Pivot viewer then references this DZC file for the zooming process.

There are two ways to create Deep Zoom files. The first is to use the Deep Zoom composer that is part of Expression Blend. This process, outlined in the link above, is manual which obviously won't work for 10,000 images. The interesting thing is Microsoft really doesn't have an SDK or install for creating the Deep Zoom files. You need to physical copy a DLL from the Deep Zoom Composer directory and make it part of your application, outlined here.

Why Use it? Deep Zoom allows for a interactive zoom and pan user experience.

I want to learn more! MSDN Deep Zoom site .aspx)

Blog post on programmatically creating Deep Zoom

 

Jaime Rodrigues goes deep on Deep Zoom


 

Create Interactive User Experiences Quickly and Easily with Silverlight Pivot Viewer

The Appleton Compassion Project, a recent charity project Skyline has completed, takes advantage of a great tool in the Microsoft toolset that few people know is out there, the Silverlight Pivot Viewer. Unfortunately, Microsoft has quite a few things named Pivot so you may find this confusing. Pivot Viewer is NOT:

  • PowerPivot- This is an Excel tool that allows you to manipulate A LOT of data
  • Excel Pivot - This is your day to day Excel pivot The Silverlight Pivot Viewer IS a tool that allow developers to quickly create an engaging and interactive data driven experience. To get an idea of what I'm talking about, check out the Appleton Compassion Project Virtual Exhibit.

This online exhibit contains over 10,000 pieces of art done by students at dozens of different schools. You can see how site visitors can quickly click a school or a grade and narrow down the art that is displayed. Clicking an image will show the student's compassion statement and other demographic information without having to write any special code.

So it looks nice, but how do we create something this interactive? The great part is it's really not too difficult!

The first thing that needs to be done is create a Deep Zoom file, which I cover in another blog post, that will provide the images for the viewing experience. An XML file, with the extension of CXML is created and that is the file the Silverlight Pivot Viewer consumes. The important thing to realize is there is NO User Interface code to write. To reiterate... ZERO user interface development is needed. You create the Deep Zoom file, create the CXML file, add the Pivot Viewer control to your Silverlight XAML and you have a HIGHLY interactive user experience.

The CXML file has four parts to it. The first is a node called Collection, it is the top level node for the XML file.

Second is a node called Facets. The facets are the categories that are displayed on the left of the screen. In the example above, School, Grade, Art Teacher and Teacher are all facets. The facets are then searchable within the Pivot Viewer. Visitors can type in a school name or use the check box to filter down the data.

Third is a node for all of the Items. For the Appleton Compassion Project, the items are all the artists who created art work and accompanying compassion statements.

The last node is the item node, which is the data that is used to populate the Pivot Viewer. The item node has data for each of the defined facets to populate the search experience on the left of the screen. For our example, a given artist would have a School Name, which are then automatically queried to create the list on the example.

Here's an example of how the XML would look:

<xml version="1.0" encoding="utf-16"?>

<Collection xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" Name="Appleton School Compassion Project" SchemaVersion="1.0" xmlns:p="http://schemas.microsoft.com/livelabs/pivot/collection/2009" xmlns="http://schemas.microsoft.com/collection/metadata/2009">

    <FacetCategories>
        <FacetCategory Name="School" Type="String" p:IsWordWheelVisible="true" p:IsMetaDataVisible="true" p:IsFilterVisible="true" />
        <FacetCategory Name="Grade" Type="String" p:IsWordWheelVisible="true" p:IsMetaDataVisible="true" p:IsFilterVisible="true" />
        <FacetCategory Name="Art Teacher" Type="String" p:IsWordWheelVisible="true" p:IsMetaDataVisible="true" p:IsFilterVisible="true" />
        <FacetCategory Name="Teacher" Type="String" p:IsWordWheelVisible="true" p:IsMetaDataVisible="true" p:IsFilterVisible="true" />
        <FacetCategory Name="Picture Number" Type="String" p:IsWordWheelVisible="true" p:IsMetaDataVisible="false" p:IsFilterVisible="false" />
        <FacetCategory Name="Tile Location" Type="String" p:IsWordWheelVisible="false" p:IsMetaDataVisible="true" p:IsFilterVisible="false" />
    </FacetCategories>

<Items ImgBase="collection-2521020991055083062.dzc">
    <Item Img="#301" Id="3803" Href="http://www.appletoncompassion.org/Artist/3803" Name="Henry Ptacek">
    <Description>Artist statement not yet available</Description>
    <Facets>
        <Facet Name="Picture Number"><String Value="3803" /></Facet>
        <Facet Name="School"><String Value="Franklin Elementary School" /></Facet>
        <Facet Name="Grade"><String Value="4" /></Facet>
        <Facet Name="Art Teacher"><String Value="Sara Wilda" /></Facet>
        <Facet Name="Teacher"><String Value="Louann Graf" /></Facet>
    </Facets>
    </Item>
</Items>
</Collection>

As you can see, it's relatively straight forward XML. There are many things I have not talked about, like the ability to have different types of data, sliders for your data, etc. Check out the links for more information.

Why Use it? The Silverlight Pivot viewer is a great data driven UI experience for end users. The creation process involves creating a Deep Zoom file and some Xml.

I want to learn more! Microsoft's Silverlight Pivot viewer site

Silverlight Pivot XML Schema information

To Develop with the Silverlight Pivot viewer, you will need the Silverlight 4 SDK as well as the Pivot Viewer Control, which you can download here.


 

SharePoint Search - Think Outside the (Search) Box!

Search is ubiquitous in the world of the Internet. Everyone starts their questions by going to Google (or for a small minority Bing) and typing in their query as the entry to the Internet. The expectation is that the results are going to be exactly what you are looking for, and if that doesn't work out, adding a second term will get you there.

In the Enterprise though, this is not always the case. Data exists in disparate system, files live on file shares, users keep documents on their hard drive, etc. Ultimately, it comes down to the fact that the data users need is not discoverable, for a variety of reasons. As a result, users generally don't regard search within the walls of the enterprise like they do search outside of the Enterprise. Instead of starting at the search page, they start at the application that hosts their data and search. This is a source of inefficiency. Additionally, what we are searching for may be the person within our organization who knows the most about a given topic so we can do research ourselves or resolve an issue. The good news is that SharePoint 2010 and its search functionality can enable an organization to overcome these inefficiencies or weaknesses.

SharePoint 2010 has great built-in Enterprise search functionality which can certainly help solve these problems. The downside is it can get a bit confusing because there are many variations of the Microsoft search product offering. The products, with a description are:

  • SharePoint Foundation 2010 Search - This is the search engine that ships with SharePoint foundation. It is limited to a single site collection (or in non-SharePoint speak, a single site) and cannot index the content and data external to that given site.
  • Search Server 2010 Express - Search Server Express is a standalone product that is available and free. It supports external content sources and search federation. It is limited in its capability to scale to your organization's needs.
  • Search Server 2010 - This is the full product upgrade from Search Server Express. It is an Enterprise search engine that can scale across multiple servers. The product is focused for organizations that are not using SharePoint 2010 and can provide a great product offering for your internal or public website needs.
  • SharePoint Server 2010 Search - The search available in SharePoint server 2010 includes all of the Search Server 2010 functionality but also includes features specific to SharePoint. Examples of this include taxonomy and people search.
  • FAST Search Server 2010 for SharePoint - FAST is Microsoft's advanced search functionality. It is used by many organizations that need highly scalable and functional requirements. An example would be the Best Buy site, which uses FAST search to provide their categories. The great part about SharePoint search, starting with Search Server 2010, is the ability to integrate data from other systems within your Enterprise. Using the Business Connectivity Services functionality (a feature of SharePoint itself) with SharePoint search, you can integrate into Line of Business (LOB) applications. For example, if you have customer information and contacts in a CRM application, SharePoint can be setup to index that information and make it part of the results that are returned when users search from within your SharePoint site.

Similarly, with the ability to search LOB applications, advanced versions of SharePoint allow search sources to be external to the server. SharePoint calls these content sources, and they can be a variety of types of data. Examples include corporate Intranet sites that aren't hosted in SharePoint, external file systems, and Internet sites. This is the majority of the data that organizations are interested in, all at the tip of employees' fingers.

Some examples of what customers have done with SharePoint search:

  • Make a file server drive that has 15 years of data quickly accessible via your SharePoint searches
  • Use SharePoint search to bring in product information from an ERP system with accompanying price as well as links to the ERP system
  • Use Google News and other external news sources to mine information about competitors As you can see, leveraging SharePoint search beyond its out-of-the-box functionality can quickly turn your corporate Intranet into the starting point for information for all your knowledge workers!

This blog post originally appeared at Skyline Technologies (http://www.skylinetechnologies.com/blog/Pages/sharepointsearch.aspx)


 

John Ptacek I'm John Ptacek, a software developer for Skyline Technologies. This blog is my contains my content and opinionss, which are not those of my employer.

Currently, I am reading The Dark Forest by Cixin Liu (刘慈欣)

@jptacekGitHubLinkedInStack Overflow