Moving Analog Indicator
A high-performance-HMI value-in-context bar: alarm bands stay muted until entered, and the process value arrow sits against a setpoint tick. It shows deviation from target, not just magnitude.
Reach for it when you need:
- Controlled values where the operator cares about deviation from setpoint
Component name: MovingAnalogIndicator · Category: Display
In the palette: HP HMI value-in-context bar: alarm bands (muted until entered), PV arrow + setpoint tick
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
orientation | enum | vertical | Options: vertical · horizontal. |
flip | boolean | false | Put the PV arrow on the opposite side (right↔left when vertical, bottom↔top when horizontal). |
processValue | number | 50 | — |
setpointValue | number | 50 | — |
rangeLo | number | 0 | — |
rangeHi | number | 100 | — |
desiredLo | number | 40 | Bottom of the desired (good) band. |
desiredHi | number | 60 | — |
loAlarm | number | 20 | Low alarm (L, level-2/yellow). |
hiAlarm | number | 80 | — |
loloAlarm | number | 10 | Low-low alarm (LL, level-1/red). |
hihiAlarm | number | 90 | — |
unit | string | "" | — |
showValue | boolean | true | — |
valueColor | color | var(--widget-value) | — |
valueFontSize | number | 13 | — |
decimals | number | 0 | Fraction digits shown. 1.0.4 |
showScale | boolean | true | Show the range low / high end labels. |
scaleFontSize | number | 7 | — |
critColor | color | #d32f2f | — |
warnColor | color | #fbc02d | — |
desiredColor | color | #b8daff | Desired (good) band colour — a solid pale blue. HP HMI: blue, not green — green trains operators to read a full screen as "all clear". The moving PV arrow stays neutral (matches the setpoint arrow / strokeColor) and only turns warn/crit at the limits. |
mutedColor | color | #cbd5e1 | Inactive-band colour (screen stays grey). |
strokeColor | color | var(--widget-label) | — |
label | string | MAI | — |
enableLabel | boolean | true | — |
labelColor | color | var(--widget-label) | — |
labelSize | number | 11 | — |
style | style | {} | Custom CSS properties |
Events
Attach event actions to these in the Event Manager.
| Event | Label | Group | Payload |
|---|---|---|---|
click | Click | Mouse | The DOM event. |
dblclick | Double click | Mouse | The DOM event. |
contextmenu | Right click | Mouse | The DOM event. |
mouseenter | Mouse enter | Mouse | The DOM event. |
mouseleave | Mouse leave | Mouse | The DOM event. |
contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.
Notes
The muted-until-entered banding is deliberate. Colouring the bands permanently turns the screen into a wall of red and amber that stops meaning anything.
By default a numeric readout shows whole numbers. decimals (0–6) is what gets the fraction back: a tag reading 23.998 displays as 24 until you ask for more, and Math.round is not a formatting choice — it is a loss of data with no way to recover it from the screen. Every numeric widget formats through the same helper, so two widgets bound to the same tag cannot disagree about how many digits it has.