Archive

Posts Tagged ‘Pivot’

HowTo: use PivotViewer in WPF

PivotViewer is an impressive Silverlight control (see my usage at http://gallery.clipflair.net), however Microsoft never released it for WPF.

One could work arround this by embedding Silverlight in their WPF app using the WebBrowser control and talking to it via the JavaScript Bridge of Silverlight, however they could also embed one of those HTML5 PivotViewer-compatible controls that have surfaced in recent years.

Apart from LobsterPot’s HTML5 PivotViewer and its older free version, for another HTML5 PivotViewer (and also a DeepZoom implementation for HTML5) you could host that comes from former SeaDragon team members at Microsoft and seems to work very well see:

http://seajax.github.io/

https://github.com/seajax/seajax/tree/master/v2/app/pivot

https://github.com/seajax/seajax/blob/master/v2/app/pivot/quickstart.html

https://github.com/seajax/seajax

Note that the WebBrowser control uses IE7 or something as HTML engine by default and you need some meta markup at the top of your HTML to tell it to use Edge mode – the latest IE engine that is installed)

<meta http-equiv="X-UA-Compatible" content="IE=edge">

HowTo: Group output items using XSL transformation

While trying to generate a single HTML page that will list all ClipFlair activities using XSL Transformations (XSLT), I had the need to group items in 2-column rows.

This is my contribution to other solutions suggested at (if you like it you can vote it up there):

http://stackoverflow.com/questions/9908488/xslt-for-each-wrapping-every-nth-item-in-a-div/


Faced by the same problem, that is wanting to output

<div class="container">
  <div class="row">
    <div class="col">...</div>
    <div class="col"/>...</div>
  </div>
  <div class="row">
  ...
  </div>
</div>

from a CXML (Collection XML) file (http://gallery.clipflair.net/collection/activities.cxml – the data behind the PivotViewer display at http://gallery.clipflair.net/activity)

I coined up the following, based on other suggestions here, but using "mode" attribute of "template" and "apply-templates" XSL tags instead which make it cleaner I believe:

<?xml version="1.0" encoding="UTF-8"?>
<?altova_samplexml http://gallery.clipflair.net/collection/activities.cxml?>

<xsl:stylesheet 
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:cxml="http://schemas.microsoft.com/collection/metadata/2009"
  exclude-result-prefixes="cxml"
  >

  <xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes"/>
  <xsl:param name="COLUMNS" select="2"/>

  <!-- ########################### -->

  <xsl:template match="/">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>ClipFlair Activities</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
      </head>
      <body>
        <xsl:apply-templates/>
      </body>
    </html>
  </xsl:template>

  <!-- ########################### -->

  <xsl:template match="cxml:Collection">
    <div class="container">
      <xsl:apply-templates/>
    </div>
  </xsl:template>

  <!-- ########################### -->

  <xsl:template match="cxml:Items">
    <xsl:apply-templates 
select="cxml:Item[position() mod $COLUMNS = 1]" mode="row"/> </xsl:template> <!-- ########################### --> <xsl:template match="cxml:Item" mode="row"> <div class="row"> <div>----------</div> <xsl:apply-templates
select=".|following-sibling::cxml:Item[position() &lt; $COLUMNS]" mode="col"/> </div> </xsl:template> <xsl:template match="cxml:Item" mode="col"> <xsl:variable name="URL" select="@Href"/> <xsl:variable name="FILENAME"
select="cxml:Facets/cxml:Facet[@Name='Filename']/cxml:String/@Value"/> <div class="col"> <xsl:value-of select="$FILENAME"/> --- <xsl:value-of select="$URL"/> </div> </xsl:template> <!-- ########################### --> <xsl:template match="*"> <xsl:apply-templates/> </xsl:template> <xsl:template match="text()|@*"> </xsl:template> </xsl:stylesheet>

the output from the above when run in Altova XMLSpy tool (note that it uses altova_samplexml processor instruction to find the XML data) is:


2DaysInParis-OpenActivity-CapRev-FR-EN.clipflair --- http://studio.clipflair.net/?activity=2DaysInParis-OpenActivity-CapRev-FR-EN.clipflair
Abu_Dukhan-CapRev-A1-AR.clipflair --- http://studio.clipflair.net/?activity=Abu_Dukhan-CapRev-A1-AR.clipflair
----------

AFarewellToArms-RevCap-C2-EN.clipflair --- http://studio.clipflair.net/?activity=AFarewellToArms-RevCap-C2-EN.clipflair
agComhaireamhCountingRND.clipflair --- http://studio.clipflair.net/?activity=agComhaireamhCountingRND.clipflair

----------

Al-imtihan-CapRev-B1-AR.clipflair --- http://studio.clipflair.net/?activity=Al-imtihan-CapRev-B1-AR.clipflair
AlBar-Cap-B1-B2-IT.clipflair --- http://studio.clipflair.net/?activity=AlBar-Cap-B1-B2-IT.clipflair

...

PivotViewer for a rich search experience

For ClipFlair, I’m looking into implementing advanced search using Silverlight PivotViewer

Update: 

You can now check out ClipFlair Gallery in all its PivotViewer with DeepZoom glory.

A really nice example of PivotViewer search is at:

http://www.appletoncompassion.org/VirtualExhibitViewer

This may take long time to load, since its loading 10000 children art DeepZoom image tiles

You can use the mousewheel to zoom in there or the zoom slider at top-right (can also click an item to zoom to it)

See the filters at the left handside, play with them by selecting items there at the various properties to see the images get rearranged to show only ones selected by the filters.

Has also buttons at the top-right to bin the items based on having same values at properties selected

Another good example is Netflix movie catalog:
http://netflixpivot.cloudapp.net/
e.g. select Sort: Genre at top-right and click Graph View button there instead of the default Grid View to see the items get binned by Genre, then start filtering them down from the left handside bar

Also see a SharePoint sites collection search with PivotViewr:
http://www.wssdemo.com/livepivot/

MSDN magazine collection with PivotViewer:
http://pivot.blob.core.windows.net/msdn-magazine/msdnmagazinepivot.htm

Finally, for a nice series of Silverlight PivotViewer programming articles by Tony Champion see:

http://tonychampion.azurewebsites.net/blog/index.php/tag/pivotviewer/

http://pivotviewerlessons.codeplex.com/ (source code)

http://pivotviewer.championds.com/ (live examples)

BTW, people are also working on HTML5 PivotViewer:

http://www.rogernoble.com/2012/02/02/addressing-the-elephant-in-the-room-the-html5-pivotviewer/

http://lobsterpot.com.au/lobsterpot-html5-pivotviewer-now-open-source

http://lobsterpothtml5pv.codeplex.com/

http://lobsterpot.com.au/pivotviewer/api-reference

http://lobsterpot.com.au/pivotviewer/extending-the-html5-pivotviewer

http://pivot.lobsterpot.com.au/html5.htm (Live HTML5 Sample)

http://examples.hubbardone.com/html5/html5pivotviewer.htm (Live HTML5 Sample)

For developers, here are some direct links to .CXML (Collection XML) files:

http://gallery.clipflair.net/collection/activities.cxml
http://gallery.clipflair.net/collection/video.cxml
http://gallery.clipflair.net/collection/images.cxml

http://pivot.blob.core.windows.net/msdn-magazine/msdnmagazine.cxml
http://images.appletoncompassion.org/deepzoomfull/AppletonCompassionFull.cxml
http://www.esrc.ac.uk/Pivot/CXML/Grants/Grants.cxml
http://labs.championds.com/MIX10/MIX10Collection.cxml
http://spscollection.blob.core.windows.net/pivot/SharePoint.cxml
http://www.xpert360.net/SQLBits/Collection.cxml
http://pivot.metia.com/worldcup/wc2010-dz.cxml

By opening the .CXML file URL in a web browser you can see its XML-based structure.

By using ClipFlair Studio‘s Gallery component you can open most of those .CXML URLs and play with the respective collection (you use the wrench button on the Gallery component’s titlebar to turn it over and set the Source URL, then turn over again to see the collection – just wait a bit if it’s big and takes some time to load).  An alternative is to open in your browser a URL of the form http://studio.clipflair.net?gallery=http://spscollection.blob.core.windows.net/pivot/SharePoint.cxml

Not all of these URLs will work in ClipFlair Studio’s Gallery component though, because some servers may be using restrictive access policy files for Silverlight, not allowing a Silverlight app like ClipFlair Studio which is served from http://studio.clipflair.net to download the .CXML file.

%d bloggers like this: