Skip to main content
I
Ike@ACE15-Moonstone
15-Moonstone
February 21, 2024
Solved

Coding Listeners for a Specific Widget

  • February 21, 2024
  • 2 replies
  • 2697 views

I know that the code for creating a global listener is the following:

 

$scope.$on('eventToListenFor', () => {
});

But, what additions do I need to make to have it be a listener to a specific widget? Like a button or target?

    Best answer by Ike@ACE

    By mashing the two responses together like this:

     

    $rootScope.$on('userpick', (ev, target) => {

     if (target === 'widget') {
     $scope.yourFunction();
     }
    });

     

    I was able to do exactly what I wanted to do. The <target> parameter gets set to the widget the user chooses at run-time, which makes it far simpler to code.

    2 replies

    R
    RolandRaytchev21-Topaz I
    21-Topaz I
    February 21, 2024

    just want  to refer to the post: List of Vuforia Studio events which we could be used as listener by javaScript/angular.js  as known possible events which could be used. 

    so furhter you can check in the $$listeners according to the stack overflow post and -Angular Api

    - also 

     

    document.addEventListener('userpick', function (ev) { 
 var widget = ev.target.closest('twx-widget');
 if (widget) {
 console.log('*->the widget clicked is ', widget.getAttribute('widget-id'));
 $scope.app.clickButton(widget.getAttribute('widget-id').toString())
 $scope.app.clickButtonOther(widget.getAttribute('widget-id').toString())
 }
 else {
 var widget = twx.app.getScope(ev.target);
 if (widget) {
 console.log('**->the widget clicked is ', widget._widgetId, widget);
 $scope.app.clickButton( (widget._widgetId).toString())
 $scope.app.clickButtonOther( (widget._widgetId).toString())
 }
 }
});

     

    here the event occurs in the container and it is handled so that it finds the  target and e.g. what of widget was clicked. Unfortunatley I do not know how to to relate the listener directly  to the widget otherwise. Possibly somebody else have an idea. Thanks 

    I
    Ike@ACE15-MoonstoneAuthor
    15-Moonstone
    February 21, 2024

    Going through that list, I don't see anything about listening for an event on a specific widget. For example, a 'click' event is a common event that is on almost every widget. If I listen for a 'click' event without specifying, like so:

    $scope.$on('click', () => {
    });

    then, it will execute that listener whenever the click event is fired from any widget. I want to code a listener that only executes when the widget that I specify fires that command. Does that make sense?

    C
    ClayHelberg18-Opal
    18-Opal
    February 22, 2024

    I think instead of making your listener only listen to a specific widget, you may need to use @RolandRaytchev 's approach and listen for all events of a specific type, and then check the event target to see if it's the one you're interested in. Suppose you have a button with the ID "button-1" that you want to listen for a click event on. You could use something like this:

    $scope.$on('click', (ev) => {
 // here use Roland's approach to get the widget ID
 var widget = ev.target.closest('twx-widget');
 var id = widget.getAttribute("widget-id");
 if (id === "button-1") {
 // do the desired action
 }
});
      I
      Ike@ACE15-MoonstoneAuthorAnswer
      15-Moonstone
      March 5, 2024

      By mashing the two responses together like this:

       

      $rootScope.$on('userpick', (ev, target) => {

       if (target === 'widget') {
       $scope.yourFunction();
       }
      });

       

      I was able to do exactly what I wanted to do. The <target> parameter gets set to the widget the user chooses at run-time, which makes it far simpler to code.

        C
        ClayHelberg18-Opal
        18-Opal
        March 5, 2024

        A nice streamlined solution!

        Terms & ConditionsCookie settingsAccessibility statement