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 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 pipe = document.querySelector('smart-pipe');

pipe.flowing = true;

Properties

Property	Type, default	Description
elbow	'none' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' none	Sets or retrieves whether the segment turns a corner, and which way. none a straight segment topLeft enters from the bottom, leaves to the left topRight enters from the bottom, leaves to the right bottomLeft enters from the top, leaves to the left bottomRight enters from the top, leaves to the right
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	'horizontal' | 'vertical' horizontal	Sets or retrieves the direction of the segment. horizontal a horizontal run vertical a vertical run
reverse	boolean false	Sets or retrieves whether the flow animation runs the other way, for a line that returns.
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