Difference between revisions of "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

@@ Line 38: / Line 38: @@
 getTileSources(server_URL, dataset_name, x_dim, y_dim,  bitmask_length-1, tile_size, false)</syntaxhighlight>
-In particular the ''bitmask_length'' can be obtained counting the digits in the (bitmask) field of your IDX file.
+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)
+(logic_to_physic)
+0 0 0 0 1 0 0 0 0 1 0 0 0 0 1
+(box)
+29279 0 70415 0 0 0 0 0 0
+(fields)
+data uint8[3] compressed format(0) default_value(0)
+(bits)
+V11010101010101010101010101010101
+(bitsperblock)
+(blocksperfile)
+(interleave block)
+(time)
+3 time_%02d/
+</syntaxhighlight>
+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]