Label Format for Moving Analog Indicator

Ignition
1

Hi,

I’m trying to change the label format on my indicators to show degrees Celcius, is this possible?

thanks

2

image

if anyone knows how to edit this enumeration string to add a format?

3

No idea how you change the format, but you can create a “suffix” with css

injection is the easiest for this as you gotta give the class anyway

Create a styleclass named Degree
and paste this into backgroundimage
} .psc-Degree:after{content:'°'} {

image
image835×565 36.9 KB

(°C) works just as well if the degrees wont go over 100 else The C gets hidden under the indicator
image

2 Likes
4

It doesn’t like you can do this directly via the format property of the component; @victordcq’s workaround is probably the best thing to do right now.

2 Likes
5

While we are talking about the label format, I have noticed that the alarm setpoints will get hidden if they are set to the max range of the indicator. Will that be fixed in a later release?

1 Like
6

it doesnt work on mine for some reason,

{
“visible”: true,
“format”: “#,##0”,
“style”: {
“classes”: “DegreesCelcius”
}
}

image
image1323×897 92.9 KB

7

You are assigning the name of the style class you created directly in the designer to your label’s style class property. Due to the nature of how @victordcq’s clever injection hack works, it makes no difference what the name of the style class you create within the designer is; its entire purpose is to put the following content in the same location as the rest of the project’s style resources:

} .psc-Degree:after{content:'°'} {

This concept is a little confusing to explain, so bear with me. In the code above, a new style class is being created that you won’t see in the styles folder of Perspective. The name of the style class being created that you really need to care about is between the “.psc-” and the “:after” statements. The whole reason why you want to indirectly create a new style class this way is to gain access to the “:after” psuedo-class which is not directly exposed to us for all components from within the designer. Try renaming your label’s style class property to simply “Degree” instead of the name of the style class you created within the designer’s GUI.

2 Likes
8

thanks

9

Couldnt have explained it better myself :smiley:

@josh3
if you want the name of the style to be DegreesCelcius you have to change it here too
} .psc-DegreesCelcius:after{content:'°'} {