IMServer:WebClient: Difference between revisions

From KitwarePublic
Jump to navigationJump to search
(Created page with "category:Connectome Current web client is implemented by using OpenLayers javascript API * Whenever a client viewing area changes (Due to pan / zoom) * The client determin...")
 
No edit summary
 
Line 1: Line 1:
[[category:Connectome]]
[[category:Connectome]]
= Browser based client =


Current web client is implemented by using OpenLayers javascript API
Current web client is implemented by using OpenLayers javascript API
Line 5: Line 7:
* Whenever a client viewing area changes (Due to pan / zoom)  
* Whenever a client viewing area changes (Due to pan / zoom)  
* The client determines the currently visible extent, and queries all the tiles covering current extent with optimal resolution.
* The client determines the currently visible extent, and queries all the tiles covering current extent with optimal resolution.
== Optimizations ==
# Tile size
# Server side improvements
=== References ===
# http://trac.mapfish.org/trac/mapfish/wiki/HowToOptimize
# http://dev.openlayers.org/docs/files/OpenLayers/Layer/Grid-js.html#OpenLayers.Layer.Grid.buffer


== Source code ==
== Source code ==

Latest revision as of 17:03, 1 March 2011


Browser based client

Current web client is implemented by using OpenLayers javascript API

  • Whenever a client viewing area changes (Due to pan / zoom)
  • The client determines the currently visible extent, and queries all the tiles covering current extent with optimal resolution.

Optimizations

  1. Tile size
  2. Server side improvements

References

  1. http://trac.mapfish.org/trac/mapfish/wiki/HowToOptimize
  2. http://dev.openlayers.org/docs/files/OpenLayers/Layer/Grid-js.html#OpenLayers.Layer.Grid.buffer


Source code

The javascript client code that executes from the web browser can be seen from the demos. Still, the significant code which queries the image tile is as follows -

function get_my_url (bounds)
  {
  var res = this.map.getResolution();
  var xVal = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
  var yVal = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));

  var zoom = this.map.getZoom();
  var zoomPow=Math.pow(2,zoom);
  var tileName = "t";
  for(var g=0; g < zoom; g++)
    {
    zoomPow = zoomPow / 2;
    if(yVal < zoomPow)
      {
      if(xVal < zoomPow)
        {
        tileName += "q";
        }
      else
        {
        tileName += "r";
        xVal -= zoomPow;
        }
      }
    else
      {
      if(xVal < zoomPow)
        {
        tileName += "t";
        yVal -= zoomPow;
        }
      else
        {
        tileName += "s";
        xVal -= zoomPow;
        yVal -= zoomPow;
        }
      }
    }
    if(imageIs3D)
      {
      return "http://paraviewweb.kitware.com:82/tiles3.py/n"+ currentSlice +"/" + tileName+".jpg";
      //return "http://konoha.kitwarein.com/tiles2/"+tileName+".jpg";
      //return baseName + currentSlice + "/" + tileName+".jpg"
      }
    else
      {
      return imageName + "/" + tileName + ".jpg"
      }
  }