Community Tip - Did you get an answer that solved your problem? Please mark it as an Accepted Solution so others with the same problem can find the answer easily. X
Hi,
I am looking at ways to achieving the following :
I have a toggle button in Vuforia, which needs to be 'Clicked' from Thingworx Service.
How can this be achieved?
Avinash
Solved! Go to Solution.
The option 2 I tried something like:
twx.app.fn.triggerStudioEvent(document.querySelector('[widget-id="toggle-1"]'), 'click');
$scope.$applyAsync();
// or
twx.app.fn.triggerStudioEvent(document.querySelector('[widget-id="toggle-1"]'), 'app.view["Home"].wdg["toggle-1"].svc.click');
$scope.$applyAsync();
but it does not work, need to check more detailed why is not working...
But ... what are the benefits to have the option 2.)
Because when the change the value of the toggle widget e.g. :
$scope.setWidgetProp('toggle-1','value',!$scope.getWidgetProp('toggle-1','value'));
$scope.app.view.Home.wdg['toggle-1'].value=true;// or !$scope.app.view.Home.wdg['toggle-1'].value
$scope.$applyAsync();//to force
// or better this below
$scope.setWidgetProp('toggle-1','value',!$scope.getWidgetProp('toggle-1','value'));
twx.app.fn.triggerStudioEvent(document.querySelector('[widget-id="toggle-1"]'), 'click');
$scope.$applyAsync();//to force the execution
This will change the value of the toggle widget ( value = !value to change it)
And the triggerStudioEvent will call the click event and respectively if there is a callback function
If you want to involve this call from a External Data /twx value - you can bind this value e.g. to an parameter and then call the mentioned call from a $watch consturct e.g.
$scope.$watch('app.params.TWX_VALUE', function (newValue, oldValue, scope) {
if ( newValues != undefined) {
//possibly we need to convert the string to boolean value
var boolValue = newValues.toLowerCase() == 'true' ? true : false;
$scope.setWidgetProp('toggle-1','value',boolValue);
twx.app.fn.triggerStudioEvent(document.querySelector('[widget-id="toggle-1"]'), 'click');
$scope.$applyAsync();}
});
Hello @agangaiah ,
what should be achieve here
1.)do you want that the value of the toggle will change as toggled or untoggled
2.) or you want to simulate the user click to toggle this button
For the point 1.) you need simple to link to external data a thing property value which will change 0-1 and bind it to the widget property "value" 0 for not toggled and 1 for toggled. So you service could simple change the property in Thingworx so the Vuforia View will update the property accordingly
Hi Roland,
Yes, your point on Question 1 is clear and I tried, it works.
I am more interested in how my question 2 can be addressed.
Avinash
The option 2 I tried something like:
twx.app.fn.triggerStudioEvent(document.querySelector('[widget-id="toggle-1"]'), 'click');
$scope.$applyAsync();
// or
twx.app.fn.triggerStudioEvent(document.querySelector('[widget-id="toggle-1"]'), 'app.view["Home"].wdg["toggle-1"].svc.click');
$scope.$applyAsync();
but it does not work, need to check more detailed why is not working...
But ... what are the benefits to have the option 2.)
Because when the change the value of the toggle widget e.g. :
$scope.setWidgetProp('toggle-1','value',!$scope.getWidgetProp('toggle-1','value'));
$scope.app.view.Home.wdg['toggle-1'].value=true;// or !$scope.app.view.Home.wdg['toggle-1'].value
$scope.$applyAsync();//to force
// or better this below
$scope.setWidgetProp('toggle-1','value',!$scope.getWidgetProp('toggle-1','value'));
twx.app.fn.triggerStudioEvent(document.querySelector('[widget-id="toggle-1"]'), 'click');
$scope.$applyAsync();//to force the execution
This will change the value of the toggle widget ( value = !value to change it)
And the triggerStudioEvent will call the click event and respectively if there is a callback function
If you want to involve this call from a External Data /twx value - you can bind this value e.g. to an parameter and then call the mentioned call from a $watch consturct e.g.
$scope.$watch('app.params.TWX_VALUE', function (newValue, oldValue, scope) {
if ( newValues != undefined) {
//possibly we need to convert the string to boolean value
var boolValue = newValues.toLowerCase() == 'true' ? true : false;
$scope.setWidgetProp('toggle-1','value',boolValue);
twx.app.fn.triggerStudioEvent(document.querySelector('[widget-id="toggle-1"]'), 'click');
$scope.$applyAsync();}
});