Control Panel

File System of the Customer's Canvas Cloud Instance

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.

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.

Upload Files

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:

• Drop selected files into the File view. The files will be uploaded instantly.

or:

1. Click the Browse button and select the files you want to upload.
2. Click the Upload link.

Download, Delete, Copy, and Move Files

You can also download, delete, copy, and move files by using the file manager. To perform any of these actions:

1. Select one or more files.
2. Click the desired action's button or press an action's key: F6 to move, Del to delete.

Rename Files

If you want to rename a file:

1. Select a file.
2. Click the Rename button or press Enter.
3. Enter the new name and press Enter.

Open Files in the Editor

There are two ways to open a file in the editor:

• Double-click the file.

or:

1. Select a file.
2. Click the Test template in the editor button or press Enter.

Cleaning Up the File Storage

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.

Manual Cleanup

To clean up the storage:

1. In the upper-right corner, click Run manually.
2. In the Manual cleanup dialog box, select what you want to delete: user designs, uploaded images, or both.

   

3. Select a time range.
4. Click Run.

Auto Cleanup

To enable the auto cleanup:

1. In the upper-right corner, click Auto cleanup.
2. In the Auto cleanup dialog box, click Auto cleanup to turn on this feature.

   

3. Select what you want to delete: user designs, uploaded images, or both.
4. Set the recurrence of cleanups.
5. Click Ok.

Configuring the Design Editor

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.

Managing Local Fonts

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.

Adding Color Profiles

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.

Localizing the Design Editor

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.

Adding Custom CSS Styles

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.

Using the Cloud Instance

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.

See Also

Manual

• Getting Started with the Control Panel
• Integration with E-commerce Overview
• Localization of Customer's Canvas
• UI Themes