Progress worker added. Comments added. Refactoring.

dskasun · Apr 29, 2013 · 2719b0f · 2719b0f
1 parent 822eeb0
commit 2719b0f
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 66 deletions.
diff --git a/css/main.css b/css/main.css
@@ -1,3 +1,7 @@
+/**
+ * @desc 
+ * @author Michael Kaserer [email protected]
+ **/
 html, body {
     display: inline;
     padding: 0;

diff --git a/index.html b/index.html
@@ -137,33 +137,28 @@
                     disabled: true
                 });
                 $('#progressBar').progressbar({
-                    value: 100
+                    value: 1
                 }).hide();
             });
 
-//            function progress(percent) {
-//                var $element = $('#progressBar');
-//                var progressBarWidth = percent * $element.width() / 100;
-//                $element.find('div').animate({width: progressBarWidth}, 500);
-//            }
-
-//            var progress = function(max) {
-//                var progressbar = $('#progressBar'),
-//                        time = 10,
-//                        value = progressbar.val();
-//                progressbar.attr('max', max);
-//                progressbar.show();
-//
-//                var animate = setInterval(function() {
-//                    value += 1;
-//                    if(value === max) {
-//                        clearInterval(animate);
-//                        progressbar.hide();
-//                    } else {
-//                        progressbar.val(value);
-//                    }
-//                }, time);
-//            };
+            var progress = function(numFiles) {
+                var me = $('#progressBar').show().find('div').addClass('ui-corner-right');
+                $('*').css('cursor', 'wait');
+                var worker = new Worker('js/Progress.js');
+
+                worker.onmessage = function(e) {
+                    var num = e.data;
+                    if(num >= 100) {
+                        $('#progressBar').hide();
+                        $('*').css('cursor', 'default');
+                        $('#fileTree').fadeIn(100).show();
+                        me.css('width', '1px');
+                    } else {
+                        me.css('width', num + '%');
+                    }
+                };
+                worker.postMessage(numFiles);
+            };
         </script>
     </head>
     <body>

diff --git a/js/CanvasPainter.js b/js/CanvasPainter.js
@@ -1,4 +1,7 @@
-
+/**
+ * @desc 
+ * @author Michael Kaserer [email protected]
+ **/
 function CanvasPainter(canvasId) {
     this.canvas = document.getElementById(canvasId);
     this.context = this.canvas.getContext("2d");
@@ -74,7 +77,7 @@ CanvasPainter.prototype.drawImg = function() {
     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');
+    //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;
     }

diff --git a/js/DcmViewer.js b/js/DcmViewer.js
@@ -1,15 +1,20 @@
+/**
+ * @desc 
+ * @author Michael Kaserer [email protected]
+ **/
 function DcmViewer() {
-    this.toolbox = new Toolbox(this.painter);
+    this.toolbox;
+    this.tree;
+    this.fileParser;
     this.scrollIndex = 0;
-    this.eventsEnabled = false;
     this.numFiles = 0;
+    this.eventsEnabled = false;
     this.painters = [];
     this.parsedFileList = [];
-    this.tree;
-    this.fileParser;
 }
 
 DcmViewer.prototype.init = function() {
+    this.toolbox = new Toolbox();
     this.matrixHandler($('#matrixView').val());
     this.tree = new Tree();
     this.fileParser = new FileParser();
@@ -48,6 +53,9 @@ DcmViewer.prototype.inputHandler = function(e) {
     if(e.target.files.length === 0) {
         return;
     }
+
+    progress(e.target.files.length);
+
     var fileList = e.target.files;
     var dcmList = [];
     this.parsedFileList = [];

diff --git a/js/FileParser.js b/js/FileParser.js
@@ -1,3 +1,7 @@
+/**
+ * @desc 
+ * @author Michael Kaserer [email protected]
+ **/
 function FileParser() {
     this.files = [];
 }
@@ -19,7 +23,7 @@ FileParser.prototype.parseFiles = function(rawFiles, callback) {
 
                 if(typeof file === 'undefined') {
                     goal--;
-//                    console.log("Can't read file: " + rawFile.name);
+                    //console.log("Can't read file: " + rawFile.name);
                     $('#errorMsg').append("<p class='ui-state-error ui-corner-all'><span class='ui-icon ui-icon-alert'></span>Can't read file: " + rawFile.name + "</p>");
                     return;
                 }
@@ -47,7 +51,6 @@ FileParser.prototype.parseFiles = function(rawFiles, callback) {
         };
 
         reader.onloadend = function(e) {
-//            $("#progressBar").progressbar({ value: ( self.files.length / goal)*100 });
             // Fire callback only when all files are parsed
             if(self.files.length === goal) {
                 self.files.sort(function(a, b) {

diff --git a/js/Progress.js b/js/Progress.js
@@ -0,0 +1,24 @@
+/**
+ * @desc This JavaScript worker takes the number of files and perform
+ * progress with a certain delay for the progressbar.
+ * It posts the current percentual value of the progressbar back to the HTML file.
+ * @author Michael Kaserer [email protected]
+ **/
+var current = 0;
+var max = 100;
+var self = this;
+
+self.addEventListener('message', function(e) {
+    max = e.data;
+    self.postMessage('Max: ' + max);
+}, false);
+
+var progress = setInterval(function() {
+    self.postMessage('Max: ' + max);
+    if(current >= max) {
+        clearInterval(progress);
+    } else {
+        current += 5;
+        postMessage(((current / max) * 100).toFixed(0));
+    }
+}, 20);
diff --git a/js/Toolbox.js b/js/Toolbox.js
@@ -1,6 +1,8 @@
-
-function Toolbox(painter) {
-    this.painter = painter;
+/**
+ * @desc 
+ * @author Michael Kaserer [email protected]
+ **/
+function Toolbox() {
     this.tools = {
         'Window level': new WindowLevel(),
         'Zoom': new Zoom(),

diff --git a/js/Tree.js b/js/Tree.js
@@ -1,3 +1,7 @@
+/**
+ * @desc 
+ * @author Michael Kaserer [email protected]
+ **/
 function Tree() {
     var dcmTree = {};
     var _html = [];
@@ -9,18 +13,7 @@ function Tree() {
         $('#errorMsg').empty();
         $('#fileTree').empty().html(dcmRender(buildFromDcmList(list))).tree({
             expanded: 'li:first'
-        });
-//        console.log(fileList.length/68 *1000);
-//        var $element = $('#progressBar');
-//        var progressBarWidth = $element.width();
-//        $element.show().find('div').addClass('ui-corner-right').animate({width: 270}, fileList.length/68 *1000);
-//        $('#progressBar').show();
-//        $('#loadingIndicator').show();
-//        $('*').css('cursor', 'wait');
-
-//            $('#progressBar').hide();
-////            $('#loadingIndicator').hide();
-//            $('*').css('cursor', 'default');
+        }).hide();
     };
 
     var buildFromDcmList = function(files) {

diff --git a/js/tools/Move.js b/js/tools/Move.js
@@ -1,12 +1,13 @@
-/*
- * All tools must implement following functions
+/**
+ * @desc 
+ * @author Michael Kaserer [email protected]
+ * @required All tools must implement following functions:
  * click(x, y, painters)
- * dblclick(x, y, painters)
  * mousedown(x, y, painters)
  * mouseup(x, y, painters)
  * mousemove(x, y, painters)
  * mouseout(x, y, painters)
- */
+ **/
 function Move() {
     this.started = false;
     this.curX = 0;

diff --git a/js/tools/Roi.js b/js/tools/Roi.js
@@ -1,12 +1,13 @@
-/*
- * All tools must implement following functions
+/**
+ * @desc 
+ * @author Michael Kaserer [email protected]
+ * @required All tools must implement following functions:
  * click(x, y, painters)
- * dblclick(x, y, painters)
  * mousedown(x, y, painters)
  * mouseup(x, y, painters)
  * mousemove(x, y, painters)
  * mouseout(x, y, painters)
- */
+ **/
 function Roi() {
     this.started = false;
     this.startX = 0;

diff --git a/js/tools/WindowLevel.js b/js/tools/WindowLevel.js
@@ -1,12 +1,13 @@
-/*
- * All tools must implement following functions
+/**
+ * @desc 
+ * @author Michael Kaserer [email protected]
+ * @required All tools must implement following functions:
  * click(x, y, painters)
- * dblclick(x, y, painters)
  * mousedown(x, y, painters)
  * mouseup(x, y, painters)
  * mousemove(x, y, painters)
  * mouseout(x, y, painters)
- */
+ **/
 function WindowLevel() {
     this.started = false;
     this.curX = 0;

diff --git a/js/tools/Zoom.js b/js/tools/Zoom.js
@@ -1,15 +1,15 @@
-/*
- * All tools must implement following functions
+/**
+ * @desc 
+ * @author Michael Kaserer [email protected]
+ * @required All tools must implement following functions:
  * click(x, y, painters)
- * dblclick(x, y, painters)
  * mousedown(x, y, painters)
  * mouseup(x, y, painters)
  * mousemove(x, y, painters)
  * mouseout(x, y, painters)
- */
+ **/
 function Zoom() {
     this.started = false;
-//    this.curX = 0;
     this.curY = 0;
 }
 
@@ -26,7 +26,7 @@ Zoom.prototype.mouseup = function() {
 
 Zoom.prototype.mousemove = function(x, y, painters) {
     if(this.started) {
-//        var deltaX = x - this.curX;
+        //var deltaX = x - this.curX;
         var deltaY = this.curY - y;
         var newDeltaY = painters[0].getScale() + deltaY / 100.0;
 
@@ -35,7 +35,7 @@ Zoom.prototype.mousemove = function(x, y, painters) {
             painters[i].drawImg();
         }
     }
-//    this.curX = x;
+    //this.curX = x;
     this.curY = y;
 };