Tables

Çevrimiçi Tablo

Çevrimiçi Tablo, sistem değişkenlerinin gerçek zamanlı izlenmesi için tasarlanmıştır. Basic veya Editable tablolardan farklı olarak, SQL veritabanına bağlanmaz. Bunun yerine, değerler doğrudan çalışan bir CODESYS denetleyicisinden alınır.

Bu tablo, güncel işlem değerlerinin, durum geri bildirimlerinin veya canlı sensör okumalarının doğrudan görselleştirilmesi gereken senaryolar için idealdir.

Desteklenen veri türleri:

  • BOOL, INT, DINT, REAL, STRING (CODESYS değişkenlerinden)
  • Dizi ve yapılar (ör. sensör durum tabloları)

Önemli:
Çevrimiçi Tablo salt okunurdur – kullanıcılar burada veri düzenleyemez. Yalnızca görüntüleme amaçlıdır.

Tüm tablo türlerinde olduğu gibi, bu tablo da ortak izin modeline (Read, Insert, Update, Delete) uyar – ancak burada yalnızca Read işlevseldir.

⚠️ Çevrimiçi tabloyu karma olarak kullanmak mümkündür. Yani giriş ve çıkış alanları, geçiş anahtarları ve satır seçimi ile birlikte kullanılabilir.

CoDeSys'te Gerekli Adımlar

PlcVisu'yu kullanmak için bazı adımlar zorunludur ve [*] ile işaretlenmiştir.
Bunlara her durumda ihtiyacınız olacak.

[1] WebSocket sunucusunu kaydet *

PROGRAM PLC_PRG VAR, wsInst : PLcVisu.wsInitFB; // İletişim başlatma için WS örneği, END_VAR

[2] Kütüphaneyi projeye kopyala *

Kaynak: https://doc.plcvisu.cloud/tr/downloads.html

[3] Daha iyi genel bakış için yeni bir dizin ve program oluşturun.

Yeni bir klasör ekleyin. Örneğin: 07_OnlineTable
Yeni bir program ekleyin. Örneğin: onlineTablePrg
Programı yeni bir 500ms'lik Görevden çağırın (daha hızlısı gerekli değil)

[4] Aşağıdaki 4 yapıyı oluşturun

Aşağıdaki yapılar, aşağıdaki parametrelere sahip bir tabloya dayanmaktadır:
Satır sayısı = MAXROW
Sütun sayısı = 5

Sütun türü
No.1 - Metin
No.2 - Metin
No.3 – Giriş alanı
No.4 – Çıkış alanı
No.5 - Geçiş anahtarı

Yapı #1 = ÇevrimiçiTablo

TYPE OnlineTable : STRUCT structure : OnlineTableStructure; data : OnlineTableData; meta : PLCVisu.OnlineTableMeta; END_STRUCT END_TYPE

Yapı #2 = OnlineTableData

  • Satır sayısını tanımlayın
TYPE OnlineTableData :
STRUCT
rows : ARRAY [0..onlineTablePrg.MAXROW] OF OnlineTableRow; // Satır sayısı. select-, toggle- veya input- fonksiyonlarıyla, lütfen Index = 0 ile başlayın
END_STRUCT
END_TYPE

Yapı #3 = OnlineTableRow

  • Bir satırdaki sütun sayısını ve türünü tanımlar
    TYPE OnlineTableRow :
STRUCT
Device : PlcVisu.OnlineTableText; // Sütun #1 TEXT türündedir
status : PlcVisu.OnlineTableText; // Sütun #2 TEXT türündedir
input_field : PlcVisu.OnlineTableInput; // Sütun #3 REAL türünde giriş alanıdır
output_field : PlcVisu.OnlineTableNumber; // Sütun #4 REAL türünde çıkış alanıdır
toggleswitch : PlcVisu.OnlineTableToggle; // Sütun #5 BOOL türünde geçiş anahtarıdır
meta : PlcVisu.OnlineTableRowMeta; // Meta her zaman gereklidir
END_STRUCT
END_TYPE

Yapı #4 = ÇevrimiçiTablo Yapıları

  • bir satırdaki sütun sayısını tanımlar

    TYPE OnlineTableStructure :
STRUCT
Columns : ARRAY[1..5] OF PlcVisu.OnlineTableColumn;
END_STRUCT
END_TYPE

    [5] Etiket Oluşturma

  • Bir kere yapmanız gereken bazı noktalar var. Örnek...

    EĞER xInit = FALSE
O ZAMAN
onlineTable.structure.columns[1].UIType := 'text';
onlineTable.structure.columns[1].name := 'device';
onlineTable.structure.columns[1].title := '{{description'; // 1. sütun için yer tutucu metin
onlineTable.structure.columns[2].UIType := 'text';
onlineTable.structure.columns[2].name := 'status';
onlineTable.structure.columns[2].title := '{{status'; // 2. sütun için yer tutucu metin
onlineTable.structure.columns[3].UIType := 'input';
onlineTable.structure.columns[3].name := 'giriş_alanı';
onlineTable.structure.columns[3].title := '{{giriş_alanı'; // 3. sütun için yer tutucu metin
onlineTable.structure.columns[4].UIType := 'sayı';
onlineTable.structure.columns[4].name := 'çıkış_alanı';
onlineTable.structure.columns[4].title := '{{çıkış_alanı'; // 4. sütun için yer tutucu metin
onlineTable.structure.columns[5].UIType := 'geçiş';
onlineTable.structure.columns[5].name := 'geçiş anahtarı';
onlineTable.structure.columns[5].title := '{{geçiş anahtarı'; // 5. sütun için yer tutucu metin
// 1. Sütun
Döngü := 0'dan MAKSİMUM SATIR'a 1 artırarak DÖNGÜ
tmpStr := '{{value_'; // Bu yer tutucu, çok dilli metin çıktısı için PlcVisu'yu kullanacaktır
tmpStr := ConCat(tmpStr,INT_TO_STRING(Döngü));
tmpStr := ConCat(tmpStr,'_text}}');
onlineTable.data.rows[Döngü].device.value := tmpStr;
onlineTable.data.rows[Döngü].output_field.meta.numberFormat := '0.00'; // Görüntülenecek değerleri biçimlendirin
END_FOR;
// Sütun #4 - Tabloda gösterilecek varsayılan değerlerle 4. sütunda görüntülenecek diziyi doldurun
Döngü := 0'dan MAKSİMUM SATIR SAYISI 1'e kadar
Döngü
rDizi_Çıktısı[Döngü] := Döngü + (Döngü * 0.1);
Döngü SONU
ButtonEnableAll := TRUE; // Başlangıçta tüm satırları göster
xInit := TRUE; // Başlatma tamamlandı
eğer sonu

    [6] Döngüsel kısım oluşturma

  • Giriş alanı: Tablodan değişkene

    // ------------------------------------------------
// Sütun #3 Giriş_alanı
// -------------------------------------------------
FOR Döngüsü := 1'den MAKSİMUM SATIR'a 1 artır
DO
rArray_Input[Döngü]:= onlineTable.data.rows[Döngü].giriş_alanı.değer;
END_FOR

  • Çıktı alanı: Tabloya değişken

    // --------------------------------------------------------
// Sütun #4 Çıktı_alanı
// --------------------------------------------------------
FOR Loop := 1 TO MAXROW BY 1 
     DO
onlineTable.data.rows[Loop].output_field.value := rArray_Output[Loop]; 
    END_FOR

  • ToggleSwitch: normalde her iki yönde de

       // ---------------------------------------------- 
   // Sütun #5 ToggleSwitch
   // ---------------------------------------------- 
   FOR Loop := 1 TO MAXROW BY 1 
   DO 
     xToggleArray[Loop]:= onlineTable.data.rows[Loop].toggleswitch.value;
  END_FOR

  • onlineTable.meta.selectedIndex değişkeninden satır seçimi yaparak seçilen satırın numarasını alırsınız.

Daha önce hiçbir satır seçilmediyse -1 alırsınız.

Seçilen satırın metnini kendi renginizle işaretleyin.
Bu değişkenin değerini değiştirerek satırın tamamının çıktı rengini değiştirebilirsiniz:
onlineTable.data.rows[onlineTable.meta.selectedIndex].meta.extraclass
Bunu kullanmak için PLC-Visu'nun CSS işlevselliğiyle çalışmanız gerekir.

Satır seçimi örneği

// --------------------------------------------------------   
// a new row was selected
// -------------------------------------------------------- 
IF ( onlineTable.meta.selectedIndex <> SelectedIndexOld ) AND // selectedIndex has changed
   ( onlineTable.meta.selectedIndex >= 0                )     // Cause the selectedIndex starts with -1
THEN
  FOR Loop := 0 TO MAXROW BY 1 
  DO
    onlineTable.data.rows[Loop].meta.extraclass   := '';
  END_FOR 
  onlineTable.data.rows[onlineTable.meta.selectedIndex].meta.extraclass   := 'mygreen'; // Set over CSS
  ButtonEnableAll := FALSE;  
END_IF
SelectedIndexOld := onlineTable.meta.selectedIndex;

  • Her bir satırı ve sütunu renklendirin.

    onlineTable.data.rows[selected_row].status.meta.color := 'red';   // The name of column #2 is ‘status’

  • Satırı göster/gizle:

Görüntülenmesini engellemek için satırları görünür/görünmez olarak işaretleyebilirsiniz.

onlineTable.data.rows[selected_row].meta.visible := TRUE; // Row will be visible

veya

onlineTable.data.rows[selected_row].meta.visible := FALSE; // Row will be unvisible

[7] Sembol Yapılandırması Oluşturma *

Sembol yapılandırması, CoDeSys ve PlcVisu arasında iletişim kurmak için gereklidir.
onlineTablePrg/onlineTable yapısı için onay kutusunu etkinleştirin.
“Oluştur”a tıklayın.

PlcVisu'da Adımlar

Bağlantı

[1] Bağlantı Oluştur

Burger Menüsü Gösterge Paneli Bağlantı Yeni

Bağlantı adı = “PLC_bağlantısı”
IP Adresi = “eth” (Bu, PlcVisu ve CoDeSys'in aynı cihazda çalıştığı anlamına gelir)
Bağlantı türü = PLC
Port = 80 |443
Protokol = PLC_iletişimi
Yeniden Bağlan = Açık
Yenileme Hızı [ms] = 1000
CODESYS kullanıcı adı = Yönetici
CODESYS şifresi = Yönetici

İşlem başarılı olursa, Durum LED'i yeşile döner.

Bir Tablo Oluşturun.

[1] Tablo Oluştur

Burger Menüsüne basın, Tablolar'ı seçin
Tablolar'da "yeni"yi seçin
Ad: online_table
Başlık: {{my_online_table}}
Tür: Uzaktan

[2] Bu tabloyla sayfa oluşturun

Burger Menüsüne basın → "Sayfalar"ı seçin →
"Yeni"yi seçin
Başlık: page_online_table
Genişlik: 1920
Yükseklik: 980

[3] Tabloyu sayfaya ekleyin.

"page_online_table" sayfasına gidin
Tablolar ekle → Tablo
Öğeyi tercih ettiğiniz boyuta yakınlaştırın.

Tabloya girmeyin ve aşağıdaki parametreleri seçin:
Kontrol özellikleri

  • Tablo

  • Bağlantı

  • Bağlantı Dizesi = 1::Application.onlineTablePrg.onlineTable
    (Bunu [+] tuşuna basarak ve listeden Değişkeni seçerek yapın)

  • Tablo Özellikleri

  • Tabloları Seç = {{my_online_table}}

CSS Düzenleyici

Tam bir satırı yeşil renkte göstermek için extraclass'a ve CSS düzenleyicisinde aşağıdaki girdiye ihtiyacınız olacak.

.mygreen {
           color: green;
         }

Temel Özellikler

  • CODESYS ile doğrudan bağlantı – arada veritabanı katmanı yoktur
  • Gerçek zamanlı veri akışı – sistem durumlarını gecikmesiz gösterir
  • Salt okunur yapı – yalnızca izleme amacıyla kullanılır
  • Dizi ve yapı desteği – ör. kanal listeleri, cihaz/I/O durumları
  • Görsel biçimlendirme – koşullu renkler, ikonlar, hizalama
  • Zamanlı veya olay tabanlı güncelleme – polling veya abonelik (belgesiz)
  • Ortak izin modeli – Read erişimi kullanıcı veya role göre tanımlanabilir
Read
.mygreen { color: green; }
onlineTable.data.rows[selected_row].meta.visible := FALSE; // Row will be unvisible
onlineTable.data.rows[selected_row].meta.visible := TRUE; // Row will be visible
onlineTable.data.rows[selected_row].status.meta.color := 'red'; // The name of column #2 is ‘status’
// -------------------------------------------------------- // a new row was selected // -------------------------------------------------------- IF ( onlineTable.meta.selectedIndex <> SelectedIndexOld ) AND // selectedIndex has changed ( onlineTable.meta.selectedIndex >= 0 ) // Cause the selectedIndex starts with -1 THEN FOR Loop := 0 TO MAXROW BY 1 DO onlineTable.data.rows[Loop].meta.extraclass := ''; END_FOR onlineTable.data.rows[onlineTable.meta.selectedIndex].meta.extraclass := 'mygreen'; // Set over CSS ButtonEnableAll := FALSE; END_IF SelectedIndexOld := onlineTable.meta.selectedIndex;
onlineTable.data.rows[onlineTable.meta.selectedIndex].meta.extraclass
onlineTable.meta.selectedIndex
// ---------------------------------------------- // Sütun #5 ToggleSwitch // ---------------------------------------------- FOR Loop := 1 TO MAXROW BY 1 DO xToggleArray[Loop]:= onlineTable.data.rows[Loop].toggleswitch.value; END_FOR
// -------------------------------------------------------- // Sütun #4 Çıktı_alanı // -------------------------------------------------------- FOR Loop := 1 TO MAXROW BY 1 DO onlineTable.data.rows[Loop].output_field.value := rArray_Output[Loop]; END_FOR
// ------------------------------------------------ // Sütun #3 Giriş_alanı // ------------------------------------------------- FOR Döngüsü := 1'den MAKSİMUM SATIR'a 1 artır DO rArray_Input[Döngü]:= onlineTable.data.rows[Döngü].giriş_alanı.değer; END_FOR
EĞER xInit = FALSE O ZAMAN onlineTable.structure.columns[1].UIType := 'text'; onlineTable.structure.columns[1].name := 'device'; onlineTable.structure.columns[1].title := '{{description'; // 1. sütun için yer tutucu metin onlineTable.structure.columns[2].UIType := 'text'; onlineTable.structure.columns[2].name := 'status'; onlineTable.structure.columns[2].title := '{{status'; // 2. sütun için yer tutucu metin onlineTable.structure.columns[3].UIType := 'input'; onlineTable.structure.columns[3].name := 'giriş_alanı'; onlineTable.structure.columns[3].title := '{{giriş_alanı'; // 3. sütun için yer tutucu metin onlineTable.structure.columns[4].UIType := 'sayı'; onlineTable.structure.columns[4].name := 'çıkış_alanı'; onlineTable.structure.columns[4].title := '{{çıkış_alanı'; // 4. sütun için yer tutucu metin onlineTable.structure.columns[5].UIType := 'geçiş'; onlineTable.structure.columns[5].name := 'geçiş anahtarı'; onlineTable.structure.columns[5].title := '{{geçiş anahtarı'; // 5. sütun için yer tutucu metin // 1. Sütun Döngü := 0'dan MAKSİMUM SATIR'a 1 artırarak DÖNGÜ tmpStr := '{{value_'; // Bu yer tutucu, çok dilli metin çıktısı için PlcVisu'yu kullanacaktır tmpStr := ConCat(tmpStr,INT_TO_STRING(Döngü)); tmpStr := ConCat(tmpStr,'_text}}'); onlineTable.data.rows[Döngü].device.value := tmpStr; onlineTable.data.rows[Döngü].output_field.meta.numberFormat := '0.00'; // Görüntülenecek değerleri biçimlendirin END_FOR; // Sütun #4 - Tabloda gösterilecek varsayılan değerlerle 4. sütunda görüntülenecek diziyi doldurun Döngü := 0'dan MAKSİMUM SATIR SAYISI 1'e kadar Döngü rDizi_Çıktısı[Döngü] := Döngü + (Döngü * 0.1); Döngü SONU ButtonEnableAll := TRUE; // Başlangıçta tüm satırları göster xInit := TRUE; // Başlatma tamamlandı eğer sonu
TYPE OnlineTableStructure : STRUCT Columns : ARRAY[1..5] OF PlcVisu.OnlineTableColumn; END_STRUCT END_TYPE
TYPE OnlineTableRow : STRUCT Device : PlcVisu.OnlineTableText; // Sütun #1 TEXT türündedir status : PlcVisu.OnlineTableText; // Sütun #2 TEXT türündedir input_field : PlcVisu.OnlineTableInput; // Sütun #3 REAL türünde giriş alanıdır output_field : PlcVisu.OnlineTableNumber; // Sütun #4 REAL türünde çıkış alanıdır toggleswitch : PlcVisu.OnlineTableToggle; // Sütun #5 BOOL türünde geçiş anahtarıdır meta : PlcVisu.OnlineTableRowMeta; // Meta her zaman gereklidir END_STRUCT END_TYPE
TYPE OnlineTableData : STRUCT rows : ARRAY [0..onlineTablePrg.MAXROW] OF OnlineTableRow; // Satır sayısı. select-, toggle- veya input- fonksiyonlarıyla, lütfen Index = 0 ile başlayın END_STRUCT END_TYPE
TYPE OnlineTable : STRUCT structure : OnlineTableStructure; data : OnlineTableData; meta : PLCVisu.OnlineTableMeta; END_STRUCT END_TYPE
PROGRAM PLC_PRG VAR, wsInst : PLcVisu.wsInitFB; // İletişim başlatma için WS örneği, END_VAR
Read
Delete
Update
Insert
Read