The Quick Start

You can easily embed the Customer's Canvas Proofing Tool into any web page. This topic describes scripts to be included in your application, the tool initialization, and a preflight example.

Prerequisites

There are three steps to run the preflight tool:

  1. Include the required scripts and the IFRAME element in your page.
  2. Upload a design to your server using the POST request.
  3. Initialize the Visual Proofing Tool.

The Required Scripts

The Visual Proofing Tool requires the following scripts to be included.

HTML
<script>
    if (typeof Promise !== "function") {
        var promisePolyfillScript = document.createElement("script");
        promisePolyfillScript.src = '{toolUrl}Resources/Libs/bower/es6-promise/promise.js';
        document.writeln(promisePolyfillScript.outerHTML);
    }
</script>

<script src="{toolUrl}Resources/VisualProofingTool/VisualProofingTool.js">
</script>

Here, toolUrl is the path to your Visual Proofing Tool instance.

The Upload Request

Prior to initialization of the Visual Proofing Tool, you need to upload design files to your server. You can do it by sending the POST request to the /api/upload URL.

This method performs the following:

  • Gets the files in the multipart / form-data format.
  • Saves them with new names on the server.
  • Returns the server names of uploaded files as a JSON array.

You apply these server names for further initialization of the tool. For the description of this POST request, you can refer to preflight-check.htm topic.

Visual Proofing Tool Initialization

The Visual Proofing Tool runs in the IFRAME element. Add one to your page.

HTML
<iframe id="toolFrame"></iframe>

Now that you prepared a container for the preflight check, initialize the tool.

HTML
var toolFrame = document.getElementById("toolFrame");
// The tool initialization
CustomersCanvas.VisualProofing.Tool.init(toolFrame, {
    toolUrl: '/',
    designFiles: designs,
    dpi: 300,
    productSize: { width: 288, height: 432 }
});

Here, designs is a string array of server-side file names, which /api/upload returns. For the complete parameter list, you can refer to the Visual Proofing Tool Configuration topic.

The Sample

The following code sample represents a two-step preflight that contains the design page and the approval page. Its workflow includes the following steps:

  1. The system loads a user's product.
  2. The user fits and rotates the design on the canvas.
  3. The user initializes the transfer to the approval page.
  4. The system displays proof images and provides a link to the hi-res output.
  5. The user can return to manipulating the product.

To make this sample work, do the following:

  1. Copy and paste the code to the index.aspx file.
  2. Open index.aspx in a browser.
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <%: Styles.Render("~/Demo/Libs/DemoStyles") %>

    <!-- The start of section of required Visual Proofing Tool scripts. -->
    <script>
        if (typeof Promise !== "function") {
            var promisePolyfillScript = document.createElement("script");

            <!-- Include the promise.js script to support old browsers. -->
            promisePolyfillScript.src = "/Resources/Libs/bower/es6-promise/promise.js";

            document.writeln(promisePolyfillScript.outerHTML);
        }
    </script>
    <!-- Include the core VisualProofingTool.js script. -->
    <script src="/Resources/VisualProofingTool/VisualProofingTool.js">
    </script>
    <!-- The end of the section of required Visual Proofing Tool scripts. -->

    <%: Scripts.Render("~/Demo/DemoScripts") %>
</head>

<body>
    <form id="inputForm" name="inputForm" method="post" enctype="multipart/form-data" action="/api/upload">
    <div>
        <input name="theDesign" type="file" />
    </div>
    <div>
        <input type="submit" value="Submit" />
    </div>
    </form>
    <pre id="error" class="hidden"></pre>

    <div id="iframeWrapper" style="height: 800px; width: 100%">
        <!-- The container for the Visual Proofing Tool. -->
        <iframe id="toolFrame" style="height: 100%; width: 100%; border: none"></iframe>
        <button id="getProofsBtn" class="btn btn-success hidden">Preview</button>
    </div>

    <div id="approvePage" class="area hidden">
        <div class="container-fluid">
            <h1>Approve Your Product</h1>
            <div class="proofImgContainer">
                <img class="proofImg" />
            </div>
        </div>

        <div class="agree">

            <h1>Approval</h1>
            <h3>The product will be printed exactly as it appears above.</h3>

            <div id="approveButtonWrapper">
                <input type="button" class="btn btn-success btn-lg approveButton" value="Download hi-res" />
            </div>
        </div>
        <div class="return">
            <a id="lnkEditAgain">&larr; I want to return and Edit again</a>
        </div>
    </div>

    <script type="text/javascript">
    var form = document.getElementById("inputForm");

    form.addEventListener("submit", function(e) {
        e.preventDefault();
        // Uploading a design.
        var xhr = new XMLHttpRequest();
            xhr.open("POST", form.getAttribute("action"));
            xhr.send(new FormData(form));
            xhr.onreadystatechange = function() {
                // Whether the request has been done.
                if (xhr.readyState !== 4)
                    return;

                var status = xhr.status;

                // Whether the request has been completed successfully.
                if (status !== 200) {
                    document.getElementById("error").classList.remove("hidden");
                    document.getElementById("error").innerText = "Error\n" + xhr.responseText;
                    throw xhr;
                }

                var toolFrame = document.getElementById("toolFrame");
                var toolWrapper = $("#iframeWrapper");

                // Initializing the Visual Proofing Tool.
                toolWrapper.mask("Loading...");
                CustomersCanvas.VisualProofing.Tool.init(toolFrame, {
                    toolUrl: "/",
                    // Retrieving the design files from the HTTP response.
                    designFiles: JSON.parse(xhr.responseText),
                    dpi: 300,
                    productSize: { width: 700, height: 400 },

                    // Defining the bleed area.
                    safetyLines: [{ margin: 9 }],

                    // Enabling the tool buttons performing manipulations with design.
                    rotateCanvasButtonEnabled: true,
                    rotateImageButtonsEnabled: true,
                    resetImageButtonEnabled: true,

                    designArbitaryResizeEnabled: true,
                    designRotateEnabled: false
                })
                // If the init promise is resolved, hide the approval page.
                .then(function(tool) {
                        toolWrapper.unmask();
                        SubscribeToEvents(tool);
                        document.getElementById("approvePage").classList.add("hidden");
                        document.getElementById("error").classList.add("hidden");
                        document.getElementById("iframeWrapper").classList.remove("hidden");
                        document.getElementById("getProofsBtn").classList.remove("hidden");
                })
                // If the init promise is rejected, show an error message.
                .catch(function(ex) {
                    document.getElementById("error").classList.remove("hidden");
                    document.getElementById("error").innerText = "Error\n" + JSON.stringify(ex, null, 4);
                    toolWrapper.mask("Error");
                    throw ex;
                });
            }
    });

    // Subscribe to the click events thrown by the Preview and Edit again buttons.
    function SubscribeToEvents(tool) {
        // Clicking the Preview button, render the design.
        document.getElementById("getProofsBtn").onclick = function () {
            var pageWithTool = $("#iframeWrapper");

            // Obtaining proof images.
            pageWithTool.mask("Loading...");
            tool.finish()
                .then(function (finishData) {
                    pageWithTool.unmask();

                    document.querySelector("#approveButtonWrapper input").onclick = function () {
                        window.location = finishData.hiResUrl;
                    }

                    document.getElementById("iframeWrapper").classList.add("hidden");
                    document.getElementById("approvePage").classList.remove("hidden");

                    ProofPage.approveData = { proofImageUrls: finishData.proofUrls };
                    ProofPage.setData();
                })
                .catch(function (ex) {
                    document.getElementById("error").classList.remove("hidden");
                    document.getElementById("error").innerText = "Error\n" + JSON.stringify(ex, null, 4);
                    pageWithTool.mask("Error");

                    throw ex;
                });
        }

        // Clicking the Edit again button, return to the page with the IFRAME element.
        document.getElementById("lnkEditAgain").onclick = function () {
            document.getElementById("iframeWrapper").classList.remove("hidden");
            document.getElementById("approvePage").classList.add("hidden");
        };
    }
    </script>

    <script id="proofPageModule" type="text/ecmascript">
        (function () {
            var maskTimeout = null;

            window.ProofPage = {

                // Show a preview of the specified design page.
                setPreviewImage: function (index) {
                    var proofImageUrls = ProofPage.approveData.proofImageUrls;
                    ProofPage.mask("Loading ...");
                    ProofPage.proofImg.attr("src", proofImageUrls[index]);
                },

                // Show a preview of design pages.
                setData: function () {
                    ProofPage.setPreviewImage(0);
                },

                // Initialize approveData.
                approveData: { proofImageUrls: [] },

                // Clear the Loading mask.
                clearMask: function () {
                    if (ProofPage.maskTimeout != null) {
                        clearTimeout(ProofPage.maskTimeout);
                        maskTimeout = null;
                    }

                    ProofPage.proofImg.parent().unmask();
                },

                // Show the Loading mask.
                mask: function (msg) {
                    if (ProofPage.maskTimeout != null) {
                        clearTimeout(maskTimeout);
                        maskTimeout = null;
                    }

                    ProofPage.maskTimeout = setTimeout(function () {
                        maskTimeout = null;
                        ProofPage.proofImg.parent().mask(msg);
                    }, 250);
                }
            };

            // Set up a container for proof images.
            $(function () {
                var proofImg = $("#approvePage .proofImg");
                ProofPage.proofImg = proofImg;

                proofImg.on("load", function () {

                    ProofPage.clearMask();
                    proofImg.show(null);

                    var parentHeight = proofImg.parent().height();
                    var imgHeight = proofImg[0].height;

                    proofImg.css("margin-top", imgHeight <= parentHeight ? (parentHeight - imgHeight) / 2 + "px" : 0);

                }).on("error", function (e) {
                    ProofPage.mask("Error");

                    if (window.console)
                        console.error(e);
                });

            });

        })();
    </script>
</body>
</html>

See Also

Manual