Skip to main content
A
agangaiah5-Regular Member
5-Regular Member
July 10, 2020
Solved

Thingworx Mashup to Vuforia Toggle Button

  • July 10, 2020
  • 1 reply
  • 1871 views

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

Best answer by RolandRaytchev

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

 

1 reply

R
RolandRaytchev21-Topaz I
21-Topaz I
July 13, 2020

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

    A
    agangaiah5-Regular MemberAuthor
    5-Regular Member
    July 14, 2020

    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

    R
    RolandRaytchev21-Topaz IAnswer
    21-Topaz I
    July 14, 2020

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

     

      Terms & ConditionsAccessibility statement