Gauge moving indicator

[whity]

Having Thing Worx Studio set up for eye wear, you can create an 3D gauge. You can drag'n drop an external data on the text property of the gauge widget. Is it also possible to let the indicator move the corresponding position like in Thing Worx? Maybe PTC will release a gauge with a moving indicator.

Till then: has anyone scripted something for this function?

[emmanuel001]

is possible? 

[emmanuel001]

Help

[ClayHelberg]

I haven't done this myself yet, but an idea I had for tackling this:

1) Split the gauge into two separate images: one for the face of the gauge, and one for the pointer. The one with the pointer should have a transparent background

2) In the experience, add two image objects, one for the face of the gauge, and one for the pointer, with the pointer image just on top of the gauge face image

3) Map the property you want to display onto the rotation property of the pointer image. You may have to try each of the axes to get the right one. You'll also probably need to use a filter to calculate the correct angle corresponding to the value. For example, if your gauge scale covers 270 degrees of the dial, and the value you want to map ranges from 0-100, you would need a filter like this: return (value * 2.7)

Hopefully this is enough to get you started.

--Clay

[whity · Accepted solution]

Thanks @ClayHelberg, I have realised your suggestion with most of the parts for everyone interested.

So, here is the code. You find annotations that explain what to do. 

I hope, you can work with it.

// You need one 3D-Label (Here by the name "LabelIndicator" and two svs. I have rebuild the 3D-Gauge with the white dial and indicator seperated in two svgs ("3DGauge-1" and "Indicator").
// Both svg mus have the same position, and orientation without billbording. The index must sit in front of the gauge, of course.
// And finally you need an aplication parameter, in this case the name is 'value'

$scope.$watch("app.params['value']", function() {
var IndicatorStartPosition = 135; //The most left position. Here: 135 degree from upwards to the left.
var min = 0; //Fill in your desired minimum value, that may be reached
var max = 250; // same for the max value
var rotation = $scope.app.params['value'] //instead of "value", fill in the name of the parameter you want to bind to the indicator
var translated = parseInt(rotation, 10);
if (translated >= min && translated <=max){ //checks, if value is within the allowed borders
translated = IndicatorStartPosition-translated;
$scope.view.wdg['LabelIndicator']['text'] = rotation ;
$scope.view.wdg['Indicator']['visible']=true;
$scope.view.wdg['Indicator']['rz'] = translated;
}
else
{
$scope.view.wdg['LabelIndicator']['text'] = "invalid value : "+ rotation ; // if value is out of the borders, the indicator will be hidden and an error text appears
$scope.view.wdg['Indicator']['visible']=false;
}

} );

Greetings

whity

[ClayHelberg]

Great! I'm glad it worked for you.