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