Visual Proofing Tool Configuration

Customer's Canvas Proofing Tool takes four mandatory parameters: the application URL, design file names, output resolution, and the product size. Optional parameters allow you to set up the editor appearance, select the user interface language, define the proof image size and color space of the high-resolution output.

The following example shows how you can specify the 700 x 400 pt product of 300 dpi, set the margin of safety lines to 10 pt, and enable the rotation buttons in the Visual Proofing Tool.

HTML
// The tool initialization
CustomersCanvas.VisualProofing.Tool.init(toolFrame, {
    toolUrl: '/',
    designFiles: designs,
    dpi: 300,
    productSize: { width: 700, height: 400 },

    safetyLines: [{ margin: 10 }],
    unit: "pt",

    rotateCanvasButtonEnabled: true,
    rotateImageButtonsEnabled: true
});

You can initialize Visual Proofing Tool with the following parameters.

Name Data type Description
toolUrl string The URL of the Visual Proofing Tool.
designFiles array of strings The array containing server names of uploaded design files. The Visual Proofing Tool supports the pdf, psd, png, jpg, jpeg, and tiff file extensions. For example, templateFiles: [ "47E9CA68EF349F2B2196F702106EF743..jpg", "7CD75331E7A0D7B4AE556AD234EC5B43..psd"]
dpi number Resolution of the hi-res output. For example, dpi: 300.
productSize object The width and height of the product inside the bleed area, in points. For example, productSize: { width: 700, height: 400 }.
productBleedMargin number Optional. The bleed area margin, in points. The default value is 9.
productOffset number Optional. The offset between the canvas and the viewer, in points. The default value is 50.
language string Optional. Allows you to specify localization of this tool. The default value is "en". For details, refer to the Localization of the Visual Proofing Tool topic.
colorSpace string Optional. The color space of the hi-res output: "cmyk" or "rgb". The default value is "rgb".
previewMaxSize object Optional. The maximum width and height of proof images, in pixels. The default value is { width: 500, height: 500 }.
bleedAreaMaskColor string Optional. The color of the bleed area in the CSS format. The default value is "rgba(0, 0, 0, 0.5)".
designArbitaryResizeEnabled boolean Optional. Enables users to resize designs in arbitrary way (not keeping proportions) on the canvas. The default value is false.
designRotateEnabled boolean Optional. Enables users to rotate designs on the canvas. The default value is false.
rotateCanvasButtonEnabled boolean Optional. Enables the Rotate canvas button for rotating the canvas. The default value is false.
rotateImageButtonsEnabled boolean Optional. Enables the Rotate image left and Rotate image right buttons for rotating the design. The default value is false.
resetImageButtonEnabled boolean Optional. Enables the Reset image button for moving the design to the center of the canvas. The default value is false.
zoomStep number Optional. The step to increase or decrease the zoom level. The default value is 0.15.
unit string or number Optional. The units for the rulers and canvas measurements. It can be "mm", "cm", "inch", or "pt". Also, you can use custom units if you set this parameter to a numeric value. In this case, such a number is the ratio for converting your units to points. The default value is "inch".
safetyLines
Optional
margin number The distance between safety lines and the canvas border. For example, safetyLines: [{ margin: 20 }].
color string Optional. The main color of safety lines in the CSS format. The default value is "green".
altColor string Optional. The alternative color of safety lines in the CSS format. The default value is "transparent".
stepPx number Optional. The length of safety line dashes, in pixels. The default value is 10.
widthPx number Optional. The width of safety lines, in pixels. The default value is 1.
canvasViewer
Optional
minWhiteSpacePc number Optional. The minimum distance between the design and the canvas border, in percent. The default value is 0.

The unit parameter allows for using custom measurement units in the Visual Proofing Tool. For example, when you need to use picas, a traditional typography unit, which equals 1/6 of an inch (1 point = 1/12 pica = 0.0833333 pica), you can set this parameter to 0.0833333.

When you specify the color space, you may want to apply a specific color profile to the hi-res output. To define such profiles, add the RgbColorProfileFileName and CmykColorProfileFileName keys to the web.config file.

HTML
<configuration>
    <configSections>
        <section name="Aurigma.GraphicsMill.AjaxControls.VectorObjects" 
        type="System.Configuration.NameValueSectionHandler, System, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
    </configSections>

    <Aurigma.GraphicsMill.AjaxControls.VectorObjects>
        <add key="RgbColorProfileFileName" value="~/rgbColorProfile.icc" />
        <add key="CmykColorProfileFileName" value="~/cmykColorProfile.icc" />
    </Aurigma.GraphicsMill.AjaxControls.VectorObjects>
</configuration>

If you do not define color profiles that should be used in color management, then Visual Proofing Tool applies the following default profiles:

  • SWOP (Coated) 20%, GCR, Medium profile for CMYK
  • sRGB IEC61966-2.1 profile for RGB

See Also

Manual