examples/deepzoom: Show scale bar when MPP is known

<meta charset="utf-8"> ensures the "micro" symbol renders correctly in
viewers written by deepzoom_tile.py.

Author: bgilbert

examples/deepzoom/deepzoom_multiserver.py

@@ -2,7 +2,7 @@
 #
 # deepzoom_multiserver - Example web application for viewing multiple slides
 #
-# Copyright (c) 2010-2014 Carnegie Mellon University
+# Copyright (c) 2010-2015 Carnegie Mellon University
 #
 # This library is free software; you can redistribute it and/or modify it
 # under the terms of version 2.1 of the GNU Lesser General Public License
@@ -21,6 +21,7 @@
 from collections import OrderedDict
 from flask import Flask, abort, make_response, render_template, url_for
 from io import BytesIO
+import openslide
 from openslide import OpenSlide, OpenSlideError
 from openslide.deepzoom import DeepZoomGenerator
 import os
@@ -60,7 +61,16 @@ def get(self, path):
                 slide = self._cache.pop(path)
                 self._cache[path] = slide
                 return slide
-        slide = DeepZoomGenerator(OpenSlide(path), **self.dz_opts)
+
+        osr = OpenSlide(path)
+        slide = DeepZoomGenerator(osr, **self.dz_opts)
+        try:
+            mpp_x = osr.properties[openslide.PROPERTY_NAME_MPP_X]
+            mpp_y = osr.properties[openslide.PROPERTY_NAME_MPP_Y]
+            slide.mpp = (float(mpp_x) + float(mpp_y)) / 2
+        except (KeyError, ValueError):
+            slide.mpp = 0
+
         with self._lock:
             if path not in self._cache:
                 if len(self._cache) == self.cache_size:
@@ -127,7 +137,7 @@ def slide(path):
     slide = _get_slide(path)
     slide_url = url_for('dzi', path=path)
     return render_template('slide-fullpage.html', slide_url=slide_url,
-            slide_filename=slide.filename)
+            slide_filename=slide.filename, slide_mpp=slide.mpp)
 
 
 @app.route('/<path:path>.dzi')

examples/deepzoom/deepzoom_server.py

@@ -2,7 +2,7 @@
 #
 # deepzoom_server - Example web application for serving whole-slide images
 #
-# Copyright (c) 2010-2014 Carnegie Mellon University
+# Copyright (c) 2010-2015 Carnegie Mellon University
 #
 # This library is free software; you can redistribute it and/or modify it
 # under the terms of version 2.1 of the GNU Lesser General Public License
@@ -20,6 +20,7 @@
 
 from flask import Flask, abort, make_response, render_template, url_for
 from io import BytesIO
+import openslide
 from openslide import ImageSlide, open_slide
 from openslide.deepzoom import DeepZoomGenerator
 from optparse import OptionParser
@@ -66,6 +67,12 @@ def load_slide():
         app.associated_images.append(name)
         slug = slugify(name)
         app.slides[slug] = DeepZoomGenerator(ImageSlide(image), **opts)
+    try:
+        mpp_x = slide.properties[openslide.PROPERTY_NAME_MPP_X]
+        mpp_y = slide.properties[openslide.PROPERTY_NAME_MPP_Y]
+        app.slide_mpp = (float(mpp_x) + float(mpp_y)) / 2
+    except (KeyError, ValueError):
+        app.slide_mpp = 0
 
 
 @app.route('/')
@@ -74,7 +81,8 @@ def index():
     associated_urls = dict((name, url_for('dzi', slug=slugify(name)))
             for name in app.associated_images)
     return render_template('slide-multipane.html', slide_url=slide_url,
-            associated=associated_urls, properties=app.slide_properties)
+            associated=associated_urls, properties=app.slide_properties,
+            slide_mpp=app.slide_mpp)
 
 
 @app.route('/<slug>.dzi')

examples/deepzoom/deepzoom_tile.py

@@ -2,7 +2,7 @@
 #
 # deepzoom_tile - Convert whole-slide images to Deep Zoom format
 #
-# Copyright (c) 2010-2014 Carnegie Mellon University
+# Copyright (c) 2010-2015 Carnegie Mellon University
 #
 # This library is free software; you can redistribute it and/or modify it
 # under the terms of version 2.1 of the GNU Lesser General Public License
@@ -23,6 +23,7 @@
 from __future__ import print_function
 import json
 from multiprocessing import Process, JoinableQueue
+import openslide
 from openslide import open_slide, ImageSlide
 from openslide.deepzoom import DeepZoomGenerator
 from optparse import OptionParser
@@ -186,10 +187,17 @@ def _write_html(self):
         template = env.get_template('slide-multipane.html')
         associated_urls = dict((n, self._url_for(n))
                     for n in self._slide.associated_images)
+        try:
+            mpp_x = self._slide.properties[openslide.PROPERTY_NAME_MPP_X]
+            mpp_y = self._slide.properties[openslide.PROPERTY_NAME_MPP_Y]
+            mpp = (float(mpp_x) + float(mpp_y)) / 2
+        except (KeyError, ValueError):
+            mpp = 0
         # Embed the dzi metadata in the HTML to work around Chrome's
         # refusal to allow XmlHttpRequest from file:///, even when
         # the originating page is also a file:///
         data = template.render(slide_url=self._url_for(None),
+                    slide_mpp=mpp,
                     associated=associated_urls,
                     properties=self._slide.properties,
                     dzi_data=json.dumps(self._dzi_data))

examples/deepzoom/templates/slide-fullpage.html

@@ -1,4 +1,5 @@
 <!doctype html>
+<meta charset="utf-8">
 <title>{{ slide_filename }}</title>
 
 <style type="text/css">
@@ -23,6 +24,7 @@
 
 <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({
@@ -47,5 +49,16 @@
         // 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)',
+    });
 });
 </script>

examples/deepzoom/templates/slide-multipane.html

@@ -1,4 +1,5 @@
 <!doctype html>
+<meta charset="utf-8">
 <title>Slide Viewer</title>
 
 <style type="text/css">
@@ -74,7 +75,8 @@
 <div id="images">
     <h1>View</h1>
     <div class="current-slide">
-        <a class="load-slide" href="#" data-url="{{ slide_url }}">Slide</a>
+        <a class="load-slide" href="#" data-url="{{ slide_url }}"
+                data-mpp="{{ slide_mpp }}">Slide</a>
     </div>
     <h2>Associated images</h2>
     {% if associated %}
@@ -109,6 +111,7 @@ <h1>Slide properties</h1>
 
 <script type="text/javascript" src="static/jquery.js"></script>
 <script type="text/javascript" src="static/openseadragon.js"></script>
+<script type="text/javascript" src="static/openseadragon-scalebar.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
     var dzi_data = {{ dzi_data|default('{}')|safe }};
@@ -132,7 +135,7 @@ <h1>Slide properties</h1>
         viewer.source.minLevel = 8;
     });
 
-    function open_slide(url) {
+    function open_slide(url, mpp) {
         var tile_source;
         if (dzi_data[url]) {
             // DZI XML provided as template argument (deepzoom_tile.py)
@@ -144,13 +147,23 @@ <h1>Slide properties</h1>
             tile_source = url;
         }
         viewer.open(tile_source);
+        viewer.scalebar({
+            pixelsPerMeter: mpp ? (1e6 / mpp) : 0,
+            xOffset: 10,
+            yOffset: 10,
+            barThickness: 3,
+            color: '#555555',
+            fontColor: '#333333',
+            backgroundColor: 'rgba(255, 255, 255, 0.5)',
+        });
     }
 
-    open_slide("{{ slide_url }}");
+    open_slide("{{ slide_url }}", parseFloat('{{ slide_mpp }}'));
     $(".load-slide").click(function(ev) {
         $(".current-slide").removeClass("current-slide");
         $(this).parent().addClass("current-slide");
-        open_slide($(this).attr('data-url'));
+        open_slide($(this).attr('data-url'),
+                parseFloat($(this).attr('data-mpp')));
         ev.preventDefault();
     });
 });