Warnings

• 5 minutes to read

To verify that user designs are valid for printing, you can enable the preflight check in the editor. The Design Editor verifies that the following conditions are met:

• Design elements are within the print zone.
• Images and image placeholders have a good DPI resolution.
• Bounded text fits the bounding rectangles.
• Violations of the regions do not occur.
• Uploaded SVG and PDF graphics fully matches the original images.

The Design Editor performs the preflight check at runtime, while your users are editing their designs. If one of these problems occurs, then the corresponding warning appears right on the canvas and in the Object Inspector. When rendering a user design, you can also retrieve details about design elements that failed this validation.

Violation Warnings

You can enable the preflight check and violation warnings in the ~/Configuration/clientConfig.json file globally or through the IConfiguration interface for a single product. The following example shows how you can enable the preflight check.

{
    "violationWarningsSettings": {
        "regionViolationWarningEnabled": true,
        "shapeViolationsEnabled": true,
        "textCropViolationWarningEnabled": true,
        "inPlaceNotSupportedWarningEnabled": true,
        "tolerance": 0.01,
        "safetyLines": {
            "enabled": true,
            "mode": "InsideAll"
        },
        "qualityMeter": {
            "enabled": true
        }
    }
}

Here, the regionViolationWarningEnabled property enables the region validation, textCropViolationWarningEnabled validates that bounded text is not cropped, and the shapeViolationsEnabled property allows you to check if SVG and PDF graphics appear on the canvas without any losses after uploading in the Shape mode.

The inPlaceNotSupportedWarningEnabled property allows you to display properties of text elements that are not supported in the WYSIWYG text engine.

The tolerance property allows you to disable warnings about violations of safety lines or the bleed zone when an object is close enough to them.

To enable the bleed zone validation, you can define the safetyLines object. You can use one of the following check modes:

• InsideAll - a warning does not appear only if the element is inside all safety lines.
• PartiallyInsideAny - a warning does not appear if at least one safety zone contains the element. This is the default value.
• InsideAny - a warning does not appear if at least one safety zone contains the element, however, no safety lines should intersect the element.

The qualityMeter object configures the image resolution check.

As an alternative, you can enable these warnings in product templates with markers. The previous example will correspond to the following marker set:

<VSAR><VSAS><VSATC><VSAIT><VSASL><VSAIQ>

Now that you have enabled the preflight, define whether these warnings appear in the Object Inspector and on the canvas. Note, you can enable the validation and simultaneously disable warnings in the user interface. In this case, the Design Editor performs the validation, and you can handle the OnImageDpiChanged event by analyzing the preflight problems while rendering the designs.

Warnings in the Object Inspector

To display violation warnings in the Object Inspector, set the violationWarningsEnabled property to true.

{
    "widgets": {
        "ObjectInspector": {
            "violationWarningsEnabled": true
        }
    }
}

These violation warnings appear on the right side of the Object Inspector as red and yellow icons.

When you click the icons or tap them on your mobile device, the Design Editor displays corresponding messages and the actual DPI of the image for the quality warnings.

Warnings on the Canvas

To display violation warnings on the canvas, set the violationWarningButtonsEnabled property to true.

{
    "canvas": {
        "violationWarningButtonsEnabled": true,
        "qualityChangeContainersEnabled": true
    }
}

On the canvas, warning icons appear near design elements that have preflight problems. For example, when a design element goes out of the safety zone, the following warning appears.

Now, if you move this element back to the safety zone, the warning icon briefly changes to a green check and disappears.

Validating the Image Resolution

To verify that user images have a good resolution for printing, the Design Editor uses a so-called quality meter. When the user resizes an image or adds a new image to the design, the quality meter evaluates the image resolution based on the hiResOutputDpi property and the DPI tolerance set up in qualityLevels.

{
    "rendering": {
        "hiResOutputDpi": 250
    },

    "violationWarningsSettings": {
        "qualityMeter": {
            "enabled": true,
            "qualityLevels": {
                "warning": "99",
                "bad": "80"
            }
        }
    },

    "canvas": {
        "violationWarningButtonsEnabled": true,
        "qualityChangeContainersEnabled": true
    }
}

The warning and bad properties define the image quality levels as a percentage of the hi-res output DPI. The warning value should be greater than or equal to the bad value. You can enable a bar displaying the DPI change when the user resizes images. To display this bar, set qualityChangeContainersEnabled to true.

Also, the Design Editor sends the OnImageDpiChanged event when the user resizes images. The following example subscribes to this event and outputs the event arguments - the DPI values and design element names - to the console.

var editor = null;

CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
    .then((e) => {
        editor = e;
        editor.subscribe("OnImageDpiChanged", function (oldDpi, newDpi, elementName) {
            console.log("oldDpi: " + oldDpi + " newDpi: " + newDpi + " element: " + elementName);
        });
    });

TrimBox Validation

In the Design Editor, design elements are divided into two groups: that can go out of the trim box (fragments of the background) and that can not (the main content).

You can check if an edge of a design element enters into the unsafe zone between the trim box and the bleed box. In most cases, this kind of validation works automatically. For fine-tuning, you can apply the <VSABA> marker, which marks the corresponding elements as the background, and the warning will appear if the element does not overlay both the trim box and the bleed box.

Note that you can only enable this validation if bleed zones are defined:

• For InDesign templates, the LegacyIdmlBleedParsingEnabled parameter must be false (the default value).

• For Photoshop templates, you can define the bleed zone as follows:

  let product = {
      "surfaces": [{
          "printAreas": [
              { 
                  "designFile": "flyer",
                  "bleed": 20
              }
          ]
      }]
  };
  

Validation Results

When you use the finishProductDesign method, you can retrive details about preflight problems through violationWarningData. This array contains as many elements as there are design elements that have preflight problems.

editor.finishProductDesign()
    .then((result) => {

        console.log("Saved state: " + result.stateId);

        // If there are preflight problems, output the details to the console.
        if (result.violationWarningData.length > 0)
            preflightProblems.forEach((anItem) => {
                console.log("Warning: " + anItem.name + " failed the preflight check.");
            });
    });