Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Question: Add multiple images to viewer using the Openslide Python API.

See original GitHub issue

Hello.

I’m new to OpenSeadragon and JavaScript in general, and i’m trying to view whole slide images using the Openslide Python API, which views WSIs on web browsers, utilizing OpenSeadragon. Basically, i’m using Flask to create URLs for the images i want to load and then create an OSD instance on a html page and load the images on it.

I have no problem loading a single image on a viewer. The problem is that, i call the viewer.addTiledImage() function with a tile source that is in .dzi format and the image is not added to the existing viewer. This is the html file with OpenSeadragon:

<!doctype html>
<meta charset="utf-8">
<title>{{ slide_filename }}</title>

<style type="text/css">
html {
    overflow: hidden;
}
body {
    margin: 0;
    padding: 0;
}
div#view {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    color: white;
}
</style>

<div id="view"></div>

<script type="text/javascript" src="{{ url_for('static', filename='jquery.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='openseadragon.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='openseadragon-scalebar.js') }}"></script>
<script type="text/javascript">
$(document).ready(function() {
    var viewer = new OpenSeadragon({
        id: "view",
        tileSources: "{{ slide_url }}",
        prefixUrl: "{{ url_for('static', filename='images/') }}",
        showNavigator: true,
        showRotationControl: true,
        animationTime: 0.5,
        blendTime: 0.1,
        constrainDuringPan: true,
        maxZoomPixelRatio: 2,
        minZoomLevel: 1,
        visibilityRatio: 1,
        zoomPerScroll: 2,
        timeout: 120000,
    });
    viewer.addHandler("open", function() {
        // To improve load times, ignore the lowest-resolution Deep Zoom
        // levels.  This is a hack: we can't configure the minLevel via
        // OpenSeadragon configuration options when the viewer is created
        // from DZI XML.
        viewer.source.minLevel = 8;
    });
    var mpp = parseFloat("{{ slide_mpp }}");
    viewer.scalebar({
        pixelsPerMeter: mpp ? (1e6 / mpp) : 0,
        xOffset: 10,
        yOffset: 10,
        barThickness: 3,
        color: '#555555',
        fontColor: '#333333',
        backgroundColor: 'rgba(255, 255, 255, 0.5)',
    });
	viewer.addTiledImage({
	tileSource: 'http://127.0.0.1:5000/templates/Test_004.tif_overlay.dzi',
	x: 0,
	y: 0,
	height: 1000,
	degrees: 90,
    });

});
</script>

The slide_url value is: http://127.0.0.1:5000/templates/Test_001.tif.dzi. Accessing this URL on the browser returns:

<Image Format="jpeg" Overlap="1" TileSize="254"><Size Height="89600" Width="86016"/></Image>

and accessing the URL of the tileSource in viewer.addTiledImage() views this:

<Image Format="jpeg" Overlap="1" TileSize="254"><Size Height="103936" Width="98304"/></Image>

Both images are .tif files, and as far as i can tell i get the .dzi files for both of them, in order to view them with OSD. Any help would be greatly appreciated.

Thanks in Advance.

Issue Analytics

State:
Created 6 years ago
Comments:12 (5 by maintainers)

Top GitHub Comments

3reactions

aris-angcommented, Mar 2, 2018

Hello Ryan.

I’m going to try to explain the functionality of the code so that i can help you the best i can. What happens is that openslide actually creates tiles of the initial image and a .dzi file that utilizes those tiles to view them on openseadragon. Openseadragon works only with .dzi files, not .tiff, .svs or other file types. The tile creation happens in tile and get_tile functions. The dzi and slide functions are responsible for creating the dzi files and rendering the html template respectively. If you take a look, the app route of the dzi function is path.dzi, which means that the dzi file you need to access for viewing the image is most probably at this url: http://127.0.0.1:5000/JP2K-33003-1.svs.dzi. I believe this should work if you haven’t modified the app routes of the functions, or other code too much.

Hope this helps.

0reactions

iangilmancommented, Mar 5, 2018

I’m unfamiliar with OpenSlide… can you tell me what {{slide_url}} expands to? You can just do a view source on that page and copy out that section. That might shed some light.

And yes, checking the browser console is also a good idea!

Top Results From Across the Web

OpenSlide Python 1.2.0 documentation

OpenSlide is a C library that provides a simple interface for reading whole-slide images, also known as virtual slides, which are high-resolution images...

Add multiple images to viewer using the Openslide Python API.

I'm new to OpenSeadragon and JavaScript in general, and i'm trying to view whole slide images using the Openslide Python API, which views...

266 - Openslide library for whole slide images - YouTube

OpenSlide can read virtual slides in several formats: Aperio (.svs, ... zoom level. pip install openslide - python then download the latest ...

How to display whole-slide Images (virtual slides) using the ...

How to display whole-slide Images (virtual slides) using the OpenSlide Python library? (Not using a web based viewer) · Ask Question. Asked 2...

Converting an existing image into an Openslide compatible ...

Many digital pathology tools (e.g., our quality control tool, HistoQC), employ Openslide, a library for reading whole slide images (WSI).