Difference between revisions of "Image Plugin"

From MSX - Wiki
Jump to navigation Jump to search
(Created page with "This is a special video plugin that displays an image for a specific time. It can be used to create a mixed playlist of videos, audios, and images. The plugin can be used with...")
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
This is a special video plugin that displays an image for a specific time. It can be used to create a mixed playlist of videos, audios, and images. The plugin can be used with version '''0.1.74''' or or higher.
+
This is a special video plugin that displays an image for a specific time. It can be used to create a mixed playlist of videos, audios, and images. The plugin can be used with version '''0.1.74''' or higher.
  
−
== Plugin Usage ==
+
== Usage ==
 
The plugin must be loaded with an image URL. Optionally, the display duration, the filler type, and the background color of the image can be indicated. Please see following action syntax example.
 
The plugin must be loaded with an image URL. Optionally, the display duration, the filler type, and the background color of the image can be indicated. Please see following action syntax example.
  
Line 8: Line 8:
 
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/plugins/js/image.js.
 
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/plugins/js/image.js.
  
−
Please see following example.
+
== Syntax ==
 +
{| class="wikitable sortable"
 +
|+ Parameter syntax of image plugin
 +
|-
 +
! Parameter !! Type !! Default Value !! Mandatory !! class="unsortable" | Description
 +
|-
 +
| <code>url</code> || <code>string</code> || <code>null</code> || '''Yes''' ||
 +
The URL of the image. It is recommended to encode the value to ensure that it is evaluated correctly (e.g. <code>"http://msx.benzac.de/img/bg1.jpg"</code> → <code>"http%3A%2F%2Fmsx.benzac.de%2Fimg%2Fbg1.jpg"</code>).
 +
|-
 +
| <code>duration</code> || <code>number</code> || <code>30</code> || No ||
 +
The display duration of the image in seconds.
 +
|-
 +
| <code>filler</code> || <code>string</code> || <code>"fit"</code> || No ||
 +
The filler type of the image.
 +
 
 +
* <code>"fit"</code>: The image is sized (by keeping the ratio) to fit into the size and is positioned in the center.
 +
* <code>"cover"</code>: The image is sized (by keeping the ratio) to cover the entire size and is positioned in the center.
 +
* <code>"smart"</code>: If the ratio of the image and the size is the same, <code>"cover"</code> is used, otherwise <code>"fit"</code> is used.
 +
|-
 +
| <code>color</code> || <code>string</code> || <code>"black"</code> || No ||
 +
The background color of the image in CSS syntax. It is recommended to encode the value to ensure that it is evaluated correctly (e.g. <code>"#000000"</code> → <code>"%23000000"</code>).
 +
|}
 +
 
 +
== Example ==
 +
=== Screenshot ===
 +
[[File:image_plugin.png|thumb|640px|none|Example Screenshot (Image Plugin)]]
 +
 
 +
=== Code ===
 +
<syntaxhighlight lang="json">
 +
{
 +
    "type": "pages",
 +
    "headline": "Image Plugin Test",
 +
    "template": {     
 +
        "type": "separate",
 +
        "layout": "0,0,2,4",
 +
        "icon": "msx-white-soft:extension",
 +
        "color": "msx-glass",
 +
        "properties": {
 +
            "control:load": "silent"
 +
        }
 +
    },
 +
    "items": [{
 +
            "title": "Video 1",
 +
            "playerLabel": "Video 1",
 +
            "action": "video:http://msx.benzac.de/media/video1.mp4"
 +
        }, {
 +
            "background": "http://msx.benzac.de/img/bg1.jpg",
 +
            "title": "Audio 1",
 +
            "playerLabel": "Audio 1",
 +
            "action": "audio:http://msx.benzac.de/media/audio1.mp3"
 +
        }, {           
 +
            "title": "Image 1",
 +
            "playerLabel": "Image 1",
 +
            "action": "video:plugin:http://msx.benzac.de/plugins/image.html?url=http://msx.benzac.de/img/bg3.jpg"
 +
        }, {
 +
            "title": "Video 2",
 +
            "playerLabel": "Video 2",
 +
            "action": "video:http://msx.benzac.de/media/video2.mp4"
 +
        }, {
 +
            "background": "http://msx.benzac.de/img/bg2.jpg",
 +
            "title": "Audio 2",
 +
            "playerLabel": "Audio 2",
 +
            "action": "audio:http://msx.benzac.de/media/audio2.mp3"
 +
        }, {
 +
            "title": "Image 2",
 +
            "playerLabel": "Image 2",
 +
            "action": "video:plugin:http://msx.benzac.de/plugins/image.html?url=http://msx.benzac.de/img/test.jpg"
 +
        }]
 +
}
 +
</syntaxhighlight>
 +
 
 +
=== Demo ===
 +
* Launch via App: https://msx.benzac.de/?start=content:https://msx.benzac.de/info/xp/data/plugin_test_3.json
 +
* Launch via Demo Page: https://msx.benzac.de/info/?start=content:https://msx.benzac.de/info/xp/data/plugin_test_3.json
 +
 
 +
== See also ==
 +
* [[Video/Audio Plugin]]
 +
* [[Interaction Plugin]]
 +
* [[HTML5X Plugin]]
 +
* [[Plugin API Reference]]

Revision as of 15:06, 29 January 2021

This is a special video plugin that displays an image for a specific time. It can be used to create a mixed playlist of videos, audios, and images. The plugin can be used with version 0.1.74 or higher.

Usage[edit]

The plugin must be loaded with an image URL. Optionally, the display duration, the filler type, and the background color of the image can be indicated. Please see following action syntax example.

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/plugins/js/image.js.

Syntax[edit]

Parameter syntax of image plugin
Parameter Type Default Value Mandatory Description
url string null Yes

The URL of the image. It is recommended to encode the value to ensure that it is evaluated correctly (e.g. "http://msx.benzac.de/img/bg1.jpg" → "http%3A%2F%2Fmsx.benzac.de%2Fimg%2Fbg1.jpg").

duration number 30 No

The display duration of the image in seconds.

filler string "fit" No

The filler type of the image.

  • "fit": The image is sized (by keeping the ratio) to fit into the size and is positioned in the center.
  • "cover": The image is sized (by keeping the ratio) to cover the entire size and is positioned in the center.
  • "smart": If the ratio of the image and the size is the same, "cover" is used, otherwise "fit" is used.
color string "black" No

The background color of the image in CSS syntax. It is recommended to encode the value to ensure that it is evaluated correctly (e.g. "#000000" → "%23000000").

Example[edit]

Screenshot[edit]

Example Screenshot (Image Plugin)

Code[edit]

{
    "type": "pages",
    "headline": "Image Plugin Test",
    "template": {       
        "type": "separate",
        "layout": "0,0,2,4",
        "icon": "msx-white-soft:extension",
        "color": "msx-glass",
        "properties": {
            "control:load": "silent"		
        }
    },
    "items": [{
            "title": "Video 1",
            "playerLabel": "Video 1",
            "action": "video:http://msx.benzac.de/media/video1.mp4"
        }, {
            "background": "http://msx.benzac.de/img/bg1.jpg",
            "title": "Audio 1",
            "playerLabel": "Audio 1",
            "action": "audio:http://msx.benzac.de/media/audio1.mp3"
        }, {            
            "title": "Image 1",
            "playerLabel": "Image 1",
            "action": "video:plugin:http://msx.benzac.de/plugins/image.html?url=http://msx.benzac.de/img/bg3.jpg"
        }, {
            "title": "Video 2",
            "playerLabel": "Video 2",
            "action": "video:http://msx.benzac.de/media/video2.mp4"
        }, {
            "background": "http://msx.benzac.de/img/bg2.jpg",
            "title": "Audio 2",
            "playerLabel": "Audio 2",
            "action": "audio:http://msx.benzac.de/media/audio2.mp3"
        }, {
            "title": "Image 2",
            "playerLabel": "Image 2",
            "action": "video:plugin:http://msx.benzac.de/plugins/image.html?url=http://msx.benzac.de/img/test.jpg"
        }]
}

Demo[edit]

See also[edit]

Retrieved from "https://msx.benzac.de/wiki/index.php?title=Image_Plugin&oldid=850"