Operator screens and process graphics
Mimic Symbol <smart-mimic-symbol>
MimicSymbol displays one piece of equipment on a process diagram, such as a pump, a valve, a tank or a motor, with its tag, state and reading.
<smart-mimic-symbol> · 11 properties, 0 methods, 1 events · source/modules/smart.mimicsymbol.js
Usage in Blazor
The Razor component is <MimicSymbol> in Smart.Blazor.Industrial: every property is a parameter in PascalCase, every event an EventCallback<Event> named On<Event> whose ev["Detail"] is the typed detail class, and the methods are called on the @ref. String choices are enums. In a Blazor Web App (.NET 8 and later) the page needs an interactive render mode, for example @rendermode InteractiveServer; a statically rendered component stays empty.
@using Smart.Blazor.Industrial
@* .NET 8 and later: an interactive render mode, on the page or for the whole app *@
@rendermode InteractiveServer
<MimicSymbol @ref="mimicSymbol" Label="P-2101A"
OnSymbolClick="OnSymbolClick" />
@code {
MimicSymbol mimicSymbol;
void OnSymbolClick(Event ev)
{
MimicSymbolSymbolClickEventDetail detail = ev["Detail"];
}
}
Properties
| Parameter | Type, default | Description |
|---|---|---|
Label | string | Sets or retrieves the equipment tag shown beside the symbol. |
LabelPosition | MimicSymbolLabelPosition | Sets or retrieves where the tag is rendered. |
Level | double | Sets or retrieves the content of a vessel as a percentage, drawn as a fill clipped to the vessel shape. Only the vessel symbol uses it. |
Rotate | double | Sets or retrieves a rotation in degrees, for symbols that sit in a vertical run. |
Selected | bool | Sets or retrieves whether the symbol is drawn as the current selection. |
State | MimicSymbolState | Sets or retrieves the equipment state, which sets how the symbol is drawn. In the Industrial themes running - the normal state - is drawn solid neutral and stopped as a light body, as ISA-101 asks, so colour is left for fault; elsewhere running is green. The smart-mimic-classic class on the symbol, the diagram or the page brings the green back in the Industrial themes, and the --smart-mimic-running-fill, --smart-mimic-running-stroke and --smart-mimic-running-detail custom properties set it outright. unknown means no data: the body is hollow and dotted, so it is not read as stopped, and the reading is struck through as not current. |
Quality | MimicSymbolQuality | Sets or retrieves the quality of what the symbol shows: good, uncertain, bad or stale. Reflected to an attribute when not good. Bad drops the state colour (a state from a bad signal is not a state) and strikes the reading through; stale fades the symbol and its reading; uncertain dashes the outline. A mark in the corner - a cross, a clock, a question mark - says which without colour, and the quality is spoken in the symbol's name and shown as a tooltip on the reading. |
Stubs | MimicSymbolStubs | Sets or retrieves which connection stubs are drawn. Stubs extend past the edge of the symbol on the pipe centreline, so a symbol placed in a pipe run connects to the line on either side. |
Symbol | string | Sets or retrieves the symbol to draw. The built-in set contains 33 ISA-5.1 shapes: pumps (centrifugal, positive displacement, vacuum), valves (control, check, relief, ball, gate, butterfly, three-way), vessels (vertical, column, reactor, drum, silo, cyclone), rotating equipment (motor, turbine, generator, fan, blower, compressor, agitator, conveyor), electrical equipment (breaker, transformer, disconnect) and inline devices (filter, exchanger, orifice, heater, cooler, instrument bubble). The names can be enumerated at run time from the static symbols map. The value is not restricted to the built-in names, because symbolTemplate can supply additional symbols. An unknown symbol without a template falls back to the pump. |
SymbolTemplate | object | Sets or retrieves a function that returns the SVG markup for a symbol that is not in the built-in set. The function is called with (symbolName, element) and returns markup for the same 100x100 viewBox, or null to fall back to the built-in set. The markup is inserted as it is, so it should come from application code; markup built from plant data has to be escaped first. |
Value | string | Sets or retrieves a reading rendered under the symbol, already formatted with its unit. It is not reflected to an attribute: copying it to one on every update made the browser restyle every symbol of a large diagram. |
Events
Every event is an EventCallback<Event>; Event is a dictionary and ev["Detail"] converts to the detail class named under the event.
| Event | Description and detail |
|---|---|
OnSymbolClick | This event is triggered when the symbol is chosen, by click or by pressing Enter or Space while it has focus, typically used to select the item and open its detail. A disabled symbol raises nothing.Label string The symbol's tag.Symbol string Which symbol is drawn.State string The equipment state at the time of the click. |
Types
enum MimicSymbolLabelPosition
MimicSymbolLabelPosition.Top MimicSymbolLabelPosition.Bottom MimicSymbolLabelPosition.None
enum MimicSymbolState
MimicSymbolState.Normal MimicSymbolState.Running MimicSymbolState.Stopped MimicSymbolState.Fault MimicSymbolState.Manual MimicSymbolState.Maintenance MimicSymbolState.Unknown
enum MimicSymbolQuality
MimicSymbolQuality.Good MimicSymbolQuality.Uncertain MimicSymbolQuality.Bad MimicSymbolQuality.Stale
enum MimicSymbolStubs
MimicSymbolStubs.Auto MimicSymbolStubs.Both MimicSymbolStubs.Left MimicSymbolStubs.Right MimicSymbolStubs.Bottom MimicSymbolStubs.None
CSS variables
The component declares 8 CSS variables; the CSS page shows how to set them.
--smart-mimic-symbol-size --smart-mimic-fill --smart-mimic-stroke --smart-mimic-detail --smart-mimic-dash --smart-mimic-running-fill --smart-mimic-running-stroke --smart-mimic-running-detail