Advanced

PLCVisu CSS Editörü – Teknik Dokümantasyon

PLCVisu CSS Editörü – Genel Giriş

PLCVisu CSS Editörü, kullanıcı arayüzü bileşenleriniz için standart CSS sözdizimini kullanarak görsel stillendirme kurallarını küresel olarak tanımlamanıza olanak tanır. SVG öğeleri, butonlar, çıkışlar, tablolar ve diğer UI kontrollerinin görünümünü ve davranışını — mantığını veya yapısını değiştirmeden — özelleştirmek için güçlü bir araçtır.

Temel Özellikler:

Genel Kapsam: CSS Editöründe tanımlanan tüm stiller, tüm uygulama boyunca eşleşen tüm öğelere uygulanır.
Standart CSS Sözdizimi: Geleneksel CSS seçicileri (#id, .class, :hover gibi psödo-sınıflar) kullanılır.
Canlı Stil Güncellemesi: Kaydettikten sonra yapılan değişiklikler anında ön uçta (frontend) uygulanır.
Öğe Hedefleme: Stiller aşağıdaki yollarla uygulanabilir:
- SVG ve kontrol öğeleri için id="..." özniteliği
- Her kontrolün özellik panelindeki "Class" alanı üzerinden atanan class="..." tanımları

İş Akışı Genel Görünüm:

CSS Editörüne Erişim
Şuraya gidin:
Hamburger Menüsü → CSS Editörü
Stil Kurallarını Tanımla
Kontrolleri ve SVG’leri stillendirmek için geçerli CSS kurallarını (desteklenen alt küme dahilinde) kullanın.
Kontrollere Sınıf Atama
UI kontrolleri (ör. butonlar, çıkışlar, tablolar) için bir CSS sınıfı atayın. Sayfalar (Pages) editörüne gidin, bir kontrol seçin, sağdaki "control properties" paneline gidin ve aşağı kaydırarak "Class" alanını bulun. Bu alana yazdığınız sınıf adı, CSS Editöründe referans verilecektir.
Not: Büyük/küçük harf duyarlılığına dikkat edin!
Kaydet ve Uygula
CSS Editöründe Save butonuna tıklayın. Görsel değişiklikleri görmek için frontend veya sayfayı yeniden yükleyin.

Desteklenen Özellikler

CSS Özelliği	Durum	Açıklama
`fill`, `stroke`	✅ Evet	SVG öğeleri için tam renk kontrolü
`opacity`	✅ Evet	`transition` ile animasyon yapılabilir
`transform: scale()`	✅ Evet	Sorunsuz çalışır
`transform: rotate()`	✅ Evet	Hover veya başka bir durumda döndürme sağlar
`transform: translate()`	✅ Evet	Öğeleri konumsal olarak taşır
`transition`	✅ Evet	`transform`, `fill`, `stroke`, `opacity` vb. özellikleri animasyonlu hale getirir
`cursor: pointer`	✅ Evet	Hover göstergeleri için kullanışlıdır
`stroke-width`	✅ Evet	Çizgi kalınlığını dinamik olarak değiştirir
`stroke-dasharray`	✅ Evet	Kesikli çizgiler ve animasyon benzeri geçişler sağlar
`stroke-linecap`	✅ Evet	Yuvarlatılmış çizgi uçları desteklenir
`:hover`	✅ Evet	Tamamen desteklenir
`:not()`	✅ Evet	Mantıksal olumsuzlama çalışır
Birden fazla seçici	✅ Evet	Virgülle ayrılmış ID’ler tutarlı şekilde uygulanır

Henüz Desteklenmeyenler

CSS Özelliği	Durum	Açıklama
`visibility`	❌ Hayır	Etki gözlemlenmedi
`display: none/block`	❌ Hayır	Öğeleri gizleme veya gösterme işe yaramaz
`pointer-events: none`	❌ Hayır	Etkileşim değişmeden kalır
`box-shadow`	❌ Hayır	Görsel etki yok, yok sayılıyor
`filter: blur()`	❌ Hayır	Görünür bulanıklık yok
`rx` / `ry` (köşe yarıçapı)	❌ Hayır	Yuvarlatılmış köşeler render edilmez

Çalışan Örnekler

Örnek: Basic Output Kontrolü için Özel Stil

.output-highlight {
  color: white;
  background-color: #006400;
  font-size: 24px;
  padding: 10px;
  border-radius: 6px;
  font-weight: bold;
  transition: all 200ms ease-in-out;
}

.output-highlight:hover {
  background-color: #228B22;
  transform: scale(1.1);
  cursor: pointer;
}

Örnek: Button için Özel Stil

.primary-button {
  background-color: #1E90FF;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: bold;
  transition: all 200ms ease-in-out;
  border: none;
}

.primary-button:hover {
  background-color: #104E8B;
  transform: scale(1.05);
  cursor: pointer;
}

.primary-button:active {
  background-color: #0B3D91;
  transform: scale(0.95);
}

Sonuç:

Buton parlak mavi görünür, yazı rengi beyazdır.
Hover durumunda hafifçe büyür ve koyulaşır.
Tıklanıldığında daha da koyulaşır ve hafifçe küçülür.
Buton tamamen işlevseldir ve işlem veya yönlendirme tetikleyebilir.

Örnek: Harita Kontrolü için Özel Stil

.custom-map {
  border: 4px solid orange;
  border-radius: 12px;
  transform: scale(1.05);
  transition: all 200ms ease-in-out;
}

.custom-map:hover {
  border-color: purple;
  transform: scale(1.1);
  cursor: pointer;
}

SVG Örnekleri

SVG Düzenleme için Adım Adım Kurulum

Bir SVG hazırlayın
Tanımlanabilir id içeren bir SVG dosyası oluşturun veya indirin (ör: <rect id="shape-11" ... />).
SVG yükleyin
Gidin:
Hamburger Menüsü → Kontroller (Controls) → Öğeler (Elements) → + Ekle
SVG’yi bir sayfaya ekleyin
Gidin:
Sayfalar (Pages) → Editör → Özel Öğeler (Custom Elements)
SVG'yi sayfa düzenine sürükleyip bırakın.
CSS ile SVG’yi stillendirin
CSS Editörü'nü açın ve kuralları girin:

1. Saydamlık ve Ölçekleme Örneği

#shape-11 {
  fill: red;
  opacity: 10%;
  transform: scale(1);
  transition: all 300ms ease-in-out;
}

#shape-11:hover {
  fill: green;
  opacity: 100%;
  transform: scale(4);
  cursor: pointer;
}

2. Döndürme Örneği

#shape-11 {
  fill: red;
  opacity: 10%;
  transform: scale(1) rotate(0deg);
  transition: all 300ms ease-in-out;
}

#shape-11:hover {
  fill: green;
  opacity: 100%;
  transform: scale(4) rotate(360deg);
  cursor: pointer;
}

3. SVG Kenarlık Animasyonu

#shape-11 {
  fill: none;
  stroke: red;
  stroke-width: 4px;
  stroke-dasharray: 10, 5;
  stroke-linecap: round;
  transition: all 300ms ease-in-out;
}

#shape-11:hover {
  stroke: green;
  stroke-dasharray: 0;
  stroke-width: 8px;
  transform: scale(1.5);
  cursor: pointer;
}

⚠️ Sınırlama: CSS ile Tablo (Table) Stil Verilemez

PLCVisu'daki çoğu kontrol CSS ile görsel olarak özelleştirilebilirken, Tablo kontrolleri (ör. Basic Table, Editable Table) harici CSS ile hedeflenen satır, hücre veya yapı üzerinde tepki vermez.

"Class" alanına verilen sınıflar, render edilmiş tablo yapısına etki etmez.
.table-highlight td, .table-highlight tr:hover, .table-highlight gibi seçiciler sonuç vermez.
İç render mantığı kapsüllü bileşenler, özel işleyiciler veya standart dışı DOM (örn. Canvas, Shadow DOM) kullanıyor olabilir.

Şu anda tablo görselliği yalnızca kontrolün kendi yapılandırmasındaki yerleşik stil ayarları ile kontrol edilebilir.

Bu sayfada: