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 JavaScript

The component is a custom element: its properties are set on the element, its events are DOM CustomEvents with the data in event.detail, and its methods are called on the element. The properties can also be written as attributes in kebab case (precision-digits="1").

const mimicSymbol = document.querySelector('smart-mimic-symbol');

mimicSymbol.label = 'P-2101A';
mimicSymbol.addEventListener('symbolClick', (event) => console.log(event.detail));

Properties

Property	Type, default	Description
label	string	Sets or retrieves the equipment tag shown beside the symbol.
labelPosition	'top' | 'bottom' | 'none' bottom	Sets or retrieves where the tag is rendered. top label above the symbol bottom label below the symbol none no label
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	number 0	Sets or retrieves a rotation in degrees, for symbols that sit in a vertical run.
selected	boolean false	Sets or retrieves whether the symbol is drawn as the current selection.
state	'normal' | 'running' | 'stopped' | 'fault' | 'manual' | 'maintenance' | 'unknown' 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. normal in service, nothing to report running running - takes the healthy colour stopped stopped, outline only fault faulted - takes the critical colour manual under manual control, dashed outline maintenance out for maintenance, dashed outline unknown no data from the device
quality	'good' | 'uncertain' | 'bad' | 'stale' 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. good uncertain bad stale
stubs	'auto' | 'both' | 'left' | 'right' | 'bottom' | 'none' 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. auto the connections that symbol normally has both left and right left left only right right only bottom bottom only, for a driver above its machine none no stubs
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.
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	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

'normal' | 'running' | 'stopped' | 'fault' | 'manual' | 'maintenance' | 'unknown'

type MimicSymbolQuality

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

type MimicSymbolStubs

'auto' | 'both' | 'left' | 'right' | 'bottom' | '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