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 React

The React wrapper is the Pipe component: every property is a prop, every event a prop named on<Event> that receives the CustomEvent, and the methods are called on the element through a ref.

import { Pipe } from 'smart-industrial/react/pipe';

const ref = useRef<Pipe>(null);

<Pipe ref={ref} flowing={true} />

Properties

Prop	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