TrophyCustomer's Canvas is honored with a 2020 InterTech Technology Award! Learn more 

Preflight

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, request a trial version at sales@aurigma.com.

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.

Example

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.