5 drawing list

css/style.css

@@ -17,8 +17,12 @@ body { font-family: Verdana, Arial, Helvetica, sans-serif; }
 .infoLayer canvas { margin: 0; padding: 2px; }
 
 /* Tag list */
-table.tagList { border-collapse: collapse; }
-table.tagList thead td { font-weight: bold; }
-table.tagList td { border: 1px solid grey; padding: 2px; }
-.tags .highlighted { background: #f87217; }
+table.tagsTable { border-collapse: collapse; }
+table.tagsTable thead th { text-transform: uppercase;
+    font-weight: bold; opacity: 0.5;}
+table.drawsTable { border-collapse: collapse; }
+table.drawsTable td { vertical-align: middle; }
+table.drawsTable thead th { text-transform: uppercase;
+    font-weight: bold; opacity: 0.5;}
+.highlighted { background: #f87217; }
 .tags form { width: 50%; }

locales/en/translation.json

@@ -19,7 +19,17 @@
         "history": "History",
         "image": "Image",
         "info": "Info",
-        "downloadState": "Download state"
+        "downloadState": "Download state",
+        "drawList": "Annotations",
+        "search": "Search",
+        "id": "ID",
+        "slice": "Slice",
+        "frame": "Frame",
+        "type": "Type",
+        "color": "Color",
+        "label": "Label",
+        "description": "Description",
+        "editMode": "Edit Mode"
     },
     "colour": {
         "Yellow": {

locales/fr/translation.json

@@ -19,7 +19,17 @@
         "history": "Historique",
         "image": "Image",
         "info": "Info",
-        "downloadState": "Télécharger state"
+        "downloadState": "Télécharger state",
+        "drawList": "Annotations",
+        "search": "Recherche",
+        "id": "ID",
+        "slice": "Coupe",
+        "frame": "Frame",
+        "type": "Type",
+        "color": "Couleur",
+        "label": "Label",
+        "description": "Description",
+        "editMode": "Mode Edition"
     },
     "colour": {
         "Yellow": {

src/app/application.js

@@ -60,6 +60,8 @@ dwv.App = function ()
     // Dicom tags gui
     var tagsGui = null;
 
+    var drawListGui = null;
+
     // Image layer
     var imageLayer = null;
     // Draw layers
@@ -128,6 +130,12 @@ dwv.App = function ()
      */
     this.getScale = function () { return scale / windowScale; };
 
+    /**
+     * Get the window scale.
+     * @return {Number} The window scale.
+     */
+    this.getWindowScale = function () { return windowScale; };
+
     /**
      * Get the scale center.
      * @return {Object} The coordinates of the scale center.
@@ -248,6 +256,9 @@ dwv.App = function ()
                     var toolClass = toolName;
                     if (typeof dwv.tool[toolClass] !== "undefined") {
                         toolList[toolClass] = new dwv.tool[toolClass](this);
+                        if (typeof toolList[toolClass].addEventListener !== "undefined") {
+                            toolList[toolClass].addEventListener(fireEvent);
+                        }
                     }
                     else {
                         console.warn("Could not initialise unknown tool: "+toolName);
@@ -294,6 +305,14 @@ dwv.App = function ()
             if ( config.gui.indexOf("tags") !== -1 ) {
                 tagsGui = new dwv.gui.DicomTags(this);
             }
+            // Draw list
+            if ( config.gui.indexOf("drawList") !== -1 ) {
+                drawListGui = new dwv.gui.DrawList(this);
+                // update list on draw events
+                this.addEventListener("draw-create", drawListGui.update);
+                this.addEventListener("draw-change", drawListGui.update);
+                this.addEventListener("draw-delete", drawListGui.update);
+            }
             // version number
             if ( config.gui.indexOf("version") !== -1 ) {
                 dwv.gui.appendVersionHtml(this.getVersion());
@@ -795,6 +814,72 @@ dwv.App = function ()
         translateLayers();
     };
 
+    /**
+     * Get a list of drawing details.
+     * @return {Object} A list of draw details including id, slice, frame...
+     */
+    this.getDrawDetailsList = function ()
+    {
+        var list = [];
+        var size = image.getGeometry().getSize();
+        for ( var z = 0; z < size.getNumberOfSlices(); ++z ) {
+
+            for ( var f = 0; f < image.getNumberOfFrames(); ++f ) {
+
+                var collec = this.getDrawLayer(z,f).getChildren();
+                for ( var i = 0; i < collec.length; ++i ) {
+                    var shape = collec[i].getChildren()[0];
+                    var label = collec[i].getChildren()[1];
+                    var text = label.getChildren()[0];
+                    var type = shape.className;
+                    if (type === "Line" && shape.closed()) {
+                        type = "Roi";
+                    }
+                    if (type === "Rect") {
+                        type = "Rectangle";
+                    }
+                    list.push( {
+                        "id": collec[i].id(),
+                        //"id": i,
+                        "slice": z,
+                        "frame": f,
+                        "type": type,
+                        "color": shape.stroke(),
+                        "label": text.textExpr,
+                        "description": text.longText
+                    });
+                }
+            }
+        }
+        // return
+        return list;
+    };
+
+    /**
+     * Update a drawing.
+     * @param {Object} drawDetails Details of the drawing to update.
+     */
+    this.updateDraw = function (drawDetails)
+    {
+        var layer = this.getDrawLayer(drawDetails.slice, drawDetails.frame);
+        //var collec = layer.getChildren()[drawDetails.id];
+        var collec = layer.getChildren( function (node) {
+            return node.id() === drawDetails.id;
+        })[0];
+        // shape
+        var shape = collec.getChildren()[0];
+        shape.stroke(drawDetails.color);
+        // label
+        var label = collec.getChildren()[1];
+        var text = label.getChildren()[0];
+        text.fill(drawDetails.color);
+        text.textExpr = drawDetails.label;
+        text.longText = drawDetails.description;
+        text.setText(dwv.utils.replaceFlags(text.textExpr, text.quant));
+        // udpate layer
+        this.getDrawLayer().draw();
+    };
+
     // Handler Methods -----------------------------------------------------------
 
     /**
@@ -1434,7 +1519,7 @@ dwv.App = function ()
         viewController = new dwv.ViewController(view);
         // append the DICOM tags table
         if ( tagsGui ) {
-            tagsGui.initialise(data.info);
+            tagsGui.update(data.info);
         }
         // store image
         originalImage = view.getImage();

src/app/state.js

@@ -19,31 +19,46 @@ dwv.State = function (app)
         var nSlices = app.getImage().getGeometry().getSize().getNumberOfSlices();
         var nFrames = app.getImage().getNumberOfFrames();
         var drawings = [];
+        var drawingsDetails = [];
         for ( var k = 0; k < nSlices; ++k ) {
-        drawings[k] = [];
-        for ( var f = 0; f < nFrames; ++f ) {
-            // getChildren always return, so drawings will have the good size
-            var groups = app.getDrawLayer(k,f).getChildren();
-            // remove anchors
-            for ( var i = 0; i < groups.length; ++i ) {
-                var anchors  = groups[i].find(".anchor");
-                for ( var a = 0; a < anchors.length; ++a ) {
-                    anchors[a].remove();
+            drawings[k] = [];
+            drawingsDetails[k] = [];
+            for ( var f = 0; f < nFrames; ++f ) {
+                // getChildren always return, so drawings will have the good size
+                var groups = app.getDrawLayer(k,f).getChildren();
+                var details = [];
+                // remove anchors
+                for ( var i = 0; i < groups.length; ++i ) {
+                    var anchors = groups[i].find(".anchor");
+                    for ( var a = 0; a < anchors.length; ++a ) {
+                        anchors[a].remove();
+                    }
+                    var texts = groups[i].find(".text");
+                    for ( var b = 0; b < texts.length; ++b ) {
+                        details.push({
+                            "id": groups[i].id(),
+                            "textExpr": texts[b].textExpr,
+                            "longText": texts[b].longText,
+                            "quant": texts[b].quant
+                        });
+                    }
                 }
+                drawings[k].push(groups);
+                drawingsDetails[k].push(details);
             }
-            drawings[k].push(groups);
-        }
         }
         // return a JSON string
         return JSON.stringify( {
-            "version": "0.1",
-        "window-center": app.getViewController().getWindowLevel().center,
+            "version": "0.2",
+            "window-center": app.getViewController().getWindowLevel().center,
             "window-width": app.getViewController().getWindowLevel().width,
             "position": app.getViewController().getCurrentPosition(),
             "scale": app.getScale(),
             "scaleCenter": app.getScaleCenter(),
             "translation": app.getTranslation(),
-            "drawings": drawings
+            "drawings": drawings,
+            // new in v0.2
+            "drawingsDetails": drawingsDetails
         } );
     };
     /**
@@ -54,14 +69,17 @@ dwv.State = function (app)
     this.fromJSON = function (json, eventCallback) {
         var data = JSON.parse(json);
         if (data.version === "0.1") {
-        readV01(data, eventCallback);
+            readV01(data, eventCallback);
+        }
+        else if (data.version === "0.2") {
+            readV02(data, eventCallback);
         }
         else {
-        throw new Error("Unknown state file format version: '"+data.version+"'.");
+            throw new Error("Unknown state file format version: '"+data.version+"'.");
         }
     };
     /**
-     * Read an application state from an Object.
+     * Read an application state from an Object in v0.1 format.
      * @param {Object} data The Object representation of the state.
      * @param {Object} eventCallback The callback to associate to draw commands.
      */
@@ -78,21 +96,68 @@ dwv.State = function (app)
             return node.name() === "shape";
         };
         for ( var k = 0 ; k < nSlices; ++k ) {
-        for ( var f = 0; f < nFrames; ++f ) {
-            for ( var i = 0 ; i < data.drawings[k][f].length; ++i ) {
-                var group = Kinetic.Node.create(data.drawings[k][f][i]);
-                var shape = group.getChildren( isShape )[0];
-                var cmd = new dwv.tool.DrawGroupCommand(
-                    group, shape.className,
-                    app.getDrawLayer(k,f) );
-                if ( typeof eventCallback !== "undefined" ) {
-                    cmd.onExecute = eventCallback;
-                    cmd.onUndo = eventCallback;
+            for ( var f = 0; f < nFrames; ++f ) {
+                for ( var i = 0 ; i < data.drawings[k][f].length; ++i ) {
+                    var group = Kinetic.Node.create(data.drawings[k][f][i]);
+                    var shape = group.getChildren( isShape )[0];
+                    var cmd = new dwv.tool.DrawGroupCommand(
+                        group, shape.className,
+                        app.getDrawLayer(k,f) );
+                    if ( typeof eventCallback !== "undefined" ) {
+                        cmd.onExecute = eventCallback;
+                        cmd.onUndo = eventCallback;
+                    }
+                    cmd.execute();
+                    app.addToUndoStack(cmd);
                 }
-                cmd.execute();
-                app.addToUndoStack(cmd);
             }
         }
+    }
+    /**
+     * Read an application state from an Object in v0.2 format.
+     * @param {Object} data The Object representation of the state.
+     * @param {Object} eventCallback The callback to associate to draw commands.
+     */
+    function readV02(data, eventCallback) {
+        // display
+        app.getViewController().setWindowLevel(data["window-center"], data["window-width"]);
+        app.getViewController().setCurrentPosition(data.position);
+        app.zoom(data.scale, data.scaleCenter.x, data.scaleCenter.y);
+        app.translate(data.translation.x, data.translation.y);
+        // drawings
+        var nSlices = app.getImage().getGeometry().getSize().getNumberOfSlices();
+        var nFrames = app.getImage().getNumberOfFrames();
+        var isShape = function (node) {
+            return node.name() === "shape";
+        };
+        var isLabel = function (node) {
+            return node.name() === "label";
+        };
+        for ( var k = 0 ; k < nSlices; ++k ) {
+            for ( var f = 0; f < nFrames; ++f ) {
+                for ( var i = 0 ; i < data.drawings[k][f].length; ++i ) {
+                    var group = Kinetic.Node.create(data.drawings[k][f][i]);
+                    var shape = group.getChildren( isShape )[0];
+                    var cmd = new dwv.tool.DrawGroupCommand(
+                        group, shape.className,
+                        app.getDrawLayer(k,f) );
+                    if ( typeof eventCallback !== "undefined" ) {
+                        cmd.onExecute = eventCallback;
+                        cmd.onUndo = eventCallback;
+                    }
+                    // text (new in v0.2)
+                    // TODO Verify ID?
+                    var details = data.drawingsDetails[k][f][i];
+                    var label = group.getChildren( isLabel )[0];
+                    var text = label.getText();
+                    text.textExpr = details.textExpr;
+                    text.longText = details.longText;
+                    text.quant = details.quant;
+                    // execute
+                    cmd.execute();
+                    app.addToUndoStack(cmd);
+                }
+            }
         }
     }
 }; // State class

src/app/toolboxController.js

@@ -44,11 +44,11 @@ dwv.ToolboxController = function (toolbox)
 
     /**
      * Set the tool line colour.
-     * @param {String} name The name of the colour.
+     * @param {String} colour The colour.
      */
-    this.setLineColour = function (name)
+    this.setLineColour = function (colour)
     {
-        toolbox.getSelectedTool().setLineColour(name);
+        toolbox.getSelectedTool().setLineColour(colour);
     };
 
     /**

src/dicom/dicomParser.js

@@ -1331,23 +1331,23 @@ dwv.dicom.DicomElementsWrapper = function (dicomElements) {
             }
             // name
             if ( dictElement !== null ) {
-                row[dwv.i18n("basics.name")] = dictElement[2];
+                row.name = dictElement[2];
             }
             else {
-                row[dwv.i18n("basics.name")] = "Unknown Tag & Data";
+                row.name = "Unknown Tag & Data";
             }
             // value
             if ( dicomElement.tag.name !== "x7FE00010" ) {
-                row[dwv.i18n("basics.value")] = dicomElement.value;
+                row.value = dicomElement.value;
             }
             else {
-                row[dwv.i18n("basics.value")] = "...";
+                row.value = "...";
             }
             // others
-            row[dwv.i18n("basics.group")] = dicomElement.tag.group;
-            row[dwv.i18n("basics.element")] = dicomElement.tag.element;
-            row[dwv.i18n("basics.vr")] = dicomElement.vr;
-            row[dwv.i18n("basics.vl")] = dicomElement.vl;
+            row.group = dicomElement.tag.group;
+            row.element = dicomElement.tag.element;
+            row.vr = dicomElement.vr;
+            row.vl = dicomElement.vl;
 
             table.push( row );
         }