View as Markdown
You’re viewing outdated documentation. View the latest Customer’s Canvas On-Premises documentation.

Markings

Applies to: Customer's Canvas On-Premises; Design Editor 4.4.25, 4.x (may differ) · Archived documentation

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:

JavaScript 
"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:

JavaScript 
 "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 ruler measured units.

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 
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 
configuration = {
    canvas: {
        rulers: {
            enabled: false
        }
    }
};

Grids

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

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

This marking is enabled by default, and you can toggle it right from the editor user interface. To enable/disable a grid, on the Marking menu, click Grid.

Styling

To change the appearance of the grid, you can use the horizontalColor/verticalColor properties to change the color of horizontal and vertical lines. Correspondingly you can specify the color value in the CSS format and use lineWidthPx to set the grid line 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 ruler-measured units.

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 
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 feature for a specific product, simply use the following configuration.

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

Snap Lines

Like the previous markings, snap lines are also configured in the ~\Configuration\clientConfig.json file. The block corresponding to snap lines looks like this:

JavaScript 
"snapLines": {
    "enabled": true,
    "color": "rgb(255,0,255)",
    "tolerance": 5
}

This marking is enabled by default, and you can toggle it right from the editor user interface. To enable/disable snap lines, on the Marking menu, click Snap lines.

Styling

To change the appearance of snap lines, set the color property to change their color.

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.

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 
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 
configuration = {
    snapLines: {
        enabled: false
    }
};

See Also

Manual

IFrame API Reference