Configuration

Contents:

LiveArt can be configured via set of configuration files in JSON format.

Main Configuration

Main LiveArt configuration files is config.json. It sets LiveArt general configuration.

Set paths to other configuration files:

{
  "productsList": {
    "url": "config/productsCatalog.json"
  },
  "fonts": {
    "url": "config/fontsList.json"
  },
  "colors": {
    "url": "config/colorsList.json"
  },
  "graphicsList": {
    "url": "config/graphicsCatalog.json"
  },
  "textEffects": {
    "config": "config/textEffectsList.json"
  }
  ...
}

Set backend entry points:

{
  ...
  "getDesignsUrl": "services/php/getDesigns.php?email=${email}&product_id=${product_id}",
  "saveDesignUrl": "services/php/saveDesign.php",
  "loadDesignUrl": "services/php/loadDesign.php?design_id=${design_id}",
  "redirectUrl": "services/php/order.php?info=true&design_id=${design_id}",
  "uploadImageUrl": "services/php/uploadImage.php",
  ...
}

Main configuration file allows you to set different options like size units, minimum DPU, whether to have product section menu item, etc (see full list of options in Options Description section).

{
  ...
  "options": {
    "unit": "in",
    "unit2": "ft",
    "unitConversionMult": 12,
    "showProductSelector": true,
    "minDPU": 150,
    ...
  },
  ...
}

Example of minimum main configuration:

{
  "productsList": {
    "url": "config/productsCatalog.json"
  },
  "fonts": {
    "url": "config/fontsList.json"
  },
  "colors": {
    "url": "config/colorsList.json"
  },
  "graphicsList": {
    "url": "config/graphicsCatalog.json"
  },
  "textEffects": {
    "config": "config/textEffectsList.json"
  },
  "options": {
    "checkeredBackground": true,
    "unit": "in",
    "unit2": "ft",
    "unitConversionMult": 12,
    "showProductSelector": true,
    "minDPU": 150,
    "showUploadedColorsDialog": true
  },
  "assetsUrl": "assets/",
  "galleryBaseUrl": "",
  "getDesignsUrl": "services/php/getDesigns.php?email=${email}&product_id=${product_id}",
  "saveDesignUrl": "services/php/saveDesign.php",
  "loadDesignUrl": "services/php/loadDesign.php?design_id=${design_id}",
  "redirectUrl": "services/php/order.php?info=true&design_id=${design_id}",
  "uploadImageUrl": "services/php/uploadImage.php",
  "shareLinkUrl": "?design_id=${design_id}",
  "redirectWindow": ""
}

See detailed LiveArt main configuration description in configuration info.

Products

General Information

LiveArt is a flexible component that allows you to use it with almost any product type your business is build upon. Products can be resizable (e.g. signs, banners, stickers) or non-resizable, colorizable (e.g. apparel) or non-colorizable. Colorizable in its turn can be multicolored (e.g. uniform, socks) or single-colored. Any of this variety is set with the help of configuration file and assets (graphical file of product and its thumbnail).

Product Assets Preparation

Simple product could be a t-shirt, mug, cap or any product that has a fixed and non-resizable background. You may use PNG, GIF, JPG or SVG images for simple products.

The products may also contain masks. This is in particular useful for irregularly shaped products like phone wraps, where you'd like design to be shown behind the wrap shape. Masks can also be SVG or PNG (best for transparency) and sizes same as the product. When LiveArt is loaded with product and mask image, the mask will be on the top of the product image.

We reccomend to use rater image for product thumbnail which will be shown in the product catalog. Its dimensions should be 110x110 pixels.

Preparation of Colorizable Products

For single-colored product you can use both raster and vector graphics. When using raster images, you should prepare separate file for each color-location pair (e.g. for t-shirt: blue front side, blue back side, white front side, white back side).

Only vector graphics (SVG) can be used for multicolor colorizable products. See detailed SVG Graphics Preparation Guide.

Product Configuration

Product is configured via productsCatalog.json.

Products can be organized in catalog structure. Prepare raster thumbnails for each category and use the following structure as an example:

{
  "productCategoriesList": [
    {
      "id": "r1",
      "name": "Clothing",
      "thumb": "products/cool-t-shirt/thumbs/t-shirt-blue.png",
      "categories": [
        {
          "id": "1",
          "name": "Apparel",
          "thumb": "products/cool-t-shirt/thumbs/apparel_cat.jpg",
          "products": [
            {
              ...
            }
          ]
        }
      ]
    }
  ]
}

Configure your product under the products property in productsCatalog.json. Example of simple raster product configuration:

{
  ...
  "products": [
    {
      "id": "11a",
      "categoryId": "1",
      "name": "Cool Tee",
      "thumb": "products/cool-t-shirt/thumbs/t-shirt-yellow.png"
      "locations": [
        {
          "name": "Front",
          "image": "products/cool-t-shirt/cool-t-shirt_White_front.jpg"
        },
        {
          "name": "Back",
          "image": "products/cool-t-shirt/cool-t-shirt_White_back.jpg"
        }
      ]
    }
  ]
}

If you want your raster product to be colorizable:

  • prepare all files for each color-location pair;
  • update configuration with colors property.
{
  ...
  "products": [
    {
      ...
      "colors": [
        {
          "name": "White",
          "value": "#FFF",
          "location": [
            {
              "name": "Front",
              "image": "products/cool-t-shirt/cool-t-shirt_White_front.jpg"
            },
            {
              "name": "Back",
              "image": "products/cool-t-shirt/cool-t-shirt_White_back.jpg"
            }
          ]
        },
        {
          "name": "Yellow",
          "value": "#d98c46",
          "location": [
            {
              "name": "Front",
              "image": "products/cool-t-shirt/cool-t-shirt_Orange_front.jpg"
            },
            {
              "name": "Back",
              "image": "products/cool-t-shirt/cool-t-shirt_Orange_back.jpg"
            }
          ]
        }
      ]
    }
  ]
}

For colorizable vector product:

  • add "multicolor": true property;
  • use prepared vector image for location image property.
{
  ...
  "products": [
    {
      ...
      "multicolor": true,
      "locations": [
        {
          ...
          "image": "products/cool-t-shirt/t-shirt_front.svg",
          ...
        },
        {
          ...
          "image": "products/cool-t-shirt/t-shirt_back.svg",
          ...
        }
      ]
    }
  ]
}

To configure product as resizable:

  • add "resizable": true property;
  • set editableAreaUnits - default product size in your units (mm in our sample) after product loading in LiveArt;
  • add "showRuler": true to see product size in LiveArt;
  • use product vector image for location image property (it can be prepared as colorizable - see SVG Graphics Preparation Guide);
  • for colorizable resizable product add "multicolor": true property;
{
  ...
  "products": [
    {
      ...
      "resizable": true,
      "showRuler": true,
      "multicolor": true,
      "locations": [
        {
          ...
          "image": "products/signs/standard_sign.svg",
          "editableAreaUnits": [24,18]
        }
      ]
    }
  ]
}

Fore detailed information on configuration see products configuration.

Graphics

General Information

The artwork for LiveArt can be in the following web formats: JPG, GIF, PNG or SVG. For best vector representation we recommend using SVG format. You can easily export your vector graphics into SVG from Adobe Illustrator or CorelDraw.

Graphics Preparation

For non-colorizable artwork both raster and vector graphics format can be used. For colorizable artwork only vector (SVG) can be used. See detailed SVG Graphics Preparation Guide for more information. We suggest to use raster images for thumbnails which will be shown in the graphics catalog. Graphics dimensions should be 110x110 pixels.

Artwork is configured via graphicsCatalog.json.

Artworks can be organized in catalog structure. Prepare raster thumbnails for each category and use the following structure as an example:

{
  "graphicsCategoriesList": [
    {
      "id": "r1",
      "name": "Animals",
      "thumb": "gallery/animals/raster/thumbs/crab.png",
      "categories": [
        {
          "id": "1",
          "name": "Raster",
          "thumb": "gallery/animals/raster/thumbs/crab.png",
          "graphicsList": [
            ...
          ]
        }
      ]
    }
  ]
}

Configure your artwork under the graphicsList property in graphicsCatalog.json. Example of simple non-colorizable artwork configuration:

{
  ...
  "graphicsList": [
    {
      "id": "11",
      "categoryId": "1",
      "name": "Crab",
      "description": "crab",
      "thumb": "gallery/animals/raster/thumbs/crab.png",
      "image": "gallery/animals/raster/crab.png"
    }
  ]
}

For single-colored artwork:

  • add "colorize": true property;
  • use prepared vector image for image property.
{
  ...
  "graphicsList": [
    {
      ...
      "image": "gallery/animals/vector/SVG/crab.svg",
      "colorize": true
    }
  ]
}

For multicolored artwork prepared for automatically parsed colors (see preparation guide):

  • add "colorize": true property;
  • add "parseColorAreas": true property.
{
  ...
  "graphicsList": [
    {
      ...
      "colorize": true,
      "parseColorAreas": true
    },
  ]
}

For multicolored artwork prepared with unique ids for layers to colorize (see preparation guide):

  • add "colorize": true property;
  • add colorizableElements property with query set to id of the layer in SVG and name set to name that will indicate this area in LiveArt (see example).
{
  ...
  "graphicsList": [
    {
      ...
      "colorize": true,
      "colorizableElements": [
        {
          "name": "Top left",
          "query": "#Top_Left"
        },
        {
          "name": "Top right",
          "query": "#Top_Right"
        },
        {
          "name": "Bottom left",
          "query": "#Bottom_Left"
        },
        {
          "name": "Bottom right",
          "query": "#Bottom_Right"
        }
      ]
    }
  ]
}

Fore detailed information on configuration see graphics configuration.

Fonts

LiveArt uses fonts in vector format for rendering and you do not need to install font on your server to have correct outputs. Each font should be converted and referenced in configuration file (or added via admin area in case of integration version). In order to have font previews in the fonts selector, WOFF and TTF font formats can be used. We recommend using the WOFF format as the one most cross-platform and cross-browser.

Vector Fonts Preparation

Follow these steps to prepare vector font:

  1. Proceed to https://everythingfonts.com/cufon.
  2. Click "Pick Font File" and select TTF, OTF or PFB files of all typefaces you need (see example).
  3. Adjust glyphs selection as needed.
  4. Switch "The EULAs of the font allow Web Embedding" to YES.
  5. Leave the other options as they are.
  6. Go to Customization tab and select Raphael.registerFont function to receive data.
  7. Generate cufon and unzip created JS file.

Once converted, don't forget to upload the font near the LiveArt and insert reference as vector attribute in configuration file.

Fonts Preparation for Preview

In order to show the user font preview (example) the following steps should be performed:

General Process

Step 1

Generate font files and respective stylesheet. You can always use examples from your development package. Prepare them as usual web font. There are many tools for that, one of most popular — fontsquirrel.com. We encourage to learn this guide how to use it.

Step 2

Create folder for font files in LiveArtJS/fonts (name it, for example, MyFont1) Create stylesheet.css file in MyFont1 folder, edit it. It should contain code like this:

@font-face {
    font-family: 'MyFontFamily1';
	/* urls to font files. May be used different formats - woff, ttf, eot, svg together*/
    src: url('MyFont-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
Step 3

Modify LiveArtJS/fonts/fonts.css: add line @import url('MyFont1/stylesheet.css').

NOTE: if you are preparing fonts for the admin area, simply upload the font.

Reload LiveArt and try your new font.

Fonts Configuration

Fonts are configured in fontsList.json file. See example:

{
    "fonts": [
        {
            "name": "Action",
            "fontFamily": "Action Man",
            "vector": "fonts/Action-Man/Action_Man.font.js"
        }
    ]
}

In the designer the font appears in the font options section of Add/Edit text panel:

Add/Edit text panel

If you don't have bold and/or italic typeface. Set boldAllowed and/or italicAllowed to false in configuration:

{
  "fonts": [
    {
      "name": "Bebas Neue",
      "fontFamily": "Bebas Neue",
      "boldAllowed": false,
      "italicAllowed": false,
       "vector": "fonts/Bebas-Neue/Bebas_Neue.font.js"
    }
  ]
}

Thus in the designer bold and/or italic buttons are disabled:

Bold/italic disabled

Colors

The general list of colors is configured via colorsList.json. This list is used for colorizable products, text color, colorizable artwork. See example:

{
  "colors": [
    {
      "name": "001 Black",
      "value": "#000000"
    },
    {
      "name": "002 Dove Gray",
      "value": "#616161"
    },
    {
      "name": "003 Silver Chalice",
      "value": "#9e9e9e"
    },
    {
      "name": "004 Alto",
      "value": "#e0e0e0"
    },
    {
      "name": "005 White",
      "value": "#ffffff"
    },
    {
      "name": "006 English Walnut",
      "value": "#3e2723"
    }
  ]
}

This list can be overridden for particular product or artwork by using colors property. For example for product:

{
  "products": [
    {
      ...
      "colors": [
        {
          "name": "White",
          "value": "#FFF"
        },
        {
          "name": "Black",
          "value": "#000"
        },
        {
          "name": "Steel Blue",
          "value": "#4682B4"
        }
      ]
    }
  ]
}

Example for artwork:

{
  "graphicsCategoriesList": [
    {
      ...
      "graphicsList": [
        {
          ...
          "colors": [
            "#F67F00",
            "#FFF6E3",
            "#000000"
          ]
        }
      ]
    }
  ]
}

Troubleshooting

Vector Artwork Does not Load

It is common that SVG is not fully valid after being exported from 3rd party software, including CorelDraw. To make sure it is fully valid, copy the SVG into XML Beautify tool, run it and save back into SVG.

If your artwork does not load after this, please contact us attaching your artwork as example.