Difference between revisions of "Backdrop Plugin"
Jump to navigation
Jump to search
(Created page with "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 h...") |
|||
| (15 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | This is a special interaction plugin that generates an atmospheric backdrop from an image (by | + | This is a special interaction plugin that generates an atmospheric backdrop from an image (by extracting the main colors and creating a gradient background). The plugin can be used with version '''0.1.82''' or higher. |
== Usage == | == Usage == | ||
| − | The plugin must be loaded with a data object | + | The plugin must be loaded with a data object containing an image url and optionally a type. Please see following action syntax example. |
* <code>interaction:load:http://msx.benzac.de/interaction/backdrop.html</code> | * <code>interaction:load:http://msx.benzac.de/interaction/backdrop.html</code> | ||
| 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 backdrop image.''' | ||
|- | |- | ||
| <code>type</code> || <code>number</code> || <code>0</code> || No || | | <code>type</code> || <code>number</code> || <code>0</code> || No || | ||
| Line 37: | Line 39: | ||
=== Code === | === Code === | ||
<syntaxhighlight lang="json"> | <syntaxhighlight lang="json"> | ||
| − | + | { | |
| + | "type": "list", | ||
| + | "headline": "Backdrop Plugin Test", | ||
| + | "transparent": 2, | ||
| + | "preload": "next", | ||
| + | "underlay": { | ||
| + | "action": "[quiet|delay:backdrop:1:interaction:load:http://msx.benzac.de/interaction/backdrop.html]", | ||
| + | "data": { | ||
| + | "url": "none" | ||
| + | }, | ||
| + | "items": [{ | ||
| + | "id": "text", | ||
| + | "type": "space", | ||
| + | "layout": "0,0,6,3", | ||
| + | "headline": "", | ||
| + | "text": "" | ||
| + | }] | ||
| + | }, | ||
| + | "template": { | ||
| + | "type": "default", | ||
| + | "layout": "0,0,2,3", | ||
| + | "area": "0,3,12,3", | ||
| + | "wrapperColor": "msx-glass", | ||
| + | "imageHeight": 1.83, | ||
| + | "color": "msx-glass", | ||
| + | "imageFiller": "cover", | ||
| + | "truncation": "titleHeader|titleFooter", | ||
| + | "titleHeader": "", | ||
| + | "titleFooter": "", | ||
| + | "description": "No description available.", | ||
| + | "backdrop": "none", | ||
| + | "image": "none", | ||
| + | "selection": { | ||
| + | "important": true, | ||
| + | "action": "data", | ||
| + | "data": { | ||
| + | "actions": [{ | ||
| + | "action": "invalidate:content:underlay:text" | ||
| + | }, { | ||
| + | "action": "delay:text:1:update:content:underlay:text", | ||
| + | "data": { | ||
| + | "headline": "{context:titleHeader}", | ||
| + | "text": "{context:titleFooter}{br}{br}{context:description}" | ||
| + | } | ||
| + | }, { | ||
| + | "action": "delay:backdrop:1:interaction:load:http://msx.benzac.de/interaction/backdrop.html", | ||
| + | "data": { | ||
| + | "url": "{context:backdrop}", | ||
| + | "type": 1 | ||
| + | } | ||
| + | }] | ||
| + | } | ||
| + | }, | ||
| + | "properties": { | ||
| + | "image:extension": "| {context:titleHeader}" | ||
| + | } | ||
| + | }, | ||
| + | "items": [{ | ||
| + | "titleHeader": "{col:msx-white}First Item", | ||
| + | "titleFooter": "Duis rutrum orci purus", | ||
| + | "description": "Lorem ipsum dolor sit amet, omittam vivendum ad mea, putant voluptaria mei an, cum saperet probatus ea. Gloriatur adolescens est id, denique oporteat inciderint an nec, ut mea veniam aliquando signiferumque. Quod periculis adversarium qui te. Ea pri facer semper, stet eleifend per ut. Eum soluta pertinacia an, vel tation tollit pertinax et. Aperiri scribentur.", | ||
| + | "backdrop": "https://picsum.photos/seed/msx_item0/960/540", | ||
| + | "image": "https://picsum.photos/seed/msx_item0/264/264", | ||
| + | "action": "image:https://picsum.photos/seed/msx_item0/1920/1080" | ||
| + | }, { | ||
| + | "titleHeader": "{col:msx-white}Second Item", | ||
| + | "titleFooter": "Orci varius natoque penatibus et", | ||
| + | "description": "Lorem ipsum dolor sit amet, duo iisque erroribus comprehensam no, at pri quis apeirian perpetua. Ea ius harum oportere, idque audiam impedit mea ei, eam ea utinam moderatius. No nam albucius voluptua fabellas, cibo ancillae at nam. Cu viris volutpat.", | ||
| + | "backdrop": "https://picsum.photos/seed/msx_item1/960/540", | ||
| + | "image": "https://picsum.photos/seed/msx_item1/264/264", | ||
| + | "action": "image:https://picsum.photos/seed/msx_item1/1920/1080" | ||
| + | }, { | ||
| + | "titleHeader": "{col:msx-white}Third Item", | ||
| + | "titleFooter": "Sed et sem augue", | ||
| + | "description": "Lorem ipsum dolor sit amet, habeo singulis vel ex. Cu nec regione constituam, ne has rebum oratio regione. Ei simul vivendo reformidans usu, id nibh.", | ||
| + | "backdrop": "https://picsum.photos/seed/msx_item2/960/540", | ||
| + | "image": "https://picsum.photos/seed/msx_item2/264/264", | ||
| + | "action": "image:https://picsum.photos/seed/msx_item2/1920/1080" | ||
| + | }, { | ||
| + | "titleHeader": "{col:msx-white}Fourth Item", | ||
| + | "titleFooter": "Mauris tincidunt non mauris ut", | ||
| + | "description": "Lorem ipsum dolor sit amet, ad nam vero efficiendi. At legere abhorreant mei, usu cu tollit delenit invenire. Vis cu quando tractatos concludaturque, an wisi pertinax vis. Ut vis civibus eleifend neglegentur, sea feugait quaestio cu, homero delicata gloriatur at sit. Te ius facer timeam, an eum veniam mnesarchum elitr.", | ||
| + | "backdrop": "https://picsum.photos/seed/msx_item3/960/540", | ||
| + | "image": "https://picsum.photos/seed/msx_item3/264/264", | ||
| + | "action": "image:https://picsum.photos/seed/msx_item3/1920/1080" | ||
| + | }, { | ||
| + | "titleHeader": "{col:msx-white}Fifth Item", | ||
| + | "titleFooter": "Sed et sem augue", | ||
| + | "description": "Lorem ipsum dolor sit amet, ad noster vocibus albucius pro, alia latine aeterno est cu, sententiae posidonium cu sea. Ex primis placerat sed, nam tollit persecuti ad. Idque maluisset contentiones id nam, pro ex sint impetus dissentiet. Est ne omittantur consectetuer, audiam ocurreret qui eu.", | ||
| + | "backdrop": "https://picsum.photos/seed/msx_item4/960/540", | ||
| + | "image": "https://picsum.photos/seed/msx_item4/264/264", | ||
| + | "action": "image:https://picsum.photos/seed/msx_item4/1920/1080" | ||
| + | }, { | ||
| + | "titleHeader": "{col:msx-white}Sixth Item", | ||
| + | "titleFooter": "Vestibulum ex lectus", | ||
| + | "description": "Lorem ipsum dolor sit amet, sit no hinc quot doctus.", | ||
| + | "backdrop": "https://picsum.photos/seed/msx_item5/960/540", | ||
| + | "image": "https://picsum.photos/seed/msx_item5/264/264", | ||
| + | "action": "image:https://picsum.photos/seed/msx_item5/1920/1080" | ||
| + | }, { | ||
| + | "titleHeader": "{col:msx-white}Seventh Item", | ||
| + | "titleFooter": "Cras sapien tortor", | ||
| + | "description": "Lorem ipsum dolor sit amet, duo iisque erroribus comprehensam no, at pri quis apeirian perpetua. Ea ius harum oportere, idque audiam impedit mea ei, eam ea utinam moderatius. No nam albucius voluptua fabellas, cibo ancillae at nam. Cu viris volutpat.", | ||
| + | "backdrop": "https://picsum.photos/seed/msx_item6/960/540", | ||
| + | "image": "https://picsum.photos/seed/msx_item6/264/264", | ||
| + | "action": "image:https://picsum.photos/seed/msx_item6/1920/1080" | ||
| + | }, { | ||
| + | "titleHeader": "{col:msx-white}Eighth Item", | ||
| + | "titleFooter": "Duis rutrum orci purus", | ||
| + | "description": "Lorem ipsum dolor sit amet, omittam vivendum ad mea, putant voluptaria mei an, cum saperet probatus ea. Gloriatur adolescens est id, denique oporteat inciderint an nec, ut mea veniam aliquando signiferumque. Quod periculis adversarium qui te. Ea pri facer semper, stet eleifend per ut. Eum soluta pertinacia an, vel tation tollit pertinax et. Aperiri scribentur.", | ||
| + | "backdrop": "https://picsum.photos/seed/msx_item7/960/540", | ||
| + | "image": "https://picsum.photos/seed/msx_item7/264/264", | ||
| + | "action": "image:https://picsum.photos/seed/msx_item7/1920/1080" | ||
| + | }, { | ||
| + | "titleHeader": "{col:msx-white}Ninth Item", | ||
| + | "titleFooter": "Aliquam nulla orci", | ||
| + | "description": "Lorem ipsum dolor sit amet, habeo singulis vel ex. Cu nec regione constituam, ne has rebum oratio regione. Ei simul vivendo reformidans usu, id nibh.", | ||
| + | "backdrop": "https://picsum.photos/seed/msx_item8/960/540", | ||
| + | "image": "https://picsum.photos/seed/msx_item8/264/264", | ||
| + | "action": "image:https://picsum.photos/seed/msx_item8/1920/1080" | ||
| + | }, { | ||
| + | "titleHeader": "{col:msx-white}Tenth Item", | ||
| + | "titleFooter": "Fusce posuere sapien turpis", | ||
| + | "description": "Lorem ipsum dolor sit amet, ad nam vero efficiendi. At legere abhorreant mei, usu cu tollit delenit invenire. Vis cu quando tractatos concludaturque, an wisi pertinax vis. Ut vis civibus eleifend neglegentur, sea feugait quaestio cu, homero delicata gloriatur at sit. Te ius facer timeam, an eum veniam mnesarchum elitr.", | ||
| + | "backdrop": "https://picsum.photos/seed/msx_item9/960/540", | ||
| + | "image": "https://picsum.photos/seed/msx_item9/264/264", | ||
| + | "action": "image:https://picsum.photos/seed/msx_item9/1920/1080" | ||
| + | }, { | ||
| + | "titleHeader": "{col:msx-white}Eleventh Item", | ||
| + | "titleFooter": "Fusce convallis sagittis tempus", | ||
| + | "description": "Lorem ipsum dolor sit amet, ad noster vocibus albucius pro, alia latine aeterno est cu, sententiae posidonium cu sea. Ex primis placerat sed, nam tollit persecuti ad. Idque maluisset contentiones id nam, pro ex sint impetus dissentiet. Est ne omittantur consectetuer, audiam ocurreret qui eu.", | ||
| + | "backdrop": "https://picsum.photos/seed/msx_item10/960/540", | ||
| + | "image": "https://picsum.photos/seed/msx_item10/264/264", | ||
| + | "action": "image:https://picsum.photos/seed/msx_item10/1920/1080" | ||
| + | }, { | ||
| + | "titleHeader": "{col:msx-white}Twelfth Item", | ||
| + | "titleFooter": "Aliquam nulla orci", | ||
| + | "description": "Lorem ipsum dolor sit amet, scaevola perpetua ut qui. Te per partem definitiones, id has modus delenit scriptorem. Eu eos.", | ||
| + | "backdrop": "https://picsum.photos/seed/msx_item11/960/540", | ||
| + | "image": "https://picsum.photos/seed/msx_item11/264/264", | ||
| + | "action": "image:https://picsum.photos/seed/msx_item11/1920/1080" | ||
| + | }] | ||
| + | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== Demo === | === Demo === | ||
| − | * Launch via App: https://msx.benzac.de/?start= | + | * 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= | + | * Launch via Demo Page: https://msx.benzac.de/info/?start=content:https://msx.benzac.de/info/xp/data/plugin_test_8.json |
== See also == | == See also == | ||
| − | |||
* [[Interaction Plugin]] | * [[Interaction Plugin]] | ||
| − | |||
| − | |||
| − | |||
| − | |||
* [[Plugin API Reference]] | * [[Plugin API Reference]] | ||
Latest revision as of 13:06, 12 June 2023
This is a special interaction plugin that generates an atmospheric backdrop from an image (by extracting the main colors and creating a gradient background). The plugin can be used with version 0.1.82 or higher.
Usage[edit]
The plugin must be loaded with a data object containing 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 backdrop 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]
{
"type": "list",
"headline": "Backdrop Plugin Test",
"transparent": 2,
"preload": "next",
"underlay": {
"action": "[quiet|delay:backdrop:1:interaction:load:http://msx.benzac.de/interaction/backdrop.html]",
"data": {
"url": "none"
},
"items": [{
"id": "text",
"type": "space",
"layout": "0,0,6,3",
"headline": "",
"text": ""
}]
},
"template": {
"type": "default",
"layout": "0,0,2,3",
"area": "0,3,12,3",
"wrapperColor": "msx-glass",
"imageHeight": 1.83,
"color": "msx-glass",
"imageFiller": "cover",
"truncation": "titleHeader|titleFooter",
"titleHeader": "",
"titleFooter": "",
"description": "No description available.",
"backdrop": "none",
"image": "none",
"selection": {
"important": true,
"action": "data",
"data": {
"actions": [{
"action": "invalidate:content:underlay:text"
}, {
"action": "delay:text:1:update:content:underlay:text",
"data": {
"headline": "{context:titleHeader}",
"text": "{context:titleFooter}{br}{br}{context:description}"
}
}, {
"action": "delay:backdrop:1:interaction:load:http://msx.benzac.de/interaction/backdrop.html",
"data": {
"url": "{context:backdrop}",
"type": 1
}
}]
}
},
"properties": {
"image:extension": "| {context:titleHeader}"
}
},
"items": [{
"titleHeader": "{col:msx-white}First Item",
"titleFooter": "Duis rutrum orci purus",
"description": "Lorem ipsum dolor sit amet, omittam vivendum ad mea, putant voluptaria mei an, cum saperet probatus ea. Gloriatur adolescens est id, denique oporteat inciderint an nec, ut mea veniam aliquando signiferumque. Quod periculis adversarium qui te. Ea pri facer semper, stet eleifend per ut. Eum soluta pertinacia an, vel tation tollit pertinax et. Aperiri scribentur.",
"backdrop": "https://picsum.photos/seed/msx_item0/960/540",
"image": "https://picsum.photos/seed/msx_item0/264/264",
"action": "image:https://picsum.photos/seed/msx_item0/1920/1080"
}, {
"titleHeader": "{col:msx-white}Second Item",
"titleFooter": "Orci varius natoque penatibus et",
"description": "Lorem ipsum dolor sit amet, duo iisque erroribus comprehensam no, at pri quis apeirian perpetua. Ea ius harum oportere, idque audiam impedit mea ei, eam ea utinam moderatius. No nam albucius voluptua fabellas, cibo ancillae at nam. Cu viris volutpat.",
"backdrop": "https://picsum.photos/seed/msx_item1/960/540",
"image": "https://picsum.photos/seed/msx_item1/264/264",
"action": "image:https://picsum.photos/seed/msx_item1/1920/1080"
}, {
"titleHeader": "{col:msx-white}Third Item",
"titleFooter": "Sed et sem augue",
"description": "Lorem ipsum dolor sit amet, habeo singulis vel ex. Cu nec regione constituam, ne has rebum oratio regione. Ei simul vivendo reformidans usu, id nibh.",
"backdrop": "https://picsum.photos/seed/msx_item2/960/540",
"image": "https://picsum.photos/seed/msx_item2/264/264",
"action": "image:https://picsum.photos/seed/msx_item2/1920/1080"
}, {
"titleHeader": "{col:msx-white}Fourth Item",
"titleFooter": "Mauris tincidunt non mauris ut",
"description": "Lorem ipsum dolor sit amet, ad nam vero efficiendi. At legere abhorreant mei, usu cu tollit delenit invenire. Vis cu quando tractatos concludaturque, an wisi pertinax vis. Ut vis civibus eleifend neglegentur, sea feugait quaestio cu, homero delicata gloriatur at sit. Te ius facer timeam, an eum veniam mnesarchum elitr.",
"backdrop": "https://picsum.photos/seed/msx_item3/960/540",
"image": "https://picsum.photos/seed/msx_item3/264/264",
"action": "image:https://picsum.photos/seed/msx_item3/1920/1080"
}, {
"titleHeader": "{col:msx-white}Fifth Item",
"titleFooter": "Sed et sem augue",
"description": "Lorem ipsum dolor sit amet, ad noster vocibus albucius pro, alia latine aeterno est cu, sententiae posidonium cu sea. Ex primis placerat sed, nam tollit persecuti ad. Idque maluisset contentiones id nam, pro ex sint impetus dissentiet. Est ne omittantur consectetuer, audiam ocurreret qui eu.",
"backdrop": "https://picsum.photos/seed/msx_item4/960/540",
"image": "https://picsum.photos/seed/msx_item4/264/264",
"action": "image:https://picsum.photos/seed/msx_item4/1920/1080"
}, {
"titleHeader": "{col:msx-white}Sixth Item",
"titleFooter": "Vestibulum ex lectus",
"description": "Lorem ipsum dolor sit amet, sit no hinc quot doctus.",
"backdrop": "https://picsum.photos/seed/msx_item5/960/540",
"image": "https://picsum.photos/seed/msx_item5/264/264",
"action": "image:https://picsum.photos/seed/msx_item5/1920/1080"
}, {
"titleHeader": "{col:msx-white}Seventh Item",
"titleFooter": "Cras sapien tortor",
"description": "Lorem ipsum dolor sit amet, duo iisque erroribus comprehensam no, at pri quis apeirian perpetua. Ea ius harum oportere, idque audiam impedit mea ei, eam ea utinam moderatius. No nam albucius voluptua fabellas, cibo ancillae at nam. Cu viris volutpat.",
"backdrop": "https://picsum.photos/seed/msx_item6/960/540",
"image": "https://picsum.photos/seed/msx_item6/264/264",
"action": "image:https://picsum.photos/seed/msx_item6/1920/1080"
}, {
"titleHeader": "{col:msx-white}Eighth Item",
"titleFooter": "Duis rutrum orci purus",
"description": "Lorem ipsum dolor sit amet, omittam vivendum ad mea, putant voluptaria mei an, cum saperet probatus ea. Gloriatur adolescens est id, denique oporteat inciderint an nec, ut mea veniam aliquando signiferumque. Quod periculis adversarium qui te. Ea pri facer semper, stet eleifend per ut. Eum soluta pertinacia an, vel tation tollit pertinax et. Aperiri scribentur.",
"backdrop": "https://picsum.photos/seed/msx_item7/960/540",
"image": "https://picsum.photos/seed/msx_item7/264/264",
"action": "image:https://picsum.photos/seed/msx_item7/1920/1080"
}, {
"titleHeader": "{col:msx-white}Ninth Item",
"titleFooter": "Aliquam nulla orci",
"description": "Lorem ipsum dolor sit amet, habeo singulis vel ex. Cu nec regione constituam, ne has rebum oratio regione. Ei simul vivendo reformidans usu, id nibh.",
"backdrop": "https://picsum.photos/seed/msx_item8/960/540",
"image": "https://picsum.photos/seed/msx_item8/264/264",
"action": "image:https://picsum.photos/seed/msx_item8/1920/1080"
}, {
"titleHeader": "{col:msx-white}Tenth Item",
"titleFooter": "Fusce posuere sapien turpis",
"description": "Lorem ipsum dolor sit amet, ad nam vero efficiendi. At legere abhorreant mei, usu cu tollit delenit invenire. Vis cu quando tractatos concludaturque, an wisi pertinax vis. Ut vis civibus eleifend neglegentur, sea feugait quaestio cu, homero delicata gloriatur at sit. Te ius facer timeam, an eum veniam mnesarchum elitr.",
"backdrop": "https://picsum.photos/seed/msx_item9/960/540",
"image": "https://picsum.photos/seed/msx_item9/264/264",
"action": "image:https://picsum.photos/seed/msx_item9/1920/1080"
}, {
"titleHeader": "{col:msx-white}Eleventh Item",
"titleFooter": "Fusce convallis sagittis tempus",
"description": "Lorem ipsum dolor sit amet, ad noster vocibus albucius pro, alia latine aeterno est cu, sententiae posidonium cu sea. Ex primis placerat sed, nam tollit persecuti ad. Idque maluisset contentiones id nam, pro ex sint impetus dissentiet. Est ne omittantur consectetuer, audiam ocurreret qui eu.",
"backdrop": "https://picsum.photos/seed/msx_item10/960/540",
"image": "https://picsum.photos/seed/msx_item10/264/264",
"action": "image:https://picsum.photos/seed/msx_item10/1920/1080"
}, {
"titleHeader": "{col:msx-white}Twelfth Item",
"titleFooter": "Aliquam nulla orci",
"description": "Lorem ipsum dolor sit amet, scaevola perpetua ut qui. Te per partem definitiones, id has modus delenit scriptorem. Eu eos.",
"backdrop": "https://picsum.photos/seed/msx_item11/960/540",
"image": "https://picsum.photos/seed/msx_item11/264/264",
"action": "image:https://picsum.photos/seed/msx_item11/1920/1080"
}]
}
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