Getting Started with OpenSeaDragon and the IrisTileSource
OpenSeadragon is a dependency-free JavaScript library for viewing zoomable images. Follow the official OpenSeaDragon getting started documentation to get started.
Step 1: Create a Viewer Container
<div id="iris-viewer" style="width: 800px; height: 600px;"></div>Important: The container must have its own width and height!
Step 2: Use our Current OpenSeaDragon Pull Request in Your Page
<script src="https://examples.restful.irisdigitalpathology.org/openseadragon/openseadragon.min.js"></script>This will eventually be repaced with the offical OpenSeaDragon source when IrisTileSource is merged.
Step 3: Set Up the Iris TileSource
<script>
const viewer = OpenSeadragon({id: "iris-viewer"});
const tileSource = new OpenSeadragon.IrisTileSource({
// Set this Iris RESTful Example Domain as the Slide Server
serverUrl: "https://examples.restful.irisdigitalpathology.org",
slideId: "cervix_2x_jpeg", // For the file "cervix_2x_jpeg.iris"
crossOriginPolicy: "Anonymous" // Enable CORS for RESTful Example
}); // End new code
tileSource.addHandler('ready', function () {
viewer.open(tileSource);
});
</script>
Next Steps: Deploy your own Iris RESTful Server
docker run --rm -v${SLIDES_DIRECTORY}:/slides -p ${CONNECTION_PORT}:3000 ghcr.io/irisdigitalpathology/iris-restful:latest
Visit the Iris-Resful-Server Github Repository for a full explaination on setting up your own Iris server deployment.