Upgrade guide to LiveArt HTML5 0.9.5 <= 0.9.3

config.json

New attributes can be used as optional unless they start to throw exceptions in the console.

{ 
    ... 
    "defaultProductSize": [ 32, 16 ], 
    ... 
}

defaultProductSize attribute can be set for arbitrary size products (e.g., signs) and is non-mandatory.

{ 
    ... 
    "options": {
        "includeProductInDesign": true,
        "includePrintingAreaInDesign": true, 
        "includeMaskInDesign": true,
    }
    ... 
}

include* attributes allow including/excluding certain working elements from the designer SVG output. These will be hidden, if false.

Some other options section attributes include, with examples:

• "checkeredBackground": true, - allows putting a checkered background in the empty area;
• "unit": "in", - specifies main units symbol;
• "unit2": "ft", - specifies 2nd units symbol that will be automatically recalculated if necessary;
• "unitConversionMult": 12, - conversion rate between specified units;
• "showProductSelector": true, - whether to show 1st tab, i.e. ability to select product;
• "checkTextFXThrottle": 400 - delay to wait for the text effect

textEffects block introduced to define the raster text effects generator;

product.json

Additional definitions for products allow for more flexible product setup, including newly introduced signs.

"namesNumbersEnabled": true, - enable names/numbers for specific product;

"clipRect": [170, 75, 410, 485] - clips everything beyond this area, can be same as printable area definition;

    "colorizableElements": [
        {
            "name": "Color",
            "id": ".bg.fill",
            "colors": [
                {
                    "name": "White",
                    "value": "#FFF"
                },
                {
                    "name": "Black",
                    "value": "#000"
                },
                {
                    "name": "Steel Blue",
                    "value": "#4682B4"
                },

With colorizableElements you can now use single multicolor SVG with multiple colorizable areas.

"multicolor": true, should be strictly used with colorizableElements to ensure colorizing.

"resizable": true, indicates that the product can be resized. Should be used with sign type of products.

"showRuler": true, shows ruler for resizable products.

"editableAreaUnitsRange": [
    [10, 100],
    [10, 100]
]

You can indicate the validation range for the sign dimensions using the above attribute inside locations block. Used with sign-based products only.

"editableAreaSizes": [
    {"label":"3x10in", "width":3, "height":10},
    {"label":"4x4in", "width":4, "height":4}
],

Use the above construction if you need to define a set of strict sizes, which can be selected.

"hideEditableAreaBorder": true, can be used to hide the printable area frame for specific products.

"locations": [
                        {
                            "name": "Back",
                            "image": "products/iPhone/bg.svg",
                            "mask": "products/iPhone/iPhone.png"
                        }
                    ],

Use mask reference in location to specify a mask that should be an overlay per certain product location.

fonts.json

boldAllowed, italicAllowed allows disabling the bold, italic for certain fonts if they are not available.

ascent quite specific attribute that is required to calculate the real height of letters for sign products. Its representation should indicate font height in pixels for 32pt font size.

vector this reference is required if you plan to use the vector effects.

All in all, we highly recommend looking into the sample config files you receive with an upgraded package to learn the practical usage of new attributes.