view

A plugin allows to add a bar at the bottom of the screen, containing thumbnails relative of each scene.

configuration.json

{
    "story":
    {
        "uid": "multiple-scenes-story",
        "name": "Multiple Scenes Story",
        "slug": "multiple-scenes-story",
        "description": "This project have multiple scenes",
        "default": "scene-2",

        "scenes":
        [
            {
                "uid": "scene-1",
                "name": "First scene",
                "slug": "first-scene",
                "description": "This is the first scene",

                "thumbnails": [
                    {
                        "uid": "thumbnail-1",
                        "url": "thumbnails/01-forest.jpg"
                    }
                ],

                "media":
                {
                    "uid": "media-1",
                    "type": "image",

                    "source":
                    {
                        "format": "equi",
                        "url": "01-forest.jpg"
                    }
                }
            },

            {
                "uid": "scene-2",
                "name": "Second scene",
                "slug": "second-scene",
                "description": "This is the second scene",

                "thumbnails": [
                    {
                        "uid": "thumbnail-2",
                        "url": "thumbnails/02-sand.jpg"
                    }
                ],

                "media":
                {
                    "uid": "media-2",
                    "type": "image",

                    "source":
                    {
                        "format": "equi",
                        "url": "02-sand.jpg"
                    }
                },

                "camera":
                {
                    "yaw":
                    {
                        "default": 30
                    }
                }
            },

            {
                "uid": "scene-3",
                "name": "Third scene",
                "slug": "third-scene",
                "description": "This is the third scene",

                "thumbnails": [
                    {
                        "uid": "thumbnail-3",
                        "url": "thumbnails/03-snow.jpg"
                    }
                ],

                "media":
                {
                    "uid": "media-3",
                    "type": "image",

                    "source":
                    {
                        "format": "equi",
                        "url": "03-snow.jpg"
                    }
                },

                "view":
                {
                    "type": "GoPro"
                },

                "camera":
                {
                    "yaw":
                    {
                        "default": -111
                    },

                    "pitch":
                    {
                        "default": -73
                    },

                    "fov":
                    {
                        "default": 250
                    }
                }
            },

            {
                "uid": "scene-4",
                "name": "Fifth scene",
                "slug": "fifth-scene",
                "description": "This is the fifth scene",

                "thumbnails": [
                    {
                        "uid": "thumbnail-4",
                        "url": "thumbnails/05-moto.jpg"
                    }
                ],

                "media":
                {
                    "uid": "media-4",
                    "type": "image",

                    "source":
                    {
                        "format": "equi",
                        "url": "05-moto.jpg"
                    }
                },

                "camera":
                {
                    "yaw":
                    {
                        "default": -8
                    },

                    "pitch":
                    {
                        "default": -30
                    }
                }
            },

            {
                "uid": "scene-5",
                "name": "Sixth scene",
                "slug": "sixth-scene",
                "description": "This is the sixth scene",

                "thumbnails": [
                    {
                        "uid": "thumbnail-5",
                        "url": "thumbnails/06-snowboard.jpg"
                    }
                ],

                "media":
                {
                    "uid": "media-5",
                    "type": "image",

                    "source":
                    {
                        "format": "equi",
                        "url": "06-snowboard.jpg"
                    }
                },

                "camera":
                {
                    "yaw":
                    {
                        "default": -65
                    }
                }
            },

            {
                "uid": "scene-6",
                "name": "Seventh scene",
                "slug": "seventh-scene",
                "description": "This is the seventh and last scene",

                "thumbnails": [
                    {
                        "uid": "thumbnail-6",
                        "url": "thumbnails/07-bicycle.jpg"
                    }
                ],

                "media":
                {
                    "uid": "media-6",
                    "type": "image",

                    "source":
                    {
                        "format": "equi",
                        "url": "07-bicycle.jpg"
                    }
                },

                "view":
                {
                    "type": "GoPro"
                },

                "camera":
                {
                    "yaw":
                    {
                        "default": -156
                    },

                    "pitch":
                    {
                        "default": 19
                    },

                    "fov":
                    {
                        "default": 150
                    }
                }
            }
        ]
    },

    "plugins":
    {
        "prefix": "../../plugins/",

        "engines":
        [
            {
                "uid": "org.forgejs.thumbnailbar",
                "url": "ThumbnailBar/"
            }
        ],

        "instances":
        [
            {
                "uid": "thumbnailbar",
                "engine": "org.forgejs.thumbnailbar",
                "scenes": [ "scene-1", "scene-2", "scene-3", "scene-4", "scene-5", "scene-6" ],

                "options":
                {
                    "container":
                    {
                        "size": "505px"
                    }
                }
            }
        ]
    }
}

Back to samples

21st Apr 2017