Angularjs hijack click event?

jtanz
Posts: 28
Joined: Mon Mar 27, 2017 11:24 pm

Angularjs hijack click event?

Postby jtanz » Tue Apr 18, 2017 2:47 pm

Is there anyway to hijack a click event from a hotspot or custom plugin gui? If I build an angular.js application and have the forge viewer as one view in the web app, is it possible to assign or hijack a click to a scope variable or function on the controller of that view?

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

Re: Angularjs hijack click event?

Postby rroux » Wed Apr 19, 2017 9:28 am

Hi jtanz,

i'm not familiar with angular. Can you tell me what you need precisely ?
In every event in ForgeJS you can get the FORGE.Event in your handler function that contains the emitter and a data object.
- Raphaël

jtanz
Posts: 28
Joined: Mon Mar 27, 2017 11:24 pm

Re: Angularjs hijack click event?

Postby jtanz » Thu Apr 20, 2017 4:40 pm

So I want to be able to catch the event when a hotspot is clicked or when the viewer loads a new scene. I want to know which scene ID it is loading. What would an easy way of taking the viewer object and capturing the event being emitted? I don't want to override the current functionality, just add another listener so that I can do additional changes.

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

Re: Angularjs hijack click event?

Postby rroux » Fri Apr 21, 2017 12:05 pm

Hi jtanz,

About he scene loading event I would use this method

  1. var viewer = new FORGE.Viewer("container", "config.json");
  2. viewer.onReady.addOnce(viewerReadyHandler);
  3.  
  4. function viewerReadyHandler()
  5. {
  6.     viewer.story.onSceneLoadStart.add(sceneLoadStartHandler);
  7. }
  8.  
  9. function sceneLoadStartHandler(event)
  10. {
  11.     var scene = viewer.story.scene;
  12.     // From here you have the scene reference!
  13. }


For the hotspots, you can use actions binded on the onClick event of the hotspot.

Hope this helps, have a nice day!
- Raphaël

jtanz
Posts: 28
Joined: Mon Mar 27, 2017 11:24 pm

Re: Angularjs hijack click event?

Postby jtanz » Fri Apr 21, 2017 8:32 pm

Sounds good, I will try that out. Thanks.

jtanz
Posts: 28
Joined: Mon Mar 27, 2017 11:24 pm

Re: Angularjs hijack click event?

Postby jtanz » Tue Apr 25, 2017 11:14 pm

So how would I be able to add a handler to an action for a specific hotspot? The example for onSceneLoadStart worked well for a different situation. This time I want to be able to trigger an action to broadcast an event that my Angular code can pick up and open a modal window.

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

Re: Angularjs hijack click event?

Postby aberthet » Wed Apr 26, 2017 9:59 am

You can use something like this:

Code: Select all

var hotspot = FORGE.UID.get("my-hotspot-uid");
hotspot.onClick.add(myCustomHandler);


There are currently 5 events on a hotspot https://releases.forgejs.org/latest/doc ... ml#onClick

In general, a lot of elements have onSomething methods, that can be bound to handlers. Get those elements either by direct access (viewer.story.scene for example) or using the known UID (like above), and bind some handlers to it.

jtanz
Posts: 28
Joined: Mon Mar 27, 2017 11:24 pm

Re: Angularjs hijack click event?

Postby jtanz » Wed Apr 26, 2017 1:51 pm

When can I use the FORGE.UID.get("my-hotspot-uid")? It seems I have to wait for something to complete before trying to access it.

I tried to do it inside the onReady handler of the viewer, but I still got undefined.

  1. viewer.onReady.addOnce(viewerReadyHandler);
  2.  
  3. function viewerReadyHandler()
  4. {
  5.     FORGE.UID.get("my-hotspot-uid");
  6. }

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

Re: Angularjs hijack click event?

Postby aberthet » Wed Apr 26, 2017 3:04 pm

It seems that the onReady event isn't fired at the "real" end of the Viewer loading. I'll take a look at what can be done about this.

jtanz
Posts: 28
Joined: Mon Mar 27, 2017 11:24 pm

Re: Angularjs hijack click event?

Postby jtanz » Fri Apr 28, 2017 3:03 pm

In case others want to use something similar, below is my current work around to make this work for my situation.

Code: Select all

// Event handler for view object onReady
$scope.forgeViewer.onReady.addOnce(function () {

  // Event handler when each scene starts to load
  $scope.forgeViewer.story.onSceneLoadStart.add(function (loadSceneEvent) {
    var forgeHotspot = FORGE.UID.get(MyHotspotId);

    forgeHotspot.onClick.add(function (onClickEvent)
    {
      var hotspotId = onClickEvent.emitter.uid;
      //Do something
    });
  });
});

Who is online

Users browsing this forum: No registered users and 2 guests