Skip to main content
T
timohamburg3-Newcomer
3-Newcomer
April 19, 2017
Question

Customisation of a gauge - CSS Color Attributes

  • April 19, 2017
  • 4 replies
  • 4985 views

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

This topic has been closed for replies.

4 replies

M
mneumann16-Pearl
16-Pearl
April 20, 2017

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

A
ankigupta5-Regular Member
5-Regular Member
April 20, 2017

Hi Michael Neumann​,

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

K
katte5-Regular Member
5-Regular Member
April 26, 2017

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

    J
    jbacharach11-Visitor
    1-Visitor
    July 27, 2017

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

    T
    timohamburg3-NewcomerAuthor
    3-Newcomer
    April 27, 2017

    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

    W
    whity16-Pearl
    16-Pearl
    September 17, 2018

    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

    Terms & ConditionsAccessibility statement