The overlap Element

The overlap displays two images that overlap. The image in the foreground is displayed in front of the other image.

{
    "type": "overlap",
    "tags": array<string>,
    "version": string,
    "foreground": string,
    "foreground_size": {
        "width": number,
        "height": number
    },
    "background": string,
    "background_size": {
        "width": number,
        "height": number
    },
    "margin": {
        "x": number,
        "y": number
    }
}

The foreground Property

since v1.0.0

The foreground property contains the image which is on top of the other image (which is specified in the background property). The foreground image should be displayed slightly smaller and on top of the background image.

The image data is base64 encoded.

The foreground_size Property

since v1.0.0

The foreground_size property holds two properties itself, namely width and height that describe the dimensions of the foreground image.

The background Property

since v1.0.0

The background peroperty contains the image which is displayed behind the other image (which is specified in the foreground property).

The image data is base64 encoded.

The background_size Property

since v1.0.0

The background_size property holds two properties itself, namely width and height that describe the dimensions of the background image.

The margin Property

since v1.0.0

The margin property property holds two properties itself, namely x and y that describe the position of the foreground image in relation to the background image. The margin.x property describes the margin between the left edge of the background image and the left edge of the foreground image. The margin.y property describes the margin between the top edge of the background image and the top edge of the foreground image.

Example

{
    "type": "overlap",
    "tags": [],
    "version": "1.0.0",
    "background": "data:image/png;base64,...",
    "background_size": {
     "width": 200,
     "height": 200
    },
    "foreground": "data:image/png;base64,...",
    "foreground_size": {
     "width": 100,
     "height": 100
    },
    "margin": {
    "x": 50,
    "y": 50
    }
}

Changelog

1.0.0 - 01.02.2019

• initial version