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 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 describes the dimensions of the foreground image.
The width property specifies the width of the foreground image.
The height property specifies the height of the foreground image.
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 describes the dimensions of the background image.
The width property specifies the width of the background image.
The height property specifies the height of the background image.
The margin property describes 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