Have you ever wanted to put a digital slide in your web page? Not a piece of a slide, but a whole slide? Well, one of the cool things you can do with Aperio's WebScope viewer is to embed it in your web page. Anyone can do this, anywhere, for free! (As long as the slide is hosted on an Aperio Spectrum system somewhere, such as our slidehosting.com service.)
Here's an example:
How easy is this to do? Well, just copy the following JavaScript and HTML into your web page at the point where you want the slide to be displayed:
<script type="text/javascript">
var vwidth, vheight, nx, ny, nwidth, nheight, zoom;
vwidth = 450; // set width of viewing window
vheight = 350; // set height of viewing window
nwidth = Math.round(vwidth / 3);
nheight = Math.round(vheight / 3);
nx = vwidth - nwidth - 5 - 1;
ny = 5;
zoom = -1;
awvhost="images2.aperio.com"; // set server with image
awvimage="Derm1.svs"; // set image name
awviewer="html/awv.swf";
awvvars = "awvImagePath=AWVIMAGE.apr&awvX=0.0&awvY=0.0&awvZoom=ZOOM&awvToolbar=1&awvNavWindow=1&awvSlider=1&awvGetURLBtn=0&awvAppMag=20&awvNavX=NX&awvNavY=NY&awvNavWidth=NWIDTH&awvNavHeight=NHEIGHT&awvHideAnnotations=";
function setDim(html) {
html = html.replace("AWVVARS", awvvars);
html = html.replace("AWVIMAGE", "http://"+awvhost+"/"+awvimage);
html = html.replace("AWVIEWER", "http://"+awvhost+"/"+awviewer);
html = html.replace("VWIDTH", vwidth);
html = html.replace("VHEIGHT", vheight);
html = html.replace("NX", nx);
html = html.replace("NY", ny);
html = html.replace("NWIDTH", nwidth);
html = html.replace("NHEIGHT", nheight);
html = html.replace("ZOOM", zoom);
document.write(html);
}
</script>
<table style="border: solid 2px black" cellpadding=0 cellspacing=0><tr><td>
<script type=text/javascript>setDim('<object id="theMovie" width=VWIDTH height=VHEIGHT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="AWVIEWER"><param name="FlashVars" value="AWVVARS">')</script>
<script type=text/javascript>setDim('<embed name="theMovie" width=VWIDTH height=VHEIGHT src="AWVIEWER" FlashVars="AWVVARS" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">')</script>
</embed>
</object>
</td></tr></table>
There are only two things to set, the dimensions of the viewing window, and the server name and image file where the image is located (highlighted in blue above).
Please try it - nothing makes a point in pathology like a digital slide!