7. Genel Tasarım — Dynamic Text
Bu adımda Dynamic Text widget'ın görsel kişiliği kazanır: format string, metin rengi, hizalama, ikon ve dalga animasyonu. Format string {value} placeholder'ı ile değeri biçimlendirir.
Sihirbaz rotası: /cartography/add/generaldesign
Ön Koşul
Dynamic Text akışının 1, 2, 3, 4. adımları tamamlanmış olmalıdır (5, 6 atlanır).
1. Ekran Düzeni
Sol tarafta yapılandırma formu, sağ tarafta canlı kart önizlemesi yer alır.
2. Text Settings
| Alan | Açıklama |
|---|---|
| Text Content | Şablon — {value} placeholder'ı kullanılabilir |
| Default Text Color | Yazı rengi |
| Text Position | Sol / Orta / Sağ hizalama |
| Font Size | Genel yazı boyutu (px) |
{value} Placeholder
Compass kaydından gelen değer {value} placeholder'ının yerine yazılır. Örn. Text Content = Bugünkü Üretim: {value} ve değer 1245 ise kart Bugünkü Üretim: 1245 gösterir.
3. Format
Sayısal değerler için format string. Default dışında 5 öntanımlı seçenek vardır:
| Format | Açıklama | Örnek |
|---|---|---|
| Default | Format uygulanmaz | 1245 |
| With Percent | Sayının sonuna % ekler |
92.5% |
| With Dollar | $ prefix ekler |
$1,245.50 |
| With Euro | € prefix ekler |
€1,245.50 |
| With TL | ₺ prefix veya TL suffix |
1.245,50 ₺ |
| With Pound | £ prefix ekler |
£1,245.50 |
Format Seçim Rehberi
| Senaryo | Format |
|---|---|
| OEE, doluluk yüzdesi | With Percent |
| Türk lirası ciro | With TL |
| USD ihracat | With Dollar |
| EUR ihracat | With Euro |
| Adet, sayım | Default |
4. Icon and Wave
Kart üst alanında dekoratif ikon ve dalga animasyonu.
| Alan | Açıklama |
|---|---|
| Show Icon and Wave | İkon ve dalga görünürlüğü (toggle) |
| Default Wave Color | Dalga rengi |
| Select Icon | Preset ikon listesinden seçim |
| Upload Image | Custom görsel yükleme |
| Icon/Image Size | İkon boyutu (px) |
| Default Icon Color | İkon rengi |
Dynamic Text İkon Eşleştirme
- OEE: 📊 chart ikonu
- Üretim adedi: 🏭 fabrika ikonu
- Ciro: 💰 para ikonu
- Sıcaklık: 🌡️ termometre ikonu
5. Onaylama
Sağ üstteki Next butonuna tıkladığınızda flow.hasGeneralDesign = true işaretlenir.