How to make a hotspot interactive and open a web page?

Ali87
Posts: 6
Joined: Mon Feb 20, 2017 1:01 pm

How to make a hotspot interactive and open a web page?

Postby Ali87 » Mon Feb 20, 2017 1:19 pm

Hi all,

Thank you for this nice framework/library. I want to make a 360 degree image with hotspots. I have managed to do a bit but I am currently struggeling. Therefore, I really need your help.

I have the following questions:

1- How can I make the hotspots interactive? For example, "onOver" event, the hotspot will change from "image1.png" to "image2.png".

2- How to make the hotspot open a web page? For example, "onClick" event, the "FORGE.Viewer" will jump from the current scene to the target webpage.

3- Is it possible to show a "modal" window when the hotspot is clicked? If yes, please tell me how?

I will be grateful if you can provide me this information.

Regards,
Ali :roll:

User avatar
rroux
ForgeJS Team
Posts: 108
Joined: Wed Oct 26, 2016 12:19 pm

Re: How to make a hotspot interactive and open a web page?

Postby rroux » Mon Feb 20, 2017 2:42 pm

Hi ali!

1- How can I make the hotspots interactive? For example, "onOver" event, the hotspot will change from "image1.png" to "image2.png".


At the moment we have no samples to demonstrate this and we have to study the best way to update the hotspots texture at runtime for the over and out states. This feature is on our roadmap and we know that this is very important for interactions. For now we focused a lot to have hotspots that displays properly in 3D space. I know that you can access the THREE.Mesh in javascript and change the material property. There is no way to do this trough the json configuration for now.
In javascript we can imagine something like this :

  1. // Access the hotspot material
  2. FORGE.UID.get("hotspot-uid").mesh.material;


2- How to make the hotspot open a web page? For example, "onClick" event, the "FORGE.Viewer" will jump from the current scene to the target webpage.


First you have to declare an action in your json that define the web url location change.

Since in pure javascript you can change url like this:

  1. // This code will load the forgejs website
  2. window.location = "https://forgejs.org"


In the json configuration you will define this action:

  1. {
  2.     "story": { ... },
  3.  
  4.     "actions":
  5.     [
  6.         {
  7.             "uid": "action-link",
  8.  
  9.             "property":
  10.             {
  11.                 "name": "location",
  12.                 "value": "https://forgejs.org"
  13.             }
  14.         }
  15.     ]
  16. }


This action will look for the location property (on window by default) and set its value to https://forgejs.org

Now you have to bind this action to the "onClick" event of your hotspot like this:

  1. {
  2.     "hotspots":
  3.     {
  4.         "uid": "hotspot-0",
  5.         ...
  6.         "events":
  7.         {
  8.             "onClick": "action-link"
  9.         }
  10.     }
  11. }


3- Is it possible to show a "modal" window when the hotspot is clicked? If yes, please tell me how?


First of all you have to include you modal window system in your web page and declare a function that will open it in javascript. ForgeJS does not provide a modal window system, you have to use your own or an external library of your choice.

So let's say that this function will open your modal window:

  1. function openModal(parameters)
  2. {
  3.     // Here goes your code to open the modal
  4. }


The in your json configuration you can define the following action that will call your method:

  1. {
  2.     "story": { ... },
  3.  
  4.     "actions":
  5.     [
  6.         {
  7.             "uid": "action-open-modal",
  8.  
  9.             "method":
  10.             {
  11.                 "name": "openModal", // This is the name of your method
  12.                 "args": ["string", 0, null] // These are just example arguments
  13.             }
  14.         }
  15.     ]
  16. }


Now you have to bind this action to the "onClick" event of your hotspot like this:

  1. {
  2.     "hotspots":
  3.     {
  4.         "uid": "hotspot-1",
  5.         ...
  6.         "events":
  7.         {
  8.             "onClick": "action-open-modal"
  9.         }
  10.     }
  11. }


And so on ...

Hope this helps :)
- Raphaël

User avatar
rroux
ForgeJS Team
Posts: 108
Joined: Wed Oct 26, 2016 12:19 pm

Re: How to make a hotspot interactive and open a web page?

Postby rroux » Mon Feb 20, 2017 2:48 pm

You can have more informations about actions in our actions basics tutorial.
A lots of things will be added to the action system. For now we provide this :)
- Raphaël

Ali87
Posts: 6
Joined: Mon Feb 20, 2017 1:01 pm

Re: How to make a hotspot interactive and open a web page?

Postby Ali87 » Tue Feb 21, 2017 9:26 am

Hi Raphael,

Thank you so much for the very clear guidance. Everything works perfectly now.

I have one more question, will my project work automatically with WEB VR? or I need to add a piece of code?

My project is based on the 'hotspots-actions' example.

Best regards,
Ali :roll:

User avatar
rroux
ForgeJS Team
Posts: 108
Joined: Wed Oct 26, 2016 12:19 pm

Re: How to make a hotspot interactive and open a web page?

Postby rroux » Wed Feb 22, 2017 1:43 pm

Hi Ali,

The framework handles the WebVR if you are on a WebVR compatible browser. but you have to add a user interface (like a button) to switch WebVR on/off.

The plugin WebVRButton that is on the 'hotspots-actions' example will do the job. In its current version the button will display no matter what. In the next release the button will only display if your browser is WebVR compatible.

Hope this helps :)

Have a nice day!
- Raphaël

User avatar
rroux
ForgeJS Team
Posts: 108
Joined: Wed Oct 26, 2016 12:19 pm

Re: How to make a hotspot interactive and open a web page?

Postby rroux » Wed Mar 08, 2017 9:43 am

Hi Ali,

We've just released ForgeJS 0.9.1 that comes with the new hotspots states feature that allows you to update the hotspot texture on mouse over.

You can learn about hotspots states on this tutorial.

Hope that feature fit your needs :)

Oh and by the way, we also release a plugin repository on github, you'll find more info on this page. I bet you'll be interested in the WebVR Button plugin!

Have a nice day!
- Raphaël

Ali87
Posts: 6
Joined: Mon Feb 20, 2017 1:01 pm

Re: How to make a hotspot interactive and open a web page?

Postby Ali87 » Wed Mar 08, 2017 10:26 am

Hi Raphael,

Thanks for the great news. Yes, these new features will help me in achieving what I want to make.

Good job guys!

Regards,
Ali :roll:

Who is online

Users browsing this forum: No registered users and 2 guests