Embedding Tissue Stack ....

There exists now an easy way of embedding a light-weight version of the TissueStack front-end in your site.

A very basic example of how to achieve this can be seen here: http://caivm1.qern.qcif.edu.au/embedded.html

Use your browser's source view ability to see how it's done (e.g. Ctrl + U for chrome and firefox)

The 3 steps required to integrate Mini Tissue Stack are:

  • Include JQuery, version 1.7 or higher and TissueStack.Embedded.js, e.g:
<script src="js/libs/jquery/jquery-1.7.1.js"></script>

<script src="js/TissueStack.Embedded.js"></script> 
  • Create an instance of TissueStack.Embedded, e.g:
<script type="text/javascript">
$(document).ready(function() {
new TissueStack.Embedded(
"test", // id of parent div that will hold the TissueStack Canvas elements

"caivm1.qern.qcif.edu.au", // server name of the TissueStack instance that houses the data as well as the js and css
3, // id of data set that is requested
true, // display cross hair canvas on top (defaults to: true)
false); // use direct querying as opposed to pre tiles (defaults to: false)

  • Add a div that serves to be the container for the html elements that make up Tissue Stack, e.g.
<div id="test" style="margin: 10px; float:left; width: 500px; height: 500px;"></div>

A few notes that may be useful for the above process:

  • You can use the Tissue Stack Server instance that you'd like to connect to in order to get the 2 mandatory java scripts included (step 1)
  • You may query the Tissue Stack Server instance in question for data sets:
http://caivm1.qern.qcif.edu.au/backend/data/list which will give you a list of what's available including the individual ids that are then needed when instantiating the TissueStack.Embedded object (see step 2)

  • Use explicit width and height for your div in step 3, otherwise you are at the mercy of your layout/browser and it can happen that either height or width will be 0! 

Limitations in the embedded version are:

  • no slider for 3 plane view
  • no coordinate and extent info display
  • no color ranges
  • no coordinate focus 

No comments:

Post a Comment