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 @@
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. Default: "top" or "bottom".
+ If this propery is not set it will default to "automatic"

Examples

 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':