Preflight

• 3-4 minutes to read

You can add this widget to your ordering process so that your customers can see if their design uses the correct color space, fits the product surface, and all design elements are within trim lines.

Note

This widget works based on the Preflight plugin for Customer's Canvas. If you don't have this tool, contact our support team.

General info

• type: preflight

Params

• config - the preflight configuration. For details, see the Config Reference.
• files - files for validation. For details, see the F.A.Q.
• style - CSS variables to apply custom colors in the user interface. For details, see the F.A.Q.
• onPageChange - Function | Array<Function> - a function ("{{#function <expression>}}") or an array of functions that work when changing pages in this widget.

Properties

• hires - a URL that links to the print-ready file in PDF format.
• preview - a string array of URLs that link to proof images.
• page - the current preflight page - either uploader or editor.
• failedChecks - an object containing two arrays, errors and warnings, with failed validation rules.
• hasFiles - if true, the user has uploaded a file.

Methods

• setStep(page) - sets a page in this widget to either uploader or editor.
• setFiles(files[]) - passes links to images into this widget, i.e. initializes the widget as if these images were uploaded by the user.
• getResults() - initializes rendering the previews and print files and returns links to the output images.

Examples

This widget may be configured as follows:

{
  "name": "preflight",
  "type": "preflight",
  "params": {
    "config": {
      "language": "en",
      "backendUrl": "http://preflight.example.com",
      "startFromUploader": true,
      "uploader": {
        "fileTypes": [ ".pdf", ".jpeg", ".jpg", ".psd" ],
        "multiple": true
      },
      "product": {
        "dpi": 300,
        "size": {
          "width": 595,
          "height": 842
        },
        "bleed": 20,
        "safetyLines": [
          {
            "color": "#00ff00",
            "altColor": "#00ff00",
            "margin": 40
          }
        ],
        "pages": 4,
        "allowAddPages": true,
        "allowDeletePages": true
      },
      "viewer": {
        "keepAspectRatio": false,
        "zoom": {
          "min": 0.2,
          "max": 1.2,
          "step": 0.1
        }
      },
      "rules": [
        {
          "type": "colorspace",
          "severity": "error",
          "enableFix": true,
          "params": {
            "allowedColorSpaces": [ "cmyk" ]
          }
        }
      ],
      "interface": {
        "topToolbar": [
          {
            "name": "upload"
          },
          {
            "name": "fitToBleed"
          },
          {
            "name": "fitToTrim"
          },
          {
            "name": "center"
          },
          {
            "name": "reset"
          }
        ]
      }
    },
    "onPageChange": [
      "{{ #function(page) page==='editor' && main.stepIndex === 0 ? main.nextStep() : ''  }}"
    ]
  }
}

How to define validation rules

If you need to adjust the color space and resolution of products, you must define two elements in the rules array.

{
  "name": "preflight",
  "type": "preflight",
  "params": {
    "config": {
      "rules": [
        {
          "type": "colorspace",
          "severity": "error",
          "enableFix": true,
          "params": {
            "allowedColorSpaces": ["CMYK"]
          }
        },
        {
          "type": "resolution",
          "severity": "warning",
          "params": {
            "target": 300
          }
        }
      ]
    }
  }
}

Here, severity specifies whether a preflight problem can remain in the print file or if it must be fixed.

As a result, if images contain graphics in color spaces other from CMYK, then they are considered as invalid, and this widget enables the Fix button to resolve this issue automatically. If these images have a resolution of less than 300 DPI, then a warning only appears in the widget.

You can find more details in the Preflight Rules topic.

How to load state files

When you use Customer's Canvas BackOffice to store and process your assets, you save the resulting templates in the ST format in Asset Storage. The Preflight Tool allows you to load state files instead of configuring products in the JSON config.

At the same time, along with custom elements such as text and shapes, safety lines with bleed zones and product mockups will be imported from the state file.

{
  "name": "preflight",
  "type": "preflight",
  "params": {
    "config": {
      "state": {
        "stateId": "64f6d1be4737b3417c7a546a"
      },
      "services": {
        "designAtoms": {
          "url": "https://api.customerscanvashub.com/",
          "token": "{{vars.apiAccessToken}}"
        },
        "tenantId": "{{vars.tenantId}}"
      },
      "product": {
        "dpi": 300
      }
    }
  }
}

Here, stateId contains the design identifier.

In the services, you can provide properties for the Design Atoms API service. This object is required when you're creating workflows in BackOffice. The token and tenantId are defined through variables. If you define the preflight widget for working in the UI Framework, you can pass these properties when initializing the driver.

Since the product parameters are imported from the state file, only the following product settings will be applied:

• allowAddPages
• allowDeletePages
• dpi