Hotspots pic

Meis@M
Posts: 4
Joined: Sun Apr 30, 2017 1:36 pm

Hotspots pic

Postby Meis@M » Sun Apr 30, 2017 1:49 pm

Hello

how can clickable and add a link to Hotspot picture? for create a virtual tour?

and

how can add a hover box when click on a hotspot icon?

User avatar
aberthet
ForgeJS Team
Posts: 16
Joined: Tue Dec 13, 2016 2:53 pm

Re: Hotspots pic

Postby aberthet » Tue May 02, 2017 8:28 am

Hi Meis@M,

You can do something like this :

Code: Select all

// Get the hotspot
var hotspot = FORGE.UID.get("my-hotspot-uid");

// Add an event with handler on it
hotspot.onClick.add(myCustomHandler);

// Open the link with the handler
function myCustomHandler()
{
    window.location = "http://www.link.com";
}


Hope it helps.

Meis@M
Posts: 4
Joined: Sun Apr 30, 2017 1:36 pm

Re: Hotspots pic

Postby Meis@M » Tue May 02, 2017 2:29 pm

Thanks for answering
could please tell me where i need add this code?

Meis@M
Posts: 4
Joined: Sun Apr 30, 2017 1:36 pm

Re: Hotspots pic

Postby Meis@M » Tue May 02, 2017 3:24 pm

aberthet wrote:Hi Meis@M,

You can do something like this :

Code: Select all

// Get the hotspot
var hotspot = FORGE.UID.get("my-hotspot-uid");

// Add an event with handler on it
hotspot.onClick.add(myCustomHandler);

// Open the link with the handler
function myCustomHandler()
{
    window.location = "http://www.link.com";
}


Hope it helps.


could you explain more by an example?
thanks

User avatar
aberthet
ForgeJS Team
Posts: 16
Joined: Tue Dec 13, 2016 2:53 pm

Re: Hotspots pic

Postby aberthet » Tue May 02, 2017 3:30 pm

This is javascript code that can be added after the initialization of the player (in the script tag), so you can read it when the viewer is ready. You will have something like this :

Code: Select all

// Init FORGE
var viewer = new FORGE.Viewer("container", "config.json");

// This call a function when the viewer is ready
viewer.onReady.addOnce(hotspotSetup);

function hotspotSetup()
{
    // Get the hotspot
    var hotspot = FORGE.UID.get("my-hotspot-uid");

    // Add an event with handler on it
    hotspot.onClick.add(myCustomHandler);
}

// Open the link with the handler
function myCustomHandler()
{
    window.location = "http://www.link.com";
}


As said on another thread, there seems to be a problem for now with the onReady event. So don't be sure that it will work perfectly at the moment

You can alternatively call the function on another event, such as viewer.story.onSceneLoadComplete.add(hotspotSetup)
It calls the function each time a scene is loaded, so you may have to select the scene you want in the function :

Code: Select all

function hotspotSetup(event)
{
    var sceneUid = event.data.sceneUid;

    if (sceneUid === "first-scene")
    {
        // Get the hotspot
        var hotspot = FORGE.UID.get("my-hotspot-uid");

        // Add an event with handler on it
        hotspot.onClick.add(myCustomHandler);
     }
}

User avatar
aberthet
ForgeJS Team
Posts: 16
Joined: Tue Dec 13, 2016 2:53 pm

Re: Hotspots pic

Postby aberthet » Tue May 02, 2017 3:31 pm

You may want to read the tutorials : http://forgejs.org/tutorials

Meis@M
Posts: 4
Joined: Sun Apr 30, 2017 1:36 pm

Re: Hotspots pic

Postby Meis@M » Tue May 02, 2017 4:10 pm

aberthet wrote:You may want to read the tutorials : http://forgejs.org/tutorials


Thanks a lot for answering . i study that. this code not working

Code: Select all

viewer.onReady.addOnce(hotspotSetup);


this is my html

Code: Select all

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="author" content="GoPro, Inc.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <title>ForgeJS sample - Hotspots</title>

    <!-- Little styling -->
    <style type="text/css">
        @-ms-viewport { width: device-width; }
        @-o-viewport { width: device-width; zoom: 1.0; min-zoom: 1.0; max-zoom: 1.0; }
        @viewport { width: device-width; zoom: 1.0; min-zoom: 1.0; max-zoom: 1.0; }

        html, body
        {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        div#container
        {
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="container"></div>

    <!-- Include the threejs custom build -->
    <script src="../../lib/three.js/three.r83.custom.min.js"></script>

    <!-- Include the Hammer.js library -->
    <script src="../../lib/hammer.js/hammer.min.js"></script>

    <!-- Include the ForgeJS library -->
    <script type="text/javascript" src="../../lib/forge/forge.min.js" ></script>

    <!-- Start ForgeJS -->
    <script type="text/javascript">
// Init FORGE
var viewer = new FORGE.Viewer("container", "config.json");

// This call a function when the viewer is ready
//viewer.onReady.addOnce(hotspotSetup);

function hotspotSetup()
{
    // Get the hotspot
    var hotspot = FORGE.UID.get("hotspot-3d-0");

    // Add an event with handler on it
    hotspot.onClick.add(myCustomHandler);
}

// Open the link with the handler
function myCustomHandler()
{
    window.location = "http://www.link.com";
}

    </script>
</body>
</html>



and this is my config json

Code: Select all

{
    "story":
    {
        "uid": "hotspots-story",
        "name": "Hotspots Story",
        "slug": "hotspots-story",
        "description": "This is sample of hotspots",
        "default": "scene-0",

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

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

                    "source":
                    {
                        "format": "equi",
                        "url": "https://cdn.forgejs.org/samples/common/panos/01-forest.jpg"
                    }
                },

                "camera":
                {
                    "fov":
                    {
                        "min": 30,
                        "max": 120
                    }
                },

                "hotspots":
                [
                    {
                        "uid": "hotspot-3d-0",
                        "facingCenter": true,

                        "transform":
                        {
                            "position":
                            {
                                "radius": 300,
                                "theta": 0
                            }
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 60,
                                "height": 60
                            }
                        },

                        "material":
                        {
                       "opacity": 0.5,
                            "image": "https://cdn.forgejs.org/samples/common/images/spot-0.png",
                            "transparent": false
                        }

                    }
                ]
            }
        ]
    },

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

        "engines":
        [
            {
                "uid": "org.forgejs.webvrbutton",
                "url": "WebVRButton/"
            },

            {
                "uid": "org.forgejs.gyroscopebutton",
                "url": "GyroscopeButton/"
            }
        ],

        "instances":
        [
            {
                "uid": "webvrbutton",
                "engine": "org.forgejs.webvrbutton",

                "options":
                {
                    "bottom": 10,
                    "right": 10
                }
            },

            {
                "uid": "gyrobutton",
                "engine": "org.forgejs.gyroscopebutton",

                "options":
                {
                    "bottom": 10,
                    "left": 10
                }
            }
        ]
    }
}


in the line 67 there is my image
"image": "https://cdn.forgejs.org/samples/common/images/spot-0.png",

i must to do clickable the 0 icon. "spot-0.png"

User avatar
bbaudel
ForgeJS Team
Posts: 28
Joined: Wed Oct 26, 2016 9:20 am

Re: Hotspots pic

Postby bbaudel » Wed May 03, 2017 8:28 am

Hi,

Look after this post which already answer the question : viewtopic.php?f=8&t=33

So in your case, into the JSON configuration file add this entry :
  1. "actions":
  2.     [
  3.         {
  4.             "uid": "action-click-external-link",
  5.             "target": "window",
  6.  
  7.             "property":
  8.             {
  9.                 "name": "location",
  10.                 "value": "https://forgejs.org"
  11.             }
  12.         }
  13.     ]

Note: "target": "window" is optional as window is the default target of an action.

Then add this into your hotspot definition into the configuration file to call the action:
  1. "events":
  2.  {
  3.     "onClick": ["action-click-external-link"]
  4. }


Now you can remove your edited code from the main HTML file.

Who is online

Users browsing this forum: No registered users and 2 guests