Templates

Welcome to the MCC wiki!

Described on this page is the structure of the template file

JSON Files Overview

Templates are described in JSON(JavaScript Object Notation) files, a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.
To Learn more about JSON visit json.org

Base

Every JSON file contains one object with many properties of that object separated with commas.
An Object is described using Curly Braces {}.
An Array is described using Square Brackets [].
A String is described by using Quotation Marks "".
An Number is described on its own 42 without any quotations.
A Boolean is written as either true or false without any quotations.
Example

{
    "stringProperty": "value",
    "numberProperty": 42,
    "booleanProperty": true,
    "objectProperty": {
        "propertyInObject": "string"
    },
    "arrayProperty": [
        "string1",
        "string2"
    ]
}

Template Object Structure

Property name	Type	Description
name	string	A short description used to identify the template.
author	string	Your name, used to identify the template.
previewImage	string	A URL pointing to an image displaying a preview of the template.
width	number	The width of the output image in pixels.
height	number	The height of the output image in pixels.
dpi	number	The desired DPI of the output image. This doesn't actually affect the quality of the image, only what size it prints on paper.
customFonts	arrayObject	An array of objects describing custom font files to load.
inputs	arrayObject	An array of objects describing user inputs. Inputs will be generated in the order they are in this array.
layers	arrayObject	An array of objects describing layers to be drawn on the image. Layers will be drawn in the reverse order they are in this array i.e., The first layer is drawn last (to be the topmost layer)

customFonts

The objects described in the customFonts array must have the following properties.

Property name	Type	Description
family	string	The font family. i.e., Its Name
url	string	The URL that points to the font file.

You can also include optionally any descriptor specified by the FontFace Constructor e.g., weight, style, etc.

inputs

The objects described in the inputs array are described with the following properties.

Property name	Type	Description
name	string	The name of the field, used in the backend and to link an input to a layer property.
type	string	The type of input field. Possible values are text, file, combo, textarea, checkbox.
description	string	Text that is used to label the input. This is displayed to users.
default	variable	Optional. The default value that is assigned to the input when it is generated.
help	string	Optional. Help text that is displayed just under the input to guide the user one what to put in the field.
halfSize	boolean	Optional. Whether the input is half sized. Two half sized inputs after each other will be put onto the same row.
options	arraystring	Only for combo type. An array of string representing the options available in a Combo Box.

layers

The objects described in the layers array are described with the following properties.

Common

Property name	Type	Description
type	string	The layer type described. Possible values are text, image.
description	string	A short description of what the layer is.
originX	number	The distance from the left side of the master canvas the layer will be drawn in pixels.
originY	number	The distance from the top side of the master canvas the layer will be drawn in pixels.
width	number	The width of the layer in pixels.
height	number	The height of the layer in pixels.
conditions	object	Optional. An object describing conditions that must be met for the layer to be drawn. This uses a similar notation to MongoDB Queries.
inputs	object	Optional. An object describing a mapping between inputs and layer properties. The property key is the property to be mapped to and the value is a string representing the name of the input to be mapped from.

Group Layers

Group layers additionally have the following properties.

Property name	Type	Description
layers	arrayobject	An Array of layer objects (any type including group layers) to be drawn together on a separate canvas before being drawn to the main canvas. This allows you to perform masking on only certain layers.

Text Layers

Text layers additionally have the following properties.

Property name	Type	Description
text	string	The text to be written on the layer. Typically this is empty and is instead mapped from an input.
font	string	The default font the text will be written in. Uses CSS Font Formatting.
fillStyle	string	The fill style of the text layer. A string representing the color of the text. See More.
align	string	The horizontal alignment of the text. Possible Values are start, center, right.
baseline	string	The vertical alignment of the text. Possible Values are top, middle, bottom.
wrapText	boolean	Whether the text should wrap across multiple lines.
scaleText	boolean	Whether the text should reduce the font size automatically to fit on the layer.
lineSpacing	number	The Line Spacing of the text. One lines height is equal to the font size multiplied by this number. 1.4 (140%) is a standard line spacing.
textReplace	object	An object representing text to be replaced. The property key is the search string which will be replaced and the value is the string that will replace it.
fontReplace	object	An object representing alternative fonts to use in the text. The property key is the separators used to split the text. Using opening and closing brackets are a good choice () {} [] <>. The value is an object containing properties in the table below.

fontReplace

The fontReplace object has the following properties.

Property name	Type	Description
font	string	The font the enclosed text will be written in. Uses CSS Font Formatting.
fillStyle	string	The fill style of the enclosed text. A string representing the color of the text. See More.

Image Layers

Image layers additionally have the following properties.

Property name	Type	Description
url	string	The URL to the image put on the layer.
scale	string	The type of scaling to apply to the image if it does not match the layer size. Possible Values are fill, fit, stretch.

Mask Layers

Mask layers are similar to Image Layers and additionally have the following properties.

Property name	Type	Description
url	string	The URL to the image put on the layer.
scale	string	The type of scaling to apply to the image if it does not match the layer size. Possible Values are fill, fit, stretch.
operations	arraystring	An array of strings indicating Composite Operations to perform using the mask image. See Options

Fill Layers

Fill layers additionally have the following properties.

Property name	Type	Description
fillStyle	string	The fill style of the fill layer. A string representing the color that will fill the entire layer. See More.