From 74171834d94a246a3907c2ecdbf72b13777f848b Mon Sep 17 00:00:00 2001 From: Chris Hafey Date: Tue, 18 Mar 2014 22:18:49 -0500 Subject: [PATCH] Added some examples and information to the readme.md --- .idea/cornerstone.iml | 9 +++ .idea/encodings.xml | 5 ++ .idea/misc.xml | 5 ++ .idea/modules.xml | 9 +++ .idea/scopes/scope_settings.xml | 5 ++ .idea/vcs.xml | 7 +++ README.md | 54 +++++++++++++++-- example/changeimage/index.html | 54 +++++++++++++++++ example/index.html | 23 ++++++++ example/jsminimal/index.html | 39 ++++++++++++ example/minimal/index.html | 48 +++++++++++++++ example/windowlevel/index.html | 85 +++++++++++++++++++++++++++ example/zoompan/index.html | 86 +++++++++++++++++++++++++++ src/cornerstone.js | 101 ++++++++++++++++++++++++++++++++ 14 files changed, 525 insertions(+), 5 deletions(-) create mode 100644 .idea/cornerstone.iml create mode 100644 .idea/encodings.xml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/scopes/scope_settings.xml create mode 100644 .idea/vcs.xml create mode 100644 example/changeimage/index.html create mode 100644 example/index.html create mode 100644 example/jsminimal/index.html create mode 100644 example/minimal/index.html create mode 100644 example/windowlevel/index.html create mode 100644 example/zoompan/index.html create mode 100644 src/cornerstone.js diff --git a/.idea/cornerstone.iml b/.idea/cornerstone.iml new file mode 100644 index 00000000..6b8184f8 --- /dev/null +++ b/.idea/cornerstone.iml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/.idea/encodings.xml b/.idea/encodings.xml new file mode 100644 index 00000000..e206d70d --- /dev/null +++ b/.idea/encodings.xml @@ -0,0 +1,5 @@ + + + + + diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 00000000..1162f438 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,5 @@ + + + + + diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 00000000..b545511f --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/.idea/scopes/scope_settings.xml b/.idea/scopes/scope_settings.xml new file mode 100644 index 00000000..922003b8 --- /dev/null +++ b/.idea/scopes/scope_settings.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 00000000..c80f2198 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,7 @@ + + + + + + + diff --git a/README.md b/README.md index 222b13c7..cd4c719d 100644 --- 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 new file mode 100644 index 00000000..a762be84 --- /dev/null +++ b/example/changeimage/index.html @@ -0,0 +1,54 @@ + + + + + + + +
+ +

+ changeimage/index.html +

+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) +
+
+ +
+
+ + + + +
+ + + + + + + + + diff --git a/example/index.html b/example/index.html new file mode 100644 index 00000000..46c6f0f1 --- /dev/null +++ b/example/index.html @@ -0,0 +1,23 @@ + + + + + + + + +

+Cornerstone Examples +

+ + + + + + diff --git a/example/jsminimal/index.html b/example/jsminimal/index.html new file mode 100644 index 00000000..095bd3ee --- /dev/null +++ b/example/jsminimal/index.html @@ -0,0 +1,39 @@ + + + + + + + +
+ +

+jsminimal/index.html +

+ +This is an example of the minimal use of cornerstone driven by javascript + +
+
+ +In this example, javascript is used to image enable a div. + +
+
+ + +
+
+ +
+ + + + + + diff --git a/example/minimal/index.html b/example/minimal/index.html new file mode 100644 index 00000000..8341a006 --- /dev/null +++ b/example/minimal/index.html @@ -0,0 +1,48 @@ + + + + + + +

+minimal/index.html +

+ +This is an example of the minimal use of cornerstone + +
+
+ +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. + +
+
+ +NOTE: Additional data attributes can be added to provide more markup driven functionality for example: + + +
+
+ + +
+
+ + + + + + + + diff --git a/example/windowlevel/index.html b/example/windowlevel/index.html new file mode 100644 index 00000000..6e651e34 --- /dev/null +++ b/example/windowlevel/index.html @@ -0,0 +1,85 @@ + + + + + + + +
+ +

+ windowlevel/index.html +

+ + This is an example of interactive window/level + +
+
+ + 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 + +
+
+ + +
+
+ + + + + + + +
+ + + + + + + + + diff --git a/example/zoompan/index.html b/example/zoompan/index.html new file mode 100644 index 00000000..09c44e8f --- /dev/null +++ b/example/zoompan/index.html @@ -0,0 +1,86 @@ + + + + + + + +
+ +

+ zoompan/index.html +

+ +This is an example of interactive zoom and pan + +
+
+ +In this example, HTML buttons are used to change the zoom on an image and mosue events are used +to pan the image. Note that the core cornerstone library does not specify any UI paradigm - it is +up to the developer (or another layer/component) to provide the UI paradigm on top of this library + +
+
+ + +
+
+ + + + +
+ + + + + + + + + diff --git a/src/cornerstone.js b/src/cornerstone.js new file mode 100644 index 00000000..a1c5dc3e --- /dev/null +++ b/src/cornerstone.js @@ -0,0 +1,101 @@ +var cornerstone = (function () { + var cornerstone = {}; + + var enabledElements = []; + + function getEnabledElement(element) { + for(var i=0; i < enabledElements.length; i++) { + if(enabledElements[i].element == element) { + return enabledElements[i]; + } + } + return undefined; + } + + function updateImage(element) { + var ee = getEnabledElement(element); + var y = 30; + var context = ee.canvas.getContext('2d'); + context.fillStyle = 'black'; + context.fillRect(0,0, ee.canvas.width, ee.canvas.height); + context.save(); + context.fillStyle = 'white'; + for(var property in ee.viewport) { + var str = property + ' = ' + ee.viewport[property]; + context.fillText(str, 10, y); + y+=30; + } + context.scale(ee.viewport.scale, ee.viewport.scale); + context.translate(ee.viewport.left, ee.viewport.top); + context.beginPath(); + context.rect(0, 0, ee.canvas.width, ee.canvas.height); + context.strokeStyle = "white"; + context.lineWidth = 0; + context.moveTo(0,0); + context.lineTo(ee.canvas.width, ee.canvas.height); + context.moveTo(ee.canvas.width,0); + context.lineTo(0, ee.canvas.height); + context.stroke(); + context.restore(); + + }; + + cornerstone.config = function () { + }; + + cornerstone.enable = function (element, studyId, imageId) { + var canvas = document.createElement('canvas'); + canvas.width = element.clientWidth; + canvas.height = element.clientHeight; + element.appendChild(canvas); + var el = { + element: element, + canvas: canvas, + ids : { + studyId: studyId, + imageId: imageId + }, + viewport : { + scale : 1.0, + top : 0.0, + left: 0.0, + windowWidth: 256, + windowCenter: 128 + } + }; + enabledElements.push(el); + updateImage(element); + }; + + + + cornerstone.showImage = function (element, studyId, imageId) { + updateImage(element); + }; + + + cornerstone.setViewport= function (element, viewport) { + enabledElement = getEnabledElement(element); + enabledElement.viewport = viewport; + updateImage(element); + }; + + cornerstone.getViewport= function (element) { + return getEnabledElement(element).viewport; + + }; + + function enableAllElements() + { + var ees = document.querySelectorAll('[data-cornerstoneEnabled]'); + for(var i=0; i < ees.length; i++) { + var ee = ees[i]; + var studyId = ee.getAttribute('data-cornerstoneStudyId'); + var imageId = ee.getAttribute('data-cornerstoneImageId'); + cornerstone.enable(ee, studyId, imageId); + } + } + enableAllElements(); + + return cornerstone; +}()); \ No newline at end of file