inSCADA
TR
TR
  • Giriş
  • Başlarken
  • Kullanıcı Arayüzü
    • Ana Sayfa
    • Geliştirme
      • Projeler
      • Bağlantılar
      • Cihazlar
      • Değişkenler
      • Alarm
        • Alarm Grupları
        • Alarmlar
      • Animasyonlar
        • Get
        • Color
        • Rotate
        • Move
        • Opacity
        • Bar
        • Click
        • Tooltip
        • Access
        • Chart
        • Visibility
        • Slider
        • IFrame
        • Datatable
        • Get Symbol
        • QR Code
      • Trendler
      • Scriptler
      • İfadeler
      • Raporlar
        • Custom Report
        • Raporlar
      • Süreçler
      • Yedekle / İçe Aktar
      • Veri Transferleri
      • Anahtar Kelime
      • Languages
      • Custom Tables
        • Custom Table
        • Custom Table SQL
      • Info
    • Kullanıcı Menüsü
      • Kullanıcılar
      • Roller
    • Bildirimler
      • E-Posta
      • SMS
    • Sihirbazlar
      • Gaz Ölçüm
      • HPP Unit
      • Cihaz Kütüphanesi
    • Alarm Tracking
      • Alarm Geçmişi
      • Alarm Monitör
    • Variable Tracking
      • Değişken Geçmişi
      • Değişken İzleme
      • Variable Trace
    • Kontrol Panel
    • Görselleştirme
    • Akış / Kamera
    • Trend Grafik
    • Süreç
    • İşler
    • Proje Haritası
    • Raporlar
    • Logs
      • Günlükler
      • Yetki Günlükleri
    • Yardım
      • Online Yardım
      • Hakkında
      • Lisans
  • Mimik Tasarım
  • Haberleşme Protokolleri
    • MODBUS
      • Modbus TCP
      • Modbus UDP
      • Modbus RTU Over TCP
      • Modbus TCP Server
      • Modbus RTU Slave Over TCP
    • DNP3
      • DNP3 Master
      • DNP3 Outstation
    • S7 Protokol
    • IEC-104 - Master
    • OPC
      • OPC UA Client
      • OPC DA Client
    • MQTT
  • Programlama
    • APIs
      • Variable Functions
      • Connection Functions
      • Project Functions
      • Alarm Functions
      • Script Functions
      • In-Memory DB Functions
      • System Functions
      • User Functions
      • Date-Time Functions
      • String Functions
      • Notification Functions
      • Confirmation Functions
      • Database Functions
      • Other Functions
  • Veritabanı
  • Faydalı Özellikler
  • Güncelleme Günlüğü
  • Mimari ve Uygulamalar
  • Geliştirme Yol Haritası
  • inSCADA' ya Geçiş
  • Lisanslandırma Politikaları
  • SSS
  • Örnek Ekranlar
  • Yardımcı Araçlar
    • VSTO Excel Add-In
    • S7-PLCSim Connector
  • Kurulumlar
    • Gereksinimler
    • Linux' a Kurulum
    • Windows Kurulum
Powered by GitBook
On this page
  • Color-Expression
  • Color-Switch
  • Color-Switch Gradient
  1. Kullanıcı Arayüzü
  2. Geliştirme
  3. Animasyonlar

Color

PreviousGetNextRotate

Last updated 5 years ago

Color tipinde bir animasyon ile mimik ekran üzerindeki nesnelerin renklerini değiştirebilirsiniz.

Color-Expression

Resim 1'de gösterildiği gibi seçili bir text nesnesinin renginin değiştirilmesi için bir javascript expression uygulanıyor.

Resim 1'de expression kısmına yazılan kodu aşağıda inceleyelim.

// Percent isimli variable alınıyor.
var tag=ins.getVariableValue("Percent");
// Null kontrol yapılıyor eğer null ise nesne purple renginde olacak.
if (tag===null) {
    return "purple";
}
// Percent isimli değişkenin aşağıda tanımlanan aralıklara 
// göre nesnenin farklı renklerde gösterilmesi sağlanıyor.
if (tag.value>0 && tag.value<11) {
    return "red";
}

if (tag.value>10 && tag.value<21) {
    return "gray";
}

if (tag.value>20 && tag.value<31) {
    return "blue";
}

if (tag.value>30 && tag.value<41) {
    return "lime";
}

if (tag.value>40) {
    return "yellow";
}

return "green";

Color-Switch

Resim 2'de gösterildiği gibi seçili bir nesne üzerinde seçili bir değişkenin farklı değerlerde farklı renklerde görünmesini kodlamadan, form üzerinde yapılandırma ayarlarını ekleyerek veya düzenleyerek yapıyoruz.

Aşağıda resim 3'te gösterilen Color-Switch Formunun detaylarını inceleyelim.

Resim 2'deki gibi seçili bir nesne için animation wizard formunu açtığımızda color tabına geçip sağ tarafta switch radiobutonuna tıkladığımızda resim 3'teki form açılır. Burada sizden aşağıdaki parametreler istenir.

  • Variable : Color animasyonumuzu bağlamak istediğimiz değişken.

  • Default Value : Bağlantı yaptığımız variable değerinin okunamaması durumunda veya haberleşmenin gittiği durumda gösterilmek istenen değer. (Örnek : #7A006D)

Color kısmında sizden 2 adet renk istenmektedir. Burada ikinci renk zorunlu alan değildir. 2. rengi girdiğinizde seçili 2 renk arasında blink yapacaktır.

Color-Switch Gradient

Resim 5'te gösterildiği gibi seçili bir nesne üzerinde switch-color gradient animasyonu ile bir değişken değerinin 0 ile 100 değeri arasında seçili 2 renk üzerinde oransal olarak geçiş yapmasını sağlar.

Resim 5 'te formun alt kısmında Gradient checkbox'ını seçtiğimizde ilgili tanımlı conditionlardaki 2 renk arasında oransal geçiş yapmasını sağlarız. Buradaki örnekte seçili nesnenin koyu kırmızı renkten açık kırmızı renge değişken değerine göre geçiş yapmasını sağlıyoruz.

Condition-Value-Color : Değişken değeri üzerinde belirleyeceğimiz şartlara göre farklı renklerde gösterim yapmamızı sağlar. butonuna basarak şartlar ekleyebilirsiniz. Condition kısmında size resim 4'te gösterildiği gibi seçenekler sunulacaktır. Resim 4'teki örneğin anlamı; Percent isimli değişkenin değeri 10 dan küçük veya eşit ise nesnenin rengini kırmızı ve siyah olarak blink yap demektir.

Resim 1 : Animation Type Color-Expression
Resim 2 : Animation Type Color-Switch
Resim 3 : Color-Switch Form
Resim 4 : Color-Switch Conditions
Resim 5 : Color-Switch Gradient