Pages

Özel Bar Grafiği (Custom Bargraph)

Custom Bargraph kontrolü, gerçek zamanlı verileri yatay veya dikey çubuk grafik olarak görselleştirmek için tasarlanmış güçlü ve özelleştirilebilir bir bileşendir.
Sıcaklık, basınç veya doluluk seviyesi gibi analog değerlerin izlenmesi için idealdir.

Genel Bakış

Bu kontrol yalnızca bir değişkene bağlı sürekli güncellenen bir çubuk grafik göstermekle kalmaz, aynı zamanda sayısal değer, birim, etiket ve alarm eşikleri de sunarak sistem durumlarının hızlı ve sezgisel yorumlanmasını sağlar.

Temel Özellikler

Dinamik Veri Gösterimi

  • Gerçek zamanlı bir veri değişkenine bağlanır (örneğin CODESYS veya MQTT).
  • Çubuğun yüksekliği/uzunluğu canlı değeri yansıtır.

Sayısal Değer ve Birim

  • Mevcut değeri sayısal olarak çubuğun yanında gösterebilirsin.
  • Bağlamsal anlam için birim eklenebilir (örn. °C, %, bar).

Özel Etiketler

  • Maksimum iki etiket tanımlanabilir (örn. “Giriş Basıncı”, “Maks. Güvenli Seviye”).
  • Görsel değerin tanımlanması veya sınıflandırılması için kullanılır.

Ara İşaretler

  • Grafik üzerinde en fazla 5 adet referans değeri (tick) gösterilebilir.
  • Örnek: “Optimal”, “Kritik”, “Uyarı” gibi aralıkların belirtilmesi.

Alarm Eşikleri

  • En fazla 6 alarm limiti tanımlanabilir.
  • Her eşik değeri, kritik aralığa girildiğinde görsel olarak gösterilir ve operatörün hızlı tepki vermesini sağlar.

Özelleştirilebilir Görünüm

  • Renkler, çubuk yönü (yatay/dikey) ve stil kullanıcı arayüzüne uygun şekilde ayarlanabilir.

Kullanım Senaryoları

Süreç İzleme

  • Örnek: Tank doluluk seviyesi veya pompa basıncının aşım/eksik uyarılarıyla gösterimi

Çevresel Veriler

  • Örnek: Sıcaklık veya nemin güvenli ve tehlikeli bölgelerle görselleştirilmesi

Üretim Hatları

  • Örnek: Hız, yük veya parça sayısı takibi; belirlenen sınırların aşılması durumunda uyarı durumu

SVG ID Referans Tablosu

[img_1]

Aşağıdaki SVG ID’leri, Custom Bargraph bileşenindeki dinamik elemanlara veri bağlamak için kullanılır:

# Eleman SVG ID
1 Etiket Satırı 1 [code_block_0]
2 Etiket Satırı 2 [code_block_1]
3 Referans Değeri 5 [code_block_2]
4 Referans Değeri 4 [code_block_3]
5 Referans Değeri 3 [code_block_4]
6 Referans Değeri 2 [code_block_5]
7 Referans Değeri 1 [code_block_6]
8 Gösterge (Thumb) [code_block_7]
9 Ana Değer [code_block_8]
10 Birim [code_block_9]
11 Çubuk Aralığı [code_block_10]
12 Doluluk Alanı [code_block_11]
13 Üst Limit 1 [code_block_12]
14 Üst Limit 2 [code_block_13]
15 Üst Limit 3 [code_block_14]
16 Alt Limit 1 [code_block_15]
17 Alt Limit 2 [code_block_16]
18 Alt Limit 3 [code_block_17]
19 Ana CSS Sınıfı [code_block_18]

DATA JSON Arayüzü

[code_block_19]