HowToUse

How to use HTMLFeedback

Using HTMLFeedback is very simple. Just use the following line to get started:

$(document.ready(function (){
    $("body").htmlfeedback(options);
});

You can configure a wide variety of options to customize HTMLFeedback.

Configuration

Options

• boolean useCanvas - Enable the use of the canvas element as the screen overlay. Defaults to true if the browser supports the canvas element.
• boolean uploadAsURI - Upload the image data via a dataURI representation. Defaults to false if the browser supports Blobs.
• int minimalDistance - The minimum size of the diagonal of a drawn rectangle. Small numbers allows small rectangles but increases the chance of an user drawing a rectangle by accident. Default is 10.
• string color - RGBA color of the rectangle, including opacity level. Default is transparant.
• string uploadName - Name of the image in the upload POST request. Default is 'screenshot'.
• string uploadMIME - The type of image data. Default is 'image/png'.

Callbacks

• onRectangleStart: function(rectangle, x, y) - Called after first point of the rectangle has been drawn.
• onRectangleEnd: function(rectangle, x, y) - Called after the complete rectangle has been drawn.
• onPreRender: function() - Called before rendering.
• onPostRender: function(canvas) - Called after rendering.
• onShow: function() - Called after the overlay and markers are shown.
• onHide: function() - Called after the overlay and markers are hidden.

Executing commands

After you have initialized a HTMLFeedback instance, you can execute commands on the instance. Simply by executing it the following way:

$("body").htmlfeedback(command, parameters);

command is a string representation of the command. Parameters are mandatory for some commands.

Commands

• show - Show the overlay and markers
• hide - Hide the overlay and markers
• toggle - Show or hide the overlay and markers
• render - Render the screenshot but do nothing more
• upload (parameters) - Render the screenshot and upload it via AJAX to the server. The parameters are normal jQuery AJAX request parameters
• reset - Reset to begin state, clearing all markers
• color - Set the rectangle color (if you want to support more rectangle colors)