Added some examples and information to the readme.md

LazyCat2018 · Mar 19, 2014 · 7417183 · 7417183
1 parent 503b6af
commit 7417183
Show file tree

Hide file tree

Showing 14 changed files with 525 additions and 5 deletions.
diff --git a/.idea/cornerstone.iml b/.idea/cornerstone.iml
diff --git a/.idea/encodings.xml b/.idea/encodings.xml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/scopes/scope_settings.xml b/.idea/scopes/scope_settings.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/README.md b/README.md
@@ -1,13 +1,57 @@
 cornerstone
 ===========
 
-JavaScript library to display medical images
+The goal of this project is to make it easy to enable HTML5 based web apps to display interactive medical images:
+
+ * Easy - use of the library should be familiar for someone with experience in web technologies - knowledge of DICOM
+or medical imaging should not be required
+ * Medical images - this includes all DICOM image types as well as non DICOM Image types
+ * Interactive - All rendering is done on the client side including window/level, zoom, pan, etc.
 
 This project was initiated based on the following comp.protocols.dicom discussion:
 https://groups.google.com/forum/#!topic/comp.protocols.dicom/_2fMh69GdAM
 
-Trello:
-https://trello.com/b/tGTDIyt4/cornerstone
+[Trello](https://trello.com/b/tGTDIyt4/cornerstone)
+
+Vision
+======
+ * Supports all HTML5 based browsers
+ * Runs on mobile, tablet and desktop
+ * Displays all DICOM image types
+ * Displays non DICOM image types (e.g. JPEG from camera)
+ * High performance image display
+ * Server software can run on Linux, Windows and Mac OS X
+ * Server provides plugin interface to allow interfacing with image archives in different ways (e.g. DICOM port 104, WADO, custom)
+
+Roadmap
+========
+
+Phase 1
+-------
+ * Supports all HTML5 based browsers (including mobile, tablet and desktop).  Specific targets include:
+    * IE9+
+    * Chrome
+    * Safari
+    * FireFox
+    * Opera
+ * Server software shall be cross platform and run on Linux, Windows and Mac OS X
+ * Supports display of all DICOM Image formats (8 bit gray, 16 bit gray, RGB, etc)
+ * All image rendering done on client side (server only returns raw pixel data)
+ * Programmatic support for modifying the following:
+    * Window/Center adjustments
+    * Zooming/Scaling
+    * Panning/Translating
+    * Rotation (90, 180, 270, 0)
+    * Flip (Horizontal / Vertical)
+    * Image displayed
+ * Markup mode - static configuration done via HTML5 data- attributes, no javascript needed
+
+Phase 2
+-------
+ * Configurable interactive tools
+ * Overlays
 
-TODO:
-- Garther Requirements
+Future Possibilities
+=================================
+* 3D functionality - MPR, MIP, Volume Rendering
+* Fusion (e.g. PET/CT, CT/MR)
diff --git a/example/changeimage/index.html b/example/changeimage/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <!-- twitter bootstrap CSS stylesheet - included to make things pretty, not needed or used by cornerstone -->
+    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+<div class="container">
+
+<h1>
+    changeimage/index.html
+</h1>
+This is an example of changing the image displayed in an element.  This could be used
+to show different key images or a stack of images (e.g. MRI series)
+<br>
+<br>
+
+<div id="dicomImage" style="width:512px;height:512px;background-color:black;">
+</div>
+
+<button id="imageButton1" type="button" class="btn btn-default">Image #1</button>
+<button id="imageButton2" type="button" class="btn btn-default">Image #2</button>
+
+</div>
+</body>
+<!-- include the cornerstone library -->
+<script src="../../src/cornerstone.js"></script>
+
+<!-- jquery - included to make things easier to demo, not needed or used by cornerstone -->
+<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
+
+<script>
+
+    // show image #1 initially
+    var element = $('#dicomImage').get(0);
+    var studyId1 = '1.3.12.2.1107.5.2.32.35020.30000011062212111306200000003';
+    var imageId1 = '1.3.12.2.1107.5.2.32.35020.2011062208172724415309288';
+    cornerstone.enable(element, studyId1, imageId1);
+
+    // Add event handlers to change images
+    $('#imageButton1').click(function(e) {
+        var studyId1 = '1.3.12.2.1107.5.2.32.35020.30000011062212111306200000003';
+        var imageId1 = '1.3.12.2.1107.5.2.32.35020.2011062208172724415309288';
+        cornerstone.showImage(element, studyId1, imageId1);
+    });
+
+    $('#imageButton2').click(function(e) {
+        var studyId2 = '1.3.12.2.1107.5.2.32.35020.30000011062212111306200000003';
+        var imageId2 = '1.3.12.2.1107.5.2.32.35020.2011062208172724415309289';
+        cornerstone.showImage(element, studyId2, imageId2);
+    });
+
+</script>
+</html>
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,23 @@
+<!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">
+</head>
+<body>
+
+<h1>
+Cornerstone Examples
+</h1>
+
+<ul>
+    <li><a href="minimal">Minimal example using only HTML (start here)</a></li>
+    <li><a href="jsminimal">Minimal example using javascript</a></li>
+    <li><a href="changeimage">Changing the image displayed</a></li>
+    <li><a href="windowlevel">Windowing and leveling</a></li>
+    <li><a href="zoompan">Zooming and panning</a></li>
+</ul>
+
+
+</body>
+</html>
diff --git a/example/jsminimal/index.html b/example/jsminimal/index.html
@@ -0,0 +1,39 @@
+<!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">
+</head>
+<body>
+<div class="container">
+
+<h1>
+jsminimal/index.html
+</h1>
+
+This is an example of the minimal use of cornerstone driven by javascript
+
+<br>
+<br>
+
+In this example, javascript is used to image enable a div.
+
+<br>
+<br>
+
+
+<div id="dicomImage" style="width:512px;height:512px;">
+</div>
+
+</div>
+</body>
+<!-- include the cornerstone library -->
+<script src="../../src/cornerstone.js"></script>
+
+<script>
+    var studyId = '1.3.12.2.1107.5.2.32.35020.30000011062212111306200000003';
+    var imageId = '1.3.12.2.1107.5.2.32.35020.2011062208172724415309288';
+    var element = document.getElementById('dicomImage');
+    cornerstone.enable(element, studyId, imageId);
+</script>
+</html>
diff --git a/example/minimal/index.html b/example/minimal/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+</head>
+<body>
+
+<h1>
+minimal/index.html
+</h1>
+
+This is an example of the minimal use of cornerstone
+
+<br>
+<br>
+
+In this example, HTML5 data attributes are used to mark elements that cornerstone should image enable as well
+as the minimum number of required parameters to display the image.  The power of this approach is that images
+can be displayed with markup only without any javascript.
+
+<br>
+<br>
+
+NOTE: Additional data attributes can be added to provide more markup driven functionality for example:
+<ul>
+    <li>data-cornerstoneInteractive - turns on window/level via mouse</li>
+    <li>data-cornerstoneViewportScale - sets the initial viewport scale</li>
+    <li>data-cornerstoneViewportTop - sets the initial viewport top pixel</li>
+    <li>data-cornerstoneViewportLeft - sets the initial viewport left pixel</li>
+</ul>
+
+<br>
+<br>
+
+
+<div id="dicomImage" class="cornerstone"
+     data-cornerstoneEnabled="true"
+     data-cornerstoneStudyId="1.3.12.2.1107.5.2.32.35020.30000011062212111306200000003"
+     data-cornerstoneOmageId="1.3.12.2.1107.5.2.32.35020.2011062208172724415309288"
+     style="width:512px;height:512px;">
+</div>
+
+
+</body>
+
+<!-- include the cornerstone library -->
+<script src="../../src/cornerstone.js"></script>
+
+</html>
diff --git a/example/windowlevel/index.html b/example/windowlevel/index.html
@@ -0,0 +1,85 @@
+<!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">
+</head>
+<body>
+<div class="container">
+
+    <h1>
+        windowlevel/index.html
+    </h1>
+
+    This is an example of interactive window/level
+
+    <br>
+    <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
+
+    <br>
+    <br>
+
+
+    <div id="dicomImage" style="width:512px;height:512px;background-color:black;">
+    </div>
+
+    <label>Window Width</label>
+    <input id="ww" type="text" placeholder="e.g. 1000">
+    <label>Window Center</label>
+    <input id="wc" type="text" placeholder="e.g. 500">
+    <button id="apply" class="btn">Apply</button>
+
+</div>
+</body>
+<!-- include the cornerstone library -->
+<script src="../../src/cornerstone.js"></script>
+
+<!-- jquery - included to make things easier to demo, not needed or used by cornerstone -->
+<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
+
+<script>
+
+    // image enable the dicomImage element
+    var studyId = '1.3.12.2.1107.5.2.32.35020.30000011062212111306200000003';
+    var imageId = '1.3.12.2.1107.5.2.32.35020.2011062208172724415309288';
+    var element = $('#dicomImage').get(0);
+    cornerstone.enable(element, studyId, imageId);
+    var viewport = cornerstone.getViewport(element);
+    $('#ww').val(viewport.windowWidth);
+    $('#wc').val(viewport.windowCenter);
+
+    // Add event handler to the ww/wc apply button
+    $('#apply').click(function(e) {
+        var viewport = cornerstone.getViewport(element);
+        viewport.windowWidth = parseFloat($('#ww').val());
+        viewport.windowCenter = parseFloat($('#wc').val());
+        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;
+
+        $('#dicomImage').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);
+        });
+
+        $('#dicomImage').mouseup(function(e) {
+            $('#dicomImage').unbind('mousemove');
+        });
+    });
+
+</script>
+</html>