Thingworx Mashup to Vuforia Toggle Button

[agangaiah]

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

[RolandRaytchev]

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

[agangaiah]

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

[RolandRaytchev · Accepted 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();}
});