Generated banner for Matlab Build Industrial Hmi
Generated logo for Matlab Build Industrial Hmi

Matlab Build Industrial Hmi

MathWorksOfficialCreated by MathWorks

  • Skill
  • Workflow
  • Automation and integrations
  • BSD-2-Clause
  • No issues found

From the author

Build industrial-grade SCADA/HMI dashboards in MATLAB following industrial-HMI conventions (ISA-101-aligned): gray-field philosophy, alarms at source, write safeguards, fixed-range trends, drill-down layout. Produces a real App Designer app (.mlapp, or plain-text .m+.xml on R2026b+) by handing serialization to the matlab-build-app skill when available, and falls back to a programmatic .m app otherwise. Use when wrapping OPC UA / Modbus / MQTT / OSI PI / PI AF monitoring scripts into a live operator app, building plant overviews, designing operator dashboards, or any time a user asks for a "SCADA dashboard", "HMI", "plant dashboard", "operator screen", or "industrial monitoring app" in MATLAB. Trigger on: SCADA, HMI, industrial dashboard, plant overview, operator screen, uigauge, uilamp, alarm banner, gray-field, ISA-101, OPC UA dashboard, setpoint, write safeguards, alarm visualization, OSIsoft PI, AVEVA PI, PI Server, PI Data Archive, PI AF, PI Asset Framework, piclient, afclient.
— the description by MathWorks

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured workflow for creating operator-facing SCADA and HMI dashboards within MATLAB App Designer. It enforces industrial design standards, including gray-field color philosophy, alarm visualization at the data source, write safeguards for setpoints, and fixed-range trend configurations. The skill guides users through the process of wrapping monitoring scripts—such as those for OPC UA, Modbus, MQTT, or OSI PI—into functional operator screens, ensuring that the resulting applications adhere to established industrial monitoring patterns.

What it does

  • Generates industrial HMI layouts using gray-field color themes.
  • Configures alarm thresholds and persistent alarm banners for process monitoring.
  • Implements write safeguards with confirmation dialogs and visual feedback for setpoint adjustments.
  • Integrates live data streams from protocols like OPC UA, Modbus, MQTT, and OSI PI.
  • Produces a formal HMI specification document for review before application construction.
  • Delegates final app serialization to the matlab-build-app skill when available.

When to use it

  • When you need to wrap monitoring scripts into a live operator dashboard.
  • When building plant overviews or area-specific industrial monitoring screens.
  • When an application requires ISA-101-aligned alarm visualization and trend configuration.
  • When adding setpoint controls with safety-critical write confirmations to an existing app.

Advantages

  • Ensures consistency across industrial dashboards by following ISA-101 design patterns.
  • Reduces operator fatigue through standardized alarm and color conventions.
  • Provides a clear, reviewable specification process before building the application.
  • Supports integration with common industrial communication protocols.

Usage examples

“Create a SCADA dashboard for my OPC UA plant monitoring script.”
The agent will guide you through classifying your nodes, selecting appropriate widgets, and drafting an HMI specification for review before building the dashboard.
“How do I add an alarm banner to my operator screen?”
The agent will provide the pattern for implementing a persistent top-row alarm banner and configuring source-level alarm thresholds.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/matlab/matlab-build-industrial-hmi/download
  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip matlab-build-industrial-hmi.zip -d .agents/skills

Documentation by MathWorks

Industrial HMI Builder

Build operator-facing SCADA/HMI dashboards in MATLAB App Designer that follow industrial-HMI conventions: gray-field color philosophy, alarms shown at the data source, write safeguards on every setpoint, fixed-range trends with threshold lines, and a drill-down layout (plant overview → area → detail).

When to Use

  • A user asks to "wrap this OPC UA / Modbus / MQTT / OSI PI / PI AF script into a SCADA dashboard / HMI / operator screen" — including scripts generated by the OPC UA Explorer or Modbus Explorer apps (opcuageneratedScript.mlx, modbusgeneratedScript.mlx)

  • Building a plant overview, area screen, or detail screen for industrial monitoring

  • Adding alarm visualization, setpoint writes, or live trends to an existing App Designer app

  • Reviewing or refactoring an HMI that uses gauges, lamps, or trend axes for process data

  • Any prompt mentioning ISA-101, gray-field, alarm banner, write confirm, setpoint, or "operator dashboard"

When NOT to Use

  • General App Designer mechanics (uigridlayout, callback wiring, lifecycle, matlab.apps.AppBase scaffolding) and serialization to a real App Designer file — this skill delegates those to matlab-build-app. See references/app-designer-handoff.md. Two things stay here and must not be routed away: gray-field theming (never hand color/dark-mode to matlab-apply-theme) and HMI trends (never hand them to matlab-build-chart).

  • Discovering OPC UA servers on a network, finding endpoint URLs, connecting or configuring security and certificate trust, or browsing the address space to find nodes for the first time — use matlab-use-opcua-client.

  • Non-process domains (consumer apps, lab utilities, scientific GUIs) — the conventions here are tailored to plant operators monitoring physical processes.

Must-Follow Rules

Widget & Layout
  • Gray-field background [0.78 0.78 0.78]; panels [0.86 0.86 0.86]; 80%+ of the screen neutral. Color is reserved for exception. See references/color-and-layout-rules.md.

  • Construct EVERY HMI uifigure with both 'Color', [0.78 0.78 0.78] and 'Theme', 'light'. Neither alone is enough: on a dark-themed desktop child widgets (uigauge, uiaxes, uitable, uieditfield) inherit dark defaults even when the figure colour is set, and 'light' alone yields bright white instead of gray-field. Code + rationale: references/color-and-layout-rules.md; failure mode: references/common-mistakes.md entry 24.

  • Quantity caps per screen: ≤ 6 gauges, ≤ 4 trend axes, ≤ 12 numeric readouts — beyond that, use a uitable — and ≤ 5 saturated-color elements that the design chooses. One gauge's ScaleColors counts as one element however many bands it has; the connection lamp's blue is comms state, not alarm state, and sits outside the budget. Fixed MATLAB chrome does not count (a LinearGauge needle draws saturated red at every value and no public property recolors it). Full rule: assets/hmi-spec-template.md §4.

  • Connection state is BLUE [0.4 0.6 1.0]. Green [0 0.6 0] is reserved for "operator must verify yes this is actively OK" — not for "comms up" or "running".

  • Command buttons/controls are neutral gray. Never a green Start / red Stop — buttons are always-visible chrome and carry no status, so coloring them spends the alarm colors and steals contrast from real alarms. Differentiate by label; show run/stopped state on a separate lamp. (Red E-Stop is the one convention-based exception.) See references/color-and-layout-rules.md.

  • Like-typed analogs in one panel use like widgets. Don't show one temperature as a gauge and another as a numeric label.

  • NEVER produce a dark background for an industrial HMI, regardless of the user request. ISA-101 has no dark variant; a dark field destroys color-as-exception (alarm reds and ambers stop popping against a near-black background, and operators desensitize). Always render gray-field ([0.78 0.78 0.78]) and reply with a one-sentence justification when the user asks for dark mode. This is not a default — it is a hard constraint.

  • Alarms at source AND in a banner. Keyed ScaleColors/ScaleColorLimits on every gauge with thresholds (Limits must cover every band — out-of-range bands are silently clipped); persistent top-row banner listing active alarms, color-coded by highest severity; latched state with an Acknowledge button — latching and its ACK control ship together or neither does. The normal band in ScaleColors is neutral gray [0.5 0.5 0.5] — never green. See references/alarm-patterns.md.

  • Never uialert/uiconfirm/msgbox for live process alarms — alarm-fatigue anti-pattern (ISA-18.2). If a popup is unavoidable, fire once on the rising edge with a non-blocking CloseFcn and an Acknowledge button.

  • Fixed trend YLim matching the node's spec range — never auto-scale by default. Provide a per-trend toggle for exploration. See references/trend-config-reference.md.

  • 5-minute rolling window is the default: animatedline('MaximumNumPoints', 300) at 1 s update. Buffer formula = WindowSeconds / UpdatePeriodSeconds.

  • Threshold lines drawn once at construction with yline (amber dashed for warn, red dashed for alarm, blue dotted for setpoint).

Writes
  • Every writeValue() confirms. uiconfirm showing node + old + new + units; default option is Cancel, not Apply.

  • Visual feedback after write is a desaturated flash that reverts — [0.7 1 0.7] on success, [1 0.7 0.7] on failure, back to the normal face after ~0.4 s (and revert the value too on failure). Do not flash saturated green [0 0.6 0] or alarm red [0.85 0 0]: those are reserved for operator-verified-OK and active alarms, and a control that stays recolored reads as status rather than as an acknowledgement. Operator must never be uncertain whether the write took effect.

  • Range label adjacent to every writable field. Limits on the spinner enforces the bound; the uilabel makes it visible.

  • E-Stop and other safety-critical actuation confirm both engage and release — accidental touchscreen clicks are the threat. See references/write-safeguards-reference.md.

  • Disable write controls when the system can't accept them (disconnected, E-Stop active) rather than letting writes fail mid-call.

Protocol Selection
  • OPC UA: subscribe() is the default at any node count and update rate, including 1 Hz with a small node set. Reserve timer for non-node UI work (clock displays, alarm flashing, idle dimming).

  • R2026a OPC UA contract: subscribe(client, nodes, cb, PublishInterval=<s>) — always set PublishInterval to the required rate (seconds; default 1) — invokes cb(sub, notification); data lives at notification.Data.Value / notification.Data.Timestamp; the originating node is notification.Node (struct with Name, Identifier, NamespaceIndex). Don't reference src.Name — that worked in older releases when src was the node, but errors in R2026a.

  • Two callback shapes — match the source. When you write the subscribe call, use the 2-arg cb(sub, notification) above. When you paste an OPC UA Explorer–generated dataChangeCallback, it is 3-arg vectorized — cb(subObj, notification, ~) — and notification is a struct array (one entry per node changed this cycle): iterate notification(i).Node.Name / notification(i).Data.Value; never treat it as scalar. Writing a 2-arg @(src, evt) for an Explorer script throws "Too many input arguments"; treating notification as scalar reads only the first node. See references/protocol-cheatsheet.md §OPC UA and references/common-mistakes.md #17.

  • Modbus has no subscribe() — use a polling timer with BusyMode='drop', ExecutionMode='fixedSpacing'. The 6-arg write() order is write(m, target, addr, val, serverId, 'precision') — serverId BEFORE 'precision'. Putting 'precision' in slot 5 (or dropping serverId on a non-default unit) throws "Expected input number 5, serverId, to be one of these types: double, single, …" — the single most common Modbus HMI bug.

  • MQTT subscribe(c, topic, Callback=@cb) — the callback is a name-value pair, not positional. Decode message (a string) per the broker's payload schema (str2double, jsondecode).

  • OSI / AVEVA PI Data Archive: use piclient (Industrial Communication Toolbox, R2022a+). Never call NET.addAssembly('OSIsoft.AFSDK') or write OSIsoft.AF.PI.PIServers / OSIsoft.AF.PISystems code in MATLAB — the toolbox client wraps the AFSDK and returns native MATLAB types (timetable, table, datetime); rolling your own .NET interop loses type coercion, throws on permission errors that the toolbox handles, runs slowly because batched reads are bypassed, and breaks the integrated browser app. PI has no subscribe() — drive trends with a polling timer (same shape as Modbus). Writes via write(piClient, tag, value, TimeInstance=datetime("now")) are R2024a+.

  • PI Asset Framework: use afclient (Industrial Communication Toolbox, R2026a+). Browse with getRootElements / getChildren / findElementByName / findElementByPath / findElementByTemplate; read with Attribute.read (current → table) and Attribute.readHistory (archive → timetable). The AF hierarchy maps directly onto Level 1 → Level 2 → Level 3 drill-down screens. AF current-value writes are not exposed by the toolbox — there is no Attribute.write; route writes through the underlying Attribute.PITag and the PI client.

  • Identify writable attributes from Attribute.WriteAccess and HasTimeSeriesData, the same way OPC UA uses AccessLevelCurrent. Don't infer writability from the name.

  • Use the server's actual tag / attribute names from tags(c).Name or attribute.Name / attribute.Path. Never invent labels — the HMI must mirror the source script's identifiers so operators can cross-reference with the OPC UA Explorer / OSI PI viewer / AF browser.

See references/protocol-cheatsheet.md for OPC UA / Modbus / MQTT API shapes and references/pi-af-cheatsheet.md for PI Data Archive and PI AF; see references/common-mistakes.md for the silent-failure modes.

App Designer Language
  • Initialize typed struct properties: Foo struct = struct(). A bare Foo struct declaration becomes 0×0 struct and app.Foo.Bar = 1 errors with "A dot name structure assignment is illegal when the structure is empty."

  • classdef first. A function block before classdef in the same file is a parse error. Drop the wrapper; the file's first non-comment statement must be classdef, name matching filename.

  • No function … end in inline evaluation. Function definitions are legal only inside code files, never in a command-window / inline context. When you sanity-check helper logic (severity bands, alarm math) through evaluate_matlab_code, the transcript is a command-window context — a pasted function … end block errors with "Function definitions are not supported in this context." Verify by exercising the helper from its file, or inline the arithmetic directly.

  • Subscription cleanup: opc.ua.Subscription has no public delete. Drop the handle (app.Subscription = opc.ua.Subscription.empty;) and disconnect(client) — that releases all subscriptions on that client.

  • Subscribe per widget, never rebuild a single global subscription on each add — each subscribe() accumulates a channel listener; rebuilds leak.

  • Teardown body lives in delete(app); CloseRequestFcn only routes to it. Stop and delete timers, drop subscription handles and disconnect clients inside delete(app), then wire app.UIFigure.CloseRequestFcn = @(~,~) delete(app);. Putting the body on CloseRequestFcn instead leaks everything whenever the app is closed programmatically — which is how every test, script and eval closes it. A leaked timer keeps firing after the figure closes with stale handles. See references/common-mistakes.md #32.

See references/app-designer-gotchas.md for full reproductions, the release-aware AccessLevelCurrent check, and per-widget subscription patterns.

Spec, Review, and Output
  • Write the spec, get it approved, then build. Fill assets/hmi-spec-template.md into <AppName>-hmi-spec.md beside the app, present a ≤10-line summary, and STOP for review. Build only after the user approves. Corrections go into the spec, never into a built app. That file is the hand-off contract.

  • Build by invoking the matlab-build-app skill under the exact name it appears as in your available-skills list — plugin-scoped (<plugin>:matlab-build-app) or bare; only the listed form resolves, so never type a guessed slash command. Hand it the approved spec, which pre-answers its discovery (UIFigure — an HMI is never UIHTML — plus .mlapp, archetype, users, timers). How it builds and what format it emits is its concern.

  • Availability is that same list lookup, never a filesystem search. Not listed → emit the programmatic .m app yourself from the same approved spec; say it runs identically but won't open in App Designer, and that enabling the matlab-app-building plugin and rebuilding from the same spec produces a .mlapp. Never scan the disk for its skill folder — it ships in a different plugin (matlab-app-building), so a recursive search above this skill runs for tens of minutes and still misses.

  • Editing an existing HMI is a delta, not a rebuild — patch the spec, confirm only changed rows, hand off the change.

  • references/app-designer-handoff.md has the division of labor, the hand-off protocol, and the component/behavior recipes the spec is filled from.

Workflow

When wrapping a monitoring script into an HMI, work through these steps in order. Widget choice depends on data type, layout depends on widget choice, alarms/trends/writes layer on top — and the finished design is written to a spec the user reviews before anything is built.

  1. Classify each node / tag / attribute — binary, enumerated, analog with range, analog without range, writable, alarm thresholds (LL/L/H/HH). This list drives every later step. → references/widget-selection-flowchart.md. If the schema isn't given upfront → references/server-agnostic-discovery.md. If wrapping a generated script (OPC UA/Modbus Explorer or MQTT demo) → references/protocol-cheatsheet.md first; if wrapping a PI / PI AF script → references/pi-af-cheatsheet.md, for the exact API shapes.

  2. Pick widgets via the decision flowchart, cross-checking quantity caps. → references/widget-selection-flowchart.md.

  3. Lay out by hierarchy — Level 1 plant overview, Level 2 area, Level 3 detail; row 1 reserved for the persistent alarm banner. → references/color-and-layout-rules.md.

  4. Wire live data per protocol — OPC UA subscribe() (self-written callback = 2-arg cb(sub, notification); an Explorer-generated dataChangeCallback = 3-arg vectorized over a struct array), Modbus polling timer, MQTT subscribe(... Callback=...), PI / PI AF polling timer against read() / Attribute.read. → references/protocol-cheatsheet.md and references/pi-af-cheatsheet.md.

    • Paint the screen before you connect. A client constructed against an unreachable host blocks ~21 s then throws, and no Timeout shortens it. Build the gray-field layout, drawnow, show "Connecting to <host>…" in the banner, and only then construct the client inside a try. Measurements: references/protocol-cheatsheet.md §Polling pattern.

  5. Configure alarms at source AND in a banner, latched only alongside an Acknowledge control. → references/alarm-patterns.md.

  6. Configure trends — 5-minute window, fixed YLim, threshold lines. → references/trend-config-reference.md.

  7. Add write safeguards on every setpoint — confirm, range label, flash feedback. → references/write-safeguards-reference.md.

  8. Write the HMI spec — fill assets/hmi-spec-template.md into <AppName>-hmi-spec.md beside the app: signals, components with ISA-101 values, behaviors and wiring roles, build parameters. Self-audit section 5 first. → assets/hmi-spec-template.md.

  9. STOP — spec review gate. Present a ≤10-line summary plus the file path, then wait; revise the spec and re-present until the user approves, then stamp Review status: APPROVED <date>. Proceed unprompted only on pre-approval, or when the session cannot take a reply (batch/eval run) — then leave it UNREVIEWED and say so before building — summary first, then build. "Seems busy" is not a bypass.

  10. Build from the approved spec per "Spec, Review, and Output" above. → references/app-designer-handoff.md.

  11. Verify by reading the built app back, then close it cleanly. Copy assets/designReportReadback.m beside the app verbatim, keeping its filename — it is a function; do not edit it, do not rename it, and do not re-author your own readback. Call it via mcp__matlab__evaluate_matlab_code: designReportReadback("<AppClass>", "<AppClass>-hmi-spec.md"). It reads the live figure and source, writes design-report.json, deletes the app and reports leaks. Confirm the file's first key is "reportFormat":"hmi-report/1" (self-check: references/common-mistakes.md #33), then compare it with the spec row by row and fix the app where they disagree. Never hand-write or reshape the numbers. If construction fails on a struct or classdef error → references/app-designer-gotchas.md.

Key Functions and Release Gates

references/key-functions.md lists every widget, client, and read/write call with its toolbox and release, plus the four gates that change the design rather than the call — the floor is R2023b (manifest.yaml), set by OPC UA subscribe(). Check it before writing a call on an unknown install; mcp__matlab__detect_matlab_toolboxes confirms what's present.

Common Mistakes

references/common-mistakes.md is a grep-first lookup table of 33 documented anti-patterns — App Designer gotchas, ISA-101 violations, and protocol-specific silent failures — each a Symptom → Wrong → Right → Why block. Don't load it whole: Grep it for the user's error string, or find the anti-pattern in its index table, and read only the matching ### N. entry.

References

Each file carries executable patterns for its topic — calling conventions, constructor arguments, property names, full callback handlers. Load the relevant one before writing code.

Load when...Reference
Writing the HMI spec for review and hand-offassets/hmi-spec-template.md — fill it; it's a form, not a source of domain rules
Verifying a built HMI against its spec (workflow step 11)assets/designReportReadback.m (copy verbatim; see step 11); key contract in assets/design-report-schema.json
Picking widgets for a list of nodesreferences/widget-selection-flowchart.md
Designing screen structure or choosing colorsreferences/color-and-layout-rules.md
Wiring alarm bands at source or the persistent bannerreferences/alarm-patterns.md
Configuring a trend (window, YLim, threshold lines)references/trend-config-reference.md
Adding a writable setpoint with confirm + flash feedbackreferences/write-safeguards-reference.md
Wrapping an OPC UA Explorer / Modbus Explorer / MQTT script — invoking OPC UA method nodes — or hitting protocol-specific bugsreferences/protocol-cheatsheet.md
Wrapping an OSI / AVEVA PI Data Archive script (piclient, tags, read) or a PI AF script (afclient, getRootElements, getAttributes, Attribute.read/readHistory)references/pi-af-cheatsheet.md
Browsing an unknown server and inferring widgets at runtimereferences/server-agnostic-discovery.md
Hard-wiring a known node-to-widget schemareferences/known-schema-patterns.md
Construction errors (struct props, classdef ordering, listener leaks, AccessLevelCurrent)references/app-designer-gotchas.md
Handing the approved spec to matlab-build-app, picking components/behaviors to fill it, or editing an existing appreferences/app-designer-handoff.md
Debugging a specific error, silent failure, or anti-patternGrep references/common-mistakes.md for the error text or anti-pattern (it has an index table) — read only the matching entry, not the whole file
Checking whether a function exists in the user's release, or which toolbox ships itreferences/key-functions.md — manifest.yaml carries the product requirement

Copyright 2026 The MathWorks, Inc.


Files

references/color-and-layout-rules.md

Color and Layout Rules

The single load-bearing principle: color means exception. The dashboard is mostly gray. Operators learn to ignore the gray, so anything not gray earns immediate attention.

Gray-field palette

RoleRGBHexNotes
Page background[0.78 0.78 0.78]#C7C7C7The screen baseline. 80%+ of pixels should be this.
Panel / card background[0.86 0.86 0.86]#DBDBDBSlightly lighter than page; defines visual groups without lines.
Command button / control face[0.86 0.86 0.86]#DBDBDBButtons, spinners, dropdowns — neutral chrome. Never green Start / red Stop; differentiate by label. See "Command buttons and controls are neutral". Switches and lamps have no BackgroundColor — see the note below the next section.
Normal-state widget[0.5 0.5 0.5]#808080Gauge normal band, lamp idle, badge default.
Primary text / numerics[0.10 0.10 0.10]#1A1A1AHigh-contrast on gray background.
Secondary text / labels[0.30 0.30 0.30]#4D4D4DRange labels, units, metadata.
Critical alarm[0.85 0 0 ]#D90000Red. HH/LL bands, critical banner, fault state.
Warning[1 0.7 0 ]#FFB300Amber. H/L bands, advisory.
Communication / info[0.4 0.6 1.0]#6699FFBlue. Connection lamp, data quality, advisory severity.
Confirmed-good (sparingly)[0 0.6 0 ]#009900Green. Reserved for "operator must verify yes this is OK" — not for "it's running" or "connected".
Stale / uncertain[0.6 0.2 0.7]#9933B3Magenta/purple. Subscription lost, data age exceeded.
Application rules
  • Never use color as the sole differentiator. Always pair with text or shape (lamp + label, badge with text, threshold line + dashed style).

  • 80%+ of the screen is gray. If everything is green when "all good", nothing stands out when something goes red.

  • Alarm color belongs to the source widget, not a separate alarm widget. Color the gauge band, the table row, the trend trace highlight — not a popup.

  • At most 5 saturated-color elements on screen at once — counting only the ones the design chooses. If more nodes go critical simultaneously, the banner counts as one and the source widgets share attention. Fixed MATLAB chrome is excluded, because it cannot be designed away: a LinearGauge needle renders saturated red at every value, including inside its neutral-gray normal band, and none of the component's 35 public properties recolors it (verified on R2026a). Count banners, ScaleColors bands, lamps and any color you assign; do not count needles, and never weaken a real alarm band to buy headroom against one.

  • Connection state is BLUE. Green is reserved for "operator must verify yes this is actively OK" — a process state, not a comms state.

Command buttons and controls are neutral

Push buttons (Start, Stop, Reset, E-Stop), spinners, switches, and dropdowns are chrome, not state — they are present on the screen at all times regardless of what the process is doing, so they carry no alarm or status meaning and must stay neutral widget gray (leave the default button face, or [0.86 0.86 0.86]).

Not every control accepts BackgroundColor — check before you set it. Setting it on a switch is a hard error, not a no-op:

Error using uiswitch
Unrecognized property BackgroundColor for class RockerSwitch

Verified on R2026a: BackgroundColor exists on Button, StateButton, Spinner, DropDown, EditField, NumericEditField, TextArea, Label, Table, Panel, GridLayout, and the gauges. It does not exist on Switch, RockerSwitch, ToggleSwitch, Lamp, CheckBox, or Knob. Switches are already neutral — leave them alone and style the surrounding container instead. A Lamp carries its state on Color, which is a different property and is the ISA-101 signal. See common-mistakes.md entry 27.

  • Never a green Start / red Stop. This is the single most common reflexive violation (traffic-light / play-button priors). Green [0 0.6 0] and red [0.85 0 0] are the two exception colors — spending them on always-visible buttons means when a value actually goes critical, the real red alarm no longer stands out against a screen that already has a red button. It also mis-signals: a red Stop button reads as "Stop is in an alarm state," which is meaningless.

  • Differentiate controls by their label, position, and grouping — START / STOP / E-STOP text — not by color.

  • Run/stopped state is a separate indicator. If the operator needs to see whether the pump is running, show it on a uilamp + label or a status badge next to the control, not by coloring the button. The button says what pressing it does; the lamp says what the equipment is doing.

  • A transient write-acknowledgement flash is allowed — that is not "coloring the button." Safeguard 4 in write-safeguards-reference.md requires visible confirmation that a write or command actually took effect, and on a push button that feedback necessarily lands on the button face. It does not violate the rule above, on three conditions: it uses the desaturated pastels [0.7 1 0.7] (success) and [1 0.7 0.7] (failure) — never the saturated exception pair [0 0.6 0] / [0.85 0 0], which stay reserved for real alarm state; it lasts ~0.4 s and reverts to the neutral face; and it fires only in response to the operator's own action, never from process state. A flash that persists, or that borrows the saturated pair, is the violation. See write-safeguards-reference.md Pattern B for the helper and its non-blocking timer variant.

  • E-Stop is the one allowed exception to a persistently colored control, and only as a physical-affordance convention: a red E-Stop may use red because it mirrors the physical mushroom button operators are trained on. Even then, prefer a distinct shape/size and a confirm-both-engage-and-release dialog (see write-safeguards-reference.md) over relying on the color. If in doubt, keep it gray.

This applies identically whether the app is built programmatically or serialized to a real App Designer file via matlab-build-app — see app-designer-handoff.md for the component spec to hand off.

Dark-theme defense

On a dark-themed MATLAB desktop, child widgets inherit dark defaults from the OS/MATLAB theme even when you set the figure colour explicitly. Operators end up with dark text on dark widgets inside a (correctly) gray-field figure — unreadable, and a clash with the gray-field philosophy.

The two-line fix is both of these — neither alone is enough:

fig = uifigure( ...
    'Color', [0.78 0.78 0.78], ...   % gray-field page background
    'Theme', 'light');                % neutralize inherited dark-theme defaults on widgets
  • Theme = 'light' blocks dark-theme inheritance on all child widgets (gauges, lamps, edit fields, axes ticks). Without it, every widget needs explicit FontColor/BackgroundColor overrides — and those two names are not universal: uitable and uipanel spell it ForegroundColor, and switches, lamps, knobs and checkboxes have no BackgroundColor at all. Both are hard construction errors; see common-mistakes.md entries 27 and 28 before painting a widget you haven't painted before.

  • The explicit gray-field Color on the figure (and BackgroundColor on panels and grids) keeps the result gray-field rather than the bright white that 'light' would otherwise produce. ISA-101 has no white-field variant — keep the gray.

  • Reading Theme back (verifying your own work, or reporting what you built): it is set with a char vector but reads back as a matlab.graphics.theme.GraphicsTheme object, so string(fig.Theme) and sprintf('%s',fig.Theme) both error with "Conversion to string from matlab.graphics.theme.GraphicsTheme is not possible". Use fig.Theme.BaseColorStyle ('light'/'dark') — or fig.Theme.Name for the display name and fig.ThemeMode to confirm it was set explicitly rather than inherited.

Minimal classdef construction snippet that combines them:

function createComponents(app)
    app.UIFigure = uifigure( ...
        'Color',    [0.78 0.78 0.78], ...
        'Theme',    'light', ...
        'Position', [100 100 1200 700], ...
        'Name',     'Plant Overview');

    app.MainGrid = uigridlayout(app.UIFigure, [3 1]);
    app.MainGrid.RowHeight       = {28, 120, '1x'};
    app.MainGrid.BackgroundColor = [0.78 0.78 0.78];

    % Panels still get the lighter gray; Theme handles the inherited child defaults.
    app.KpiPanel = uipanel(app.MainGrid, ...
        'BackgroundColor', [0.86 0.86 0.86], ...
        'BorderType',      'none');
end

If a user explicitly asks for a "dark dashboard", reply with the one-sentence justification from the SKILL.md Must-Follow Rules: ISA-101 has no dark variant; gray-field with color-as-exception is the standard, and dark-mode inverts that contrast.

See common-mistakes.md entry 24 for the visible failure mode (gauge bodies and axes go near-black) when Theme='light' is forgotten.

Layout hierarchy — three levels

Operators navigate a SCADA HMI by drilling down. The skill must produce all three levels for non-trivial plants; for a single-station HMI, Level 1 collapses into the Level 2 view.

Level 1 — Plant Overview
  Question:  "Is anything wrong?"
  Content:   KPI summary cards, alarm count badge, equipment status grid
  Widgets:   uilamp, uieditfield numeric (KPIs), mini sparklines (animatedline)
  Trigger:   Default landing screen when the app opens.

Level 2 — Area / Unit View
  Question:  "What is happening in this system?"
  Content:   4-6 gauges or trend plots for one subsystem (e.g., WeldShop)
  Widgets:   uigauge, uiaxes + animatedline, uilamp, uilabel (status)
  Trigger:   Operator clicks an area tile from Level 1.

Level 3 — Detail / Diagnostic
  Question:  "What are the exact values and history?"
  Content:   Full trend history, node table, write controls, alarm list
  Widgets:   Scrollable trend, uitable, uispinner + uibutton, alarm list
  Trigger:   Operator clicks a station / node from Level 2.

A uitabgroup is the standard widget for the Level 1 → Level 2 → Level 3 transitions when everything is in one window.

Spatial layout rules

+--------------------------------------------------------------+
| ALARM BANNER (row 1, persistent across all levels)           |  ← never empty when alarms active
+----------+---------------------------------------------------+
|          |                                                   |
|   NAV    |   PRIMARY VISUALIZATION                           |
|   TREE   |   (gauges, trends, tables — Level 2/3 content)    |
|          |                                                   |
| (uitree, |                                                   |
| optional)|                                                   |
|          +---------------------------------------------------+
|          | WRITE CONTROLS / DETAIL PANEL                     |  ← visually separated
|          | (setpoints, buttons, alarm list)                  |
+----------+---------------------------------------------------+
  • Top strip (row 1, persistent): Alarm banner. Visible across all screens. Always present in the layout — gray when no alarms, red/amber when active.

  • Left panel (column 1, optional): uitree mirroring the OPC UA namespace or plant hierarchy. For a single-area HMI, this can be replaced by uitabgroup along the top.

  • Center area: Primary visualization — gauges, trends, tables.

  • Right or bottom panel: Setpoints, write controls, alarm list. Visually separated from the center: different background color ([0.86 0.86 0.86] panel vs [0.78 0.78 0.78] page), border, or a row gap.

  • Never place write controls in the center area. Setpoints and actuation must be in a secondary zone to prevent accidental activation.

Pattern: Level 1 plant overview

Tile-based plant overview with KPI cards and station status grid:

fig = uifigure('Color', [0.78 0.78 0.78], 'Theme', 'light', ...
    'Position', [100 100 1200 700]);

gl = uigridlayout(fig, [3 1]);
gl.RowHeight       = {28, 120, '1x'};
gl.BackgroundColor = [0.78 0.78 0.78];

% Row 1: Alarm banner (see references/alarm-patterns.md)
banner = uilabel(gl, 'Text', 'No active alarms', ...
    'BackgroundColor', [0.86 0.86 0.86], 'FontWeight', 'bold', ...
    'HorizontalAlignment', 'center');
banner.Layout.Row = 1;

% Row 2: KPI tiles (4 across)
kpiRow = uigridlayout(gl, [1 4]);
kpiRow.Layout.Row = 2;
kpiRow.BackgroundColor = [0.78 0.78 0.78];
kpiRow.Padding = [10 10 10 10];

makeKpiTile(kpiRow, 'Bodies / hr',   '42', [0.86 0.86 0.86]);
makeKpiTile(kpiRow, 'Pass rate',     '97.3%', [0.86 0.86 0.86]);
makeKpiTile(kpiRow, 'Active alarms', '0',  [0.86 0.86 0.86]);
makeKpiTile(kpiRow, 'Uptime (h)',    '72', [0.86 0.86 0.86]);

% Row 3: Station status grid (2x2 of stations: Body, Paint, Assembly, QC)
stationGrid = uigridlayout(gl, [2 2]);
stationGrid.Layout.Row = 3;
stationGrid.BackgroundColor = [0.78 0.78 0.78];
stationGrid.Padding = [10 10 10 10];

% Lamp colors come from the palette above: gray idle, blue running, red/amber on
% alarm. NEVER green for "running" — see the palette note on green.
makeStationTile(stationGrid, 'Body Shop',   'Running', [0.4 0.6 1.0]);
makeStationTile(stationGrid, 'Paint Shop',  'Running', [0.4 0.6 1.0]);
makeStationTile(stationGrid, 'Assembly',    'Idle',    [0.5 0.5 0.5]);
makeStationTile(stationGrid, 'Quality',     'Running', [0.4 0.6 1.0]);

Reference implementations for the two tile constructors:

function tile = makeKpiTile(parent, titleText, valueText, bgColor)
    tile = uigridlayout(parent, [2 1], ...
        'RowHeight',       {18, '1x'}, ...
        'BackgroundColor', bgColor, ...
        'Padding',         [8 8 8 8], ...
        'RowSpacing',      4);
    uilabel(tile, ...
        'Text',                titleText, ...
        'FontSize',            11, ...
        'FontColor',           [0.3 0.3 0.3], ...
        'HorizontalAlignment', 'left');
    uilabel(tile, ...
        'Text',                valueText, ...
        'FontSize',            22, ...
        'FontWeight',          'bold', ...
        'FontColor',           [0.10 0.10 0.10], ...
        'HorizontalAlignment', 'left');
end

function tile = makeStationTile(parent, stationName, statusText, lampColor)
    tile = uigridlayout(parent, [2 2], ...
        'RowHeight',       {'1x', 24}, ...
        'ColumnWidth',     {'1x', 24}, ...
        'BackgroundColor', [0.86 0.86 0.86], ...
        'Padding',         [10 10 10 10]);

    nameLbl = uilabel(tile, ...
        'Text',                stationName, ...
        'FontSize',            16, ...
        'FontWeight',          'bold', ...
        'HorizontalAlignment', 'left');
    nameLbl.Layout.Row = 1; nameLbl.Layout.Column = [1 2];

    statusLbl = uilabel(tile, ...
        'Text',                statusText, ...
        'FontSize',            12, ...
        'FontColor',           [0.3 0.3 0.3], ...
        'HorizontalAlignment', 'left');
    statusLbl.Layout.Row = 2; statusLbl.Layout.Column = 1;

    lamp = uilamp(tile, 'Color', lampColor);
    lamp.Layout.Row = 2; lamp.Layout.Column = 2;
end

Wire click-to-drill-down on a station tile by adding a ButtonDownFcn to the tile's grid layout (or wrapping in a uibutton styled to look like a tile).

Like-typed analogs use like widgets in the same panel

If a panel shows multiple temperatures, all should be gauges OR all should be numeric readouts — never mixed. (Heuristic H4.) Mixing forces operators to switch reading modes.

Keep tick density readable at the rendered size

Default tick density on a small uigauge produces overlapping labels. If the gauge is rendered <150 px wide, set MajorTicks and MinorTicks explicitly:

g = uigauge(panel, 'linear', 'Limits', [0 250], ...
    'MajorTicks',      [0 100 200 250], ...
    'MinorTicks',      0:50:250, ...
    'MajorTickLabels', {'0','100','200','250'});

(Heuristic H8 — minimalist design.)

Don't put rarely-changing counters in prime real estate

Production counters that update once per cycle (e.g., "bodies completed today") should not occupy the same visual slot as fast-changing process variables. Group them in a footer or sidebar, not the center grid. (Heuristic H8.)


Copyright 2026 The MathWorks, Inc.


Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs an MCP server, Needs Node.js

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
MathWorks
Publisher
MathWorks (Official)
Source
matlab/matlab-agentic-toolkit · skills-catalog/test-and-measurement/matlab-build-industrial-hmi · commit 2a7f215
Licence
BSD 2-Clause License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE.md)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by MathWorks.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download matlab-build-industrial-hmi.zip