Difference between revisions of "Backdrop Plugin"
Jump to navigation
Jump to search
(→Demo) |
(→Syntax) |
||
| Line 22: | Line 22: | ||
| <code>url</code> || <code>string</code> || <code>null</code> || '''Yes''' || | | <code>url</code> || <code>string</code> || <code>null</code> || '''Yes''' || | ||
The URL of the backdrop image. | The URL of the backdrop image. | ||
| + | |||
| + | '''Note: Please note that CORS HTTP headers must be present for the loaded image.''' | ||
|- | |- | ||
| <code>type</code> || <code>number</code> || <code>0</code> || No || | | <code>type</code> || <code>number</code> || <code>0</code> || No || | ||
Revision as of 11:44, 6 December 2022
This is a special interaction plugin that generates an atmospheric backdrop from an image (by extrating the main colors). The plugin can be used with version 0.1.82 or higher.
Usage[edit]
The plugin must be loaded with a data object that contains an image URL and optionally a type. Please see following action syntax example.
interaction:load:http://msx.benzac.de/interaction/backdrop.html
{
"url": "http://link.to.image",
"type": 0
}
If you would like to use the plugin as reference to implement your own plugin, please have a look at this implementation script: http://msx.benzac.de/interaction/js/backdrop.js.
Syntax[edit]
| Property | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
url |
string |
null |
Yes |
The URL of the backdrop image. Note: Please note that CORS HTTP headers must be present for the loaded image. |
type |
number |
0 |
No |
The type of the backdrop.
|
Example[edit]
Please note that this example uses some properties that are only available in version 0.1.142 or higher.
Screenshot[edit]
Code[edit]
Demo[edit]
- Launch via App: https://msx.benzac.de/?start=content:https://msx.benzac.de/info/xp/data/plugin_test_8.json
- Launch via Demo Page: https://msx.benzac.de/info/?start=content:https://msx.benzac.de/info/xp/data/plugin_test_8.json