Overview

Artworktool’s HTML5 Online Designer is easily integrated into any standard website by using this API to launch the designer and manage various features and functions of the designer. 

Integration

To use the Designer instance on your website you will need to include the printeditor.js file on your page. For example:

<script type=”text/javascript” src=”http://designerstaging.artworktool.com/editor_v2/embeding

/printeditor.js”></script>

To integrate the designer, create an object of the Printeditor class (the designer core API will include the designer iframe to the provided html block):

var printeditorInstance = new Printeditor(block, editorParams, serverParams);

The Printeditor class accepts these params:

  • block - html block/wrapper id that will include the designer iframe (string)
  • editorParams - designer iframe options, as a width and height (javascript object)
  • serverParams - designer instance settings (javascript object), can consist of the following attributes:
    • apiKey - the security key for your site as provided by Artworktool (required attribute)
    • user - user designer hash (if don’t set it, the designer will create a user automatically with a randomly generated hash).
    • mode – 
      • end_user (default designer), 
      • admin (the designer mode in the admin panel for the template creation/edition) and face for a safezone designer mode
    • width - designer project width in the provided units
    • height - designer project height in the provided units
    • units - designer project units (inch, px, mm, cm, m)
    • useDesignerPrice - boolean parameter to tell the designer use 5$ or 2$ for the fotolia stock image.
    • templateId - ID of the designer template
    • projectId - ID of the existing designer project

Example of the printeditor object construction:

var config = {
apiKey: 'cddaf73846f8ba861aa020908bb036cb',
user: 'test’',
mode: 'end_user',
width: '100',
height: '100',
units : 'inch'

};

var designer = new Printeditor('designer', {width :'100%', height : '100%' }, config);

This code will launch the designer with a 100x100inch project in the “designer” html block for user “test”, and site with an API key “cddaf73846f8ba861aa020908bb036cb”

API Methods (Printeditor class public methods)
 

Summary

Function name

Params

Description

Returns

save

callback

Save a project. 

id - project id snapshot - project snapshot id png_url - project thumbnail

getProjectData

callback

Get info about a project

project id and name (projectId,

projectName)

 

setProjectPriceInfo

projectInfo, callback

Set info for a designer cost

No response

onSaved

callback

Returns info about saved project

id - project id snapshot - project snapshot id png_url - project thumbnail

previewProject

callback

Generate a project thumbnail

projectThumb - encoded project thumbnail 

onInstanceCreated

 

callback

On designer loaded event

No response

setPreloader

 

state (true/fals e)

Display/hide a spinner

No response

onObjectMoving

 

callback

Returns info about moving object on canvas

type - object type top - top position

left - left position name - layer name

onObjectAdd

 

callback

Returns info about added object

type - object type top - top position left - left position width - object width height - object height

onObjectDeleted

callback

On object deleted event

type - object type

name - object layer

name

onProjectLoaded

callback

fires when a project has been loaded

No response

onTemplateLoaded

callback

fires when a template has been loaded

No response

activeEditor

No params

get main designer object

returns App object

(for a new designer)

 

Details

 

  1. Save project

Printeditor.save
Params:

  • callback function

Returns:

  • id - project id
  • snapshot - project snapshot id
  • png_url - project thumbnail

Example:

printeditor.save(function(data) {
     console.log(‘project data’, data);
});

 

  1. Get info about a project

Printeditor.getProjectData

            Params:

  • callback function

            Returns:

  • projectId - id of the project
  • projectName - project name

            Example:

 printeditor.getProjectData(function(data) {

      console.log(‘project id’, data.projectId);

});

 

  1. Set the designer costs information

Printeditor.setProjectPriceInfo

Params:

  • projectInfo
  • callback

Example:

printeditor.setProjectPriceInfo(

{"product_id":"219601","product_qty":1,"product_unit_pri ce":1,"currency_symbol":"36","product_canvas_prices":{"0 ":{"size":0,"cost":5},"1":{"size":5,"cost":7.5},"2":{"si ze":10,"cost":10},"3":{"size":15,"cost":12.5},"4":{"size ":20,"cost":15},"5":{"size":25,"cost":17.5},"6":{"size":30,"cost":20},"7":{"size":35,"cost":22.5},"8":{"size":40,"cost":25},"9":{"size":45,"cost":27.5},"10":{"size":50,"cost":30},"11":{"size":100,"cost":50},"12":{"size":250, "cost":75}}});

 

  1. Returns info about saved project

Printeditor.onSaved

Params:

  • callback

Returns:

  • id - project id
  • snapshot - project snapshot id
  • png_url - project thumbnail

Example:

     printeditor.onSaved(function(data) {            

console.log(‘project preview url’, data.png_url);

         });

 

  1. Generate a project thumbnail

Printeditor.previewProject

Params:

  • Options.callback - project thumbnail callback

Returns:

  • projectThumb - encoded project thumbnail

Example:

     var options = {          

  callback : function (data) {           

console.log(data.projectThumb);

                          }

                     };

 

                     printeditor.previewProject(options);

 

  1. On Designer loaded event

Printeditor.onInstanceCreated

Params:

  • callback

Example:

     printeditor.onInstanceCreated(function() {           

alert(‘the designer canvas has been loaded’);

        });

 

 

  1. Display/hide preloader/spinner

setPreloader

Params:

  • true (enable) or false (disable)

Example:

printeditor.setPreloader(true); //display the preloader in the designer

 

  1. Returns info about moving object on canvas

Printeditor.onObjectMoving

Params:

  • callback

  Returns:

  • type - object type
  • top - top position
  • left - left position
  • name - layer name

  Example:

     printeditor.onObjectMoving(function(data) {          

console.log(‘the object’ + data.name + ‘ has been moved’);

        });

 

  1. Track object adding

Printeditor.onObjectAdd

Params:

  • callback

Returns:

  • type - object type
  • top - top position
  • left - left position
  • width - object width
  • height - object height

Example:

     printeditor.onObjectAdd(function(data) {       

console.log(‘object with the type ’ + data.type + ‘ has been added’);

                                     });

 

 

 

  1. Track object deleting

Printeditor.onObjectDeleted

Params:

  • callback

Returns:

  • type - Object type
  • name - Object name

Example:

     printeditor.onObjectAdd(function(data) {       

console.log(‘object with the type ’ + data.type + ‘ has been deleted’);

                 });

 

  1. Track project loading

Printeditor.onProjectLoaded

Params:

‚óŹ callback

Example:

printeditor.onProjectLoaded(function() {

                          console.log(‘the project has been loaded!’);

                     });

 

  1. Track template loading

Printeditor.onTemplateLoaded

Params:

  • callback

Example:

printeditor.onTemplateLoaded(function()  {
     console.log('the template has been loaded!');
});