cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

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

SOLVED
Ace_Rothstein
Garnet

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

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. 

1 ACCEPTED SOLUTION

Accepted Solutions

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

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-...

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/6124...

 

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

View solution in original post

3 REPLIES 3

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

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-...

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/6124...

 

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

View solution in original post

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

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';

 

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

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!

Announcements
Join an
AR Working Group!

Topics available:
AR/VR for Data Optimization AR/VR for Security and Control AR/VR for Inspection