3.32.3 • Published 8 months ago
@gokturk413/scada-pipe-component v3.32.3
SCADA Pipe Component
A collection of web components for creating SCADA/HMI pipe visualizations with flow animations.
Installation
npm install scada-pipe-componentUsage
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') |
License
MIT
3.32.3
8 months ago
3.32.1
8 months ago
3.32.0
8 months ago
3.31.16
8 months ago
3.31.15
8 months ago
3.31.14
8 months ago
3.31.13
8 months ago
3.31.12
8 months ago
3.31.11
8 months ago
3.31.10
8 months ago
3.31.9
8 months ago
3.31.8
8 months ago
3.31.7
8 months ago
3.31.6
8 months ago
3.31.5
8 months ago
3.31.4
8 months ago
3.31.3
8 months ago
3.31.2
8 months ago
3.31.1
8 months ago
3.31.0
8 months ago
3.30.0
12 months ago
3.20.0
12 months ago
3.10.0
12 months ago
3.0.0
12 months ago
2.0.0
12 months ago
1.0.0
12 months ago