Widget Referansı

IronFlock panelleri widget’lardan oluşur. Her widget türü belirli bir amaca hizmet eder — canlı verileri görüntülemekten kullanıcı girişini yakalamaya kadar. Herhangi bir widget’ı widget panelinden panel tuvalinize sürükleyerek ekleyin, ardından ayarlar panelinden yapılandırın.

Widget’lar dört gruba ayrılır: Veri Görselleştirme grafikler ve durum ekranları için, İçerik ve Medya statik ve zengin içerik için, Giriş ve Kontrol giriş yakalamak ve komut göndermek için ve Navigasyon panel sayfaları arasında gezinmek için.

Veri Görselleştirme

Canlı ve geçmiş verileri grafiklere, göstergelere ve durum ekranlarına dönüştüren widget’lar.

Kartezyen Grafik

Zaman serisi veya kategorik verileri çizgi grafikler, çubuk grafikler veya bunların kombinasyonu olarak görüntüler. Aynı grafik üzerinde birden fazla veri serisini destekler.

Ne zaman kullanılır: Sensör değerlerini zaman içinde takip etmek, birden fazla sinyali yan yana karşılaştırmak, günlük toplamları çubuk olarak göstermek.

Yapılandırdıklarınız:

• Uygulamanızdaki bir veri sütununu işaret eden bir veya daha fazla veri serisi
• Seri başına grafik türü: çizgi, çubuk veya kabarcık
• X ekseni türü: zaman tabanlı veya kategorik
• Y ekseni etiketi ve zaman penceresi (örn. dakika bazında toplanan son 5 dakika)
• Seri başına renkler

Gösterge

Renkli eşik bölgeleriyle tek bir canlı değeri gösteren dairesel bir gösterge.

Ne zaman kullanılır: Yeşil/sarı/kırmızı bölgelerle anlık durum istediğiniz sıcaklık, basınç, dolum seviyesi veya herhangi bir değer.

Yapılandırdıklarınız:

• Okunacak veri sütunu (her zaman en son değeri gösterir)
• Birim ve ondalık hassasiyet
• Renk bölgesi sınırları (örn. güvenli: 0–60, uyarı: 60–80, kritik: 80–120)
• İsteğe bağlı: gürültüyü azaltmak için son N okumayı ortala

Değer Gösterimi

Etiketler ve birimlerle bir veya daha fazla tek değer gösterir. Temiz ve minimal — KPI kartları için harika.

Ne zaman kullanılır: Mevcut sıcaklığı, çalışma süresini, son olayı veya herhangi bir temel metriği sayı olarak gösterme.

Yapılandırdıklarınız:

• Her biri etiket ve birimle birlikte bir veya daha fazla veri sütunu
• Ondalık hassasiyet
• Değer başına metin renkleri

Sinyal

Mevcut değere göre renk değiştiren kompakt durum göstergeleri — daireler veya kareler — anlık durum panosu sağlar.

Ne zaman kullanılır: Cihaz çevrimiçi/çevrimdışı panoları, birçok varlık genelinde Tamam/uyarı/hata durumları, eşik tabanlı durum ışıkları.

Yapılandırdıklarınız:

• Her biri bir veri sütunu okuyan bir veya daha fazla sinyal
• Sinyal başına renk eşleme kuralları: tam eşleşmeler (örn. ONLINE) veya sayısal karşılaştırmalar (örn. >=70)
• Düzen (yatay veya dikey) ve şekil (daire veya kare)
• İsteğe bağlı başlık ve alt başlık

Halka Grafik

Oransal segmentler gösteren dairesel bir grafik.

Ne zaman kullanılır: Dağılımı gösterme — örn. çevrimiçi ve çevrimdışı cihazlar, ürün türüne göre üretim payı.

Yapılandırdıklarınız:

• Her biri etiket, renk ve veri sütunuyla (veya sabit değerle) segmentler
• Kesim boyutu (iç delik çapını kontrol eder)

Tablo

Yapılandırılabilir sütunlarla bir tabloda veri satırları görüntüler.

Ne zaman kullanılır: Makine listesi, son olaylar, denetim kayıtları veya herhangi bir yapılandırılmış veri kümesi gösterme.

Yapılandırdıklarınız:

• Her biri başlık, veri sütunu ve görüntüleme türüyle sütunlar
• Satır yüksekliği ve başlık yazı tipi boyutu
• Görüntülenecek satır sayısı

Sütun görüntüleme türleri: düz metin, sayı, durum (değerleri renklere eşler), boolean, resim veya düğme (tıklanabilir bağlantı).

Isı Haritası

İki boyut boyunca yoğunluğu görselleştirmek için ızgara tabanlı bir ısı haritası.

Ne zaman kullanılır: Saat ve haftanın günü bazında enerji tüketimi, vardiya başına makine kullanımı, zaman içindeki anomali kalıpları.

Yapılandırdıklarınız:

• X ekseni (örn. günün saati) ve Y ekseni (örn. haftanın günü) sütunları
• Isı yoğunluğu için değer sütunu
• Min/maks ölçeği ve sürekli veya aşamalı renk gradyanı kullanılıp kullanılmayacağı

Durum Geçmişi

Durumların zaman içinde ne zaman değiştiğini gösteren, varlık başına bir satır içeren yatay bir zaman çizelgesi.

Ne zaman kullanılır: Makine durum geçmişi (çalışıyor / durduruldu / bakımda), vardiya günlükleri, olay zaman çizelgeleri.

Yapılandırdıklarınız:

• Durum adları ve renkleri (örn. Çalışıyor = yeşil, Arıza = kırmızı)
• Zaman damgası, durum değeri ve varlık adı için veri sütunları

Harita

Etkileşimli bir haritada coğrafi verileri görüntüler. Daire işaretçileri ve izleme çizgilerini destekler.

Ne zaman kullanılır: Cihaz konumlarını, araç takibini, saha varlık pozisyonlarını gösterme.

Yapılandırdıklarınız:

• Harita stili (açık veya koyu)
• Bir veya daha fazla seri: daireler (son konum işaretçileri) veya çizgiler (hareket izleri)
• Enlem ve boylam için veri sütunları
• Verileri cihaz veya varlığa göre bölmek için pivot sütun

SCADA

ThingsBoard SCADA kütüphanesinden canlı veri bağlamaları ve durum tabanlı renklendirmeyle pompalar, vanalar, tanklar, motorlar, borular, göstergeler gibi etkileşimli endüstriyel SVG sembollerini görüntüler.

Ne zaman kullanılır: Proses diyagramları ve tesis mimetikleri — pompaların, vanaların, tankların ve akışların canlı durumunu bir şema üzerinde gösterme.

Yapılandırdıklarınız:

• Görüntülenecek sembol türü
• Sembolün durumunu yönlendiren veri bağlamaları (çalışıyor/durduruldu, açık/kapalı, sıvı seviyeleri)
• Durum renkleri (çalışıyor, durduruldu, uyarı, kritik) ve diğer sembol başına stil ayarları

Tam proses ekranları oluşturmak için bkz. SCADA.

İçerik ve Medya

Statik ve zengin içerik için widget’lar — resimler, biçimlendirilmiş metin ve gömülü web sayfaları.

Resim

URL’den statik bir resim görüntüler. Logolar, diyagramlar veya öğretici grafikler için kullanışlıdır.

Resim Kaplama

Canlı veri değerlerini bir arka plan resminin üzerine yerleştirir — kat planları, diyagramlar veya şemalar için harika.

Ne zaman kullanılır: Sıcaklıkları fabrika kat planının üzerine kaplama, tank diyagramında dolum seviyelerini gösterme.

Yapılandırdıklarınız:

• Arka plan resmi URL’si
• Kaplama pinleri: resim üzerinde göreli koordinatlara yerleştirilmiş ilerleme çubukları veya metin etiketleri
• Her pin için veri sütunu (canlı değer veya sabit)

Markdown

Sözdizimi vurgulamalı kod blokları ve canlı değişken enterpolasyonu ile Markdown (CommonMark ve GitHub Flavored Markdown) görüntüler.

Ne zaman kullanılır: Biçimlendirilmiş metni canlı veri değerleriyle harmanlayan belge panelleri, talimatlar veya dinamik notlar.

Yapılandırdıklarınız:

• Markdown kaynak metni
• Metinde {{variableName}} aracılığıyla başvurulan değişkenler; her biri bir veri sütununa veya sabit değere bağlı

Etiket

Tipografi ve hizalama üzerinde tam kontrol ile tek bir yapılandırılabilir metin etiketi görüntüler.

Ne zaman kullanılır: Bölüm başlıkları, açıklamalar, statik ek açıklamalar veya metin olarak görüntülenen tek bir dinamik değer.

Yapılandırdıklarınız:

• Görüntülenecek metin (satır sonları korunur)
• Yazı tipi boyutu, rengi, kalınlığı ve stili
• Yatay ve dikey hizalama ile arka plan rengi

Gömülü İçerik

Harici web içeriğini yalıtılmış bir iframe’e gömer — tek bir sayfa veya duyarlı bir ızgarada düzenlenmiş birkaç sayfa.

Ne zaman kullanılır: Üçüncü taraf panoları, belgeleri, harici araçları veya web üzerinden erişilebilen herhangi bir sayfayı bir panele entegre etme.

Yapılandırdıklarınız:

• Gömülecek URL (hedef site iframe yerleştirmeye izin vermelidir)
• İçeriğin üzerinde görünen isteğe bağlı başlık
• Çoklu gömme modu: yapılandırılabilir boşlukla ızgarada düzenlenmiş birden fazla URL

Giriş ve Kontrol

Kullanıcı girişini yakalayan veya komutları ve filtreleri platforma geri gönderen widget’lar.

Form

Kullanıcı girişini uygulamanızın veri arka ucuna yazan yapılandırılabilir bir veri girişi formu.

Ne zaman kullanılır: Manuel veri yakalama — denetim kayıtları, bakım günlükleri, operatör girişi, parametre ayar noktaları.

Yapılandırdıklarınız:

• Çeşitli türlerde form alanları: metin, sayı, onay kutusu, metin alanı, açılır menü, tarih/saat
• Alan başına seçenekler: etiket, zorunlu, varsayılan değer, doğrulama, min/maks ve hedef veri sütunu
• İsteğe bağlı başlık, alt başlık ve formun bir iletişim kutusunda açılıp açılmayacağı

Anahtar

Canlı bir değeri yansıtan ve çevrildiğinde bir cihaz eylemini tetikleyen bir veya daha fazla Material Design açma/kapama anahtarı.

Ne zaman kullanılır: Ekipmanı açma/kapama, ikili cihaz ayarlarını değiştirme, panodan kontrol komutları gönderme.

Yapılandırdıklarınız:

• Her biri bir veri sütunu okuyan bir veya daha fazla anahtar
• AÇIK/KAPALI durum eşlemesi: tam değerler veya sayısal karşılaştırmalar (örn. >50)
• Geçişte çağrılan hedef uygulama, cihaz ve eylem konusu
• Anahtar başına etiket ve değer renkleri

Filtre Açılır Menüsü

Seçilen değeri diğer widget’ların tüketmesi için filtre parametresi olarak yayınlayan önceden tanımlanmış seçeneklerin açılır menüsü.

Ne zaman kullanılır: Kullanıcıların tüm panoyu cihaz türüne, hatta, konuma veya herhangi bir kategoriye göre filtrelemesine izin verme.

Yapılandırdıklarınız:

• Açılır menünün üzerinde gösterilen etiket
• Diğer widget’ların veri sorgularında başvurduğu parametre anahtarı
• Her biri etiket ve değer içeren seçenekler listesi

Filtre Takvimi

Diğer widget’lar için seçilen zaman damgalarını filtre parametreleri olarak saklayan tek tarih veya aralık seçici — tarih/saat aralığı seçici.

Ne zaman kullanılır: Zaman serisi panoları, geçmiş analizi ve kullanıcı tarafından seçilebilen zaman penceresine sahip raporlar.

Yapılandırdıklarınız:

• Başlangıç ve bitiş parametre anahtarları (tek tarih modu için birini, aralık için ikisini de kullanın)
• Aynı anda gösterilen ay sayısı (1–3)
• Giriş etiketi

Navigasyon

Çok sayfalı bir panelin sayfaları ve bölümleri arasında gezinmek için widget’lar.

Gezinti Çubuğu

Tıklanabilir başlık veya marka ve birden fazla yönlendirilmiş öğe içeren yatay üst gezinti çubuğu.

Ne zaman kullanılır: Çok sayfalı bir panelin sayfaları arasında üst düzey gezinti.

Yapılandırdıklarınız:

• Başlık/marka metni ve hedef rotası
• Her biri etiket, Material ikonu ve rota içeren gezinti öğeleri
• Yazı tipi boyutu, kalınlığı ve renkleri
• {{variable}} değişimi aracılığıyla dinamik rota segmentleri

Gezinti Düğmesi

Başka bir sayfaya yönlendiren veya tarayıcı geri navigasyonu gerçekleştiren tek bir tıklanabilir düğme.

Ne zaman kullanılır: Geri düğmeleri, harekete geçirici bağlantılar veya belirli bir pano görünümüne atlama.

Yapılandırdıklarınız:

• Düğme etiketi ve isteğe bağlı Material ikonu
• Hedef rota (otomatik geri navigasyon için boş bırakın)
• Yazı tipi boyutu ve renkleri
• {{variable}} değişimi aracılığıyla dinamik rota segmentleri

Yan Navigasyon

Material ikonları ve etkin öğenin rota tabanlı vurgulanmasıyla dikey yan menü.

Ne zaman kullanılır: Birkaç bölüm veya görünüme sahip panolar için kalıcı yan navigasyon.

Yapılandırdıklarınız:

• İsteğe bağlı rotaya sahip başlık
• Her biri etiket, Material ikonu ve rota içeren gezinti öğeleri
• Mevcut rotaya göre etkin öğe vurgulaması
• Yazı tipi boyutu, kalınlığı ve renkleri