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

Community Tip - Learn all about the Community Ranking System, a fun gamification element of the PTC Community. X

Customisation of a gauge - CSS Color Attributes

timohamburg
2-Guest

Customisation of a gauge - CSS Color Attributes

Hello Everyone,

how is it possible to customize the color gradient of a gauge with a CSS class.

Which are the matching CSS attributes for that ?

In general where is it documented which CSS Atributes are available and used in Thingworx Studio ?

Thanks in advance
Best regards
Timo

6 REPLIES 6

Hi Timo,

as far as I'm aware, the 2D gauge color scheme is fixed and will change depending on the ratio <CurrentValue> : <MaxValue - MinValue>.

There were some discussions going on to make it more customizable in the future.

For getting the attributes I mainly work with the Developer Tools in the browser for the preview and "Inspect" a certain element. But in the end, I'm using the "Class" property to define my own class in the "Application Styles".

I hope that helps...

Cheers,

Michael

ankigupta
5-Regular Member
(To:mneumann)

Hi Michael Neumann​,

I agree with you. I had also inspected it but i didn't find the method to set the inner color.

Timo, For the upcoming releases, we are working on adding flexibility to customize the colors of a gauge widget. we'll post updates under 'new features'

Thanks,
Giri

Any updates to this, is the 2D gauge and/or the 3D gauges now customizable in Studio using CSS?

Thank you a lot for your feedback.
I have made exactly the same observation in the inspector as Michael and I also could not find the color gradient calculation method.
It is great that you will improve this feature in the future.
Best regards
Timo

Hello Timo,

I know you posted this some time ago, but maybe this may help anyone here. I tried to customize the colors of the gauge, with just a little bit of success. If you search in your project folder for the file called “twxGauge.js” you can find the line, where the colors are defined.

 

var defaultLevelColor = ["#a9d70b", "#f9c802", "#ff0000"];

 

If you go into preview mode, then change the hex values in the file, save it and refresh the preview you can see the change. Five lines below that you can find this:

 

if (scope.valuecolor !== undefined && scope.valuecolor !== '') {

           defaultLevelColor = [scope.valuecolor];

           console.log("default Level color: "+defaultLevelColor);  //added by me

           console.log("Typesas : "+ typeof defaultLevelColor);     //added by me

          }

So, if you define a value in vuforia studio for the 2D Gauge at : “Value Fill Color”, then the default color-array gets overwritten. So I tried to write the array into the “Value Fill Color”-Field. But then the Gauge gets broken and you can only see black and no colors. The variable Type of the Field is string and the default LevelColor is a Object.

I think the problem is, that the string is written in one fiel of the object instead of splitting the three parts of the string into three parts of the object. I don’t know how to solve this, maybe someone else can help.

 

Greetings 

whity

Top Tags