In Level 1 and Level 2 of a SCADA display, operators see simplified overviews: tanks, flow lines, equipment status, and essential alarms. But when an operator clicks on a control loop, they should be presented with a Level 3 popup—a detailed faceplate showing:
- Process Variable (PV)
- Setpoint (SP)
- Controller Output (OUT)
- Manual Output (MAN)
- PID tuning constants (Kp, Ki, Kd)
- Modes and Setpoint Source
- Alarms and status messages
To make this scalable, I packaged all loop data into a User Defined Type (UDT). From there, a single popup design can display any loop simply by passing the loop’s tag path as a parameter.
This creates a reusable, clean, and highly maintainable SCADA structure.
Building the PID Loop UDT
The heart of this project is the PID_Loop UDT. This UDT stores everything the Level 3 popup needs.
UDT Type Structure

The PID_Loop UDT includes:
Core Signals
- PV – Process Variable
- SP – Operator Setpoint
- OUT – Controller Output (%)
- MAN – Manual Output (%)
Mode Handling
- ModeRaw – numeric value (0=Off, 1=Manual, 2=Auto, 3=Cascade)
- ModeText – text representation
- SP_SourceRaw – Internal / Remote / Cascade
- SP_Effective – the actual SP used in control (depends on source)
Engineering Limits
- engMin
- engMax
These define the display range used in the SP/PV indicators.
Derived Percent Indicators
- PV_Pct
- SP_Pct
These normalize engineering values to 0–100% so they can be used with bar indicators.
PID Tuning Parameters
- kp, ki, kd
Operator-editable only in Manual mode.
Simulation Components (Optional)
- Error
- Integral
- PrevError
These allow simple simulation of control loop behavior—perfect for learning PID control visually.
Loop Instance: Loop1_FeedFlow
Inside the project, a real example instance is:
[default]Distillation/Loop1_FeedFlow/Loop1_FeedFlow

This instance inherits the full structure of PID_Loop, making it easy to bind to the Level 3 popup.
Building the PID Loop Popup (Level 3 Display)

When the operator clicks a loop in the Level 2 display, a popup opens showing all loop details. This popup is built using:
- Custom SVG indicators
- Embedded views
- Dynamic bindings from the UDT
- Bi-directional text fields
- Mode-based enable/disable logic
The popup view receives one parameter:
loopPath (string)
This allows the popup to show any loop from Level 2.

Custom Indicators (SP–PV & MAN–OUT)
To achieve a clean, responsive, and scalable design, I built two custom SVG-based indicators.
1. SP–PV Vertical Indicator

This indicator shows:
- SP bar (blue)
- PV bar (green)
- Engineering range (engMin → engMax)
It receives the following params:
spPct
pvPct
engMin
engMax
barHeight
These are bound from the UDT:
SP_Pct → spPct
PV_Pct → pvPct
engMin → engMin
engMax → engMax
This separates the drawing logic from the UDT structure and keeps the component reusable across loops.
MAN–OUT Horizontal Indicator

This shows:
- Manual output (MAN)
- Controller output (OUT)
With intuitive behavior:
- When Mode = Manual → MAN is bright, editable, shown
- When Mode ≠ Manual → MAN is dimmed and blank
- OUT always reflects the real controller output
Parameters:
manPct
outPct
barLength
isManual
Bindings inside the popup:
- manPct ← UDT.MAN
- outPct ← UDT.OUT
- isManual ← (ModeRaw == 1)
This creates a realistic faceplate behavior similar to PLC systems.
Mode, SP Source & Dynamic Enable/Disable Logic
Operator interactions depend entirely on the loop mode:
When Mode = Manual
- Kp, Ki, Kd → enabled
- MAN → editable
- SP → editable only if SP Source = Internal
- OUT → updated based on MAN
- Status strip shows “Manual”
When Mode = Auto / Cascade
- Kp, Ki, Kd → disabled
- MAN → disabled + blank
- SP → disabled unless Internal
- OUT → driven by PID equations
- Status strip shows Auto/Cascade
SP Source Logic
- Internal → operator types SP
- Remote → SP comes from external tag
- Cascade → SP comes from upstream controller
This is fully supported using:
SP_SourceRaw
SP_Effective
A clean and predictable control UI.
PID Simulation (Optional but Useful)
Although a real system would calculate PID in the PLC, this project includes a simple Ignition-based simulation for learning:
OUT = (Error*Kp) + (Integral*Ki) + (Derivative*Kd)
And state tags:
- Integral
- PrevError
This creates a dynamic and realistic visualization of PID tuning effects.
View the Interactive Displays
If you’d like to see the Level 2 and Level 3 screens in full clarity, you can view them directly on my live demo page:
➡️ SCADA Display Portfolio – Michelle Alzola
This page is a simple viewer designed to showcase the UI/UX layout only.
The displays are static and do not represent a functioning SCADA system—they are visual mockups intended for portfolio demonstration purposes.
Conclusion
By combining:
- A consistent PID_Loop UDT
- Cleanly separated custom indicators
- A reusable Level 3 popup with loopPath parameter
We now have a professional-grade PID faceplate—the same structure used in modern PLC systems.
This approach scales beautifully: once the UDT and popup are built, you can add new loops with almost no additional work.
See my UI/UX for SCADA Displays here.



