Ö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

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	`label_1_tspan`
2	Etiket Satırı 2	`label_2_tspan`
3	Referans Değeri 5	`tick_major_5_value`
4	Referans Değeri 4	`tick_major_4_value`
5	Referans Değeri 3	`tick_major_3_value`
6	Referans Değeri 2	`tick_major_2_value`
7	Referans Değeri 1	`tick_major_1_value`
8	Gösterge (Thumb)	`thumb`
9	Ana Değer	`value_tspan`
10	Birim	`label_unit_tspan`
11	Çubuk Aralığı	`barPath`
12	Doluluk Alanı	`barFill`
13	Üst Limit 1	`limit_hi_3`
14	Üst Limit 2	`limit_hi_2`
15	Üst Limit 3	`limit_hi_1`
16	Alt Limit 1	`limit_lo_1`
17	Alt Limit 2	`limit_lo_2`
18	Alt Limit 3	`limit_lo_3`
19	Ana CSS Sınıfı	`custom_control_root`

DATA JSON Arayüzü

{
    "value": "20",
    "label1": "Custom Bar label 1",
    "label2": "Custom Bar label 2",
    "unit": "",
    "ticks": [
        "0",
        "10",
        "20",
        "50",
        "100"
    ],
    "parameters": {
        "pMin": -20,
        "pMax": 200,
        "pLimitHi1": {
            "enabled": true,
            "value": 150
        },
        "pLimitHi2": {
            "enabled": true,
            "value": 170
        },
        "pLimitHi3": {
            "enabled": true,
            "value": 190
        },
        "pLimitLo1": {
            "enabled": true,
            "value": 20
        },
        "pLimitLo2": {
            "enabled": true,
            "value": -10
        },
        "pLimitLo3": {
            "enabled": true,
            "value": -15
        }
    },
    "theme": {
        "barBorder": "",
        "barPath": "",
        "barLFill": "",
        "barRFill": "",
        "thumb": ""
    },
    "general": {
        "rootClass": ""
    }
}

Gelişmiş: Özel Bargraph İkonları

Bar grafikler, farklı durumları veya eğilimleri göstermek için çeşitli ikonlar görüntüleyebilir. Örneğin, bir değerin artıp artmadığını veya azaldığını belirtmek için ok ikonları kullanılabilir.

CoDeSys’te Bargraph İkon Ayarları

Bu örnekte Icon özelliği 0 olarak ayarlanmıştır, yani herhangi bir ikon gösterilmez. Bir ikon görüntülemek için Icon özelliğinin değeri 1 veya 2 olarak değiştirilebilir. Bu değerler, iki önceden tanımlanmış ikon durumu arasında geçiş yapmayı sağlar ve böylece bar grafik içinde dinamik görsel geri bildirim sunar. İkonların kendisi ilgili SVG öğesi içinde tanımlanır.

Bu sayfada: