Comments added. Refactoring.

css/main.css

@@ -1,7 +1,9 @@
 /**
- * @desc 
+ * @desc Stylesheet of the Dicom viewer. Using HTML5-Boilerplate's clearfix hack.
  * @author Michael Kaserer [email protected]
  **/
+@charset 'utf-8';
+
 html, body {
     display: inline;
     padding: 0;
@@ -72,9 +74,6 @@ html, body {
     display: table-cell;
     position: relative;
 }
-/*#viewerScreen .viewerCellContent {
-    display: block;
-}*/
 canvas {
     cursor: default;
     display: block;
@@ -184,25 +183,6 @@ canvas {
     margin-top: 5px;
     height: .6em;
 }
-/*.progress.active .bar {
-    -webkit-animation: progress-bar-stripes 2s linear infinite;
-    -moz-animation: progress-bar-stripes 2s linear infinite;
-    -ms-animation: progress-bar-stripes 2s linear infinite;
-    -o-animation: progress-bar-stripes 2s linear infinite;
-    animation: progress-bar-stripes 2s linear infinite;
-}
-.progress-striped .bar {
-    background-color: #149bdf;
-    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
-    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-    -webkit-background-size: 40px 40px;
-    -moz-background-size: 40px 40px;
-    -o-background-size: 40px 40px;
-    background-size: 40px 40px;
-}*/
 #errorMsg {
     color: #f00;
     font-size: 0.7em;

index.html

@@ -16,9 +16,7 @@
 
         <!-- jQuery & Plugins -->
         <script type="text/javascript" src="js/libs/jquery-2.0.0/jquery.min.js"></script>
-        <!--<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>-->
         <script type="text/javascript" src="js/libs/jquery-ui-1.10.2/jquery-ui.custom.min.js"></script>
-        <!--<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>-->
         <script type="text/javascript" src="js/libs/jqueryTree/jquery.tree.js"></script>
         <!-- FileInput -->
         <script src="js/libs/jQuery-UI-FileInput/js/enhance.min.js" type="text/javascript"></script>
@@ -168,10 +166,10 @@
             <aside id="sidebar">
                 <!--Only Chrome supports webkitdirectory-->
                 <div id="inputContainer" class="ui-toolbar ui-widget-header">
-                    <input id="dicomUpload" type="file" value="Upload file" webkitdirectory multiple />
+                    <input id="dicomUpload" type="file" webkitdirectory multiple />
                     <div id="progressBar"></div>
                 </div>
-                <!--<img id="loadingIndicator" src="img/loading.gif" style="display:none" />-->
+                <!--Error messages-->
                 <div id="errorMsg"></div>
 
                 <div id="fileTree"></div>

js/CanvasPainter.js

@@ -1,5 +1,6 @@
 /**
- * @desc 
+ * @desc CanvasPainter is used to draw a Dicom file on a HTML-canvas element. Scale, windowing and pan can be altered.
+ * @param {String} canvasId Id of the HTML-canvas element for the painter.
  * @author Michael Kaserer [email protected]
  **/
 function CanvasPainter(canvasId) {
@@ -13,6 +14,10 @@ function CanvasPainter(canvasId) {
     this.pan; //[panX, panY]
 }
 
+/**
+ * Sets a Dicom series to the painter and sorts it by InstanceNumber.
+ * @param {Array} serie An array with Dicom files of a series. 
+ */
 CanvasPainter.prototype.setSeries = function(serie) {
     // Sort by InstanceNumber
     serie.sort(function(a, b) {
@@ -26,32 +31,61 @@ CanvasPainter.prototype.setSeries = function(serie) {
     this.pan = [0, 0];
 };
 
+/**
+ * 
+ * @param {Number} wc   Window center
+ * @param {Number} ww   Window with
+ */
 CanvasPainter.prototype.setWindowing = function(wc, ww) {
     this.wc = wc;
     this.ww = ww;
 };
 
+/**
+ * 
+ * @returns {Array} Window center and window with
+ */
 CanvasPainter.prototype.getWindowing = function() {
     return [this.wc, this.ww];
 };
 
+/**
+ * 
+ * @param {Number} scale
+ */
 CanvasPainter.prototype.setScale = function(scale) {
     this.scale = scale;
 };
 
+/**
+ * 
+ * @returns {Number}
+ */
 CanvasPainter.prototype.getScale = function() {
     return this.scale;
 };
 
+/**
+ * 
+ * @param {Number} panX
+ * @param {Number} panY
+ */
 CanvasPainter.prototype.setPan = function(panX, panY) {
     this.pan[0] = panX;
     this.pan[1] = panY;
 };
 
+/**
+ * 
+ * @returns {Array}
+ */
 CanvasPainter.prototype.getPan = function() {
     return this.pan;
 };
 
+/**
+ * Resets window with & center, scale and pan to the original values and draws the Dicom image. 
+ */
 CanvasPainter.prototype.reset = function() {
     this.wc = this.series[0].WindowCenter;
     this.ww = this.series[0].WindowWidth;
@@ -60,6 +94,9 @@ CanvasPainter.prototype.reset = function() {
     this.drawImg();
 };
 
+/**
+ * Draws the current Dicom file to the canvas element. Uses the windowing function to map the Dicom pixel values the 8bit canvas values.
+ */
 CanvasPainter.prototype.drawImg = function() {
     //Change here width and height of the new canvas
     var width = this.canvas.width;
@@ -68,20 +105,23 @@ CanvasPainter.prototype.drawImg = function() {
     tempcanvas.height = this.currentFile.Rows;
     tempcanvas.width = this.currentFile.Columns;
     var tempContext = tempcanvas.getContext("2d");
-
+
+    // Windowing function
     var lowestVisibleValue = this.wc - this.ww / 2.0;
     var highestVisibleValue = this.wc + this.ww / 2.0;
-
+
+    // color the new canvas black
     this.context.fillStyle = "#000";
     this.context.fillRect(0, 0, width, height);
     var imgData = tempContext.createImageData(this.currentFile.Columns, this.currentFile.Rows);
     var pixelData = this.currentFile.PixelData;
+
     if(typeof pixelData === 'undefined' || pixelData.length === 0) {
-        //console.log('PixelData undefined');
         $('#errorMsg').append("<p class='ui-state-error ui-corner-all'><span class='ui-icon ui-icon-alert'></span>Can't display image: "+ this.currentFile.PatientsName +" "+ this.currentFile.SeriesDescription +"</p>");
         return;
     }
-
+
+    // loop throug all pixel values and set R, G, B and alpha.
     for(var i = 0, len = imgData.data.length; i < len; i += 4) {
         var intensity = pixelData[(i / 4)];
         intensity = intensity * this.currentFile.RescaleSlope + this.currentFile.RescaleIntercept;
@@ -96,15 +136,25 @@ CanvasPainter.prototype.drawImg = function() {
         imgData.data[i + 3] = 255;       // alpha
     }
 
+    // Scale the image
     var targetWidth = this.scale * this.currentFile.Rows;
     var targetHeight = this.scale * this.currentFile.Columns;
     var xOffset = (width - targetWidth) / 2 + this.pan[0];
     var yOffset = (height - targetHeight) / 2 + this.pan[1];
-
+
+    // Draw it on the referencing canvas
     tempContext.putImageData(imgData, 0, 0);
     this.context.drawImage(tempcanvas, xOffset, yOffset, targetWidth, targetHeight);
 };
 
+/**
+ * Private help function to compute the perfect scale for the canvas element with a certain height and width.
+ * @param {Number} srcWidth     Width of the Dicom image
+ * @param {Number} srcHeight    Height of the Dicom image
+ * @param {Number} maxWidth     Width of the canvas element
+ * @param {Number} maxHeight    Height of the canvas element
+ * @returns {Number} Computed scale
+ */
 calculateRatio = function(srcWidth, srcHeight, maxWidth, maxHeight) {
     var ratio = [maxWidth / srcWidth, maxHeight / srcHeight];
     ratio = Math.min(ratio[0], ratio[1]);