Templates - Heroj04/MCC GitHub Wiki
Welcome to the MCC wiki!
Described on this page is the structure of the template file
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
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"
]
}| 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) |
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.
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. |
The objects described in the layers array are described with the following properties.
| 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 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 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. |
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 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 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 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. |