@gokturk413/tank-level-indicator
v1.5.2
Published
Animated liquid level indicator web components with realistic wave effects: liquid-progress-indicator (NEW fluid-meter style), tank-gauge, tank-container, tank-level-indicator. Perfect for ioBroker.webui
Maintainers
gokturk413Readme
Tank Level Göstəricisi Web Components
Tank level göstəricisi üçün 4 ayrı, tam müstəqil web component paketi. Realistik liquid animasiyası və dalğa effektləri ilə.
Quraşdırma
NPM ilə
npm install tank-level-indicatorYarn ilə
yarn add tank-level-indicatorCDN ilə (Script tag)
<script type="module">
import 'https://unpkg.com/tank-level-indicator/index.js';
</script>Başlanğıc
ES Module ilə
import 'tank-level-indicator';
// və ya
import { TankGauge, TankContainer, TankLevelIndicator, LiquidProgressIndicator } from 'tank-level-indicator';Script Tag ilə
<script src="node_modules/tank-level-indicator/tank-gauge.js"></script>
<script src="node_modules/tank-level-indicator/tank-container.js"></script>
<script src="node_modules/tank-level-indicator/tank-level-indicator.js"></script>
<script src="node_modules/tank-level-indicator/liquid-progress-indicator.js"></script>
<tank-level-indicator level="50" color="#4A90E2" animated></tank-level-indicator>Tam İstifadə Nümunəsi
<!DOCTYPE html>
<html>
<head>
<script type="module">
import 'tank-level-indicator';
</script>
</head>
<body>
<div style="display: flex; gap: 15px; align-items: center;">
<tank-gauge min="0" max="100" position="left"></tank-gauge>
<tank-container width="200" height="400" capacity="1000">
<tank-level-indicator level="75" color="#50C878" animated></tank-level-indicator>
</tank-container>
<tank-gauge min="0" max="100" position="right"></tank-gauge>
</div>
</body>
</html>Dinamik Dəyişikliklər
JavaScript ilə level dəyişdirmək:
const indicator = document.querySelector('tank-level-indicator');
indicator.setAttribute('level', '80');
indicator.setAttribute('color', '#FF6B6B');Xüsusiyyətlər
- ✅ Tam müstəqil web componentlər
- ✅ Shadow DOM istifadə edilir
- ✅ Animasiyalı level dəyişikliyi
- ✅ Responsive dizayn
- ✅ Müxtəlif ölçülər dəstəyi
- ✅ Rəng seçimi
- ✅ Realistik tank dizaynı (ayaqlar, outlet, və s.)
- ✅ YENİ: Realistik liquid animasiyası (fluid-meter ilhamında)
- ✅ YENİ: Çoxqatlı dalğa effektləri
- ✅ YENİ: 3D görünüş və işıq effektləri
- ✅ YENİ: Qabarcıq animasiyaları
Demo
Layihəni klonlayın və index.html faylını brauzerdə açın:
git clone https://github.com/yourusername/tank-level-indicator.git
cd tank-level-indicator
# index.html faylını brauzerdə açınBrowser Dəstəyi
- Chrome 54+
- Firefox 63+
- Safari 10.1+
- Edge 79+
API Sənədləşdirmə
TankGauge Class
class TankGauge extends HTMLElement {
// Atributlar
min: string; // Minimum dəyər
max: string; // Maksimum dəyər
position: string; // "left" və ya "right"
unit: string; // Ölçü vahidi
}TankContainer Class
class TankContainer extends HTMLElement {
// Atributlar
width: string; // Tank eni (px)
height: string; // Tank hündürlüyü (px)
capacity: string; // Həcm (litr)
}TankLevelIndicator Class
class TankLevelIndicator extends HTMLElement {
// Atributlar
level: string; // Səviyyə (0-100)
color: string; // Maye rəngi (hex)
animated: boolean; // Animasiya
// Metodlar
updateLevel(level: string): void;
}LiquidProgressIndicator Class (YENİ)
class LiquidProgressIndicator extends HTMLElement {
// Atributlar
level: string; // Cari dəyər
min: string; // Minimum dəyər (default: 0)
max: string; // Maksimum dəyər (default: 100)
color: string; // Maye rəngi (hex)
size: string; // Ölçü (px)
border-color: string; // Kənar rəngi
border-width: string; // Kənar qalınlığı
show-percentage: boolean; // Faiz göstər
show-value: boolean; // Dəyər göstər
unit: string; // Vahid (L, ml, və s.)
animated: boolean; // Animasiya (dalğa və qabarcıqlar)
}Liquid Progress Indicator Xüsusiyyətləri:
- Realistik dalğa animasiyası (çoxqatlı)
- 3D görünüş və işıq effektləri
- Qabarcıq animasiyaları
- Smooth keçidlər
- Tam özelleştirilebilir
İstifadə nümunəsi:
<liquid-progress-indicator
level="75"
min="0"
max="100"
color="#3498db"
size="250"
border-color="#2c3e50"
border-width="10"
show-percentage
animated>
</liquid-progress-indicator>Lisenziya
MIT © 2025
Töhfə
Pull request-lər xoş qarşılanır! Böyük dəyişikliklər üçün əvvəlcə issue açın.
Müəllif
Your Name
Keywords
web-components, tank, level-indicator, gauge, custom-elements, shadow-dom, industrial, iot, scada