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 TypeScript
The package ships its definitions: MimicSymbol is the element type and MimicSymbolProperties the properties, both exported from smart-industrial/source/typescript/smart.industrial. document.querySelector('smart-mimic-symbol') is typed as MimicSymbol.
import { MimicSymbol, MimicSymbolProperties } from 'smart-industrial/source/typescript/smart.industrial';
const mimicSymbol = document.querySelector('smart-mimic-symbol') as MimicSymbol;
mimicSymbol.label = 'P-2101A';
mimicSymbol.addEventListener('symbolClick', (event: CustomEvent) => console.log(event.detail));
Properties
| Property | 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 | 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 | Sets or retrieves a rotation in degrees, for symbols that sit in a vertical run. |
selected | boolean | 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 | 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