Difference between revisions of "Panorama Plugin"

From MSX - Wiki
Jump to navigation Jump to search
Line 18: Line 18:
 
|-
 
|-
 
| <code>duration</code> || <code>number</code>{{pipe}}<code>string</code> || <code>40</code> || No ||
 
| <code>duration</code> || <code>number</code>{{pipe}}<code>string</code> || <code>40</code> || No ||
The display duration of the image in seconds. You can also set this parameter to <code>"slideshow"</code> to use the slideshow interval settings from the application ('''Settings''' → '''Slideshow Interval'''). The following interval values can be set. Please note that the panorama plugin doubles the interval values.
+
The sliding duration of the image in seconds. You can also set this parameter to <code>"slideshow"</code> to use the slideshow interval settings from the application ('''Settings''' → '''Slideshow Interval'''). The following interval values can be set. Please note that the panorama plugin doubles the interval values.
  
 
* '''Very Fast''': 2 sec
 
* '''Very Fast''': 2 sec

Revision as of 21:17, 7 November 2021

This is a special video plugin that displays an image as a sliding panorama. 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 sliding duration 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/panorama.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/media/pano1.jpg""http%3A%2F%2Fmsx.benzac.de%2Fmedia%2Fpano1.jpg").

duration number|string 40 No

The sliding duration of the image in seconds. You can also set this parameter to "slideshow" to use the slideshow interval settings from the application (SettingsSlideshow Interval). The following interval values can be set. Please note that the panorama plugin doubles the interval values.

  • Very Fast: 2 sec
  • Fast: 10 sec
  • Normal: 20 sec
  • Slow: 40 sec
  • Very Slow: 80 sec
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 (Panorama Plugin)

Code[edit]

{
    "type": "pages",
    "headline": "Panorama Plugin Test",
    "template": {
        "type": "default",
        "layout": "0,0,6,2",
        "color": "msx-glass",
        "group": "{ico:vrpano}",
        "imageFiller": "height-center",
        "properties": {
            "control:load": "silent",
            "control:type": "extended",
            "label:extension": "{ico:vrpano}",
            "button:content:action": "settings:slideshow_interval",
            "button:content:icon": "settings",
            "info:text": "Please use the {ico:msx-white:settings} {txt:msx-white:Slideshow Interval} settings to set the base speed (it is applied when the panorama changes).{br} Please use the {ico:msx-white:slow-motion-video} {txt:msx-white:Playback Speed} panel for runtime adjustments (it is reset when the panorama changes)."
        }
    },
    "items": [{
            "titleFooter": "Panorama 1",
            "playerLabel": "Panorama 1",
            "image": "http://msx.benzac.de/media/thumbs/pano1.jpg",
            "action": "video:plugin:http://msx.benzac.de/plugins/panorama.html?url=http://msx.benzac.de/media/pano1.jpg&duration=slideshow"
        }, {
            "titleFooter": "Panorama 2",
            "playerLabel": "Panorama 2",
            "image": "http://msx.benzac.de/media/thumbs/pano2.jpg",
            "action": "video:plugin:http://msx.benzac.de/plugins/panorama.html?url=http://msx.benzac.de/media/pano2.jpg&duration=slideshow"
        }, {
            "titleFooter": "Panorama 3",
            "playerLabel": "Panorama 3",
            "image": "http://msx.benzac.de/media/thumbs/pano3.jpg",
            "action": "video:plugin:http://msx.benzac.de/plugins/panorama.html?url=http://msx.benzac.de/media/pano3.jpg&duration=slideshow"
        }, {
            "titleFooter": "Panorama 4",
            "playerLabel": "Panorama 4",
            "image": "http://msx.benzac.de/media/thumbs/pano4.jpg",
            "action": "video:plugin:http://msx.benzac.de/plugins/panorama.html?url=http://msx.benzac.de/media/pano4.jpg&duration=slideshow"
        }, {
            "titleFooter": "Panorama 5",
            "playerLabel": "Panorama 5",
            "image": "http://msx.benzac.de/media/thumbs/pano5.jpg",
            "action": "video:plugin:http://msx.benzac.de/plugins/panorama.html?url=http://msx.benzac.de/media/pano5.jpg&duration=slideshow"
        }, {
            "titleFooter": "Panorama 6",
            "playerLabel": "Panorama 6",
            "image": "http://msx.benzac.de/media/thumbs/pano6.jpg",
            "action": "video:plugin:http://msx.benzac.de/plugins/panorama.html?url=http://msx.benzac.de/media/pano6.jpg&duration=slideshow"
        }
    ]
}

Demo[edit]

See also[edit]