Understanding the Cloud Version of Customer's Canvas

File System of the Customer's Canvas Cloud Instance

You can add your own images, fonts, product templates, etc. to your instance of Customer's Canvas. 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 us look at an overview of the Customer's Canvas file system:

• The \ColorProfiles\ folder contains color management profiles.
• The \Configuration\ folder contains the editor configuration files, localization files, themes, and custom CSS styles.
  • The \Configuration\customCss\ folder contains custom CSS styles.
  • The \Configuration\Themes\ folder contains subfolders with themes.
• The \Fonts\ folder contains custom fonts that can be used in your products.
• The \ProductTemplates\ folder contains product templates, mockups, and watermark images.
  • The \ProductTemplates\designs\ folder contains product templates. Templates can be organized in subfolders.
  • The \ProductTemplates\mockups\ folder contains mockup files. Mockups help to visualize a product, but they are not rendered to hi-resolution images.
  • The \ProductTemplates\watermarks\ folder contains watermark images.
• The \PublicGalleryFolder\ folder contains public images, that can be utilized by users while customizing products. You can create subfolders to categorize images.
• The \UserDataFolder\<someUserId>\ folder 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.
  • The \UserDataFolder\<someUserId>\states\ folder contains products created by the <someUserId> user.
  • The \UserDataFolder\<someUserId>\images\ folder 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 files and folders of your Customer's Canvas instance using the web file manager.

File Manager

The file manager includes folder tree navigation on the left side and file view on the right side, just like the standard Windows File Explorer.

Using the file manager, you can upload and download files, delete, move, and rename files, and open mockups and templates in the web-to-print editor.

Upload Files

Mainly, you 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 designer. 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 a file.
2. Click the desired action button or press an action 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.

Configuring the Cloud Instance

There are four tabs in your Customer's Canvas account that allow you to edit configuration files:

The AppSettings.config, VectorObjects.config, FileCache.config, and clientConfig.json configuration files contain general settings that are applied to all products. After you have edited a configuration file, click the Save button in the lower-right corner. The Reset button resets all unsaved changes. It does not restore a configuration file to its default state.

The Configuration Files topic describes these settings in detail.

Managing Local Fonts

You can manage custom fonts simply by uploading or deleting them in the ~\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 in the Actions tab:

Also, you can notify Customer's Canvas about updated local fonts through 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 ~\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.DesignAtoms>
    <add key="GrayscaleColorProfileFileName" value="/ColorProfiles/grayscaleColorProfile.icc" />
    <add key="RgbColorProfileFileName" value="/ColorProfiles/rgbColorProfile.icc" />
    <add key="CmykColorProfileFileName" value="/ColorProfiles/cmykColorProfile.icc" />
</Aurigma.DesignAtoms>

Find more info on the color management in the Configuring High Resolution and Proof Images topic.

Adding Custom CSS Styles

Themes help you customize the appearance of Customer's Canvas. 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 designer 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, say 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.

Localizing the Cloud Instance

By default, Customer's Canvas 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 ~\Configuration\clientConfig.json. This file is available for editing in the related tab:

For example, for the English interface, set:

"defaultLanguage": "en"

To create your own translation, you should edit the ~\Configuration\translations.json file. This file is available for editing in the related tab:

For more information, see the Localization of Customer's Canvas topic.

Using the Cloud Instance

The Customer's Canvas user interface is the web-to-print editor. To integrate the editor into your design page, you use the API URL, which includes the URL to your Customer's Canvas instance. This instance URL can be found in your account.

The API URL appears 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. The following code snippet 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 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 to 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; the editor should appear. By clicking on 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

• Integration with E-commerce Overview
• Localization of Customer's Canvas
• Fonts' Info
• Configuring High Resolution and Proof Images
• UI Themes