openseadragon/www/tilesource-legacy.html

<h2>example: legacy image pyramids</h2>

<p>
    A "legacy image pyramid" (LIP) just means you can finally make use of your
    existing images without pregenerating or dynamically creating image tiles. 
    Web developers have commonly created derivatives of various sizes
    that are intended for use for different web presentations or for download, 
    like "thumbnail",  "detail", and "best" etc.  This is already a simple pyramid 
    and you can use them to create a simple deep zoom presenation with OpenSeadragon!
</p>

<div class="description">
    <h3>XMLHTTPRequest for LIP JSON</h3>
    <p>
        The LIP format is implied by a tile source specified as a string (URL)
        and which does not have the </em>.js</em> extension.  The information
        is loaded via AJAX and inspection of the content of the url is used to
        determine if it is JSON or XML formatted.
    </p>
</div>
<div class="demoarea">
    <div class="demoheading">
        Example XMLHTTPRequest for LIP ( XML or JSON )
    </div>
    <div id="example-xmlhttprequest" 
         class="openseadragon">
        <script type="text/javascript">
            OpenSeadragon({
                id:            "example-xmlhttprequest",
                prefixUrl:     "/openseadragon/images/",
                tileSources:   "/openseadragon/examples/images/rbc/rbc0001/2003/rosen.xml",
                showNavigator:  true
            });
        </script>
        <noscript>
            <p>Deep zoom is not available unless javascript is enabled.</p>
            <img src='/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg'
                 height='600'/>
        </noscript>
    </div>
    <p>
        Below is a sample LIP file formatted as JSON.
    </p>
<pre>
{
    type: 'legacy-image-pyramid',
    levels:[{
        url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001q.jpg',
        height: 889,
        width:  600
    },{
        url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001r.jpg',
        height: 2201,
        width:  1485
    },{
        url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg',
        height: 4402,
        width:  2970
    }]
}
</pre>
<p>
 Or the equivalent XML:
</p>
<pre>
&lt;image type='legacy-image-pyramid'>
    &lt;level
        url='/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001q.jpg'
        height='889'
        width='600'/>
    &lt;level
        url='/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001r.jpg'
        height='2201'
        width='1485'/>
    &lt;level
        url='/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg'
        height='4402'
        width='2970'/>
&lt;/image>
</pre>
<p>
    Configuration is done via the 'tileSources' option ( or programatically ).
</p>
<pre>
OpenSeadragon({
    ...
    tileSources:   "/openseadragon/examples/images/rbc/rbc0001/2003/rosen.xml",
    ...
});</pre>
</div>



<div class="description">
    <h3>JSONP Request for LIP JSON</h3>
    <p>
        The LIP JSONP format is implied by a tile source specified as a string
        and which has the </em>.js</em> extension.  The remainder of the
        file name is expected to match the jsonp callback 
        the example below illustrates
    </p>
</div>
<div class="demoarea">
    <div class="demoheading">
        Example JSONPRequest for DZI JSON
    </div>
    <div id="example-jsonprequest" 
         class="openseadragon">
        <script type="text/javascript">
            OpenSeadragon({
                id:            "example-jsonprequest",
                prefixUrl:     "/openseadragon/images/",
                tileSources:   "/openseadragon/examples/images/rbc/rbc0001/2003/rosen.js",
                showNavigator:  true
            });
        </script>
        <noscript>
            <p>Deep zoom is not available unless javascript is enabled.</p>
            <img src='/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg'
                 height='600'/>
        </noscript>
    </div>
    <p>
        Below is a sample DZI file formatted as JSONP.
    </p>
<pre>
rosen({
    type: 'legacy-image-pyramid',
    levels:[{
        url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001q.jpg',
        height: 889,
        width:  600
    },{
        url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001r.jpg',
        height: 2201,
        width:  1485
    },{
        url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg',
        height: 4402,
        width:  2970
    }]
});</pre>
    <p>
        Configuration is done via the 'tileSources' option ( or programatically ).
    </p>
<pre>
OpenSeadragon({
    ...
    tileSources:   "/openseadragon/examples/images/rbc/rbc0001/2003/rosen.js",
    ...
});</pre>
</div>



<div class="description">
    <h3>Inline Configuration for Legacy Tile Sources</h3>
    <p>
    We currently only support Legacy Tile Sources configured inline as the example
    below demonstrates.  
    </p>
</div>

<div class="demoarea">
    <div class="demoheading">
        Example Inline Configuration for Legacy Tile Sources
    </div>
    <div id="inline-configuration" 
         class="openseadragon"></div>
</div>

<script type="text/javascript">
    // Example
    OpenSeadragon({
        id: "inline-configuration",
        prefixUrl: "/openseadragon/images/",
        showNavigator: true,
        tileSources: {
            type: 'legacy-image-pyramid',
            levels:[{
                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001q.jpg',
                height: 889,
                width:  600
            },{
                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001r.jpg',
                height: 2201,
                width:  1485
            },{
                url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg',
                height: 4402,
                width:  2970
            }]
        }
    });

</script>

<p>
   The Legacy Tile Source has not been described as an official 'specification',
   though we would like to eventually create a specification for it because
   of how useful it can be to create interactive zoom interfaces using existing 
   web derivatives.  <em> As such it may change though the goal is to keep it very
   simple and similar to the examples provided below.</em>
</p>

<pre>
OpenSeadragon({
    ...
    tileSources: {
        type: 'legacy-image-pyramid',
        levels:[{
            url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001q.jpg',
            height: 889,
            width:  600
        },{
            url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001r.jpg',
            height: 2201,
            width:  1485
        },{
            url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg',
            height: 4402,
            width:  2970
            
        }]
    }
    ...
});
</pre>

<div class="description">
    <h3>One example showing an image with a different aspect ratio.s</h3>
</div>

<div class="demoarea">
    <div class="demoheading">
        One final example.
    </div>
    <div id="aspect-ratio" 
         class="openseadragon"></div>
</div>

<script type="text/javascript">
    // Example
    OpenSeadragon({
        id: "aspect-ratio",
        prefixUrl: "/openseadragon/images/",
        showNavigator: true,
        tileSources: {
            type: 'legacy-image-pyramid',
            levels:[{
                url: '/openseadragon/examples/images/highsmith/09250r.jpg',
                height: 427,
                width:  640
            },{
                url: '/openseadragon/examples/images/highsmith/09250v.jpg',
                height: 683,
                width:  1024
            }]
        }
    });

</script>