3.32.3 • Published 12 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
12 months ago
3.32.1
12 months ago
3.32.0
12 months ago
3.31.16
12 months ago
3.31.15
12 months ago
3.31.14
12 months ago
3.31.13
12 months ago
3.31.12
12 months ago
3.31.11
12 months ago
3.31.10
12 months ago
3.31.9
12 months ago
3.31.8
12 months ago
3.31.7
12 months ago
3.31.6
12 months ago
3.31.5
12 months ago
3.31.4
12 months ago
3.31.3
12 months ago
3.31.2
12 months ago
3.31.1
12 months ago
3.31.0
12 months ago
3.30.0
1 year ago
3.20.0
1 year ago
3.10.0
1 year ago
3.0.0
1 year ago
2.0.0
1 year ago
1.0.0
1 year ago