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.

JavaScript TypeScript Angular React Vue Blazor

<smart-mimic-symbol> · 11 properties, 0 methods, 1 events · source/modules/smart.mimicsymbol.js

Usage in Vue

Vue uses the custom element directly. A property is bound with :kebab-name; an array or an object needs the .prop modifier so that Vue sets the property rather than an attribute. Events are listened to with @eventName; methods are called on the element through a template ref.

import 'smart-industrial/source/modules/smart.mimicsymbol.js';

<smart-mimic-symbol ref="mimicSymbol" :label="'P-2101A'"
    @symbolClick="onEvent"></smart-mimic-symbol>



// an array or an object is set as a property, not converted to an attribute: use .prop
<smart-mimic-symbol :items.prop="items"></smart-mimic-symbol>

Properties

Binding	Type, default	Description
`:label` label	string	Sets or retrieves the equipment tag shown beside the symbol.
`:label-position` labelPosition	MimicSymbolLabelPosition bottom	Sets or retrieves where the tag is rendered.
`:level` level	number?	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` rotate	number 0	Sets or retrieves a rotation in degrees, for symbols that sit in a vertical run.
`:selected` selected	boolean false	Sets or retrieves whether the symbol is drawn as the current selection.
`:state` state	MimicSymbolState normal	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` quality	MimicSymbolQuality good	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` stubs	MimicSymbolStubs auto	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` symbol	string pump	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.
`:symbol-template` symbolTemplate	function?	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` 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

The data of an event is in event.detail. symbolClick reports a click, Enter or Space on the mimic symbol and changes nothing. The application decides what to open.

Event	Description and detail
`@symbolClick`	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

`type MimicSymbolLabelPosition`

'top' | 'bottom' | 'none'

`type MimicSymbolState`

`type MimicSymbolQuality`

'good' | 'uncertain' | 'bad' | 'stale'

`type MimicSymbolStubs`

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