Recently I had this opportunity to work with a radically new tool called MS Pivot or simply Pivot. I know many of you may be thinking what is this stuff called pivot? Is it something to do with the Pivot table? No it has nothing to do with pivot table, rather it is a new technology from the Microsoft’ live lab.
What is Pivot?
I would say Pivot is new way of searching information on the net. Till now we use to search information based on text. With Pivot one can search information based on images and text.Using the various features of Pivot one cab narrow down the search based on various filters as well. Pivot is a new technology to look at the vast amount of information scattered around us. It is a pictorial plus textual representation of information in graph and other format which make more sense to a human being than large chunks of textual data. The information can be anything which one can dream of. There is no limit to what you can display as a Pivot content as long as you have images and data for it. To display content in pivot one has to convert the data into a format which is understandable by Pivot. The format which Pivot understand is in the form of an XML and the format of that XML is called CXML. CXML stands for “CollectionXML”. The images which are rendered by the Pivot control needs to be converted into a format called “Deep Zoom Format”. Now you may be saying “Oh! no two new formats needs to be learnt?”. Don’t worry these two, CXML and Deep Zoom Format, are not difficult. “Deep Zoom Format” is the same technology used in “Seadragon”. In “Deep Zoom Format” the image is converted to a pyramid of images i.e. the original image is converted to very minute image, increasing in size to the original image. This is done to help the Pivot control to seamlessly zoom the image. To know more about the “Deep Zoom Format” please refer the following site.
Since pivot is all about pictorial representation I would like you to have a look at the below video and get amazed.
What is CXML?
As specified above CXML stands for “Collection XML”. It is the format which defines what should be displayed by pivot. Now let us understand what constitutes a CXML. As it is with any XML the content of a CXML is enclosed in a root element called “Collection”. The “Collection” root node has a “Name” attribute the value of which is displayed as title in the title bar of pivot control. “Icon” and “BrandImage” are the few other attributes for displaying icon and brand image related to the collection.
<?xml version="1.0" encoding="utf-8"?>
<Collection xmlns:p="http://schemas.microsoft.com/livelabs/pivot/collection/2009"
SchemaVersion="1.0" Name="First excel collection images" p:AdditionalSearchText="Ms-Pivot"
xmlns="http://schemas.microsoft.com/collection/metadata/2009">
<FacetCategories>
<FacetCategory Name="Living Being" Type="String"></FacetCategory>
<FacetCategory Name="Others" Type="String"></FacetCategory>
<FacetCategory Name="Count" Type="Number"></FacetCategory>
<FacetCategory Name="Link" Type="Link"></FacetCategory>
</FacetCategories>
<Items ImgBase="First_Excel_Collection_files\tgpdq4lj.ano.xml">
<Item Id="0" Img="#0" Name="Owl">
<Description>The image is that of an owl. Owl is a nocturnal bird.</Description>
<Facets>
<Facet Name="Living Being">
<String Value="Bird"></String>
</Facet>
<Facet Name="Link">
<Link Name="Link" Href="http://www.google.com"/>
</Facet>
</Facets>
</Item>
<Item Id="1" Img="#1" Name="Headphone">
<Description>Philips headphone.</Description>
<Facets>
<Facet Name="Others">
<String Value="Gadget"/>
</Facet>
<Facet Name="Count">
<Number Value="2"/>
</Facet>
<Facet Name="Link Test">
<Link Name="Link test2" Href="about:none"/>
</Facet>
</Facets>
</Item>
</Items>
</Collections>
FacetCategories & FacetCategory
Next in hierarchy is the “FacetCategories” node which is nothing but a collection of “FacetCategory” nodes. “FacetCategories” as such don’t have any attributes. “FacteCategories” have “FacetCategory” as their child nodes. “FacetCategory” is nothing but a classification of you collection data into different categories. All “FacetCategory” is displayed in the Pivot filter panel on the left hand side of the Pivot control. I would say they serve as group heading and under each “FacetCategories” you have sub classification which is nothing but “Facet”. Following are the attributes of FacetCategory.
Name: Name to be given to the FacetCategory. The name is displayed in the filter panel on the left.
Format: Format attribute takes .NET numeric format strings as their value.
Type: Data type of the FacetCategory. The data types supported are string, long string, numeric, DateTime and link.
Items & Item
Next in hierarchy is Items node. Again from the name one can make it out that it acts as a collection for Item node. It has got only one attribute called ImgBase to specify relative path to a DZC (Deep Zoom Collection) or XML file which contains the collection’ image details.
Item node holds each item which is displayed in the main window of the pivot control. Item node can have a Description node and a Facets node. Following are the attributes in a Item node.
Img: Hold the uri of the image. Normally Img attribute has a “#” symbol followed by a number. This number corresponds to the Id attribute in the DZC or XML file specified in the ImgBase attribute of the Items node. To understand better lets see the typical content of DZC or XML file mentioned in the ImgBase attribute of the Items node.
<?xml version="1.0" encoding="utf-8"?>
<Collection MaxLevel="7" TileSize="256" Format="jpg" NextItemId="8" ServerFormat="Default" xmlns="http://schemas.microsoft.com/deepzoom/2009">
<Items>
<I Id="0" N="0" Source="images/53794121.GreatHornedOwlCloseUp.xml">
<Size Width="800" Height="554" />
</I>
<I Id="1" N="1" Source="images/Commercial-product-photography-of-headphones.xml">
<Size Width="950" Height="485" />
</I>
<I Id="2" N="2" Source="images/GreatCrestedGrebe20.xml">
<Size Width="800" Height="566" />
</I>
<I Id="3" N="3" Source="images/great-northern-diver-dsg.xml">
<Size Width="700" Height="500" />
</I>
</Items>
</Collection>
You can see from the above DZC or XML file content that it uses numbers starting from 0 to whatever the max number as the Id attribute. Whatever is mentioned in the Img attribute of the Item node relates to the Id attribute in this DZC file. The logic is that the XML file url mentioned in the Source attribute will hold some image related attributes and there will be a folder with the same name as that of the XML file mentioned in the Source attribute. The folder with the same name as that of the XML file mentioned in the Source attribute will hold all the images for the particular Item. Huff explaining this simple logic is really a pain. Anyways lets see the content of the XML file mentioned in the Source attribute.
<?xml version="1.0" encoding="utf-8"?>
<Image TileSize="254" Overlap="1" Format="jpg" ServerFormat="Default"
xmlns="http://schemas.microsoft.com/deepzoom/2009">
<Size Width="800" Height="554" />
</Image>
The above XML contents details about the images like its format, TileSize, Width etc. The other attributes of the item node are as follows.
Id: Next attribute in the Item node is Id which gives an unique ID to the item in the Items collection.
Href: Href attribute will have a url clicking on which the user will navigated to the url. The url can be anything which gives more info about the product.
Name: The name of the item. Name attribute will be displayed in the info panel on the right side of the pivot control.
Description node
The Description node is child node in the Item node. The Description node has an explanation about the node and this description gets displayed in the info panel just below the header name in the info panel.
Facets
The next child node in the CXML is the Facets node. The node is just a collection container which contains one or more Facet node.
Facet
Facet node is the child element of the Facets node in a Item node. The Facet node has only one attribute called Name. Name provided in this attribute should match the Name attribute of the FacetCategory node. Facet node acts as a container for defining the various properties of the FacetCategory of an item. You can think Facet as container which defines the sub categories of the FacetCategory to which the Item belongs. An Item can belong to more than one FacetCategory. The Facet can have only any of the following as child elements.
- String: Can contain a string value for the Facet node.
- LongString: The value provided in the value string will not be displayed in the filter panel. LongString value will be displayed on the info panel on the right side of the pivot control. LongString is used to display long descriptions about the item in the info panel.
- Number: Used to provide number value for the item. If number type is used one will get a slider in the filter panel to drag and filter between the numbers values defined.
- DateTime: Needs to be used to provide DateTime value.
- Link: The Link node has two attributes namely Name and Href. Href takes a URL or “about:none” text as the value. Name can be used to provide name to the Link node.
That’s about the CXML. There are other nodes as well but just for the beginning this will serve the purpose.
To create Deep Zoom Images one can make use Deep Zoom Composer or Deep Zoom Tools command line utilities. Deep Zoom Composer is a Graphical User Interface (GUI) for creating DZCs where as Deep Zoom Tools command line utilities are part of the Deep Zoom tools library which can be freely downloaded. It consists of two executable name DZConvert.exe to convert image files into DZI formats and DZCollection.exe to convert DZI to DZC. Now developers will ask how they can programmatically convert images to DZI and DZC formats. Developers can make use of the DeepZoomTools.dll to convert images to the required format.
Whenever you have search requirement where you want to give a different experience to the end user with the help of images then go ahead and download Pivot control for Silverlight and convert your data to CXML and there you go. Silverlight PivotViewer can be downloaded from here.
