White paper: Templates in web-to-print.  Free download

Markings

When you build an online print product designer for end users who are not computer-savvy, you want to keep the user interface as simple as possible and turn off all the elements that may confuse them. However, in many cases, it is important to give them some tools to place elements precisely.

Customer's Canvas includes three useful tools for this - rulers, grids, and snap lines.

Rulers, grids, and snap lines.

Let us see how to enable and configure them.

Rulers

To configure rulers, open the ~\Configuration\clientConfig.json file and make sure there is a block which looks like this:

json
"rulers": {
    "enabled": true,
    "unit": "inch",
    "origin": { "X": 0, "Y": 0 }
}

The properties are self-explanatory, but let us take a closer look at them.

Measurement Units

The standard length unit in Customer's Canvas is a point, i.e. 1/72 of an inch. However, regular users are most likely more comfortable with traditional units like inches or millimeters. You can use the unit property to switch the units to one of the following values:

  • inch
  • mm
  • cm
  • point
  • custom

If you prefer to use some other measurement unit, set this property to custom and specify the additional customUnitScale property. This property should contain a ratio allowing Customer's Canvas to convert your unit to points.

For example, imagine that you want to use picas as a unit of length. This is a traditional typography unit, which equals 1/72 of a foot (equivalent to 1/6 of an inch). In other words, 1 point = 1/12 pica (0.0833333 pica). Your rulers entry will look as follows:

json
"rulers": {
    "unit": "custom",
    "customUnitScale": 0.0833333
}

A Point of Origin

You can specify the point of origin relative to the upper-left corner of the template using the origin property. It accepts the {"X": number, "Y": number} object specifying the offset in measurement units of the rulers.

Display of Rulers

When the enabled property is true, rulers are visible; otherwise, Customer's Canvas hides both the horizontal and vertical rulers.

Override of Rulers for a Specific Product

If for some reason you want to use custom settings for rulers for a specific product, you may do this using the IConfiguration interface.

JavaScript
let configuration = {
    canvas: {
        rulers: {
            enabled: true,
            unit: "inch",
            origin: { X: 0, Y: 0 }
        }
    }
};

If you just want to disable the rulers for a specific product, use the following configuration.

JavaScript
let configuration = {
    canvas: {
        rulers: {
            enabled: false
        }
    }
};

Grids

Like rulers, grids are configured in clientConfig.json. Open this file to find the following object:

json
"grid": {
    "horizontalColor": "rgba(0, 255, 255, 0.2)",
    "verticalColor": "rgba(0, 255, 255, 0.2)",
    "stepX": 0.25,
    "stepY": 0.25,
    "lineWidthPx": 1,
    "enabled": true
}

Appearance

This marking is disabled by default. To allow your users to enable and disable the grid in the user interface, set the gridCheckboxEnabled property of the Bottom Toolbar to true. After that, the Grid command appears on the Marking menu.

To change the color of horizontal and vertical lines, you can specify a color value in the CSS format in the horizontalColor and verticalColor properties. You can also use lineWidthPx to set the gridline width in pixels.

Cell Size

To control the size of the grid cells, use the stepX and stepY properties to specify the horizontal and vertical distance between grid lines in the measurement units of the rulers.

Override of Grids for a Specific Product

If for some reason you want to use custom grid settings for a specific product, you may do this using the IConfiguration interface.

JavaScript
let configuration = {
    grid: {
        horizontalColor: "rgb(208, 224, 227)",
        verticalColor: "rgb(208, 224, 227)",
        stepX: 1,
        stepY: 1,
        lineWidthPx: 1,
        enabled: true
    }
};

If you just want to disable the grid for a specific product, simply use the following configuration.

JavaScript
let configuration = {
    grid: {
        enabled: false
    }
};

Snap Lines

Customer's Canvas allows you to configure three types of snap lines that will cling to design elements, product pages, and safety lines.

In the ~\Configuration\clientConfig.json file, you can define a common configuration for all three types of snap lines as follows:

json
"canvas": {
    "snapLinesVisible": false,
    "snapLines": {
        "enabled": true,
        "color": "rgb(255,0,255)",
        "tolerance": 5
    }
}

As an alternative, you can define an advanced configuration for a single type of snap lines.

json
"canvas": {
    "snapLines": {
        "items": {
            "enabled": true,
            "color": "rgb(255,0,0)",
            "tolerance": 5,
            "priority": 2,
            "initialValue": false
        },
        "printArea": {
            "enabled": false,
            "color": "rgb(0,255,0)",
            "tolerance": 20,
            "priority": 3,
            "initialValue": false
        },
        "safetyLines": {
            "enabled": true,
            "color": "rgb(0,0,255)",
            "tolerance": 5,
            "priority": 1,
            "initialValue": true
        }
    }
}

Appearance

Snap lines are enabled by default. The initial appearance on the canvas is defined by the snapLinesVisible property in the common config. In the advanced config, the initialValue defines whether safety lines of the corresponding type are displayed when the canvas opens.

To allow your users to enable and disable snap lines through the Marking menu, set the snapLinesCheckboxEnabled property to true. When defining the advanced config, use snapLinesItemsCheckboxEnabled, snapLinesPrintAreaCheckboxEnabled, and snapLinesSafetyLinesCheckboxEnabled to toggle each type of the snap lines separately.

You can also use the color property to change the color of snap lines.

Tolerance

To control the distance between an object and a snap line, starting from where the object clings to the line, specify the tolerance property. This value is measured in pixels and works independently of the current zoom level.

Priority

In the advanced configuration, you can specify the priority of snap lines of a single type. In the case of overlapping tolerance zones, a snap line with the highest priority is displayed on the canvas. The higher this value, the higher the priority.

Override of Snap Lines for a Specific Product

If for some reason you want to use custom settings for snap lines for a specific product, you may do this using the IConfiguration interface.

JavaScript
let configuration = {
    snapLines: {
        enabled: true,
        color: "rgb(155, 0, 0)",
        tolerance: 10
    }
};

If you just want to disable Snap Lines for a specific product, use the following configuration.

JavaScript
let configuration = {
    snapLines: {
        enabled: false
    }
};

See Also

Manual

IFrame API Reference