8. Kart Tasarımı — Radial Gauge
Bu adımda Radial Gauge widget'ın dış kart görünümü yapılandırılır. Gauge canlı değer gösterdiği için kısa refresh interval önemlidir.
Sihirbaz rotası: /cartography/add/carddesign
Ön Koşul
Radial Gauge akışının 1, 2, 3, 4. adımları tamamlanmış olmalıdır (5, 6, 7 atlanır).
1. General Settings
| Alan | Açıklama | Birim |
|---|---|---|
| Chart Name | Kartın üst kısmındaki başlık (örn. "Hat-3 OEE") | metin |
| Chart Refresh Interval | Veri yeniden çekme periyodu | saniye |
Radial Gauge için Refresh Interval Önerisi
Gauge anlık değer gösterdiği için kısa refresh önemlidir.
| Veri Kaynağı | Önerilen Refresh |
|---|---|
| MQTT (canlı) | 0 (anlık akış) |
| SQL — sensör verisi | 5 - 10 sn |
| SQL — OEE hesabı | 30 - 60 sn |
| REST API | 60 - 300 sn |
Çok Sık Refresh
Chart Refresh Interval < 5 saniye veritabanı yükünü artırır. Anlık veriyi MQTT üzerinden sağlamak en iyisidir.
2. Card Display
| Alan | Açıklama | Tip |
|---|---|---|
| Card Background Color | Arka plan rengi | renk |
| Card Title Position | Sol / Orta / Sağ | enum |
| Card Title Color | Başlık metin rengi | renk |
| Card Title Font Size | Başlık font boyutu | px |
3. Info Card
Gauge için info card eşik tanımları, hesaplama formülü veya hedef değerleri açıklamak için ideal.
| Alan | Açıklama |
|---|---|
| Show Info Card | Info card görünür mü |
| Info Card Content | Markdown editör |
| Expand Editor | Tam ekran editör |
## OEE Hesaplama
- **Availability** × **Performance** × **Quality**
- Hedef: ≥ 85%
Renk Kodları:
- 🔴 0-60: Kritik
- 🟡 60-85: Uyarı
- 🟢 85-100: Hedef
4. Spacing
| Alan | Açıklama | Birim |
|---|---|---|
| Padding | Kart iç boşluğu | px |
5. Border
| Alan | Açıklama | Birim |
|---|---|---|
| Border Color | Kart kenarlık rengi | renk |
| Border Radius | Köşe yuvarlama yarıçapı | px |
| Border Width | Kenarlık kalınlığı | px |
6. Shadow (varsa)
| Alan | Açıklama |
|---|---|
| Shadow Blur | Gölge yumuşaklığı |
| Shadow Offset X / Y | Gölge yön kayması |
| Shadow Opacity | Gölge şeffaflığı |
7. Onaylama
Sağ üstteki Next butonuna tıkladığınızda flow.hasCardDesign = true işaretlenir.