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