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

Community Tip - If community subscription notifications are filling up your inbox you can set up a daily digest and get all your notifications in a single email. X

Gauge moving indicator

whity
16-Pearl

Gauge moving indicator

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?

1 ACCEPTED SOLUTION

Accepted Solutions

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

View solution in original post

5 REPLIES 5

is possible? 

Help

ClayHelberg
17-Peridot
(To:whity)

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

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
17-Peridot
(To:whity)

Great! I'm glad it worked for you.

Top Tags