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.