Configuration Parameters

This topic describes the Customer's Canvas configuration settings. There are two sources of settings for Customer's Canvas:

  1. The ~\Configuration\clientConfig.json configuration file
  2. The web.config configuration file

Configuration files are located in the Customer's Canvas root folder.

Note

The default measurement units in Customer's Canvas are points. If a parameter accepts other units, then the unit name is specified in the parameter name, for example, lineWidthPx accepts pixels. The unit shortcuts are px for pixels, pc for percents, etc.

~\Configuration\clientConfig.json

The ~\Configuration\clientConfig.json file has the following structure:

JavaScript
//common properties
"canvas": {
    //...
    "rulers": { /*...*/  }
},
"grid": { /*...*/  },
"rendering": { /*...*/  },
"widgets": {
    "LeftToolbar": { /*...*/  },
    "ObjectInspector": { /*...*/  },
    "ItemMenu": { /*...*/  },
    "TopToolbar": {
        //...
        "fontSize": { /*...*/  }
    },
    "BottomToolbar": { /*...*/  },
    "QrCodeDialog": { /*...*/  },
    "LinearBarcodeDialog": { /*...*/  },
    "RichTextDialog": {
        //...
        "textOutline": { /*...*/  }
    },
    "FinishButton": { /*...*/  },
    "GalleryDialog": {
        //...
        "socialNetworkAppIds": { /*...*/  }
    },
    "ImageEditorDialog": { /*...*/ },
    "ColorPicker": { /*...*/  }
}

Common Parameters

Name Description Default value Possible values
spellCheckEnabled enables spell checking for product text fields and for the Rich text dialog false boolean
initialMode the initial mode of the web-to-print editor, simple or advanced. If you want to disable advanced mode, set this parameter to "SimpleOnly". "Simple" "Simple", "Advanced", "SimpleOnly"
fontList a list of fonts available for the user in the editor; all these fonts should be uploaded to the font folder on the server; by default it is ~\Fonts\ ["Andalus", "Angsana New", ... ] array of font names
fontListMode mode of the font list, simple or advanced; the simple mode allows users to select a font and set a font size; the advanced mode also provides the ability to change the font style "Advanced" "Simple", "Advanced"
defaultLanguage the default interface language "en" string
loadUserInfoButtonEnabled displays the Load my info button false boolean
autoLoadUserInfo if true, then a product is automatically populated with predefined data when it is loaded into the editor; the Load my info button is not displayed in this case false boolean
revertProductConfirmationEnabled enables the confirmation dialog when reverting a product to its initial state true boolean
imageEditorEnabled enables the Image Editor true boolean
deleteItemConfirmationEnabled enables the confirmation dialog when deleting an item from a product true boolean
restoreProductOnReloadEnabled enables restoring a product state when the design page is reloaded; if false, then the product is reverted on reloading true boolean
alignToSafetyLineName the name of a safety line to which an item will be aligned; if there is no safety line with a name, then the item will be aligned to the first safety line in the safety lines array "bleed" string
newImageName the default name for a new image layer: the first layer is named newImageNameValue, the second one is newImageNameValue_1, the third layer is newImageNameValue_2, etc.; by default the name of the image file is used null string
arbitraryResizeForImageItemEnabled if it is true, a user can resize an image item in the editor without keeping the original aspect ratio; otherwise, images can only be resized proportionally false boolean
customStyle the name of a CSS file (without extension) that will be loaded within the designer page; the file should be located in the ~\Configuration\customCss\ folder string

Canvas Settings

Object: canvas

Name Description Default value Possible values
containerColor the color of the html element placed under the canvas "" color in the css-compatible format
color the canvas color; this color is visible if a transparent object is placed on the canvas "" color in the css-compatible format
shadowEnabled enables the canvas shadow true boolean
paddingPct padding between the canvas and the canvas viewer, in percent 5 integer
zoomStep a step of increasing or decreasing the zoom level 0.15 number
Rulers
object: "rulers"
enabled displays rulers true boolean
unit the rulers measurement unit "inch" "inch", "mm", "cm", "point", "custom"
customUnitScale the ratio of the custom unit to points; this parameter is applied only if the unit parameter described above is set to "custom" 1 number
origin the point of origin relative to the upper-left corner of the design; the coordinates are measured in the units specified by the unit parameter { "X": 0, "Y": 0 } object
Snap Lines
object: "snapLines"
enabled displays snap lines true boolean
color the color of snap lines "rgb(255,0,255)" string
tolerance the distance between an object and a snap line where the object clings to the line; it is measured in pixels 5 number

Grid

Object: grid

Name Description Default value Possible values
horizontalColor the color of the horizontal grid lines "rgb(208, 224, 227)" color in the css-compatible format
verticalColor the color of the vertical grid lines "rgb(208, 224, 227)" color in the css-compatible format
stepX the distance between vertical grid lines 1 integer
stepY the distance between horizontal grid lines 1 integer
lineWidthPx the width of grid lines in pixels 1 integer
enabled enables the grid; if the grid is enabled it can be toggled by the Grid button true boolean

Rendering

Object: rendering

Name Description Default value Possible values
hiResOutputDpi hi-res output resolution in dots per inch (DPI) 300 integer
hiResOutputFileFormat the type of the hi-res output "pdf" "pdf", "jpeg", "png", "tiff"
hiResOutputColorSpace the color space of the hi-res output "RGB" "RGB", "CMYK", "Grayscale"
hiResOutputToSeparateFiles if it is true, then the hi-res output for each side of a multipage product is put in a separate file false boolean
hiResOutputBackgroundColor the background color for the hi-res output "rgba(255,255,255,0)" color in the css-compatible format
hiResOutputCompression the type of hi-res output compression; "jpeg" and "zip" are supported for PDF files only, whereas "lzw" is supported for TIFF files "zip" "jpeg", "zip", "none", "lzw"
hiResOutputJpegCompressionQuality JPEG compression quality in percent; this parameter makes sense only for the JPEG and PDF formats. For PDF it should be used along with hiResOutputCompression="jpeg" 90 integer from 0 to 100.
hiResOutputFlipMode the flip mode for hi-res outputs "none" "none", "vertical", "horizontal", "both"
proofImageFileFormat the type of proof image files "PNG" "JPEG", "PNG"
proofImageSafetyLinesEnabled allows for drawing safety lines on proof images false boolean
proofImageWatermarkEnabled displays the watermark on proof images true boolean
proofImageWatermarkFontPostScriptName the watermark font name "ArialMT" PostScript font name
proofImageWatermarkFontSize the watermark font size in points 35 integer
proofImageWatermarkText watermark text "watermark" string
proofImageCropSafetyLine the name of a safety line which proof images are cropped to; if there is no safety line with the given name, proof images are not cropped "bleed" string
proofImageFlipMode the flip mode for proof images "none" "none", "vertical", "horizontal", "both"
proofImageMockupEnabled displays mockups on proof images; if it is true, then the editor renders a mockup with a print area; if it is false, then the editor renders only print areas to proof images true boolean

Widgets

Object: widgets

Name Description Default value Possible values
Left Toolbar
object:"LeftToolbar"
disabled hides the Left Toolbar false boolean
imageButtonEnabled displays the Add image button in the advanced editing mode true boolean
textButtonEnabled displays the Add text button in the advanced editing mode true boolean
rectangleButtonEnabled displays the Rectangle button in the advanced editing mode true boolean
ellipseButtonEnabled displays the Ellipse button in the advanced editing mode true boolean
linearBarcodeButtonEnabled displays the Barcode option in the advanced editing mode true boolean
qrCodeButtonEnabled displays the QR code option in the advanced editing mode true boolean
richTextButtonEnabled displays the Rich text option in the advanced editing mode true boolean
Object Inspector
object:"ObjectInspector"
bgItemEnabled displays the background element in the Object Inspector true boolean
dndEnabled enables drag-and-drop for elements in the Object Inspector true boolean
qualityMeterEnabled enables a warning, displayed if the selected image has a resolution that is too low true boolean
safetyLineViolationWarningEnabled enables a warning, displayed when the user places an element beyond a safety line true boolean
emptyListTextEnabled enables text, displayed when a loaded template has no customizable layers true boolean
aboveCanvasOnSmallScreenEnabled if true, the Object Inspector appears above the canvas when you work on small-screen devices; otherwise, it appears from the left side of the canvas false boolean
Item Menu
object:"ItemMenu"
objectManipulationEnabled enables deleting and cloning items in a product true boolean
verticalAlignmentEnabled enables the vertical alignment of items to the safe area and group alignment (to select several items, use Ctrl) true boolean
horizontalAlignmentEnabled enables the horizontal alignment of items to the safe area and group alignment (to select several items, use Ctrl) true boolean
changeZOrderEnabled enables changing the Z-order of items true boolean
Top Toolbar
object:"TopToolbar"
alignButtonsEnabled displays the vertical aligment buttons true boolean
historyButtonsEnabled displays the Undo and Redo buttons true boolean
revertButtonEnabled displays the Revert button true boolean
zOrderButtonsEnabled displays the z-Order buttons false boolean
cloneButtonEnabled displays the Clone object button false boolean
textAlignmentButtonsEnabled displays the text alignment buttons true boolean
textEmphasisButtonsEnabled displays the faux text style buttons (bold, italic, and underlined) true boolean
textFontFamilyButtonEnabled displays the font list true boolean
textFontStyleButtonsEnabled displays the font style spinner true boolean
textFontSizeButtonEnabled displays the font size spinner true boolean
textFontColorButtonEnabled displays the text color picker true boolean
closeFontMenuOnClickEnabled if true, the Select font drop-down list closes after a user selects a font; otherwise, it closes only when a user clicks anywhere outside the list true boolean
opacitySliderEnabled provides the ability to change layer opacity via the opacity slider in the Top Toolbar true boolean
textLeadingButtonEnabled displays the text leading button true boolean
textTrackingButtonEnabled displays the text tracking button true boolean
multiRowModeEnabled displays the Top Toolbar menu in the multi-row mode to fit all buttons to the screen false boolean
borderColorButtonEnabled displays button borders in the Top Toolbar menu true boolean
fontPreviewSize the font size used to display font names in the Select font drop-down list 17 number
Font size spinner parameters
object:"fontSize"
max the maximum font size 100 number
min the minimum font size 4 number
step the size of the step to take when using the spinner 0.5 number
Bottom Toolbar
object:"BottomToolbar"
safetyLinesCheckboxEnabled displays the Safety lines check box true boolean
gridCheckboxEnabled displays the Grid check box true boolean
snapLinesCheckboxEnabled displays the Snap lines check box true boolean
zoomValueEnabled displays the current zoom value true boolean
zoomButtonsEnabled displays the Zoom in and Zoom out buttons true boolean
fullWindowButtonEnabled displays the Full window button true boolean
fullScreenButtonEnabled displays the Full screen button; the full screen mode is not supported in Internet Explorer and Safari, so the related button is not displayed in these browsers even if it is enabled true boolean
surfaceSwitchEnabled displays the surface (page) selector; it is a swiper for multipage products or the Front side and Back side buttons for double-sided products. true boolean
Qr Code Dialog
object:"QrCodeDialog"
defaultType the default type of a QR code "QrVCard" "QrVCard", "QrUrl", "QrPhone"
Linear Barcode Dialog
object:"LinearBarcodeDialog"
defaultType the default type of a barcode "LinearEan8" "LinearEan8", "LinearEan13"
Rich Text Dialog
object:"RichTextDialog"
bgColor the text background color in the Rich Text dialog "white" color in the css-compatible format
Text outline parameters
object:"textOutline"
enabled enables text outline; the text is outlined in the Rich Text dialog if the difference between the text color and the background color is below the hue or brightness threshold false boolean
hueThreshold the hue threshold 74 number
brightnessThreshold the brightness threshold 5 number
color the outline color "rgba(0, 0, 0, 0.2)" color in the css-compatible format
Finish Button
object:"FinishButton"
mode the mode of the Finish design button; "Disabled" hides the button and enables the callback that could be handled like it is discussed in the Handling Product Customization topic; "Download" is the debug mode that shows the button and disables the callback, but allows you to download the hi-res output "Download" "Download", "Disabled"
Gallery Dialog
object:"GalleryDialog"
publicTabEnabled displays the Public files tab in the Gallery true boolean
publicFolderName sets a subfolder of the ~\PublicGalleryFolder\ folder containing graphics files, which is displayed in the Public files tab in the Gallery; by default the entire ~\PublicGalleryFolder\ folder content is displayed "" string
userTabEnabled displays the My files tab in the Gallery true boolean
defaultTab the default tab opened in the Gallery "user" "user", "public", "facebook", "instagram"
allowedExtensions extensions of files that a user is allowed to upload to the Gallery ["jpeg", "gif", "png", "jpg", "bmp"] array
overwriteExistingFiles allows for overwriting images with existing names in the Gallery false boolean
showTabsInRestrictedMode enables the ability to upload photos and select private photos even if the <IAPSF> marker is used false boolean
Social Networks
object:"socialNetworkAppIds"
instagram the identifier of your Instagram application "" string
facebook the identifier of your Facebook application "" string
Image Editor Dialog
object: "ImageEditorDialog"
colorAdjustButtonEnabled displays the Adjust button in the Image Editor true boolean
cropButtonEnabled displays the Crop button in the Image Editor true boolean
Color Picker
object:"ColorPicker"
showPaletteOnly shows only the palette specified via the palette parameter in the color picker false boolean
palette the palette displayed in the color picker [["rgb(0, 0, 0)","rgb(67, 67, 67)",...],...] two-dimensional array: array of palettes, where each pallete is an array of colors in css-compatible format

web.config

In web.config, most parameters should be defined under appSettings:

XML
<configuration>
...
    <system.web>
        ...
    </system.web>
    <appSettings>
        <add key="ParameterName" value="parameterValue"/>
    </appSettings>
...
</configuration>
Note

All parameters defining paths are either relative or absolute. Relative paths to folders are specified from your site root and start with ~/ (for example, ~/UserDataFolder). Absolute paths are complete ones; they start either with a drive letter (for example, C:\) or \\ for network locations. When you use absolute paths to external folders, make sure that the user account, under which Customer's Canvas runs in ASP.NET/IIS, has the read/write access to the remote folders.

Name Description Default value Possible values
Gallery
AllCategoryName the alias for the category containing images from the public images folder and all its subfolders all string
RootCategoryName the alias for the category containing images from the public images folder root string
PublicGalleryFolder the folder path where public images are stored ~/PublicGalleryFolder folder path
Users
MasterUserId the identifier of the master user; templates and images that belong to the master user can be used by any user masteruser string
DefaultUserId the identifier of the default user default string
UserDataFolder the folder path where the user data is stored ~/UserDataFolder folder path
AnonymousModeEnabled enables the public site mode False True, False
DemoModeEnabled enables the demonstration mode False True, False
Font Substitution
FontSubstitutionEnabled enables the font substitution feature. If a font required by a product is not found on the server, depending on this value, it triggers an exception (for the False value) or substitutes the font (for the True value). If you turn it off, make sure that all fonts from all your templates are imported to Customer's Canvas as explained in Custom Fonts topic. NOTE: For auto-scaled texts, this option is ignored and it always throws an exception if it meets an unknown font in a template True True, False
SubstitutionFontPostScriptName the PostScript name of the font to substitute a missing font with the DefaultFontPostScriptName value PostScript font name
Default Font
DefaultFontPostScriptName the PostScript name of the default font used for any new text "ArialMT" PostScript font name
Loading Templates
ParagraphTextEnabled defines how to load uniformly formatted paragraph text from Photoshop templates; if True, the text is loaded as paragraph text, otherwise - as rich text; it is not recommended enabling this parameter as it is supported for backward compatibility False True, False
State Files
StateFileStorageEnabled enables the space-saving mode of state files; this mode is helpful if you use large product template files False True, False
Security
ApiSecurityKey enables access to Web API. You have to include this key in every header of HTTP requests as the X-CustomersCanvasAPIKey field to perform file operations on your server. Web API works if the value of this key passed in a request matches the value defined in web.config. The value is an arbitrary string (a unique value). Refer to the Deploying Customer's Canvas to Windows Servers topic for more details string
HttpHeaderAllowOriginDomains restricts embedding the editor to pages hosted only on listed domains. If your site and Customer's Canvas run on different domains, you can specify your site domain name in HttpHeaderAllowOriginDomains to disallow access to the web-to-print editor from other domains. The value is a comma-separated string. For example, it could be like "http://domain1.com,http://domain2.net". The "*" default value allows access from any domain "*" string
Proof Images
ProofImageDownloadEnabled enables the downloading of proof images instead of opening them in a tab when opening a proof image link in a browser False True, False

Cache parameters should be defined in the Aurigma.GraphicsMill.AjaxControls.VectorObjects.FileCacheConfiguration section:

XML
<configuration>

    <configSections>
        <section name="Aurigma.GraphicsMill.AjaxControls.VectorObjects.FileCacheConfiguration" 
        type="System.Configuration.NameValueSectionHandler, System, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" />
...
    </configSections>
...
    <Aurigma.GraphicsMill.AjaxControls.VectorObjects.FileCacheConfiguration>
        <add key="ParameterName" value="parameterValue" />
    </Aurigma.GraphicsMill.AjaxControls.VectorObjects.FileCacheConfiguration>
    
</configuration>
Name Description Default value Possible values
Cache
MaxSize the maximum size of the cache in bytes 10737418240 (10GB) number
CleanUpInterval the interval between cleanup runs, in seconds 1800 (30 minutes) number
MaxUtilizationThreshold the maximum cache utilization level (in percent) that triggers automatic cleanup; when the cache size reaches MaxUtilizationThreshold, the cleanup process starts 95 number
UtilizationTarget the utilization level (in percent) to which the cache should be cleaned up; when the cleanup algorithm reaches the UtilizationTarget level, the cleanup process stops 70 number
RootPath the folder where the cache is stored ~/App_Data/FileCache folder path

Some other application parameters should be defined in the Aurigma.GraphicsMill.AjaxControls.VectorObjects section:

XML
<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="ParameterName" value="parameterValue" />
    </Aurigma.GraphicsMill.AjaxControls.VectorObjects>

</configuration>
Name Description Default value Possible values
Hi-res output
RgbColorProfileFileName the name of the RGB color profile file name
CmykColorProfileFileName the name of the CMYK color profile file name
GrayscaleColorProfileFileName the name of the grayscale color profile file name
Fonts
FontDirectory the folder path where fonts are stored ~/Fonts folder path

See Also

Manual

IFrame API Reference