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 TypeScript

The package ships its definitions: Pipe is the element type and PipeProperties the properties, both exported from smart-industrial/source/typescript/smart.industrial. document.querySelector('smart-pipe') is typed as Pipe.

import { Pipe, PipeProperties } from 'smart-industrial/source/typescript/smart.industrial';

const pipe = document.querySelector('smart-pipe') as Pipe;

pipe.flowing = true;

Properties

Property	Type, default	Description
elbow	PipeElbow none	Sets or retrieves whether the segment turns a corner, and which way.
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	PipeOrientation horizontal	Sets or retrieves the direction of the segment.
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