SCADA Pipe Component

A collection of web components for creating SCADA/HMI pipe visualizations with flow animations.

Installation

1npm install scada-pipe-component

Usage

Import the components in your JavaScript file:

1import 'scada-pipe-component';

Or include it directly in your HTML:

1<script src="node_modules/scada-pipe-component/index.js"></script>

Horizontal/Vertical Pipe

1<!-- Horizontal pipe with flow animation -->
2<pipe-component 
3    direction="horizontal" 
4    width="300" 
5    height="20" 
6    color="#3498db" 
7    flow="true">
8</pipe-component>
9
10<!-- Vertical pipe -->
11<pipe-component 
12    direction="vertical" 
13    width="200" 
14    height="20" 
15    color="#e74c3c" 
16    flow="false">
17</pipe-component>

Curved Pipe

1<!-- 90-degree curved pipe with flow animation -->
2<curved-pipe 
3    size="100" 
4    color="#3498db" 
5    flow="true" 
6    direction="top-right">
7</curved-pipe>

Properties

Pipe Component

Property	Type	Default	Description
direction	string	'horizontal'	Pipe direction ('horizontal' or 'vertical')
width	number	100	Width of the pipe in pixels
height	number	20	Height/thickness of the pipe in pixels
color	string	'#3498db'	Color of the pipe
flow	boolean	false	Enable/disable flow animation

Curved Pipe Component

Property	Type	Default	Description
size	number	100	Size of the curved pipe container in pixels
color	string	'#3498db'	Color of the pipe
flow	boolean	false	Enable/disable flow animation
direction	string	'top-right'	Curve direction ('top-right', 'top-left', 'bottom-right', 'bottom-left')

License

MIT