Skip to content

Related Previews

Info

This plugin is an evolution of indoor plugin. It can creates and tracks multiple previews, for related views, not just "indoor" related view.

This plugin tracks related plugin for an related views. If the tracked related views exist, it creates an interface elements with the preview of that related view. If the related view is loaded, the preview will change to go back to the original view.

  • Plugin name: "related_previews"
  • Plugin namespace: "related_previews"

Info

Since version 3d-viewer@1.5.0 this plugin is always loaded.

Dependencies

This plugin has the following dependencies (they will be downloaded automatically):

Loading the plugin

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import { loadModule } from "@3ddv/dvm";

var input_options = {
    container: "container-id",
    plugins: ["related_previews"]
};

loadModule("3d_viewer", input_options)
    .then(function(viewer3d) {
        start(viewer3d);
    })
    .catch(function(err) {
        console.error(err);
    });

function start(viewer3d) {
    // ...
}

Features

If this plugin is loaded, the module will have the following additional features:

Triggers

This plugin adds the following new callback triggers, additionally to the default ones:

  • click_related_preview: Will be called when the user clicks the related preview. The first parameter will be a default callback object with an additional property called related_previews with the following content:
    • venue_id (string): venue id of the related view.
    • view_id (string): view id of the related view.
1
2
3
4
5
6
7
viewer3d.subscribe("click_related_preview", function(obj) {
    if (obj.related_previews) {
        viewer3d.loadView3d(obj.related_previews)
            .then(...)
            .catch(...);
    }
});

Methods

generateRelatedPreview

It starts tracking related previews with the input id. If it exists, it will be displayed.

Input:

  • id (string): Related view id to be tracked and to generate interface.

getTrackedPreviewIds

Returns a list with all tracked related ids.

Output:

showPreview

Shows the preview with the input id, if it exists.

  • id (string): Related view id to show its interface.

hidePreview

Hides the preview with the input id, if it exists.

  • id (string): Related view id to be hide its interface.

showTitle

Shows the title of the preview with the input id, if it exists.

  • id (string): Related view id to show its title.

hideTitle

Hides the title of the preview with the input id, if it exists.

  • id (string): Related view id to hide its interface.

Flags

enabled

enables or disables the related previews.

Example
1
viewer3d.related_previews.flags.enable = false;

automatic_load

Static Badge

When a preview is clicked, the destination will be loaded automatically, and click_related_preview won't be triggered.

Info

This flag is enabled by default if you DIDN'T specify this plugin at instancing time, but is disabled if you did.

Example
1
viewer3d.related_previews.flags.automatic_load = true;

automatic_track

Static Badge

If this flag is enabled, the related views that match the regex /^(indoor|related_\d+)$/ will be automatically tracked without the need of calling generateRelatedPreview method.

Info

This flag is enabled by default if you DIDN'T specify this plugin at instancing time, but is disabled if you did.

Example
1
viewer3d.related_previews.flags.automatic_track = true;

Example

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import { loadModule } from "@3ddv/dvm";

var input_options = {
    container: "viewer3d-container",
    plugins: ["related_previews"]
};

loadModule("3d_viewer", input_options)
    .then(function(viewer3d) {
        start(viewer3d);

    })
    .catch(function(err) {
        console.error(err);
    });

function start(viewer3d) {

    if (viewer3d.related_previews) {
        // doing this would be the equivalent to using "indoor" plugin
        viewer3d.related_previews.generateRelatedPreview("indoor");
        // Tracks additional related views
        viewer3d.related_previews.generateRelatedPreview("related_2");
        viewer3d.related_previews.generateRelatedPreview("related_3");
        viewer3d.related_previews.generateRelatedPreview("related_4");
    }

    viewer3d.subscribe("click_related_preview", function(obj) {
        load(obj.related_previews);
    });

    load({ venue_id: "eu-es-00040-realmadrid", view_id: "S_201" });

    function load(load_options) {
    // Load the 3d view
    viewer3d.loadView3d(load_options)
        .then(function(obj) {
            // Successfully loaded
            console.log("LOADED!");
        })
        .catch(function(err) {
            // Error while loading
            console.error(err);
        });
    }
}