@gokturk413/scada-pipe-component NPM

SCADA Pipe Component

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

Installation

npm install scada-pipe-component

Usage

Import the components in your JavaScript file:

import 'scada-pipe-component';

Or include it directly in your HTML:

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

Horizontal/Vertical Pipe

<!-- Horizontal pipe with flow animation -->
<pipe-component 
    direction="horizontal" 
    width="300" 
    height="20" 
    color="#3498db" 
    flow="true">
</pipe-component>

<!-- Vertical pipe -->
<pipe-component 
    direction="vertical" 
    width="200" 
    height="20" 
    color="#e74c3c" 
    flow="false">
</pipe-component>

Curved Pipe

<!-- 90-degree curved pipe with flow animation -->
<curved-pipe 
    size="100" 
    color="#3498db" 
    flow="true" 
    direction="top-right">
</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')