Community Tip - Have a PTC product question you need answered fast? Chances are someone has asked it before. Learn about the community search. X
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?
Solved! Go to 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.
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
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?
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
}
});
@ClayHelberg , great suggestion. This approach will be the best for this topic!. Thanks
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.
A nice streamlined solution!
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)
}