--- title: "Visual Proofing Tool Configuration" canonical: https://customerscanvas.com/docs/cc4/visual-proofing-tool-configuration.htm archived: true applies_to: - product: "Customer's Canvas On-Premises" - product: "Preflight Tool" --- **You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/). # Visual Proofing Tool Configuration **Applies to:** Customer's Canvas On-Premises; Preflight Tool · **Archived documentation** 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](https://customerscanvas.com/docs/cc4/localization-of-vpt.htm.md) 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
``` 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 - [The Quick Start](https://customerscanvas.com/docs/cc4/preflight-quick-start.htm.md) - [Color Management in Customer's Canvas](https://customerscanvas.com/docs/cc4/color-management.htm.md) - [Localization of the Visual Proofing Tool](https://customerscanvas.com/docs/cc4/localization-of-vpt.htm.md)