Thursday 10 October 2013

Capture the moment...

Hey there,

So I have been working on this feature for PINV were you can share the exact configuration that you got while visualizing your interactions. This share URL can be by getting a url or by embedding PINV into your web site or blog. This makes me think in this blog, which I kind of unintentionally abandoned, so why not to write a post about the new feature demonstrating it on my blog and try to get me into the habit of writing again as a bonus.

Besides the capability of sharing a status, I have also worked in several other features, like resizing the nodes, linking to other services in the web, including legends for colors and sizes, what I'm saying is that there are a lot of new features there for you to explore, please play with the app and let me know any bugs, suggestions and comments on the forum: https://groups.google.com/group/pinv_biosual

So back to been able to include your visualization into your web, it is pretty easy and looks cool, just check it out here:

The idea behind this new feature is to allow to share and to collaborate in a simple way. Researchers can now explore their data using PINV and when they found something interesting, they can click into the share icon, copy the unique URL and send it to a collaborator who with this link can now open PINV and display all the features that the first researcher had used (e.g. queries, colors, zooming, re-location of nodes, etc.). For example you can go and check in PINV the configuration above by following this LINK.

The second scenario of the sharing feature is to included in your website and as you saw above is not only about the URL, but to include the whole PINV in the middle of your page, and yeah I know, there is nothing incredible new on it, I'm just following the same idea of things like google maps, you tube, prezi, etc. and actually following it a bit too close... the strategy of all of them, including PINV is to give the user a piece of HTML code that represents an iframe to include a compact version of the web content.
An iframe in HTML is an element to create a frame in your page where all its content is coming from a separate web page, it doesn't have to be in the same server, and therefore makes life easier at the moment of including a complete web application in the middle of another web page.
For instance, the youtube compact version doesn't include the side suggestions or the comments, it is limited to the video; and then when is included as an iframe in other page it looks like the video is part of the page.
Likewise PINV compact version only displays the graphic (network or circle layout) and hides any headers and side tools. Nonetheless those tools are still active, they have just been hidden, and if the link included in the iframe use any of this tools to get the final display it does it. For example, if the person sharing the visualization have used a rule to resize the nodes depending on a feature(e.g. closeness) this rule is executed on the iframe graphic, even when the panel of rules is not visible.

If you want to try it by yourself I'd suggest to go through this tutorial I made a month ago to get familiar with some other features in PINV. Once you get the final view, you can press on the share button, and get the link, I just did it and the link I got is this one: http://biosual.cbio.uct.ac.za/pinViewer.html?status=021f90c1e054674498cf87ecb9fb48b8.json, hopefully this result page looks similar to the one you created.

But if what you want is to included in your blog you can copy the HTML to Embed textfield content that should look similar to:
<iframe width="800" height="600" src="http://biosual.cbio.uct.ac.za/pinViewer.html?status=021f90c1e054674498cf87ecb9fb48b8.json&embedded=true" frameborder="0" allowfullscreen></iframe>

In blogger you can go to the HTML view and paste that, and that's it, your view is included in your blog, like here:
I'm going to avoid any technicalities right now, that's maybe material for another blog post.

As usual I'm looking forward to your comments, suggestions or bug reports, is the only way I really have to know if I'm on the right track.

Cheers!!