frodovdr/node-red-nodes
1
0
Fork 0
mirror of https://github.com/node-red/node-red-nodes.git synced 2023-10-10 13:36:58 +02:00
Code Issues Releases Wiki Activity

Tidy up edit dialog

Browse Source
This commit is contained in:
Nick O'Leary 2020-10-30 09:51:03 +00:00
parent 3d3841e651
commit 056836d1e5
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
3 changed files with 25 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
utility/annotate-image/README.md
View File

@ -31,9 +31,9 @@ Each annotation is an object with the following properties:
- `r` (*number*) : the radius of a `circle` annotation
- `bbox` (*array*) : this can be used instead of `x`, `y`, `w`, `h` and `r`.
It should be an array of four values giving the bounding box of the annotation:
`[x, y, w, h]`.
`[x, y, w, h]`. If this property is set and `type` is not set, it will default to `rect`.
- `label` (*string*) : an optional piece of text to label the annotation with
- `stroke` (*string*) : the color of the annotation. Default: `#ffC000`
- `stroke` (*string*) : the line color of the annotation. Default: `#ffC000`
- `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`

35
utility/annotate-image/annotate.html
View File

@ -1,23 +1,23 @@
<script type="text/x-red" data-template-name="annotate-image">
<div class="form-row">
<span id="node-input-row-stroke">
<label for="node-input-stroke">Line Color</label>
</span>
<label style="margin-left: 20px" for="node-input-lineWidth">Line Width</label>
<input style="width: 50px" type="text" id="node-input-lineWidth">
</div>
<div class="form-row">
<span id="node-input-row-fontColor">
<label for="node-input-fontColor">Font Color</label>
</span>
<label style="margin-left: 20px" for="node-input-fontSize">Font Size</label>
<input style="width: 50px" type="text" id="node-input-fontSize">
</div>
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div id="node-input-row-stroke" class="form-row">
<label for="node-input-stroke">Stroke</label>
</div>
<div class="form-row">
<label for="node-input-lineWidth">Line Width</label>
<input type="text" id="node-input-lineWidth">
</div>
<div class="form-row">
<label for="node-input-fontSize">Font Size</label>
<input type="text" id="node-input-fontSize">
</div>
<div id="node-input-row-fontColor" class="form-row">
<label for="node-input-fontColor">Font Color</label>
</div>
</script>
<script type="text/x-red" data-help-name="annotate-image">
@ -52,11 +52,12 @@
<dd>The radius of a <code>circle</code> annotation.</dd>
<dt>bbox <span class="property-type">array</span></dt>
<dd>This can be used instead of <code>x</code>,<code>y</code>,<code>w</code>,<code>h</code> and <code>r</code>. It should
be an array of four values giving the bounding box of the annotation: <code>[x, y, w, h]</code>.</dd>
be an array of four values giving the bounding box of the annotation: <code>[x, y, w, h]</code>.<br>
If this property is set and <code>type</code> is not set, it will default to <code>rect</code>.</dd>
<dt>label <span class="property-type">string</span></dt>
<dd>An optional piece of text to label the annotation with</dd>
<dt>stroke <span class="property-type">string</span></dt>
<dd>Set the color of the annotation. Default: <code>"#ffC000"</code></dd>
<dd>The line color of the annotation. Default: <code>"#ffC000"</code></dd>
<dt>lineWidth <span class="property-type">number</span></dt>
<dd>The stroke width used to draw the annotation. Default: <code>5</code></dd>
<dt>fontSize <span class="property-type">number</span></dt>
@ -135,7 +136,7 @@
outputs:1,
icon: "font-awesome/fa-object-group",
label: function() {
return this.name||"Annotate Image";
return this.name||"annotate image";
},
labelStyle: function() {
return this.name?"node_label_italic":"";

5
utility/annotate-image/annotate.js
View File

@ -45,6 +45,11 @@ module.exports = function(RED) {
ctx.lineWidth = annotation.lineWidth || defaultLineWidth;
ctx.lineJoin = 'bevel';
let x,y,r,w,h;
if (!annotation.type && annotation.bbox) {
annotation.type = 'rect';
}
switch(annotation.type) {
case 'rect':
if (annotation.bbox) {