node-red-nodes/utility/annotate-image/annotate.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>