How to make the readings of a 3D Gauge decrease and stop at a particular value.

[Ace_Rothstein]

I want to make the readings of a 3D Gauge decrease and stop at a certain value once a function has been triggered. Once the 3D gauge reading stops at that particular value, I want to change the resource image of the 3D Gauge to indicate an alert / caution. 

[sdidier · Accepted solution]

Hello ES_9419715,

Sadly here, Enable State-Based Formatting will not help because image is not part of the properties manageable like that.

The behavior wanted seems like an animation.
So Javascript functions will need to use a timeout to let the end user to see the effect.

Please have a look to this thread about timeout function :

https://community.ptc.com/t5/Vuforia-Studio/How-do-I-add-a-simple-10-second-delay-after-a-button-is-pressed/m-p/513176#M2118

https://docs.angularjs.org/api/ng/service/$timeout

To change a resource of any 3D or 2D Widget, please have a look to this thread :

https://community.ptc.com/t5/Vuforia-Studio/How-to-change-resource-of-3D-image-with-JS-code/m-p/612438

So, source code who be similar to like that :

$scope.ChangeIcon = function()
{
   console.log ("ChangeIcon");
   //$scope.setWidgetProp('3DGaugeExample', 'resource', "app/resources/Uploaded/Fichier_Stop_hand.svg");
   $scope.view.wdg["3DGaugeExample"]['resource'] = 'app/resources/Uploaded/Fichier_Stop_hand.svg';
}

$scope.CheckChangeIcon = function(val)
{
  // Low limit of value displayed in 3D Gauge
  if (val <= 1)
  {
    // Change image of this 3D Gauge in 5 ms
	$timeout($scope.ChangeIcon, 5);
  }
}

$scope.DecreaseValue = function()
{
  // Read current value of 3D Gauge. Start value is at 20.
  var value = $scope.getWidgetProp('3DGaugeExample', 'text');  
  
  $scope.CheckChangeIcon (value);
  
  if (value == 1)
    return;

  // Decrease value
  value = value - 1;
  // Apply the value
  $scope.setWidgetProp('3DGaugeExample', 'text', value);

  if (value > 1)
  {
     // Continue to decrease
     $timeout($scope.DecreaseValue, 1);
  }
  
  $scope.CheckChangeIcon (value);
}


$scope.Start = function()
{
   // Decrease value of 1 in 1 ms later
   $timeout($scope.DecreaseValue, 1);
}

Please find a sample Project.

It has one issue where I am blocking.

Image is not applied in 3D Gauge but Function is called as expected.

Some investigation is needed about this point.

Best regards,

Samuel

[RolandRaytchev]

Hello @sdidier ,

nice project example. One thing we need to change there. The resource properie from UI is "src" in JavaScript so therefore we need to change the statement:

$scope.view.wdg["3DGaugeExample"]['resource'] = 'app/resources/Uploaded/Fichier_Stop_hand.svg';
// please change it to
$scope.view.wdg["3DGaugeExample"]['src'] = 'app/resources/Uploaded/Fichier_Stop_hand.svg';

[Ace_Rothstein]

Thank you @sdidier! The code works for decreasing value of 3D Gauge and as you mentioned the image in the 3D Gauge source isn't changing. Thanks once again!