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);
});

 

2. 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);

});

 

3. 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}}});

 

4. 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);

         });

 

5. 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);

 

6. On Designer loaded event

Printeditor.onInstanceCreated

Params:

• callback

Example:

     printeditor.onInstanceCreated(function() {           

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

        });

 

 

7. Display/hide preloader/spinner

setPreloader

Params:

• true (enable) or false (disable)

Example:

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

 

8. 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’);

        });

 

9. 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’);

                                     });

 

 

 

10. 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’);

                 });

 

11. Track project loading

Printeditor.onProjectLoaded

Params:

● callback

Example:

printeditor.onProjectLoaded(function() {

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

                     });

 

12. Track template loading

Printeditor.onTemplateLoaded

Params:

• callback

Example:

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