This UniLogic project uses three screens: a gray ISA101 Level 3 process overview, a batch history viewer, and a recipe editor. It uses none of the built-in image library. The static process drawing is one background exported from Inkscape. Every piece of equipment that changes state is a List of Pictures element that swaps between hand-drawn bitmaps. The one deliberate change from the standard ISA101 palette is that running equipment is drawn green instead of white.
What does the operator see on each screen?
| Screen | ISA101 role | Operator-facing content | UniLogic element behind it |
|---|---|---|---|
| Main screen | Level 3 (unit/process detail) | Gray process schematic, equipment that changes color with state, alarm banner along the bottom edge | Inkscape background image plus List of Pictures elements with bitmaps in several colors |
| Finished batches | Supporting/detail screen | Scrollable list of completed batches on the left and details of the selected batch on the right | Data Table element plus detail fields |
| Recipes | Supporting/detail screen | Recipe picker on the left and an editor on the right for ingredients and their amounts | Data Table element plus editable fields |
The bottom strip of the main screen is reserved for the alarm banner. A banner shows only a narrow slice of alarm state. A small alarm table would be more informative, similar to the ones large SCADA packages dock on their overview displays. With the banner as the only option on the overview, keep that strip free of process graphics. Put the full alarm summary on its own screen and make it reachable in one touch from the banner.
Image library or custom Inkscape graphics: which approach fits ISA101?
| Criterion | Built-in image library | Inkscape background + hand-drawn bitmaps |
|---|---|---|
| Palette control | Fixed artwork, often 3D and saturated | Every pixel follows your gray/state color scheme |
| State indication | Limited to what the library symbol offers | One bitmap per state, drawn in exactly the colors you define |
| Transparency | Depends on the symbol | Transparent image regions let state bitmaps overlay the background cleanly |
| Engineering effort | Low | Higher: you draw and export every state variant |
| Consistency across screens | Mixed styles | Single visual language, which is the core ISA101 goal |
Both approaches produce a working HMI. For an ISA101 design, choose the custom graphics. The high-performance HMI concept depends on a muted, uniform background so that color stands out only when something is abnormal or running. Library symbols fight that. Gradient fills are a style choice, not a requirement. If you use them, keep them subtle and apply them the same way on every symbol so they never read as a state change.
How does a List of Pictures turn a tag value into what the operator sees?
A List of Pictures element links to a tag and shows the picture assigned to that tag's current value. The display chain has three links:
- The controller logic drives a state value.
- The element binding maps each value to a bitmap.
- The bitmap itself carries the color.
When the screen shows the wrong thing, decide first whether the tag is wrong or the binding is wrong.
| What the operator sees | Fault class | Check |
|---|---|---|
| Pump shows green but the motor is stopped | Tag fault | Watch the state tag online. If the tag says "running", the logic or the feedback input is wrong, not the screen. |
| Tag value is correct but the wrong color is shown | Binding fault | Open the List of Pictures properties and compare the value-to-image table against your state definition. |
| Element is blank or frozen on one image | Binding fault | The element may be linked to the wrong tag, or the tag value has no image assigned. |
| Colored halo around a symbol | Artwork fault | Semi-transparent edge pixels were anti-aliased against a different background color. Redraw them against the actual screen gray. |
Build a single state enumeration (for example stopped, running, fault, manual) and use it for every device type. The logic then writes the same values everywhere, and every List of Pictures uses the same value-to-image order. Most binding faults come from one element whose order differs from the rest.
How do you build the Level 3 overview screen?
- Read the panel's native screen resolution from its datasheet. Set the Inkscape page to exactly that pixel size so the export needs no scaling.
- Draw everything static in Inkscape: vessels, pipework, labels, and area outlines. Use the ISA101 gray background and dark gray line work. Leave the bottom strip empty for the alarm banner.
- Export the background as a single bitmap. Import it as the screen background image in UniLogic.
- For each dynamic device, draw one bitmap per state at its final on-screen pixel size. Leave the area outside the symbol transparent. Use green for running (or white if you follow the standard palette strictly), and reserve alarm colors for abnormal states only.
- Place a List of Pictures element over each device location on the background. Assign the state bitmaps in enumeration order and link the element to the device's state tag.
- Add numeric displays for process values next to their equipment in plain dark text, following the same gray scheme.
- Place the alarm banner in the reserved bottom strip. Link it to the full alarm screen.
How do the batch history and recipe screens use Data Tables?
Both screens use the same master-detail pattern: a Data Table element for choosing a row, and a detail panel that follows the selection.
- Define the batch record structure in the project's Data Tables: batch identity, timestamps, recipe used, and actual quantities. The controller logic appends one row when each batch completes.
- Place a Data Table element on the left of the batch screen. Show only the columns the operator needs to scan, such as batch identity and completion time.
- Link the element's row selection to an index tag. The exact property name is listed in the element's properties pane.
- On the right, show the full record for the selected row. Use logic that copies that row into a set of display tags, or link the fields to the table by index.
- Build the recipe screen the same way. The left Data Table picks the recipe. The right panel exposes the ingredient selections and amounts as editable fields.
- Add min/max limits to every editable amount field so the operator cannot enter a quantity the process cannot deliver.
- At batch start, copy the selected recipe into a working buffer. The running batch then reads from the buffer, and editing the stored recipe has no effect on a batch in progress.
How do you verify the screens before handover?
- Force each device state tag through every value in the enumeration, including one value outside the defined range. Confirm the correct bitmap appears for each value, and that an out-of-range value is visibly abnormal rather than showing a normal-looking state.
- Inspect the overview on the physical panel, not only in the simulator. Check for halos around transparent symbols and for blurred lines caused by scaling.
- Raise a test alarm. Confirm it appears in the bottom banner without covering any process graphics, and that the banner opens the full alarm screen.
- Complete or simulate several batches. Scroll the batch Data Table, select the first, last, and a middle row, and confirm the detail panel matches the stored record each time.
- Edit a recipe while a batch is running. Confirm the running batch keeps the quantities it started with, and that the next batch picks up the edited values.
FAQ
What happens if a List of Pictures tag holds a value with no image assigned?
The element cannot show a meaningful state, so the operator sees either a blank area or a stale-looking symbol, depending on how the element is configured. Assign an explicit fault image to every value the logic can produce, and clamp the state tag in logic to the defined range.
What happens if the Inkscape background is exported at a different resolution than the panel?
UniLogic scales the image. Thin lines blur, and List of Pictures overlays no longer line up with the equipment drawn on the background. Export at the panel's native pixel size, which is listed on its datasheet.
What happens if an operator edits a recipe while a batch using it is running?
If the batch logic reads directly from the recipe Data Table row, the edit takes effect mid-batch. Copy the recipe into a working buffer at batch start so edits apply only to the next batch.