Difference between revisions of "ViSUS WebViewer"

From
Jump to: navigation, search
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
You can visualize interactively your data from a browser putting a simple javascript script in your webpage, as in the following example:
 
You can visualize interactively your data from a browser putting a simple javascript script in your webpage, as in the following example:
  
−
<pre>
+
<syntaxhighlight lang="html">
 
<html>
 
<html>
−
 
 
<head>
 
<head>
 
     <meta charset='utf-8'>
 
     <meta charset='utf-8'>
 
     <title>David Powered by Visus</title>
 
     <title>David Powered by Visus</title>
 
     <script src="https://openseadragon.github.io/openseadragon/openseadragon.min.js"></script>
 
     <script src="https://openseadragon.github.io/openseadragon/openseadragon.min.js"></script>
−
     <script src="https://rawgit.com/sci-visus/visus_javascript/master/visus2.js" ></script>
+
     <script src="https://rawgit.com/sci-visus/visus_javascript/master/src/VisusGetTileSources.js" ></script>
 
</head>
 
</head>
  
Line 18: Line 17:
 
         OpenSeadragon({
 
         OpenSeadragon({
 
             id: "openseadragon1",
 
             id: "openseadragon1",
−
             prefixUrl: "https://raw.githubusercontent.com/openseadragon/svg-overlay/master/openseadragon/images/",
+
             prefixUrl: "https://raw.githubusercontent.com/openseadragon/openseadragon/master/images/",
 
             showNavigator: true,
 
             showNavigator: true,
 
             debugMode: false,
 
             debugMode: false,
 +
 
             tileSources: getTileSources("http://atlantis.sci.utah.edu", "david_subsampled", 29280, 70416, 32, 512, bXRoad)
 
             tileSources: getTileSources("http://atlantis.sci.utah.edu", "david_subsampled", 29280, 70416, 32, 512, bXRoad)
 
         });
 
         });
Line 27: Line 27:
 
</body>
 
</body>
 
</html>
 
</html>
−
</pre>
+
</syntaxhighlight>
  
−
This will include a ViSUS WebViewer in your page that will allow to navigate one or more high resolution images (i.e. in this example the dataset called "david_subsampled").
+
This small piece of code will include a ViSUS WebViewer in your page that will allow to navigate one or more high resolution images (i.e. in this example the dataset called "david_subsampled").
  
−
You can see a live demo of this script at this [http://rawgit.com/sci-visus/visus_javascript/master/david.html link].
+
You can see a '''live demo''' of this viewer at this [http://visus.org/viewer/examples/david.html link].
  
 
To customize the viewer script to visualize your data you need to change the getTileSources parameter according to the following definition:
 
To customize the viewer script to visualize your data you need to change the getTileSources parameter according to the following definition:
  
−
<code>getTileSources(server_URL, dataset_name, x_dim, y_dim,  bitmask_length-1, tile_size, false)</code>
+
<syntaxhighlight lang="javascript">
 +
getTileSources(server_URL, dataset_name, x_dim, y_dim,  bitmask_length-1, tile_size, false)</syntaxhighlight>
 +
 
 +
You can get the x_dim and y_dim information querying the server using the following API call:
 +
<syntaxhighlight lang="bash">
 +
curl -A visus "http://atlantis.sci.utah.edu/mod_visus?action=readdataset&dataset=david_subsampled"
 +
</syntaxhighlight>
 +
For more information about the server API refer to [[ViSUS_Server#Supported_Requests|ViSUS Server Supported Requests]].
 +
 
 +
This call will produce the following output:
 +
<syntaxhighlight lang="bash">
 +
(version)
 +
6
 +
(logic_to_physic)
 +
1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1
 +
(box)
 +
0 29279 0 70415 0 0 0 0 0 0
 +
(fields)
 +
data uint8[3] compressed format(0) default_value(0)
 +
(bits)
 +
V11010101010101010101010101010101
 +
(bitsperblock)
 +
16
 +
(blocksperfile)
 +
256
 +
(interleave block)
 +
0
 +
(time)
 +
0 3 time_%02d/
 +
</syntaxhighlight>
  
−
In particular the ''bitmask_length'' can be obtained counting the digits in the (bitmask) field of your IDX file.
+
Looking at the (box) field we can obtain the dimensions of the data. The box field represents the extents in N dimensions of the dataset. So for example this dataset has x_dim=29280 (29279 - 0 + 1), and y_dim 70416.
 +
The ''bitmask_length'' can be obtained counting the digits in the (bitmask) field of the dataset, in this case 32.
  
 
For more code examples go to our GitHub repo: [https://github.com/sci-visus/visus_javascript GItHub ViSUS WebViewer]
 
For more code examples go to our GitHub repo: [https://github.com/sci-visus/visus_javascript GItHub ViSUS WebViewer]

Latest revision as of 21:37, 20 December 2018

You can visualize interactively your data from a browser putting a simple javascript script in your webpage, as in the following example: 

<html>
<head>
    <meta charset='utf-8'>
    <title>David Powered by Visus</title>
    <script src="https://openseadragon.github.io/openseadragon/openseadragon.min.js"></script>
    <script src="https://rawgit.com/sci-visus/visus_javascript/master/src/VisusGetTileSources.js" ></script>
</head>

<body>

    <div id="openseadragon1" class="openseadragon" style="width:100%; height:100%;background-color: black;"></div>
    <script type="text/javascript">
        var bXRoad=false;
        OpenSeadragon({
            id: "openseadragon1",
            prefixUrl: "https://raw.githubusercontent.com/openseadragon/openseadragon/master/images/",
            showNavigator: true,
            debugMode: false,

            tileSources: getTileSources("http://atlantis.sci.utah.edu", "david_subsampled", 29280, 70416, 32, 512, bXRoad)
        });
    </script>

</body>
</html>

This small piece of code will include a ViSUS WebViewer in your page that will allow to navigate one or more high resolution images (i.e. in this example the dataset called "david_subsampled").

You can see a live demo of this viewer at this link.

To customize the viewer script to visualize your data you need to change the getTileSources parameter according to the following definition: 

getTileSources(server_URL, dataset_name, x_dim, y_dim,  bitmask_length-1, tile_size, false)

You can get the x_dim and y_dim information querying the server using the following API call: 

curl -A visus "http://atlantis.sci.utah.edu/mod_visus?action=readdataset&dataset=david_subsampled"

For more information about the server API refer to ViSUS Server Supported Requests.

This call will produce the following output: 

(version)
6
(logic_to_physic)
1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1
(box)
0 29279 0 70415 0 0 0 0 0 0
(fields)
data uint8[3] compressed format(0) default_value(0) 
(bits)
V11010101010101010101010101010101
(bitsperblock)
16
(blocksperfile)
256
(interleave block)
0
(time)
0 3 time_%02d/

Looking at the (box) field we can obtain the dimensions of the data. The box field represents the extents in N dimensions of the dataset. So for example this dataset has x_dim=29280 (29279 - 0 + 1), and y_dim 70416. The bitmask_length can be obtained counting the digits in the (bitmask) field of the dataset, in this case 32.

For more code examples go to our GitHub repo: GItHub ViSUS WebViewer

Retrieved from "http://wiki.visus.org/index.php?title=ViSUS_WebViewer&oldid=390"