Perspective - Analog Indicator - Keep pointer same size on scaling

[angus123]

Hi all,

Does anyone know how to make the Perspective Analog Indicator pointer stay the same size when changing the height of the component? By default it gets squished or expands too much, which looks bad.

I have received requests from my users to fix this. We would like the pointer to stay the same size regardless of the height of the component.

• Ignition version: 8.1.31
• Perspective module version: 2.1.31
• Browser: Google chrome version 146.0.7680.165

Problem when the component height is small (squished):

Problem when the component height is large (stretched):

Desired outcome - pointer stays roughly this size and shape regardless of component height:

I’ve tried applying a CSS style like so:

.psc-FixedPointer .ia_movingAnalogIndicatorComponent__wedgeIndicator {
    width: 10px !important;  /* Adjust size as needed */
    height: 10px !important; /* Adjust size as needed */
    /* Maintain relative positioning */
    transform: translate(-50%, -50%); 
}

and referencing it on the component like so:

Opening in a browser shows that the width and height parts of the CSS style are being applied, however the width and height specified (10x10) are not being implemented on the element. Instead it has a different width and height of unknown origin.

Looking under the Properties tab it seems like the height and width might instead be getting set by something called SVGAnimatedLength instead, which incorporates both a ‘baseVal’ and an ‘animVal’.

Presumably this is defined in the SVG object somehow and is not being overridden by the CSS styles, even though the ‘!important’ flag has been used.

At this point I’m beyond my expertise and would appreciate any tips. I imagine this is a not uncommon irk with this component so a solution would be appreciated by many.

Regards,

Angus

[Chris_Murphy]

Hi Angus,

you may find that most of the built in graphic components don’t quite do what you want. With regard to this component, I created my own using an svg. We use it via an embedded view with parameters for alarms, range, operation range etc. I would suggest you do the same. I have had to do this for gauges as well to get the look and feel I want.

You will find, due to the simple shapes, it is very easy to recreate as an svg using just rectangles and one path for the moving indicator.

[nminchin]

I posted one that I built in this topic below, however I’ve fixed a bug since then and added some other stuff (see zip below)

MovingAnalogIndicator - need more alarm levels

Hmm, I guess that makes sense setting the range colour to the priority colour - I never thought about that. (shameless plug) I have finally added my analogue indicator to the exchange, awaiting review. While I use the same philosophy (H/L and HH/LL use same colour), you could easily modify my component to use 4 colours. It also overcomes some of the issues with the MAI. I embedded this component into an Analogue Instrument View template to use with an AI UDT which has the PV, alarm ranges, etc…

However, the issue with IA’s component is that it’s a simple SVG which scales without maintaining an aspect ratio, so everything disfigures, including the strokes and the text…

Here’s the latest version of mine - the link above has an older version.

ASM Analogue Indicator Vertical v1.2 - Fixed bug in handling of negatives.zip (11.6 KB)

Edit:

Added comparison below

If I’m being honest, IA’s component seems to have been slapped together as quickly as possible without much effort involved… there are a lot of issues with it. Likely done by someone with very little graphic design experience

[FEATURE] Underwhelming look of the analogue indicator

The Perspective Moving Analogue Indicator is a bit underwhelming to look at, and has some glaring graphical "issues". For one, the rectangles inside of the main border (e.g. the "normal range", "high/low alarm", etc.) appear to be rectangles with a stroke, which means that when the stroke from the main border and the stroke from the inner rectangles combine, they create a slightly darker "halo" due to how the anti-aliased edges combine, making it look super tacky. I don't think the inner rectan…

[angus123]

Hey fellas, thanks for the replies. For the moment I’ll stick with the one we’ve built, but when time allows I’ll probably swap it out for Nick’s version.

We use it via an embedded view with parameters for alarms, range, operation range etc. I would suggest you do the same.

Yes, I’ve done that already with the default component. We built a dynamic view which links to our Process Variable UDT and automatically inherits the alarm ranges, alarm priority colours etc with view parameters for optional display of the tag name, value, alarm icon, small number next to the pointer, and pointer left or right.

An important nuance - we got around the object’s limitation of only two alarm colours by binding them to an expression which checks the process value relative to the alarm limits. If the value is equal or above the high alarm limit it returns the colours associated with the priority allocated to the high and high high alarms, and if the value is equal or below the low alarm limit it returns the colours associated with the priorities assigned to the low and low low alarms.

Here’s the latest version of mine - the link above has an older version.

Thanks Nick, yours looks great. Like that it displays the scale values. Will likely swap to this when time allows.