Operator screens and process graphics

Pipe <smart-pipe>

Pipe displays a section of process line on a mimic diagram.

<smart-pipe> · 5 properties, 0 methods, 0 events · source/modules/smart.pipe.js

Usage in Angular

The Angular wrapper is PipeComponent from PipeModule: every property is an input, every event an output named on<Event>, and the methods are called on the component reference from @ViewChild. A method that returns a value returns a Promise of it, resolved once the component has rendered; its ...Sync() twin returns the value at once, or null before the component has rendered. Unknown bindings are rejected at compile time.

import { PipeModule, PipeComponent } from 'smart-industrial/angular/pipe';

<smart-pipe #pipe [flowing]="true"></smart-pipe>

@ViewChild('pipe', { read: PipeComponent }) pipe!: PipeComponent;

Properties

Input	Type, default	Description
[elbow] elbow	PipeElbow none	Sets or retrieves whether the segment turns a corner, and which way.
[flowing] flowing	boolean false	Sets or retrieves whether the line is carrying flow. A flowing pipe animates a marching dash and takes the active colour. With reduced motion the dash stands still and chevrons show the direction.
[orientation] orientation	PipeOrientation horizontal	Sets or retrieves the direction of the segment.
[reverse] reverse	boolean false	Sets or retrieves whether the flow animation runs the other way, for a line that returns.
[thickness] thickness	number 3	Sets or retrieves the stroke width of the line in pixels. The stroke does not scale with the segment, so a long run has the same weight as a short one. 1 to 64; a value that is not a number draws the default 3. The direction chevrons are sized from it.

Types

type PipeElbow

'none' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'

type PipeOrientation

'horizontal' | 'vertical'

CSS variables

The component declares 3 CSS variables; the CSS page shows how to set them.

--smart-pipe-color --smart-pipe-flow-color --smart-pipe-flow-duration