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 unit in Customer's Canvas is 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": {
        //...
        "fontSizeParams": { /*...*/  }
    },
    "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 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 a user in the editor; all these fonts should be uploaded to the font folder on 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 a user to select font and set font size; the advanced mode also provides an ability to change font style. "Advanced" "Simple", "Advanced"
defaultLanguage a 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 false boolean
revertProductConfirmationEnabled enables the confirmation dialog when reverting a product to its initial state true boolean
imageEditorEnabled enables Image editor true boolean
deleteItemConfirmationEnabled enables the confirmation dialog when deleting an item from a product true boolean
restoreProductOnReloadEnabled enables restoring product state when the design page is reloaded; if false, then product is reverted on reloading true boolean
alignToSafetyLineName name of a safety line to which an item will be aligned; if there is no safety line with the name, then the item will be aligned to the first safety line in the safety lines array "bleed" string
newImageName a 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

Canvas Settings

Object: canvas

Name Description Default value Possible values
containerColor color of the html element placed under the canvas "" color in css-compatible format
color canvas color; this color is visible if a transparent object is placed on the canvas "" color in css-compatible format
shadowEnabled enables product shadow true boolean
paddingPct padding between canvas and canvas viewer, in percent 5 integer
zoomStep step of increasing or decreasing of the zoom level 0.15 number
Rulers
object: "rulers"
enabled displays rulers true boolean
unit 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 relatively to the top 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 color of snap lines "rgb(255,0,255)" string
tolerance 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 color of the horizontal grid lines "rgb(208, 224, 227)" color in css-compatible format
verticalColor color of the vertical grid lines "rgb(208, 224, 227)" color in css-compatible format
stepX distance between vertical grid lines 1 integer
stepY distance between horizontal grid lines 1 integer
lineWidthPx 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 type of hi-res output "pdf" "pdf", "jpeg", "png", "tiff"
hiResOutputColorSpace color space of hi-res output "RGB" "RGB", "CMYK", "Grayscale"
hiResOutputToSeparateFiles if it is true, then hi-res output for each side of a multipage product will be put in a separate file false boolean
hiResOutputBackgroundColor background color for the hi-res output "rgba(255,255,255,0)" color in css-compatible format
hiResOutputCompression 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 JPEG and PDF formats. For PDF it should be used along with hiResOutputCompression="jpeg" 90 integer from 0 to 100.
hiResOutputFlipMode flip mode for hi-res outputs "none" "none", "vertical", "horizontal", "both"
proofImageFileFormat 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 watermark font name "ArialMT" PostScript font name
proofImageWatermarkFontSize watermark font size in points 35 integer
proofImageWatermarkText watermark text "watermark" string
proofImageCropSafetyLine 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 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 adding Barcode option in the advanced editing mode true boolean
qrCodeButtonEnabled displays the adding QR code option in the advanced editing mode true boolean
richTextButtonEnabled displays the adding Rich text option in the advanced editing mode true boolean
Object Inspector
object:"ObjectInspector"
bgItemEnabled displays background element in the object inspector true boolean
dndEnabled enables drag-and-drop of elements in the object inspector true boolean
qualityMeterEnabled enables warning displayed if a selected image has resolution that is too low true boolean
safetyLineViolationWarningEnabled enables warning displayed when a 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; 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 vertical alignment of items to the safe area and group alignment (to select several items use Ctrl) true boolean
horizontalAlignmentEnabled enables horizontal alignment of items to the safe area and group alignment (to select several items use Ctrl) true boolean
changeZOrderEnabled enables changing 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 multi row mode to fit all the buttons for a 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:"fontSizeParams"
max the maximum font size 100 number
max the minimum font size 4 number
step the size of the step to take when spinning 0.5 number
Bottom Toolbar
object:"BottomToolbar"
safetyLinesCheckboxEnabled displays the Safety lines toggle button true boolean
gridCheckboxEnabled displays the Grid toggle button true boolean
snapLinesCheckboxEnabled displays the Snap lines toggle button true boolean
zoomValueEnabled displays 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 surface (page) selector. It is swiper for multipage product or front/back side buttons for double-sided products. true boolean
Qr Code Dialog
object:"QrCodeDialog"
defaultType default type of a QR code "QrVCard" "QrVCard", "QrUrl", "QrPhone"
Linear Barcode Dialog
object:"LinearBarcodeDialog"
defaultType 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 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 text color and background color is below the hue or the brightness threshold false boolean
hueThreshold the hue threshold 74 number
brightnessThreshold the brightness threshold 5 number
color outline color "rgba(0, 0, 0, 0.2)" color in css-compatible format
Finish Button
object:"FinishButton"
mode 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 a debug mode that shows the button and disables the callback, but allows downloading 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 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 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 an ability to upload photos and select private photos even if the <IAPSF> marker is used false boolean
Social Networks
object:"socialNetworkAppIds"
instagram identifier of your Instagram application "" string
facebook identifier of your Facebook application "" string
Image Editor Dialog
object: "ImageEditorDialog"
colorAdjustButtonEnabled displays the Adjust button in Image Editor true boolean
cropButtonEnabled displays the Crop button in 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 palette to show in 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 an IIS user that runs Customer's Canvas should have read/write permissions for the specified folder.

Name Description Default value Possible values
Gallery
AllCategoryName alias for the category containing images from public images folder and all its subfolders all string
RootCategoryName alias for the category containing images from public images folder root string
PublicGalleryFolder the folder path where public images are stored ~/PublicGalleryFolder folder path
Users
MasterUserId id of the master user; templates and images that belongs to master user could be used by any user masteruser string
DefaultUserId the default user identifier default string
UserDataFolder the folder path where user data is stored ~/UserDataFolder folder path
AnonymousModeEnabled enables public site mode False True, False
DemoModeEnabled enables demonstration mode False True, False
Font Substitution
FontSubstitutionEnabled enables the font substitution feature. If a font required by a product is not found on a server, depending on this value, it triggers an exception (for False value), or substitutes the font (for 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 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 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 X-CustomersCanvasAPIKey field to perform file operations on your server. Web API works if a 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 Web API for Manipulating Design and Mockup Files 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 downloading 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 maximum size of the cache in bytes 10737418240 (10GB) number
CleanUpInterval interval between cleanup runs, in seconds 180 (30 minutes) number
MaxUtilizationThreshold maximum cache utilization level (in percent) that triggers automatic cleanup; when the cache size reaches MaxUtilizationThreshold, the cleanup process starts 95 number
UtilizationTarget utilization level (in percent) to which the cache should be cleaned up; when the cleanup algorithm reaches UtilizationTarget level, the cleanup process stops 70 number
RootPath folder where the chache 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