Coding Listeners for a Specific Widget

[Ike@ACE]

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?

[RolandRaytchev]

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 

[Ike@ACE]

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?

[ClayHelberg]

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
  }
});

[RolandRaytchev]

@ClayHelberg , great suggestion. This approach will be the best for this topic!. Thanks

[Ike@ACE · Accepted solution]

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.

[ClayHelberg]

A nice streamlined solution!

[RolandRaytchev]

Here I want to add a little more  about userpick - so you can use it with 4 paramters

$scope.$on('userpick',function(event,target,parent,edata) {
....
})

:so for example you can find out which component of an assembly was selected and later highlight it e.g.

$scope.$on('userpick',function(event,target,parent,edata) {
//for example you can print to see in the chrome console what is printed there
// Ctrl-Shift-I
console.log('event');console.warn(event);
console.log('target');console.warn(target);
console.log('parent');console.warn(parent);
console.log('edata');console.warn(edata);
// so here for example you can construct a selection - for componnets clicked
 if (edata) { // is argument edata used 
// constuct a selection   e.g. "model-1-/0/1"
   $scope.currentSelection = target + '-' + JSON.parse(edata).occurrence;  
//then set some random colors
     let r =parseInt(Math.random()*255);
    	let g =parseInt(Math.random()*255);
    	let b =parseInt(Math.random()*255);
    	let a =parseInt(Math.random()*0.8)+0.2;
 //end let the part blink with this color interval 200,10
   $scope.blinkSelection($scope.currentSelection,'rgba('+r+','+g+','+b+','+a+')',200,10);

}//end check edata
//end of defintion
})

so that code example will let the selected component (where you clicked) blink with a random color  in the assembly 

for the sake of completeness here also the code of the color blink:

//============== = blink selection
$scope.blinkStatus = true;
$scope.callTimeOUt = 0
////////////////////////////////
///// workaround with interval
$scope.blinkSelection = function (sel,color,timeInt,numBlinks){
   
   var i; 
   var timingInterval = 300;
   var numberOfBlinks=15

   i = 0;
   timingInterval =timeInt;numberOfBlinks=numBlinks;//args to set

   for (i = 0; i < numberOfBlinks; i++){
      $scope.setColormItem(sel, timingInterval*i,color) 
      $scope.unsetColormItem(sel,timingInterval*i +timingInterval/3) 
      $scope.setColormItem(sel,timingInterval*i +timingInterval*2/3,color) 
   } 
  
  $scope.unsetColormItem(sel,timingInterval*(numberOfBlinks+1) +timingInterval) 
}
///////////////////////////////////////////////////////
//========================== set and unset color Item
 $scope.setColormItem= function(sel,info,color)
{ 
$timeout(()=>{
  
  tml3dRenderer.setColor(sel, color);  
   
             },info)
}
$scope.unsetColormItem= function(sel,info)
{ 
$timeout(()=>{tml3dRenderer.setColor(sel, undefined);},info)
}

[ClayHelberg]

Thanks @RolandRaytchev , very useful info!