<script type="text/html" data-template-name="annotate-image"> <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"> <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> </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>