1
0
mirror of https://github.com/node-red/node-red-nodes.git synced 2023-10-10 13:36:58 +02:00
node-red-nodes/utility/annotate-image/annotate.html
2021-03-12 13:17:23 +00:00

103 lines
3.4 KiB
HTML

<script type="text/html" 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>
</script>
<script type="text/javascript">
(function() {
// Lifted from @node-red/editor-client/.../group.js
// Need to make this a default built-in palette so we don't have to copy
// it around.
var colorPalette = [
"#ff0000",
"#ffC000",
"#ffff00",
"#92d04f",
"#0070c0",
"#001f60",
"#6f2fa0",
"#000000",
"#777777"
]
var colorSteps = 3;
var colorCount = colorPalette.length;
for (var i=0,len=colorPalette.length*colorSteps;i<len;i++) {
var ci = i%colorCount;
var j = Math.floor(i/colorCount)+1;
var c = colorPalette[ci];
var r = parseInt(c.substring(1, 3), 16);
var g = parseInt(c.substring(3, 5), 16);
var b = parseInt(c.substring(5, 7), 16);
var dr = (255-r)/(colorSteps+((ci===colorCount-1) ?0:1));
var dg = (255-g)/(colorSteps+((ci===colorCount-1) ?0:1));
var db = (255-b)/(colorSteps+((ci===colorCount-1) ?0:1));
r = Math.min(255,Math.floor(r+j*dr));
g = Math.min(255,Math.floor(g+j*dg));
b = Math.min(255,Math.floor(b+j*db));
var s = ((r<<16) + (g<<8) + b).toString(16);
colorPalette.push('#'+'000000'.slice(0, 6-s.length)+s);
}
RED.nodes.registerType('annotate-image',{
category: 'utility',
color:"#f1c2f0",
defaults: {
name: {value:""},
fill: {value:""},
stroke: {value:"#ffC000"},
lineWidth: {value:5},
fontSize: {value: 24},
fontColor: {value: "#ffC000"}
},
inputs:1,
outputs:1,
icon: "font-awesome/fa-object-group",
label: function() {
return this.name||"annotate image";
},
labelStyle: function() {
return this.name?"node_label_italic":"";
},
oneditprepare: function() {
RED.colorPicker.create({
id:"node-input-stroke",
value: this.stroke || "#ffC000",
palette: colorPalette,
cellPerRow: colorCount,
cellWidth: 16,
cellHeight: 16,
cellMargin: 3
}).appendTo("#node-input-row-stroke");
RED.colorPicker.create({
id:"node-input-fontColor",
value: this.fontColor || "#ffC000",
palette: colorPalette,
cellPerRow: colorCount,
cellWidth: 16,
cellHeight: 16,
cellMargin: 3
}).appendTo("#node-input-row-fontColor");
}
});
})();
</script>