From 629854e74ed5b08eeaad9a2cfda2efabd22e2069 Mon Sep 17 00:00:00 2001 From: ivmartel Date: Wed, 30 Nov 2016 00:48:52 +0100 Subject: [PATCH 1/4] Initial free hand --- src/tools/freeHand.js | 117 ++++++++++++++++++++++++++++++++++ viewers/mobile/applauncher.js | 2 +- viewers/mobile/index.html | 1 + 3 files changed, 119 insertions(+), 1 deletion(-) create mode 100644 src/tools/freeHand.js diff --git a/src/tools/freeHand.js b/src/tools/freeHand.js new file mode 100644 index 0000000000..c6d63fdc3d --- /dev/null +++ b/src/tools/freeHand.js @@ -0,0 +1,117 @@ +// namespaces +var dwv = dwv || {}; +dwv.tool = dwv.tool || {}; +//external +var Kinetic = Kinetic || {}; + +/** + * FreeHand factory. + * @constructor + */ +dwv.tool.FreeHandFactory = function () +{ + /** + * Get the number of points needed to build the shape. + * @return {Number} The number of points. + */ + this.getNPoints = function () { return 1000; }; + /** + * Get the timeout between point storage. + * @return {Number} The timeout in milliseconds. + */ + this.getTimeout = function () { return 25; }; +}; + +/** + * Create a roi shape to be displayed. + * @param {Array} points The points from which to extract the line. + * @param {Object} style The drawing style. + * @param {Object} image The associated image. + */ +dwv.tool.FreeHandFactory.prototype.create = function (points, style /*, image*/) +{ + // points stored the kineticjs way + var arr = []; + for( var i = 0; i < points.length; ++i ) + { + arr.push( points[i].getX() ); + arr.push( points[i].getY() ); + } + // draw shape + var kshape = new Kinetic.Line({ + points: arr, + stroke: style.getLineColour(), + strokeWidth: style.getScaledStrokeWidth(), + name: "shape", + tension: 0.5 + }); + + // text + var ktext = new Kinetic.Text({ + fontSize: style.getScaledFontSize(), + fontFamily: style.getFontFamily(), + fill: style.getLineColour(), + name: "text" + }); + ktext.textExpr = ""; + ktext.longText = ""; + ktext.quant = null; + ktext.setText(ktext.textExpr); + + // label + var klabel = new Kinetic.Label({ + x: points[0].getX(), + y: points[0].getY() + 10, + name: "label" + }); + klabel.add(ktext); + klabel.add(new Kinetic.Tag()); + + // return group + var group = new Kinetic.Group(); + group.name("freeHand-group"); + group.add(kshape); + group.add(klabel); + group.visible(true); // dont inherit + return group; +}; + +/** + * Update a FreeHand shape. + * @param {Object} anchor The active anchor. + * @param {Object} image The associated image. + */ +dwv.tool.UpdateFreeHand = function (anchor /*, image*/) +{ + // parent group + var group = anchor.getParent(); + // associated shape + var kline = group.getChildren( function (node) { + return node.name() === 'shape'; + })[0]; + // associated label + var klabel = group.getChildren( function (node) { + return node.name() === 'label'; + })[0]; + + // update self + var point = group.getChildren( function (node) { + return node.id() === anchor.id(); + })[0]; + point.x( anchor.x() ); + point.y( anchor.y() ); + // update the roi point and compensate for possible drag + // (the anchor id is the index of the point in the list) + var points = kline.points(); + points[anchor.id()] = anchor.x() - kline.x(); + points[anchor.id()+1] = anchor.y() - kline.y(); + kline.points( points ); + + // update text + var ktext = klabel.getText(); + ktext.quant = null; + ktext.setText(dwv.utils.replaceFlags(ktext.textExpr, ktext.quant)); + // update position + var textPos = { 'x': points[0] + kline.x(), 'y': points[1] + kline.y() + 10 }; + klabel.position( textPos ); +}; diff --git a/viewers/mobile/applauncher.js b/viewers/mobile/applauncher.js index 8b2a19a2c7..3e9397cc09 100644 --- a/viewers/mobile/applauncher.js +++ b/viewers/mobile/applauncher.js @@ -42,7 +42,7 @@ function startApp() { "loaders": ["File", "Url", "GoogleDrive", "Dropbox"], "tools": ["Scroll", "WindowLevel", "ZoomAndPan", "Draw", "Livewire", "Filter", "Floodfill"], "filters": ["Threshold", "Sharpen", "Sobel"], - "shapes": ["Arrow", "Line", "Protractor", "Rectangle", "Roi", "Ellipse"], + "shapes": ["Arrow", "Line", "Protractor", "Rectangle", "Roi", "Ellipse", "FreeHand"], "isMobile": true //"defaultCharacterSet": "chinese" }); diff --git a/viewers/mobile/index.html b/viewers/mobile/index.html index da3d89ffd0..8794a52dda 100644 --- a/viewers/mobile/index.html +++ b/viewers/mobile/index.html @@ -98,6 +98,7 @@ + From 90fc52e55f64327bda7cc8a7d5e159b3ee6e4b4e Mon Sep 17 00:00:00 2001 From: ivmartel Date: Wed, 30 Nov 2016 00:48:52 +0100 Subject: [PATCH 2/4] Initial free hand --- src/tools/freeHand.js | 117 ++++++++++++++++++++++++++++++++++ viewers/mobile/applauncher.js | 2 +- viewers/mobile/index.html | 1 + 3 files changed, 119 insertions(+), 1 deletion(-) create mode 100644 src/tools/freeHand.js diff --git a/src/tools/freeHand.js b/src/tools/freeHand.js new file mode 100644 index 0000000000..c6d63fdc3d --- /dev/null +++ b/src/tools/freeHand.js @@ -0,0 +1,117 @@ +// namespaces +var dwv = dwv || {}; +dwv.tool = dwv.tool || {}; +//external +var Kinetic = Kinetic || {}; + +/** + * FreeHand factory. + * @constructor + */ +dwv.tool.FreeHandFactory = function () +{ + /** + * Get the number of points needed to build the shape. + * @return {Number} The number of points. + */ + this.getNPoints = function () { return 1000; }; + /** + * Get the timeout between point storage. + * @return {Number} The timeout in milliseconds. + */ + this.getTimeout = function () { return 25; }; +}; + +/** + * Create a roi shape to be displayed. + * @param {Array} points The points from which to extract the line. + * @param {Object} style The drawing style. + * @param {Object} image The associated image. + */ +dwv.tool.FreeHandFactory.prototype.create = function (points, style /*, image*/) +{ + // points stored the kineticjs way + var arr = []; + for( var i = 0; i < points.length; ++i ) + { + arr.push( points[i].getX() ); + arr.push( points[i].getY() ); + } + // draw shape + var kshape = new Kinetic.Line({ + points: arr, + stroke: style.getLineColour(), + strokeWidth: style.getScaledStrokeWidth(), + name: "shape", + tension: 0.5 + }); + + // text + var ktext = new Kinetic.Text({ + fontSize: style.getScaledFontSize(), + fontFamily: style.getFontFamily(), + fill: style.getLineColour(), + name: "text" + }); + ktext.textExpr = ""; + ktext.longText = ""; + ktext.quant = null; + ktext.setText(ktext.textExpr); + + // label + var klabel = new Kinetic.Label({ + x: points[0].getX(), + y: points[0].getY() + 10, + name: "label" + }); + klabel.add(ktext); + klabel.add(new Kinetic.Tag()); + + // return group + var group = new Kinetic.Group(); + group.name("freeHand-group"); + group.add(kshape); + group.add(klabel); + group.visible(true); // dont inherit + return group; +}; + +/** + * Update a FreeHand shape. + * @param {Object} anchor The active anchor. + * @param {Object} image The associated image. + */ +dwv.tool.UpdateFreeHand = function (anchor /*, image*/) +{ + // parent group + var group = anchor.getParent(); + // associated shape + var kline = group.getChildren( function (node) { + return node.name() === 'shape'; + })[0]; + // associated label + var klabel = group.getChildren( function (node) { + return node.name() === 'label'; + })[0]; + + // update self + var point = group.getChildren( function (node) { + return node.id() === anchor.id(); + })[0]; + point.x( anchor.x() ); + point.y( anchor.y() ); + // update the roi point and compensate for possible drag + // (the anchor id is the index of the point in the list) + var points = kline.points(); + points[anchor.id()] = anchor.x() - kline.x(); + points[anchor.id()+1] = anchor.y() - kline.y(); + kline.points( points ); + + // update text + var ktext = klabel.getText(); + ktext.quant = null; + ktext.setText(dwv.utils.replaceFlags(ktext.textExpr, ktext.quant)); + // update position + var textPos = { 'x': points[0] + kline.x(), 'y': points[1] + kline.y() + 10 }; + klabel.position( textPos ); +}; diff --git a/viewers/mobile/applauncher.js b/viewers/mobile/applauncher.js index 8b2a19a2c7..3e9397cc09 100644 --- a/viewers/mobile/applauncher.js +++ b/viewers/mobile/applauncher.js @@ -42,7 +42,7 @@ function startApp() { "loaders": ["File", "Url", "GoogleDrive", "Dropbox"], "tools": ["Scroll", "WindowLevel", "ZoomAndPan", "Draw", "Livewire", "Filter", "Floodfill"], "filters": ["Threshold", "Sharpen", "Sobel"], - "shapes": ["Arrow", "Line", "Protractor", "Rectangle", "Roi", "Ellipse"], + "shapes": ["Arrow", "Line", "Protractor", "Rectangle", "Roi", "Ellipse", "FreeHand"], "isMobile": true //"defaultCharacterSet": "chinese" }); diff --git a/viewers/mobile/index.html b/viewers/mobile/index.html index da3d89ffd0..8794a52dda 100644 --- a/viewers/mobile/index.html +++ b/viewers/mobile/index.html @@ -98,6 +98,7 @@ + From cb1e31e3e0137e6fbf77203cec4f4d368b34264c Mon Sep 17 00:00:00 2001 From: ivmartel Date: Sat, 10 Dec 2016 00:11:55 +0100 Subject: [PATCH 3/4] Added free hand translation. --- locales/en/translation.json | 3 +++ locales/fr/translation.json | 3 +++ 2 files changed, 6 insertions(+) diff --git a/locales/en/translation.json b/locales/en/translation.json index bb0e981f41..765a2cc039 100644 --- a/locales/en/translation.json +++ b/locales/en/translation.json @@ -139,6 +139,9 @@ }, "Arrow": { "name": "Arrow" + }, + "FreeHand": { + "name": "Free hand" } }, "io": { diff --git a/locales/fr/translation.json b/locales/fr/translation.json index efc8cc0d8c..de4070e2b8 100644 --- a/locales/fr/translation.json +++ b/locales/fr/translation.json @@ -139,6 +139,9 @@ }, "Arrow": { "name": "Pointeur" + }, + "FreeHand": { + "name": "Main levée" } }, "io": { From afb87479f5e33438bc9fde42e5d71d26e0e561db Mon Sep 17 00:00:00 2001 From: ivmartel Date: Sat, 10 Dec 2016 00:12:33 +0100 Subject: [PATCH 4/4] Added free hand to static viewer. --- viewers/static/applauncher.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/viewers/static/applauncher.js b/viewers/static/applauncher.js index dbf640725d..3c16e78876 100644 --- a/viewers/static/applauncher.js +++ b/viewers/static/applauncher.js @@ -17,7 +17,7 @@ function startApp() { "loaders": ["File", "Url"], "tools": ["Scroll", "WindowLevel", "ZoomAndPan", "Draw", "Livewire", "Filter", "Floodfill"], "filters": ["Threshold", "Sharpen", "Sobel"], - "shapes": ["Arrow", "Line", "Protractor", "Rectangle", "Roi", "Ellipse"], + "shapes": ["Arrow", "Line", "Protractor", "Rectangle", "Roi", "Ellipse", "FreeHand"], "isMobile": false });