The Control Panel is a lightweight server control panel and a file manager for both the cloud and on-premises versions of Customer's Canvas. This panel is intended for use during development or for internal use.
This topic describes how you can:
You can add your own images, fonts, product templates, and color profiles to the \assets\
folder of your instance. All the files you upload need to be placed in the correct folders in the Customer's Canvas file system in order for them to be used. Let's take a look at an overview of the Customer's Canvas file system:
\assets\
contains resources of your instance.
\assets\ColorProfiles\
contains color profiles for color management.\assets\designs\
contains product templates. Templates can be organized in subfolders.\assets\fonts\
contains custom fonts that can be used in your products.\assets\helpers\
contains watermarks and texture images.\assets\images\
contains public images, which can be utilized by users while customizing products. You can create subfolders to categorize images.\assets\mockups\
contains mockup files. Mockups help to visualize a product, but they are not rendered to hi-resolution images.\Editors\
contains configuration files and installed packages of the UI Framework.
\Editors\configs\
contains configuration files.\Editors\UIF-<version>\
contains a multi-step editor.\userdata\<someUserId>\
is created for every user who interacts with Customer's Canvas. <someUserId>
is the identifier you specify using the Customer's Canvas API via the userId argument. If the argument is not specified, then the default
user identifier is utilized.
\userdata\<someUserId>\states\
contains products created by the <someUserId>
user.\userdata\<someUserId>\images\
contains images uploaded by the <someUserId>
user.For more information about fonts, templates, mockups, and public images, see the Configuring Products section.
You can manage the files and folders of your Customer's Canvas instance by using the web file manager.
The file manager includes folder tree navigation on the left side and a file view on the right side, just like the standard Windows File Explorer.
Using this file manager, you can upload and download files as well as delete, move, and rename files. You can also open mockups and templates in the web-to-print editor.
You primarily need access to the file system of your Customer's Canvas instance to upload product templates and images. The file manager allows you to upload several files at once. All uploaded files will be placed in the folder being viewed at that time. When you upload product templates and images, they instantly become available in the Design Editor. When you upload or delete fonts, you need to reload local fonts' info.
There are two ways to upload files:
or:
You can also download, delete, copy, and move files by using the file manager. To perform any of these actions:
If you want to rename a file:
There are two ways to open a file in the editor:
or:
In the Control Panel, you can monitor the space occupied by your instance and clean up the storage if needed. Here, you can see how much space the assets and user designs take up and how the amount of space changes.
On the Storage tab, you can both run the cleanup manually and enable the auto cleanup.
To clean up the storage:
To enable the auto cleanup:
On the Configuration tab, you can edit the following files:
These files contain general settings that are applied to all products. After you have edited a configuration file, click the Save button in the lower-left corner. The Reset button resets all unsaved changes. It does not restore a configuration file to its default state.
The Configuration Files section describes these settings in detail.
All topics in this documentation discussing such subjects as configuring the product, the Customer's Canvas integration, etc. apply to both the cloud and on-premises versions.
You can manage custom fonts simply by uploading or deleting them in the \assets\fonts\
folder by using the file manager. After you have changed local fonts, you should click the Reload local fonts button to apply changes to the web-to-print editor. The button is located on the Actions tab:
Also, you can notify Customer's Canvas about updated local fonts through the Web API. Refer to the Fonts' Info topic that describes how you can update local fonts' info.
The cloud account allows you to set up color management profiles. You can upload them into the \assets\ColorProfiles\
folder by using the file manager. To associate the uploaded profiles with color spaces in the editor, specify your custom profiles in VectorObjects.config
:
<Aurigma.GraphicsMill.AjaxControls.VectorObjects> <add key="GrayscaleColorProfileFileName" value="/ColorProfiles/grayscaleColorProfile.icc" /> <add key="RgbColorProfileFileName" value="/ColorProfiles/rgbColorProfile.icc" /> <add key="CmykColorProfileFileName" value="/ColorProfiles/cmykColorProfile.icc" /> </Aurigma.GraphicsMill.AjaxControls.VectorObjects>
Find more info on color management in the Configuring High Resolution and Proof Images topic.
By default, the Design Editor includes localization files for English (en
), Spanish (es
), French (fr
), and Russian (ru
). You can set one of these languages as the default interface language by setting the defaultLanguage parameter in clientConfig.json
. This file is available for editing on the Configuration tab:
For example, for the English interface, set:
"defaultLanguage": "en"
To create your own translation, you should edit the translations.json
file.
For more information, see the Localization of Customer's Canvas topic.
To change the appearance of the Design Editor, you can customize the UI Themes. When you navigate to the \Configuration\Themes\
folder, you will find four themes: MdLight, Md, BootstrapDefault, and BootstrapEmpty. The default theme is MdLight, which stands for Material Design, Light. To change a basic theme, you can put custom styles into the \Configuration\customCss\
folder.
For example, you may want to set an image as the editor background and change the highlight appearance in the Object Inspector. You can define the following styles to implement this:
#mainContainer #mainRow { background-image: url("wood.jpg"); } .objectInspector .inputs.highlight { color: #ffffff; }
Now that you have prepared your custom CSS styles, for example, in the mySiteStyles.css
file, you can load them within the designer page through the IConfiguration interface:
configuration = { customStyle: "mySiteStyles" }
Also, you can customize one of the provided themes. For an example of such a customization, refer to the UI Themes topic.
If the \Themes\
and \customCss\
folders are not displayed in your Control Panel, please contact our support team.
To integrate the web-to-print editor into your design page, you must use an API URL, which includes the ID of your Customer's Canvas instance. This URL looks as follows: https://h.customerscanvas.com/Users/xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx/SimplePolygraphy/Resources/Generated/IframeApi.js
, where xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx
is your instance ID. You can find the ID here:
The following example displays the editor with the businesscard2_side1.psd
template loaded into it:
<!DOCTYPE html> <head> <title>Simplest Design Page</title> <!-- The IFrame API script. IMPORTANT! Do not remove or change the ID. --> <script id="CcIframeApiScript" type="text/javascript" src="https://h.customerscanvas.com/Users/xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx/SimplePolygraphy/Resources/Generated/IframeApi.js"> </script> </head> <body> <!-- The iframe to display the editor in. --> <iframe id="editorFrame" width="100%" height="800px"></iframe> </body> <script> //Initializing the product with only one template - "businesscard2_side1.psd". productDefinition = { surfaces: ["businesscard2_side1"] }; //Getting the iframe element to display the editor in. var iframe = document.getElementById("editorFrame"); var editor = null; //Loading the editor. CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition) //If the editor has been successfully loaded. .then(function (e) { editor = e; }) //If there was an error thrown when loading the editor. .catch(function (error) { console.error("The editor failed to load with an exception: ", error); }); </script> </html>
Just copy this code, paste it into an HTML file, and replace xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx
with the identifier of your Customer's Canvas instance. Open the saved file in a browser and the editor should appear. By clicking the Download button, you can get the high-resolution output of your newly-created product. A real use case of the integration of Customer's Canvas into a website is discussed in the Integration with E-commerce Overview topic.