Community Tip - You can change your system assigned username to something more personal in your community settings. 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();}
});