annotate-image-plus.html

<script type="text/html" data-template-name="annotate-image-plus">
    <!-- Node configuration UI -->
    <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 class="form-row">
        <label style="padding-top: 8px" for="node-input-data"><i class="fa fa-ellipsis-h"></i> Property</label>
        <input type="text" id="node-input-data" style="width:70%">
        <input type="hidden" id="node-input-dataType">
    </div>
    <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" placeholder="Auto">
    </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" placeholder="Auto">
    </div>
    <div class="form-row">
        <span id="node-input-row-textBackground">
            <label for="node-input-textBackground">Background</label>
        </span>
        <label style="margin-left: 20px" for="node-input-minFontSize">Min Font Size</label>
        <input style="width: 50px" type="text" id="node-input-minFontSize">
    </div>
</script>

<script type="text/javascript">
    (function () {
        // Define color palette and generate additional colors
        const colorPalette = [
            "#ff0000",
            "#ffC000",
            "#ffff00",
            "#92d04f",
            "#0070c0",
            "#001f60",
            "#6f2fa0",
            "#000000",
            "#777777",
        ];
        const colorSteps = 3;
        const 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);
        }

        // Create color validator
        const createColorValidator = (errorMessage) => (v, opt) =>
            RED.validators.regex(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/)(v, opt) === true ? true : errorMessage;

        // Register node type
        RED.nodes.registerType('annotate-image-plus', {
            category: 'utility',
            color: "#f1c2f0",
            defaults: {
                name: { value: "" },
                lineWidth: { value: "", validate: RED.validators.number() },
                fontSize: { value: "", validate: RED.validators.number() },
                minFontSize: { value: "10", validate: RED.validators.number() },
                stroke: { value: "#ffC000", validate: createColorValidator('Invalid line color') },
                "stroke-opacity": { value: 1 },
                fontColor: { value: "#ff0000", validate: createColorValidator('Invalid font color') },
                "fontColor-opacity": { value: 1 },
                textBackground: { value: "#ffffff", validate: createColorValidator('Invalid background color') },
                "textBackground-opacity": { value: 1 },
                data: {
                    value: "payload",
                    required: true,
                    validate: RED.validators.typedInput("dataType")
                },
                dataType: { value: "msg" },
            },
            inputs: 1,
            outputs: 1,
            icon: "font-awesome/fa-object-group",
            label: function () {
                return this.name || "annotate image plus";
            },
            labelStyle: function () {
                return this.name ? "node_label_italic" : "";
            },
            oneditprepare: function () {
                $('#node-input-data').typedInput({
                    default: 'msg',
                    typeField: $("#node-input-dataType"),
                    types: ['msg']
                });
                RED.colorPicker.create({
                    id: "node-input-stroke",
                    value: this.stroke,
                    palette: colorPalette,
                    cellPerRow: colorCount,
                    cellWidth: 16,
                    cellHeight: 16,
                    cellMargin: 3,
                    opacity: this["stroke-opacity"]
                }).appendTo("#node-input-row-stroke");
                RED.colorPicker.create({
                    id: "node-input-fontColor",
                    value: this.fontColor,
                    palette: colorPalette,
                    cellPerRow: colorCount,
                    cellWidth: 16,
                    cellHeight: 16,
                    cellMargin: 3,
                    opacity: this["fontColor-opacity"]
                }).appendTo("#node-input-row-fontColor");
                RED.colorPicker.create({
                    id: "node-input-textBackground",
                    value: this.textBackground,
                    palette: colorPalette,
                    cellPerRow: colorCount,
                    cellWidth: 16,
                    cellHeight: 16,
                    cellMargin: 3,
                    opacity: this["textBackground-opacity"]
                }).appendTo("#node-input-row-textBackground");
            }
        });
    })();
</script>