Modified window/level example to include invert button to see that work

fixed bug with invert not invalidating the lut
Added support for toggling pixel repication on/off
Added firefox support for pixel replication
Added example for pixel replication

dist/cornerstone.css

@@ -1,4 +1,4 @@
-/*! cornerstone - v0.0.1 - 2014-04-12 | (c) 2014 Chris Hafey | https://github.com/chafey/cornerstone */
+/*! cornerstone - v0.0.1 - 2014-04-13 | (c) 2014 Chris Hafey | https://github.com/chafey/cornerstone */
 /* http://stackoverflow.com/questions/7615009/disable-interpolation-when-scaling-a-canvas*/
 .cornerstone-disable-interpolation {
     image-rendering: optimizeSpeed;             // Older versions of FF

dist/cornerstone.js

@@ -1,4 +1,4 @@
-/*! cornerstone - v0.0.1 - 2014-04-12 | (c) 2014 Chris Hafey | https://github.com/chafey/cornerstone */
+/*! cornerstone - v0.0.1 - 2014-04-13 | (c) 2014 Chris Hafey | https://github.com/chafey/cornerstone */
 (function () {
 
     "use strict";
@@ -74,14 +74,18 @@ var cornerstone = (function (cornerstone) {
     function getLut(image, viewport)
     {
         // if we have a cached lut and it has the right values, return it immediately
-        if(image.lut !== undefined && image.lut.windowCenter === viewport.windowCenter && image.lut.windowWidth === viewport.windowWidth) {
+        if(image.lut !== undefined &&
+           image.lut.windowCenter === viewport.windowCenter &&
+            image.lut.windowWidth === viewport.windowWidth &&
+            image.lut.invert === viewport.invert) {
             return image.lut;
         }
 
         // lut is invalid or not present, regenerate it and cache it
         image.lut = cornerstone.generateLut(image, viewport.windowWidth, viewport.windowCenter, viewport.invert);
         image.lut.windowWidth = viewport.windowWidth;
         image.lut.windowCenter = viewport.windowCenter;
+        image.lut.invert = viewport.invert;
         return image.lut;
     }
 
@@ -147,7 +151,12 @@ var cornerstone = (function (cornerstone) {
 
         // turn off image smooth/interpolation if pixelReplication is set in the viewport
         if(ee.viewport.pixelReplication === true) {
-            context.webkitImageSmoothingEnabled = false;
+            context.imageSmoothingEnabled = false;
+            context.mozImageSmoothingEnabled = false; // firefox doesn't support imageSmoothingEnabled yet
+        }
+        else {
+            context.imageSmoothingEnabled = true;
+            context.mozImageSmoothingEnabled = true;
         }
 
         // Draw the render canvas half the image size (because we set origin to the middle of the canvas above)

docs/backlog.md

@@ -24,16 +24,15 @@ Beyond v1.0:
  * more viewport functionality
      * Rotation (90, 180, 270, 0)
      * Flip (Horizontal / Vertical)
-     * non square pixels (pixel spacing is not the same vertically and horizontally)
      * Non linear LUTs (modality & voi)
-     * Turn on/off interpolation of image pixels
  * Performance related
    * switch to lower resolution image during ww/wc operation to improve framerate
-   * only regenerate rendered image if ww/wc changes - that way pan/zoom is faster
    * only regenerate the part of the rendered image that is actually visible - perhaps by tiling it
  * Pixel data management
      * Caching of pixel data to HTML5 local storage?
  * Packaging/build related
      * jquery plugin wrapper to make it easier to use with jquery
   * 3D functionality - MPR, MIP, Volume Rendering
   * Fusion (e.g. PET/CT, CT/MR)
+ * Create a CustomElement for cornerstone images http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
+   * use http://www.polymer-project.org/ to polyfill

docs/roadmap.md

@@ -5,15 +5,18 @@ Alpha but stable
 
 Phase 4 (in progress)
 ---------------------
+ * Turn on/off interpolation of image pixels (DONE)
+ * Performance optimization for zoom/pan operations (DONE)
+ * Example for invert functionality (DONE)
+ * Example for interpolation on/off (DONE)
  * Code cleanup / refactoring / documentation
- * Create a CustomElement for cornerstone images http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
-   * use http://www.polymer-project.org/ to polyfill
  * Consider moving setToFontCoordinateSystem and setToPixelCoordinateSystem to tools library?
    * might be best to consolidate them into one function and provide an optional fontScale
      parameter to trigger font scaling?
  * Consider moving the markup functionality to another library
  * Packaging/build related
      * packaged as a bower module
+ * Rendering of non square pixels (pixel spacing is not the same vertically and horizontally)
 
 Phase 3 (completed April 11, 2014)
 ---------------------

example/index.html

@@ -25,9 +25,10 @@ <h1>
         <li><a href="windowlevel/index.html">Windowing and leveling</a></li>
         <li><a href="zoompan/index.html">Zooming and panning</a></li>
         <li><a href="multiimage/index.html">Display two mri images and one ct image on the same page</a></li>
+        <li><a href="interpolation/index.html">Toggle on/of interpolation of pixels</a></li>
+        <li><a href="eventhandling/index.html">Event Handling</a></li>
         <li><a href="htmloverlays/index.html">HTML overlays</a></li>
         <li><a href="ctimage/index.html">CT Image</a></li>
-        <li><a href="eventhandling/index.html">Event Handling</a></li>
         <li><a href="imageloader/index.html">Custom ImageLoader</a></li>
     </ul>
 

example/interpolation/index.html

@@ -0,0 +1,87 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <!-- twitter bootstrap CSS stylesheet - not required by cornerstone -->
+    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
+
+    <!-- cornerstone css - provides some useful css classes -->
+    <link href="../../dist/cornerstone.css" rel="stylesheet">
+</head>
+<body>
+<div class="container">
+
+    <h1>
+        interpolation/index.html
+    </h1>
+
+    This is an example of turning on/off interpolation
+
+    <br>
+    <br>
+
+    <div id="dicomImage" style="width:512px;height:512px"
+         class="cornerstone-enabled-image"
+         oncontextmenu="return false"
+         unselectable='on'
+         onselectstart='return false;'
+         onmousedown='return false;'>
+    </div>
+
+    <button id="interpolation" class="btn">Toggle Interpolation</button>
+
+</div>
+</body>
+<!-- include the cornerstone library -->
+<script src="../../dist/cornerstone.js"></script>
+
+<!-- include special code for these examples which provides images -->
+<script src="../exampleImageIdLoader.js"></script>
+
+<!-- jquery - included to make things easier to demo, not needed or used by cornerstone -->
+<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
+
+<script>
+
+    // image enable the dicomImage element
+    var imageId = 'example://1';
+    var element = $('#dicomImage').get(0);
+    var viewportOptions = {
+        scale : 6.0
+    }
+    cornerstone.enable(element, imageId, viewportOptions);
+
+    $('#interpolation').click(function(e) {
+        var viewport = cornerstone.getViewport(element);
+        if(viewport.pixelReplication === true) {
+            viewport.pixelReplication = false;
+        } else {
+            viewport.pixelReplication = true;
+        }
+        cornerstone.setViewport(element, viewport);
+    });
+
+    // add event handlers to mouse move to adjust window/center
+    $('#dicomImage').mousedown(function(e) {
+        var lastX = e.pageX;
+        var lastY = e.pageY;
+
+        $(document).mousemove(function(e) {
+            var deltaX = e.pageX - lastX,
+                    deltaY = e.pageY - lastY ;
+            lastX = e.pageX;
+            lastY = e.pageY;
+
+            var viewport = cornerstone.getViewport(element);
+            viewport.windowWidth += (deltaX / viewport.scale);
+            viewport.windowCenter += (deltaY / viewport.scale);
+            cornerstone.setViewport(element, viewport);
+        });
+
+        $(document).mouseup(function(e) {
+            $(document).unbind('mousemove');
+            $(document).unbind('mouseup');
+        });
+    });
+
+</script>
+</html>

example/windowlevel/index.html

@@ -20,7 +20,8 @@ <h1>
     <br>
 
     In this example, the mousemove is captured and adjusts the window/center.  You can also manually set the window/center
-    by entering the values in the input elements and hitting apply
+    by entering the values in the input elements and hitting apply.  Press the Invert button to toggle invert
+    for the image.
 
     <br>
     <br>
@@ -38,6 +39,7 @@ <h1>
     <label>Window Center</label>
     <input id="wc" type="text" placeholder="e.g. 500">
     <button id="apply" class="btn">Apply</button>
+    <button id="invert" class="btn">Invert</button>
 
 </div>
 </body>
@@ -68,6 +70,16 @@ <h1>
         cornerstone.setViewport(element, viewport);
     });
 
+    $('#invert').click(function(e) {
+        var viewport = cornerstone.getViewport(element);
+        if(viewport.invert === true) {
+            viewport.invert = false;
+        } else {
+            viewport.invert = true;
+        }
+        cornerstone.setViewport(element, viewport);
+    });
+
     // add event handlers to mouse move to adjust window/center
     $('#dicomImage').mousedown(function(e) {
         var lastX = e.pageX;

src/drawImage.js

@@ -33,14 +33,18 @@ var cornerstone = (function (cornerstone) {
     function getLut(image, viewport)
     {
         // if we have a cached lut and it has the right values, return it immediately
-        if(image.lut !== undefined && image.lut.windowCenter === viewport.windowCenter && image.lut.windowWidth === viewport.windowWidth) {
+        if(image.lut !== undefined &&
+           image.lut.windowCenter === viewport.windowCenter &&
+            image.lut.windowWidth === viewport.windowWidth &&
+            image.lut.invert === viewport.invert) {
             return image.lut;
         }
 
         // lut is invalid or not present, regenerate it and cache it
         image.lut = cornerstone.generateLut(image, viewport.windowWidth, viewport.windowCenter, viewport.invert);
         image.lut.windowWidth = viewport.windowWidth;
         image.lut.windowCenter = viewport.windowCenter;
+        image.lut.invert = viewport.invert;
         return image.lut;
     }
 
@@ -106,7 +110,12 @@ var cornerstone = (function (cornerstone) {
 
         // turn off image smooth/interpolation if pixelReplication is set in the viewport
         if(ee.viewport.pixelReplication === true) {
-            context.webkitImageSmoothingEnabled = false;
+            context.imageSmoothingEnabled = false;
+            context.mozImageSmoothingEnabled = false; // firefox doesn't support imageSmoothingEnabled yet
+        }
+        else {
+            context.imageSmoothingEnabled = true;
+            context.mozImageSmoothingEnabled = true;
         }
 
         // Draw the render canvas half the image size (because we set origin to the middle of the canvas above)