diff --git a/utility/annotate-image/README.md b/utility/annotate-image/README.md index de17bc47..ba7bde25 100644 --- a/utility/annotate-image/README.md +++ b/utility/annotate-image/README.md @@ -37,6 +37,8 @@ Each annotation is an object with the following properties: - `lineWidth` (*number*) : the stroke width used to draw the annotation. Default: `5` - `fontSize` (*number*) : the font size to use for the label. Default: `24` - `fontColor` (*string*) : the color of the font to use for the label. Default: `#ffC000` + - `labelLocation` (*string*) : The Location to place the label. `top` or `bottom`. + If this propery is not set it will default to `automatic` and make the best guess based on location. Examples diff --git a/utility/annotate-image/annotate.html b/utility/annotate-image/annotate.html index f87a76b6..d0500625 100644 --- a/utility/annotate-image/annotate.html +++ b/utility/annotate-image/annotate.html @@ -64,6 +64,9 @@
24"#ffC000""top" or "bottom"."automatic" msg.annotations = [ {
diff --git a/utility/annotate-image/annotate.js b/utility/annotate-image/annotate.js
index 2b1b35e6..bf12fc72 100644
--- a/utility/annotate-image/annotate.js
+++ b/utility/annotate-image/annotate.js
@@ -21,7 +21,7 @@ module.exports = function(RED) {
const defaultStroke = n.stroke || "#ffC000";
const defaultLineWidth = parseInt(n.lineWidth) || 5;
const defaultFontSize = n.fontSize || 24;
- const defaultFontColor = n.fontColor || "#ffC000"
+ const defaultFontColor = n.fontColor || "#ffC000";
loadFont();
this.on("input", function(msg) {
@@ -83,7 +83,39 @@ module.exports = function(RED) {
ctx.fillStyle = annotation.fontColor || defaultFontColor;
ctx.textBaseline = "top";
ctx.textAlign = "left";
- ctx.fillText(annotation.label, x+2,y)
+ //set offset value so txt is above or below image
+ if (annotation.labelLocation) {
+ if (annotation.labelLocation === "top") {
+ y = y - (20+((defaultLineWidth*0.5)+(Number(defaultFontSize))));
+ if (y < 0)
+ {
+ y = 0;
+ }
+ }
+ else if (annotation.labelLocation === "bottom") {
+ y = y + (10+h+(((defaultLineWidth*0.5)+(Number(defaultFontSize)))));
+ ctx.textBaseline = "bottom";
+
+ }
+ }
+ //if not user defined make best guess for top or bottom based on location
+ else {
+ //not enought room above imagebox, put label on the bottom
+ if (y < 0 + (20+((defaultLineWidth*0.5)+(Number(defaultFontSize))))) {
+ y = y + (10+h+(((defaultLineWidth*0.5)+(Number(defaultFontSize)))));
+ ctx.textBaseline = "bottom";
+ }
+ //else put the label on the top
+ else {
+ y = y - (20+((defaultLineWidth*0.5)+(Number(defaultFontSize))));
+ if (y < 0) {
+ y = 0;
+ }
+ }
+ }
+
+
+ ctx.fillText(annotation.label, x,y);
}
break;
case 'circle':