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 Blazor

The Razor component is <Pipe> in Smart.Blazor.Industrial: every property is a parameter in PascalCase, every event an EventCallback<Event> named On<Event> whose ev["Detail"] is the typed detail class, and the methods are called on the @ref. String choices are enums. In a Blazor Web App (.NET 8 and later) the page needs an interactive render mode, for example @rendermode InteractiveServer; a statically rendered component stays empty.

@using Smart.Blazor.Industrial
@* .NET 8 and later: an interactive render mode, on the page or for the whole app *@
@rendermode InteractiveServer

<Pipe @ref="pipe" Flowing="true" />

@code {
    Pipe pipe;
}

Properties

Parameter	Type, default	Description
Elbow elbow	PipeElbow none	Sets or retrieves whether the segment turns a corner, and which way.
Flowing flowing	bool 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	bool false	Sets or retrieves whether the flow animation runs the other way, for a line that returns.
Thickness thickness	int 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

enum PipeElbow

PipeElbow.None "none" PipeElbow.TopLeft "topLeft" PipeElbow.TopRight "topRight" PipeElbow.BottomLeft "bottomLeft" PipeElbow.BottomRight "bottomRight"

enum PipeOrientation

PipeOrientation.Horizontal "horizontal" PipeOrientation.Vertical "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