jimp.html

<script type="text/javascript">
(function() {
    var imageToolsNodeCommon = {};
    imageToolsNodeCommon.resizeModes = [
        "RESIZE_NEAREST_NEIGHBOR",
        "RESIZE_BILINEAR",
        "RESIZE_BICUBIC",
        "RESIZE_HERMITE",
        "RESIZE_BEZIER"
    ];
    imageToolsNodeCommon.jimpFonts = [
        "FONT_SANS_8_BLACK",
        "FONT_SANS_10_BLACK",
        "FONT_SANS_12_BLACK",
        "FONT_SANS_14_BLACK",
        "FONT_SANS_16_BLACK",
        "FONT_SANS_32_BLACK",
        "FONT_SANS_64_BLACK",
        "FONT_SANS_128_BLACK",
        "FONT_SANS_8_WHITE",
        "FONT_SANS_16_WHITE",
        "FONT_SANS_32_WHITE",
        "FONT_SANS_64_WHITE",
        "FONT_SANS_128_WHITE"
    ];

    imageToolsNodeCommon.blendModes = [
        "BLEND_SOURCE_OVER",
        "BLEND_DESTINATION_OVER",
        "BLEND_MULTIPLY",
        "BLEND_SCREEN",
        "BLEND_OVERLAY",
        "BLEND_DARKEN",
        "BLEND_LIGHTEN",
        "BLEND_HARDLIGHT",
        "BLEND_DIFFERENCE",
        "BLEND_EXCLUSION",
    ];
    

    imageToolsNodeCommon.alignMode = {
                        "Left" : 1,
                        "Centre": 2,
                        "Right" : 4,
                        "Top" : 8,
                        "Middle": 16,
                        "Bottom": 32,
                        "Top Left" : 1 + 8,
                        "Top Centre" : 2 + 8,
                        "Top Right" : 4 + 8,
                        "Middle Left" : 1 + 16,
                        "Middle Centre" : 2 + 16,                        
                        "Middle Right" : 4 + 16,                        
                        "Bottom Left" : 1 + 32,
                        "Bottom Centre" : 2 + 32,                        
                        "Bottom Right" : 4 + 32,                        
    };  
    
    imageToolsNodeCommon.alignModesX = [
        "HORIZONTAL_ALIGN_LEFT",
        "HORIZONTAL_ALIGN_CENTER",
        "HORIZONTAL_ALIGN_RIGHT"                 
    ];
    imageToolsNodeCommon.alignModesY = [
        "VERTICAL_ALIGN_TOP",
        "VERTICAL_ALIGN_MIDDLE",
        "VERTICAL_ALIGN_BOTTOM"
    ];
   
    //TODO: add sections to the options by giving each item a category
    //TODO: consider moving the 'functions' to the server side and use Http Admin endpoint to get a list of functions (for the dropdown)

    imageToolsNodeCommon.functions = {

        "none" : {"name" : "none","fn" : "none", "description" : "Just loads the image.","parameters" : [] },

        //FUTURE: possible way of simplifying calling any function via msg.payload
        //but how to handle varying amount of variables is problematic 
        //For now, user will have to use batch option and send function+parameters via parameter1
        // "custom" : {"name" : "custom","fn" : "", "description" : "Send function name from msg/flow/global. NOTE: Consider using batch mode and sending a batch object via payload (see side panel info for info)","parameters" : [
        // {"name" : "Function", "type" : "str", "required" : true, "hint" : "Name of the Jimp function to execute", "defaultType" : "str" },
        // {"name" : "Parameter1", "type" : "none|str|num|buf|json", "required" : false, "hint" : "Parameter 1", "defaultType" : "none" },
        // {"name" : "Parameter2", "type" : "none|str|num|buf|json", "required" : false, "hint" : "Parameter 2", "defaultType" : "none" },
        // {"name" : "Parameter3", "type" : "none|str|num|buf|json", "required" : false, "hint" : "Parameter 3", "defaultType" : "none" },
        // {"name" : "Parameter4", "type" : "none|str|num|buf|json", "required" : false, "hint" : "Parameter 4", "defaultType" : "none" },
        // {"name" : "Parameter5", "type" : "none|str|num|buf|json", "required" : false, "hint" : "Parameter 5", "defaultType" : "none" },
        // {"name" : "Parameter6", "type" : "none|str|num|buf|json", "required" : false, "hint" : "Parameter 6", "defaultType" : "none" },
        // {"name" : "Parameter7", "type" : "none|str|num|buf|json", "required" : false, "hint" : "Parameter 7", "defaultType" : "none" }] },


        "write" : {"name" : "write","fn" : "write", "description" : "Write to file. NOTE: You can specify an alternative file extension type to change the type. Currently support types are jpg, png, bmp.","parameters" : [
        {"name" : "filename", "type" : "str", "required" : true, "hint" : "Name of the file", "defaultType" : "str" }] },


        "quality" : {"name" : "quality","fn" : "quality", "description" : "Set the quality of the image. Useful for reducing size of image before calling the write function.","parameters" : [
        {"name" : "quality", "type" : "num", "required" : true, "hint" : "Quality value 1 ~ 100" }] },


        "contain" : {"name" : "contain","fn" : "contain", "description" : "scale the image to the given width and height, some parts of the image may be letter boxed","parameters" : [
        {"name" : "w", "type" : "num", "required" : true, "hint" : "the width to resize the image to" },
        {"name" : "h", "type" : "num", "required" : true, "hint" : "the height to resize the image to" },
        {"name" : "alignBits", "type" : "alignMode", "required" : false, "hint" : "A bitmask for horizontal and vertical alignment. Jimp.HORIZONTAL_ALIGN_LEFT | Jimp.HORIZONTAL_ALIGN_CENTER | Jimp.HORIZONTAL_ALIGN_RIGHT | Jimp.VERTICAL_ALIGN_TOP | Jimp.VERTICAL_ALIGN_MIDDLE | Jimp.VERTICAL_ALIGN_BOTTOM;" },
        {"name" : "mode", "type" : "resizeMode", "required" : false, "hint" : "A scaling method (e.g. Jimp.RESIZE_BEZIER)" }] },


        "cover" : {"name" : "cover","fn" : "cover", "description" : "scale the image to the given width and height, some parts of the image may be clipped","parameters" : [
        {"name" : "w", "type" : "num", "required" : true, "hint" : "the width to resize the image to" },
        {"name" : "h", "type" : "num", "required" : true, "hint" : "the height to resize the image to" },
        {"name" : "alignBits", "type" : "alignMode|str", "required" : false, "hint" : "A bitmask for horizontal and vertical alignment. Jimp.HORIZONTAL_ALIGN_LEFT | Jimp.HORIZONTAL_ALIGN_CENTER | Jimp.HORIZONTAL_ALIGN_RIGHT | Jimp.VERTICAL_ALIGN_TOP | Jimp.VERTICAL_ALIGN_MIDDLE | Jimp.VERTICAL_ALIGN_BOTTOM;" },
        {"name" : "mode", "type" : "resizeMode", "required" : false, "hint" : "a scaling method (e.g. Jimp.RESIZE_BEZIER)" }] },


        "resize" : {"name" : "resize","fn" : "resize", "description" : "resize the image. One of the w or h parameters can be set to automatic (\"Jimp.AUTO\" or -1).","parameters" : [
        {"name" : "w", "type" : "num|auto", "required" : true, "hint" : "the width to resize the image to (or \"Jimp.AUTO\" or -1)" },
        {"name" : "h", "type" : "num|auto", "required" : true, "hint" : "the height to resize the image to (or \"Jimp.AUTO\" or -1)" },
        {"name" : "mode", "type" : "resizeMode", "required" : false, "hint" : "a scaling method (e.g. Jimp.RESIZE_BEZIER)" }] },


        "scale" : {"name" : "scale","fn" : "scale", "description" : "scale the image by the factor f","parameters" : [
        {"name" : "f", "type" : "num", "required" : true, "hint" : "f the factor to scale the image by" },
        {"name" : "mode", "type" : "resizeMode", "required" : false, "hint" : "a scaling method (e.g. Jimp.RESIZE_BEZIER)" }] },


        "scaleToFit" : {"name" : "scaleToFit","fn" : "scaleToFit", "description" : "scale the image to the largest size that fits inside the given width and height. One of the w or h parameters can be set to automatic (\"Jimp.AUTO\" or -1).","parameters" : [
        {"name" : "w", "type" : "num|auto", "required" : true, "hint" : "the width to resize the image to (or \"Jimp.AUTO\" or -1)" },
        {"name" : "h", "type" : "num|auto", "required" : true, "hint" : "the height to resize the image to (or \"Jimp.AUTO\" or -1)" },
        {"name" : "mode", "type" : "resizeMode", "required" : false, "hint" : "a scaling method (e.g. Jimp.RESIZE_BEZIER)" }] },


        "autocrop1" : {"name" : "autocrop","fn" : "autocrop", "description" : "automatically crop same-color borders from image (if any), frames must be a Boolean","parameters" : [
        {"name" : "tolerance", "type" : "num", "required" : false, "hint" : "a percent value of tolerance for pixels color difference (default: 0.0002%)" },
        {"name" : "frames", "type" : "bool", "required" : false, "hint" : "flag to crop only real frames: all 4 sides of the image must have some border (default: true)" }] },


        "autocrop2" : {"name" : "autocrop","fn" : "autocrop", "description" : "automatically crop same-color borders from image (if any), options may contain tolerance, cropOnlyFrames, cropSymmetric, leaveBorder","parameters" : [
        {"name" : "options", "type" : "json", "required" : false, "hint" : "options may contain tolerance, cropOnlyFrames, cropSymmetric, leaveBorder" }] },



        "crop" : {"name" : "crop","fn" : "crop", "description" : "crop to the given region","parameters" : [
        {"name" : "x", "type" : "num", "required" : true, "hint" : "the x coordinate to crop form" },
        {"name" : "y", "type" : "num", "required" : true, "hint" : "the y coordinate to crop form" },
        {"name" : "w", "type" : "num", "required" : true, "hint" : "the width of the crop region" },
        {"name" : "h", "type" : "num", "required" : true, "hint" : "the height of the crop region" }] },


        "blit" : {"name" : "blit","fn" : "blit", "description" : "blit the image with another Jimp image at x, y, optionally cropped","parameters" : [
        {"name" : "src", "type" : "", "required" : true, "hint" : "the source image (a Jimp instance)", "defaultType" : "msg", "defaultValue" : "payload" },
        {"name" : "x", "type" : "num", "required" : true, "hint" : "the x position to blit the image" },
        {"name" : "y", "type" : "num", "required" : true, "hint" : "the y position to blit the image" },
        {"name" : "srcx", "type" : "num", "required" : false, "hint" : "the x position from which to crop the source image" },
        {"name" : "srcy", "type" : "num", "required" : false, "hint" : "the y position from which to crop the source image" },
        {"name" : "srcw", "type" : "num", "required" : false, "hint" : "the width to which to crop the source image" },
        {"name" : "srch", "type" : "num", "required" : false, "hint" : "the height to which to crop the source image" }] },


        "composite" : {"name" : "composite","fn" : "composite", "description" : "composites another Jimp image over this image at x, y","parameters" : [
        {"name" : "src", "type" : "", "required" : true, "hint" : "the source image (a Jimp instance)", "defaultType" : "msg", "defaultValue" : "payload" },
        {"name" : "x", "type" : "num", "required" : true, "hint" : "the x position to blit the image" },
        {"name" : "y", "type" : "num", "required" : true, "hint" : "the y position to blit the image" },
        {"name" : "mode", "group" : "options", "type" : "blend", "required" : true, "hint" : "what blend mode to use" },
        {"name" : "opacitySource", "group" : "options", "type" : "num", "required" : true, "hint" : "opacity of src image 0.0 to 1.0" },
        {"name" : "opacityDest", "group" : "options", "type" : "num", "required" : true, "hint" : "opacity of src image 0.0 to 1.0" }] },



        "mask" : {"name" : "mask","fn" : "mask", "description" : "masks the image with another Jimp image at x, y using average pixel value","parameters" : [
        {"name" : "src", "type" : "", "required" : true, "hint" : "the source image (a Jimp instance)", "defaultType" : "msg", "defaultValue" : "payload" },
        {"name" : "x", "type" : "num", "required" : true, "hint" : "the horizontal position to blit the image" },
        {"name" : "y", "type" : "num", "required" : true, "hint" : "the vertical position to blit the image" }] },



        "flip" : {"name" : "flip","fn" : "flip", "description" : "flip the image horizontally or vertically","parameters" : [
        {"name" : "horz", "type" : "bool", "required" : true, "hint" : "if true the image will be flipped horizontally" },
        {"name" : "vert", "type" : "bool", "required" : true, "hint" : "if true the image will be flipped vertically" }] },


        "mirror" : {"name" : "mirror","fn" : "mirror", "description" : "an alias for flip","parameters" : [
        {"name" : "horz", "type" : "bool", "required" : true, "hint" : "if true the image will be flipped horizontally" },
        {"name" : "vert", "type" : "bool", "required" : true, "hint" : "if true the image will be flipped vertically" }] },


        "rotate" : {"name" : "rotate","fn" : "rotate", "description" : "rotate the image clockwise by a number of degrees. Optionally, a resize mode can be passed. If `false` is passed as the second parameter, the image width and height will not be resized.","parameters" : [
        {"name" : "deg", "type" : "num", "required" : true, "hint" : "the number of degrees to rotate the image by" },
        {"name" : "mode", "type" : "resizeMode|bool", "required" : false, "hint" : "resize mode or a boolean, if false then the width and height of the image will not be changed" }] },



        "brightness" : {"name" : "brightness","fn" : "brightness", "description" : "adjust the brightness", "parameters" : [
        {"name" : "val", "type" : "num", "required" : true, "hint" : "adjust the brightness by a value -1.0 to 1.0" }] },


        "contrast" : {"name" : "contrast","fn" : "contrast", "description" : "adjust the contrast", "parameters" : [
        {"name" : "val", "type" : "num", "required" : true, "hint" : "adjust the contrast by a value -1.0 to 1.0" }] },


        "dither565" : {"name" : "dither565","fn" : "dither565", "description" : "ordered dithering of the image and reduce color space to 16-bits (RGB565)","parameters" : [] },


        "greyscale" : {"name" : "greyscale","fn" : "greyscale", "description" : "remove colour from the image","parameters" : [] },


        "invert" : {"name" : "invert","fn" : "invert", "description" : "invert the image colours","parameters" : [] },


        "normalize" : {"name" : "normalize","fn" : "normalize", "description" : "normalize the channels in an image","parameters" : [] },

        "fade" : {"name" : "fade","fn" : "fade", "description" : "an alternative to opacity, fades the image by a factor 0 - 1. 0 will haven no effect.","parameters" : [
        {"name" : "f", "type" : "num", "required" : true, "hint" : "A number from 0 to 1. 0 will haven no effect. 1 will turn the image completely transparent." }] },


        "opacity" : {"name" : "opacity","fn" : "opacity", "description" : "multiply the alpha channel by each pixel by the factor f, 0 - 1","parameters" : [
        {"name" : "f", "type" : "num", "required" : true, "hint" : "A number, the factor by which to multiply the opacity of each pixel" }] },

        "opaque" : {"name" : "opaque","fn" : "opaque", "description" : "set the alpha channel on every pixel to fully opaque","parameters" : [] },

        "gaussian" : {"name" : "gaussian","fn" : "gaussian", "description" : "Gaussian blur the image by r pixels (VERY slow)","parameters" : [
        {"name" : "r", "type" : "num", "required" : true, "hint" : "the pixel radius of the blur" }] },


        "blur" : {"name" : "blur","fn" : "blur", "description" : "fast blur the image by r pixels","parameters" : [
        {"name" : "r", "type" : "num", "required" : true, "hint" : "the pixel radius of the blur" }] },

        "convolute" : {"name" : "convolute","fn" : "convolute", "description" : "applies a convolution kernel matrix to the image or a region","parameters" : [
        {"name" : "kernel", "type" : "json", "required" : true, "hint" : "a kernel matrix.  e.g. emboss [[-2, -1, 0], [-1, 1, 1], [0, 1, 2]]", "defaultValue" : "[[-2, -1, 0], [-1, 1, 1], [0, 1, 2]]" }] },

        "convolute_antialise" : {"name" : "antialise*","fn" : "convolute_antialise", "description" : "antialise image (*uses convolute([[1, 2, 1], [2, 4, 2], [1, 2, 1]])","parameters" : [] },
        "convolute_edgedetect" : {"name" : "edgedetect*","fn" : "convolute_edgedetect", "description" : "edge detect image (*uses convolute([[0, 1, 0], [1, -4, 1], [0, 1, 0]])","parameters" : [] },
        "convolute_edgeenhance" : {"name" : "edgeenhance*","fn" : "convolute_edgeenhance", "description" : "edge enhance image (*uses convolute([[0, 0, 0], [-1, 1, 0], [0, 0, 0]])","parameters" : [] },
        "convolute_emboss" : {"name" : "emboss*","fn" : "convolute_emboss", "description" : "emboss image (*uses convolute([[-2, -1, 0], [-1, 1, 1], [0, 1, 2]])","parameters" : [] },
        "convolute_sharpen" : {"name" : "sharpen*","fn" : "convolute_sharpen", "description" : "sharpen image (*uses convolute([[0, -1, 0], [-1, 5, -1], [0, -1, 0]])","parameters" : [] },
        "convolute_strongsharpen" : {"name" : "strong sharpen*","fn" : "convolute_strongsharpen","description" : "sharpen image (*uses convolute([[-1, -1, -1], [-1, 9, -1], [-1, -1, -1]])","parameters" : [] },

        
        "posterize" : {"name" : "posterize","fn" : "posterize", "description" : "apply a posterization effect with n level","parameters" : [
        {"name" : "n", "type" : "num", "required" : true, "hint" : "the amount to adjust the contrast, minimum threshold is two" }] },


        "sepia" : {"name" : "sepia","fn" : "sepia", "description" : "apply a sepia wash to the image","parameters" : [] },


        "pixelate" : {"name" : "pixelate","fn" : "pixelate", "description" : "apply a pixelation effect to the image or a region","parameters" : [
        {"name" : "size", "type" : "num", "required" : true, "hint" : "the size of the pixels" },
        {"name" : "x", "type" : "num", "required" : false, "hint" : "the x position of the region to pixelate" },
        {"name" : "y", "type" : "num", "required" : false, "hint" : "the y position of the region to pixelate" },
        {"name" : "w", "type" : "num", "required" : false, "hint" : "the width of the region to pixelate" },
        {"name" : "h", "type" : "num", "required" : false, "hint" : "the height of the region to pixelate" }] },


        "displace" : {"name" : "displace","fn" : "displace", "description" : "displaces the image pixels based on the provided displacement map. Useful for making stereoscopic 3D images.","parameters" : [
        {"name" : "map", "type" : "", "required" : true, "hint" : "the source image (a Jimp instance)", "defaultValue" : "payload" },
        {"name" : "offset", "type" : "num", "required" : false, "hint" : "the maximum displacement value" }] },


        "background" : {"name" : "background","fn" : "background", "description" : "set the default new pixel colour (e.g. 0xFFFFFFFF or 0x00000000) useful for by some operations e.g. contain or rotate","parameters" : [
        {"name" : "hex", "type" : "num", "required" : true, "hint" : "hexadecimal rgba value (must be entered as a decimal e.g. 0xFFFFFFFF = 4294967295)", "defaultValue" : "4294967295" }] },

        "threshold" : {"name" : "threshold","fn" : "threshold", "description" : "apply one or more functions","parameters" : [
        {"name" : "max", "group" : "options", "type" : "num", "required" : true, "hint" : "max value of byte 0 ~ 255" },
        {"name" : "replace", "group" : "options", "type" : "num", "required" : false, "hint" : "replace with byte 0 ~ 255. Default is 255" },
        {"name" : "autoGreyscale", "group" : "options", "type" : "bool", "required" : false, "hint" : "default is true" }] },

        "batch" : {"name" : "batch","fn" : "batch", "description" : "apply one or more functions","parameters" : [
        {"name" : "options", "type" : "json", "required" : true, "hint" : "an object or an array of objects containing {\"name\" : \"function_name\", \"parameters\" : [x,y,z]}.  Refer to info on side panel}" }] },

        "clone" : {"name" : "clone","fn" : "clone", "description" : "returns a clone of the image","parameters" : [] },
        
//not ready        "histogram" : {"name" : "histogram","fn" : "histogram", "description" : "Generate a histogram of the image. The histogram data will be returned in msg.jobs[x].result, msg.jobs[x].g[], msg.jobs[x].b[].","parameters" : [] },

        "distance" : {"name" : "distance","fn" : "distance", "description" : "calculate the hamming distance between two Jimp images based on their perceptual hash. msg.jobs[x].result will contain a number 0-1, where 0 means the two images are perceived to be identical","parameters" : [
        {"name" : "image2", "type" : "", "required" : true, "hint" : "image to compare to" }] },

        "diff" : {"name" : "diff","fn" : "diff", "description" : "Using a mix of hamming distance and pixel diffing to compare images. Returns an image showing differences and msg.jobs[x].result will contain the proportion of different pixels (0-1), where 0 means the images are pixel identical","parameters" : [
        {"name" : "image2", "type" : "", "required" : true, "hint" : "image to compare to" },
        {"name" : "threshold", "type" : "num", "required" : false, "hint" : "threshold ranges 0-1 (default: 0.1)" }] },

        "print" : {"name" : "print","fn" : "print", "description" : "Print text to the image","parameters" : [
        {"name" : "font", "type" : "jimpFont|str", "required" : true, "hint" : "font to print. NOTE: This can be one of the presets or the path to a fnt file" },
        {"name" : "x", "type" : "num", "required" : true, "hint" : "x coordinate to print text" },
        {"name" : "y", "type" : "num", "required" : true, "hint" : "y coordinate to print text" },
        {"name" : "text", "type" : "str", "required" : true, "hint" : "text to print" },
        {"name" : "maxWidth", "type" : "num", "required" : false, "hint" : "wrap text at maxWidth" },
        {"name" : "maxHeight", "type" : "num", "required" : false, "hint" : "max height" }] },
        
        "print2" : {"name" : "print aligned","fn" : "print", "description" : "Print text to the image","parameters" : [
        {"name" : "font", "type" : "jimpFont|str", "required" : true, "hint" : "font to print. NOTE: This can be one of the presets or the path to a fnt file" },
        {"name" : "x", "type" : "num", "required" : true, "hint" : "x coordinate to print text" },
        {"name" : "y", "type" : "num", "required" : true, "hint" : "y coordinate to print text" },
        {"name" : "text", "group" : "options", "type" : "str", "required" : true, "hint" : "text to print" },
        {"name" : "alignmentX", "group" : "options", "type" : "AlignX", "required" : false, "hint" : "X Alignment" },
        {"name" : "alignmentY", "group" : "options", "type" : "AlignY", "required" : false, "hint" : "Y Alignment" },
        {"name" : "maxWidth", "type" : "auto|num", "required" : false, "hint" : "wrap text at maxWidth" },
        {"name" : "maxHeight", "type" : "auto|num", "required" : false, "hint" : "max height" }] }

    };
    
    imageToolsNodeCommon.requiredParameterValidator = function(node,paramNo,v){
        var fn = imageToolsNodeCommon.functions[node.jimpFunction];
        var parameterCount = fn && fn.parameters ? fn.parameters.length : 0;
        if(paramNo <= parameterCount){
            var p = fn.parameters[paramNo-1];
            var varName = "parameter" + paramNo;
            var typeVal = node[varName + 'Type'];
            if(typeVal == "Jimp.AUTO" || typeVal == "auto" || typeVal == "none"){
                return true;
            }
            if(p && p.required){
                return !!v;//not empty
            }
        }
        return true;
    };


    RED.nodes.registerType('jimp-image', {
        category: 'image tools',
        paletteLabel: "image",
        icon: "image.png",
        color: '#FFAAAA',//'#f24b69',
        defaults: {
            name: { value: "" },
            data: { value: "payload", validate: RED.validators.typedInput("dataType") },
            dataType: { value: "msg" },
            ret: { value: "img"},
            parameter1: { value: "", validate: function(v){
                return imageToolsNodeCommon.requiredParameterValidator(this,1,v) ;
            }},
            parameter1Type: { value: "msg" },
            parameter2: { value: "", validate: function(v){
                return imageToolsNodeCommon.requiredParameterValidator(this,2,v) ;
            }},
            parameter2Type: { value: "msg" },
            parameter3: { value: "", validate: function(v){
                return imageToolsNodeCommon.requiredParameterValidator(this,3,v) ;
            }},
            parameter3Type: { value: "msg" },
            parameter4: { value: "", validate: function(v){
                return imageToolsNodeCommon.requiredParameterValidator(this,4,v) ;
            }},
            parameter4Type: { value: "msg" },
            parameter5: { value: "", validate: function(v){
                return imageToolsNodeCommon.requiredParameterValidator(this,5,v) ;
            }},
            parameter5Type: { value: "msg" },
            parameter6: { value: "", validate: function(v){
                return imageToolsNodeCommon.requiredParameterValidator(this,6,v) ;
            }},
            parameter6Type: { value: "msg" },
            parameter7: { value: "", validate: function(v){
                return imageToolsNodeCommon.requiredParameterValidator(this,7,v) ;
            }},
            parameter7Type: { value: "msg" },
            parameter8: { value: "", validate: function(v){
                return imageToolsNodeCommon.requiredParameterValidator(this,8,v) ;
            }},
            parameter8Type: { value: "msg" },
            sendProperty: { value: "payload" },
            sendPropertyType: { value: "msg" },
            parameterCount: {value: 0},
            jimpFunction: {value: "none"},
            selectedJimpFunction: {value: {}}                     
        },
        inputs: 1,
        outputs: 1,
        label: function () {
            var fname = this.selectedJimpFunction && this.selectedJimpFunction.name ? this.selectedJimpFunction.name : ""; 
            if(fname == "none") fname = "";
            return this.name || fname || "image";
        },
        oneditsave: function() {
            const node = this;
            const $dropdown = $("#node-input-jimpFunction");
            const choice = $dropdown.val();
            const fn = imageToolsNodeCommon.functions[choice];
            node.jimpFunction = choice;
            node.selectedJimpFunction = fn;
            node.parameterCount = fn && fn.parameters ? fn.parameters.length : 0;
        },
        oneditprepare: function () {
            const node = this;
            const isObject = function (val) {
                if (val === null) { return false;}
                return (typeof val === 'object');
            };
            const isNumeric = function(n) {
                return n !== '' && !isNaN(parseFloat(n)) && isFinite(n);
            };
            if(!imageToolsNodeCommon.alignModes){
                imageToolsNodeCommon.alignModes =  [];
                for (var key in imageToolsNodeCommon.alignMode) {
                    if (imageToolsNodeCommon.alignMode.hasOwnProperty(key)) {
                        imageToolsNodeCommon.alignModes.push(key);
                    }
                }
            }
            function isTypeInArray(arr, findType){
                try {
                    var typeToFind = findType;
                    if(isObject(findType))
                        typeToFind = findType.value; 
                    for (var index = 0; index < arr.length; index++) {
                        var element = arr[index];
                        var thisType = isObject(element) ? element.value : element;
                        if(thisType === typeToFind) return true;
                    }
                } catch (error) {}   
                return false;             
            }
            function generateTypedInputTypes(allowableTypes, isOptional) {
                allowableTypes = allowableTypes || "msg|flow|global";
                var parameterTypes = allowableTypes.split("|");

                //if optional but 'none' is not yet an option - added it as first option in typedParameter
                if(typeof isOptional == "boolean" && isOptional == false){
                    if( !isTypeInArray(parameterTypes,"none") ){
                        parameterTypes.unshift("none");
                    }
                } 
                
                //convert any custom types to a typedInput object
                const types = parameterTypes.map(function(t){
                    if(t){
                        switch (t) {
                            case "resizeMode":
                                return {
                                    value:"resizeMode",
                                    label:"Resize.",
                                    options: imageToolsNodeCommon.resizeModes 
                                };
                            case "jimpFont":
                                return {
                                    value:"jimpFont",
                                    label:"Font.",
                                    options: imageToolsNodeCommon.jimpFonts 
                                };
                            case "alignMode": 
                                return {
                                    value:"alignMode",
                                    label:"Align.",
                                    options: imageToolsNodeCommon.alignModes 
                                };
                            case "AlignX": 
                            case "alignModeX": 
                                return {
                                    value:"AlignX",
                                    label:"AlignX.",
                                    options: imageToolsNodeCommon.alignModesX 
                                };
                            case "AlignY": 
                            case "alignModeY": 
                                return {
                                    value:"AlignY",
                                    label:"AlignY.",
                                    options: imageToolsNodeCommon.alignModesY 
                                };
                            case "blend": 
                                return {
                                    value:"Blend",
                                    label:"Blend.",
                                    options: imageToolsNodeCommon.blendModes
                                };
                            case "auto": 
                            case "Jimp.AUTO": 
                                return {
                                    value:"auto",
                                    label:"Auto",
                                    hasValue: false 
                                };
                            case "none": 
                                return {
                                    value:"none",
                                    label:"None",
                                    hasValue: false 
                                };
                            default:
                                return t;
                        }
                    }
                });

                return types;
            }            
            function setupTypedInput(varName, allowableTypes, def, defVal, isOptional, width) {
                var varSel = "#node-input-" + varName;
                var typeSel = varSel + "Type";
                var currentValue = node[varName];
                var currentType = node[varName + "Type"];  
                var parameterTypes = generateTypedInputTypes(allowableTypes, isOptional);
                var defShouldNoValue = false;
                
                //if def type is not in the list of parameter type, change def to 1st item
                if(!isTypeInArray(parameterTypes, def)) {
                    var _firstType = parameterTypes[0];
                    if(isObject(_firstType)) {
                        _firstType = _firstType.value;
                        defShouldNoValue = _firstType.hasValue == false;
                    }
                    def = _firstType;
                }

                //if currently set type is not in the list of parameter types, currentType def to 1st item
                if(!isTypeInArray(parameterTypes, currentType)) {
                    currentType = def;
                }

                //catch all
                if(!currentType){
                    currentType = def;
                }

                
                var $ti = $(varSel);
                var alreadyBuilt = $ti.data("built") == true;
                if(alreadyBuilt) {
                    //already built? just update types :)
                    $ti.typedInput("types", parameterTypes); 
                } else {
                   var opts = {
                    default: def,
                    typeField: $(typeSel),
                    types: parameterTypes
                    };
                    if(isOptional){
                        opts.default = def || "none";
                        opts.validate = function(v) { 
                            //todo - handle this when spec changes
                            return !!v;
                        };
                    }
                    $ti.typedInput(opts); 
                }
                $ti.data("built", true);
                
                if(!currentValue && currentType != "Jimp.AUTO" && currentValue && currentType != "auto" && currentType != "none"){
                    $ti.typedInput("type", def);
                    if(defShouldNoValue) currentValue = "";
                } else if(currentType == "num" && !isNumeric(currentValue)) {
                    $ti.typedInput("type", def);
                    if(defShouldNoValue) currentValue = "";
                } else {
                    $ti.typedInput("type", currentType);
                }

                if(currentType == "bool"){
                    $ti.typedInput("value", (currentValue === true ||  currentValue === "true") ? "true" : "false" );
                } else if(currentValue) {
                    if(currentType == "num" && !isNumeric(currentValue)) {
                        $ti.typedInput("type", def);
                        $ti.typedInput("value", defVal || "");
                    } else {
                        $ti.typedInput("value", currentValue);
                    }
                } else {
                    $ti.typedInput("value", defVal || "");
                }

                if(width) $ti.typedInput("width", width);
            }
            
            //hack - prevent node-red calculating UI panel too large due to long text in the tip
            node.sizeHack = false;
            $(".image-tools-form-tip").css("max-width","450px");
            $(".image-tools-form-tip").hide();//will get show / hid as required when function type is set
            
            setupTypedInput('data', 'msg|flow|global|bin|str|json', 'msg', 'payload', false /*"68%"*/);
            $('#node-input-sendProperty').typedInput({types:['msg']});
            $('#node-input-sendProperty').typedInput("value", node.sendProperty || "payload");
            
            const $dropdown = $("#node-input-jimpFunction");
            $dropdown.off();
            $dropdown.empty().append('<option value=""></option>');
            for (let _key in imageToolsNodeCommon.functions) {
                if (imageToolsNodeCommon.functions.hasOwnProperty(_key)) {
                    const element = imageToolsNodeCommon.functions[_key];
                    if(node.jimpFunction == _key){
                        $dropdown.append($("<option selected />").val(_key).text(element.name));
                    } else {
                        $dropdown.append($("<option />").val(_key).text(element.name));
                    }
                }
            }

            const $convertToBatchButton = $("#convertToBatchButton");

            $convertToBatchButton.click(function() {
                try {
                    const choice = $dropdown.val(); 
                    let fn = imageToolsNodeCommon.functions[choice];  
                    const paramCount = fn && fn.parameters ? fn.parameters.length : 0;
                    const batchSpec = {
                        name: fn.fn,
                        parameters:[]
                    };
                    const inputParameters = [];
                    for (var i = 0; i < paramCount; i++) {
                        var param = fn.parameters[i];
                        var $ti = $('#node-input-parameter' + (i + 1));
                        var pv = $ti.typedInput('value');
                        var pt = $ti.typedInput('type');
                        if(pt === 'msg' || pt === 'global' || pt === 'flow' || pt == "none"){
                            //batchSpec.push("{{" + pt + "." + pv + "}}"); //future - permit template/mustache in batch mode
                            inputParameters.push(null);
                        } else if(pt === 'num'){
                            inputParameters.push( parseFloat(pv) );
                        } else if(pt === 'Resize' || pt === 'Jimp' || pt === 'resizeMode'){
                            inputParameters.push( "Jimp." + pv );
                        } else if(pt === 'Align' || pt === 'alignMode'){
                            inputParameters.push( imageToolsNodeCommon.alignMode[pv] || 0 );
                        } else if(pt === 'AlignX' || pt === 'alignModeX'){
                            inputParameters.push( "Jimp." + pv );
                        } else if(pt === 'AlignY' || pt === 'alignModeY'){
                            inputParameters.push( "Jimp." + pv );
                        } else if(pt === 'Blend'){
                            inputParameters.push( "Jimp." + pv );
                        } else if(pt === 'Font'){
                            inputParameters.push( "Jimp." + pv );
                        } else if(pt === 'bool'){
                            inputParameters.push( (pv === true || pv === "true") );
                        } else if(pt === 'Jimp.AUTO' || pt === 'auto'){
                            inputParameters.push( -1 );
                        } else {
                            inputParameters.push(pv);
                        }
                    }

                    //const isNotUndefined = v => typeof v !== 'undefined';// && v !== null;
                    var isNotUndefined = function(v){
                        return (v !== 'undefined');
                    };
                    var finalParams = [];
                    var fplookup = {};
                    var fParam = 0;
                    for (var index = 0; index < fn.parameters.length; index++) {                       
                        var funcParam = fn.parameters[index];
                        if(funcParam.group){
                            var ifpl = fplookup[funcParam.group];
                            if(typeof ifpl != "number"){
                                ifpl = fParam;
                                finalParams[ifpl] = {};
                                fplookup[funcParam.group] = ifpl;
                                fParam++;
                            }
                            var _v1 = inputParameters[index];
                            if(isNotUndefined(_v1)){
                                finalParams[i][funcParam.name] = _v1;
                            }
                        } else {
                            var _v2 = inputParameters[index];
                            if(isNotUndefined(_v2)){
                                finalParams[fParam++] = _v2;
                            }
                        }
                    }  
                    batchSpec.parameters = finalParams;
                    $dropdown.val("batch").change();
                    var p1NewValue = JSON.stringify(batchSpec);
                    $('#node-input-parameter1').typedInput('type', 'json');
                    $('#node-input-parameter1').typedInput('value', p1NewValue);
                    
                } catch (error) {
                    RED.notify("An error occurred while trying to convert this function to a batch function","error");
                }
                RED.tray.resize(); 
            });

            $dropdown.change(function() {
                var choice = $dropdown.val(); 
                var fn = imageToolsNodeCommon.functions[choice];              
                $convertToBatchButton.prop( "disabled", true );
                $('.jimp-parameter-group').hide();//hide parameters
                $("#tip-jimpFunction").hide();//hide the tip
                $(".paramtip").hide();//hide parameter tips
                if(!fn){
                    return;
                }
                if(fn.fn && fn.fn !== "batch" && fn.fn !== "none"){
                    $convertToBatchButton.prop( "disabled", false );
                }

                //set function tip
                if(fn.description){
                    $("#tip-jimpFunction").text(fn.description);
                    $("#tip-jimpFunction").show();
                }         

                //loop through parameters and setup the typed inputs
                var paramNo = 1;

                $.each(fn.parameters, function() {
                    const pname = "parameter" + paramNo;
                    const lname = "parameter-label" + paramNo;
                    const paramTipName = "tip-parameter" + paramNo;
                    
                    $("#" + lname).text(" " + this.name);
                    $("#" + pname).show();

                    var hint = (this.required ? "(Required)" : "(Optional)");
                    if(this.hint){
                        hint += " " + this.hint;
                    }
                    $("#" + paramTipName).text(hint);
                    $("#" + paramTipName).show();
                   
                    var alwaysPresentParameterTypedInputs = "msg|flow|global";
                    var parameterTypesStr = this.type ? this.type + "|" + alwaysPresentParameterTypedInputs : alwaysPresentParameterTypedInputs;
                    setupTypedInput(pname, parameterTypesStr, this.defaultType, this.defaultValue, this.required);
                    paramNo++;
                });
                RED.tray.resize();
            });
            //sfp();
            $('.jimp-parameter-group').hide();//hide parameters
            $("#tip-jimpFunction").hide();//hide the tip       
            RED.tray.resize();
            node.sizeHack = true;
        },
        oneditresize: function(size) {
            if (!this._sizeHackTimer) {
                this._sizeHackTimer = setTimeout(function () {
                    $(".image-tools-form-tip").css("max-width","unset");//hack - prevent node-red calculating UI panel too large due to long text in the tip
                    this._sizeHackTimer = null;
                }, 250);
            }
        }
    });
})();     
</script>

<script type="text/html" data-template-name="jimp-image">
    <link rel="stylesheet" href="image-tools/static/css/common.css" type="text/css"/>
    <div class="form-row image-tools-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" style="width: calc(100% - 150px)" placeholder="Name">
    </div>

    <div class="form-row image-tools-row">
            <label for="node-input-data"><i class="fa fa-file-image-o"></i><span data-i18n="jimp.label.data">
                image</span></label>
            <input type="hidden" id="node-input-dataType">
            <input type="text" id="node-input-data" style="width: calc(100% - 150px)" placeholder="">
            <br>
            <label>&nbsp;</label>
            <div class="image-tools-form-tip" style="width: calc(100% - 150px); max-width: 450px">A string containing a file path, URL or base64 image can be used as an image source. NOTE: Passing in an image object is faster as there is no conversion required before processing.</div>
        </div>
    </div>
    
    <div class="form-row image-tools-row" style="vertical-align: top;">
        <label style="padding-top: 8px" for="node-input-jimpFunction"><i class="fa fa-wrench"></i> <span data-i18n="jimp.label.jimpFunction">
            Function</span></label>
        <div class="image-tools-ui-container" style="width: calc(100% - 150px)">
            <select type="text" id="node-input-jimpFunction" style="width: calc(100% - 30px);display:inline-block"></select>
            <button id="convertToBatchButton" class="editor-button editor-button-small" style="width:28px;display:inline-block;float:right" title="convert to batch function" style="width:100%;"><i class="fa fa-exchange"></i></button>
        </div>
        <br>
        <label>&nbsp;</label>
        <div id="tip-jimpFunction" class="image-tools-form-tip" style="width: calc(100% - 150px); max-width: 450px" hidden></div>
    </div>    

    <div class="form-row image-tools-row">
        <label style="padding-top: 8px" for="node-input-ret"><i class="fa fa-sign-out"></i> <span data-i18n="jimp.label.send">
            Output</span></label>
        <select type="text" id="node-input-ret" style="width: calc(100% - 150px)">
            <option value="img" data-i18n="jimp.jimp">image</option>
            <option value="buf" data-i18n="jimp.buffer">buffer</option>
            <option value="b64" data-i18n="jimp.base64">base64</option>
        </select>
        <br>
        <label>&nbsp;</label>
        <div class="image-tools-form-tip" style="width: calc(100% - 150px);  max-width: 450px">Sending an image is much faster as there is no additional conversion required.</div>
    </div>
    
    <div class="form-row image-tools-row">
        <label for="node-input-sendProperty"><i class="fa fa-sign-out"></i> 
            <span data-i18n="jimp.label.send_property">Output Property</span>
        </label>
        <input type="text" id="node-input-sendProperty" style="width: calc(100% - 150px)" placeholder="payload">
        <br>
        <label>&nbsp;</label>
        <div class="image-tools-form-tip" style="width: calc(100% - 150px); max-width: 450px">The msg property in which to send the resulting image.</div>
    </div>    
    
    <div class="form-row image-tools-row jimp-parameter-group" id="parameter1" style="vertical-align: top;">
        <label style="padding-top: 8px" for="node-input-parameter1"><i class="fa fa-code"></i><span id="parameter-label1"
            data-i18n="jimp.label.parameter1"> parameter1</span></label>
        <input type="hidden" id="node-input-parameter1Type">
        <input type="text" id="node-input-parameter1" style="width: calc(100% - 150px)" placeholder="">
        <br>
        <label>&nbsp;</label>
        <div id="tip-parameter1" class="image-tools-form-tip paramtip"  style="width: calc(100% - 150px); max-width: 450px" hidden></div>
    </div>
    <div class="form-row image-tools-row jimp-parameter-group" id="parameter2" style="vertical-align: top;">
        <label style="padding-top: 8px" for="node-input-parameter2"><i class="fa fa-code"></i><span id="parameter-label2"
            data-i18n="jimp.label.parameter2"> parameter2</span></label>
        <input type="hidden" id="node-input-parameter2Type">
        <input type="text" id="node-input-parameter2" style="width: calc(100% - 150px)" placeholder="">
        <br>
        <label>&nbsp;</label>
        <div id="tip-parameter2" class="image-tools-form-tip paramtip"  style="width: calc(100% - 150px); max-width: 450px" hidden></div>
    </div>
    <div class="form-row image-tools-row jimp-parameter-group" id="parameter3" style="vertical-align: top;">
        <label style="padding-top: 8px" for="node-input-parameter3"><i class="fa fa-code"></i><span id="parameter-label3"
            data-i18n="jimp.label.parameter3"> parameter3</span></label>
        <input type="hidden" id="node-input-parameter3Type">
        <input type="text" id="node-input-parameter3" style="width: calc(100% - 150px)" placeholder="">
        <br>
        <label>&nbsp;</label>
        <div id="tip-parameter3" class="image-tools-form-tip paramtip"  style="width: calc(100% - 150px); max-width: 450px" hidden></div>
    </div>
    <div class="form-row image-tools-row jimp-parameter-group" id="parameter4" style="vertical-align: top;">
        <label style="padding-top: 8px" for="node-input-parameter4"><i class="fa fa-code"></i><span id="parameter-label4"
            data-i18n="jimp.label.parameter4"> parameter4</span></label>
        <input type="hidden" id="node-input-parameter4Type">
        <input type="text" id="node-input-parameter4" style="width: calc(100% - 150px)" placeholder="">
        <br>
        <label>&nbsp;</label>
        <div id="tip-parameter4" class="image-tools-form-tip paramtip"  style="width: calc(100% - 150px); max-width: 450px" hidden></div>
    </div>
    <div class="form-row image-tools-row jimp-parameter-group" id="parameter5" style="vertical-align: top;">
        <label style="padding-top: 8px" for="node-input-parameter5"><i class="fa fa-code"></i><span id="parameter-label5"
            data-i18n="jimp.label.parameter5"> parameter5</span></label>
        <input type="hidden" id="node-input-parameter5Type">
        <input type="text" id="node-input-parameter5" style="width: calc(100% - 150px)" placeholder="">
        <br>
        <label>&nbsp;</label>
        <div id="tip-parameter5" class="image-tools-form-tip paramtip"  style="width: calc(100% - 150px); max-width: 450px" hidden></div>
    </div>
    <div class="form-row image-tools-row jimp-parameter-group" id="parameter6" style="vertical-align: top;">
        <label style="padding-top: 8px" for="node-input-parameter6"><i class="fa fa-code"></i><span id="parameter-label6"
            data-i18n="jimp.label.parameter6"> parameter6</span></label>
        <input type="hidden" id="node-input-parameter6Type">
        <input type="text" id="node-input-parameter6" style="width: calc(100% - 150px)" placeholder="">
        <br>
        <label>&nbsp;</label>
        <div id="tip-parameter6" class="image-tools-form-tip paramtip"  style="width: calc(100% - 150px); max-width: 450px" hidden></div>
    </div>
    <div class="form-row image-tools-row jimp-parameter-group" id="parameter7" style="vertical-align: top;">
        <label style="padding-top: 8px" for="node-input-parameter7"><i class="fa fa-code"></i><span id="parameter-label7"
            data-i18n="jimp.label.parameter7"> parameter7</span></label>
        <input type="hidden" id="node-input-parameter7Type">
        <input type="text" id="node-input-parameter7" style="width: calc(100% - 150px)" placeholder="">
        <br>
        <label>&nbsp;</label>
        <div id="tip-parameter7" class="image-tools-form-tip paramtip"  style="width: calc(100% - 150px); max-width: 450px" hidden></div>
    </div>
    <div class="form-row image-tools-row jimp-parameter-group" id="parameter8" style="vertical-align: top;">
        <label style="padding-top: 8px" for="node-input-parameter8"><i class="fa fa-code"></i><span id="parameter-label8"
            data-i18n="jimp.label.parameter8"> parameter8</span></label>
        <input type="hidden" id="node-input-parameter8Type">
        <input type="text" id="node-input-parameter8" style="width: calc(100% - 150px)" placeholder="">
        <br>
        <label>&nbsp;</label>
        <div id="tip-parameter8" class="image-tools-form-tip paramtip"  style="width: calc(100% - 150px); max-width: 450px" hidden></div>
    </div>
</script>

<script type="text/html" data-help-name="jimp-image">
<p>An image manipulation node built using <a href="https://github.com/oliver-moran/jimp/tree/master/packages/jimp">Jimp</a></p>
<h3>Foreword</h3>
<dl class="message-properties">
    Examples have been included to help you do some common tasks. 
    <a onclick="RED.actions.invoke('core:show-examples-import-dialog')" href="#">Click here</a> to import an example or click the hamburger menu <a class="button" href="#"><i class="fa fa-bars"></i></a> select <b>import</b> then <b>examples</b> or press <kbd>ctrl+i</kbd>
</dl> 
<h3>Inputs</h3>
<dl class="message-properties">
    <dt>image <span class="property-type">string | base64 | buffer | jimp | object</span></dt>
    <dd> the image (jimp object, buffer, file/URL/base64 string) to be processed. 
    <p>NOTE: To create a blank image pass an object <code>{w: number, h: number, background?: number | string}</code> where background is the colour as an integer or #RGB(A)</p>
    </dd>
    <dt>parameters <span class="property-type">any</span></dt>
    <dd> depends on the function selected</dd>
</dl>
<h3>Output</h3>
<dl class="message-properties">
    <dt>payload <span class="property-type">object | []</span></dt>
    <dd> the processed image as a jimp object, buffer or base64 string.</dd>
    <dt>imageInfo <span class="property-type">object</span></dt>
    <dd> properties of the image e.g <code>.hasAlpha</code>, <code>.MIME</code>, <code>.quality</code>, <code>.width</code>, <code>.height</code>
    </dd>
    <dt>jobs <span class="property-type">[object]</span></dt>
    <dd>An array of jobs carried out on the image. Each element is an object containing a information about the performance and any result returned</dd>
    <dt>performance <span class="property-type">object</span></dt>
    <dd>Performance measurements of the image loading and processing</dd>
    <h6>
    <p>NOTES...</p>
    <p>If several functions are to be applied to an image, outputting a jimp object to the next jimp node will be faster than passing a buffer or base64 string </p>
    <p>Additional useful properties are available in the <code>msg</code> object. Use a debug node to inspect them</p>
    </h6>
</dl>

<h3>Details</h3>
    <h4>batch mode</h4>
    <p>To perform batch operations, the options must include name and parameters.  E.g...
        <p><code>
        [
            {
                "name": "crop",
                "parameters": [100,100,250,250]
            },
            {
                "name": "rotate",
                "parameters": [270]
            },
            {
                "name": "posterize",
                "parameters": [22]
            },
            {
                "name": "brightness",
                "parameters": [0.3]
            }
        ]
        </code></p>
    <p>Batch mode can be used to automate image manipulation by sending the name of the function(s) and parameter(s) for example via msg.payload</p>
    <p>Additionally, any functions not listed in this node or new functions added to Jimp can be accessed via Batch mode</p>
    </p>
</script>