Görseller ve SVG
Image (Resim) yerleşim planı ya da fotoğraf gibi bir resim gösterir; SVG parçalarını sinyallerden renklendirip canlandırabileceğiniz bir vektör çizimi gösterir. İkisi de dosyalarını projede tutar.
Başlamadan önce
- Ekran editöründe bir sayfa açık olmalıdır.
- Resim en çok 25 MB'lık bir PNG, JPEG, GIF, WebP, BMP, ICO ya da SVG dosyası olmalıdır.
Adımlar
1. Bir görsel seçin
Form / HTML grubunda Image'a tıklayıp bir kutu çizin. Özelliklerde Image satırındaki Choose Image…'a (Görsel Seç…) tıklayın: Choose Image iki sekmeyle açılır, Library (sunucunun paylaşılan görselleri) ve This Project (Bu proje). Load (Yükle) bilgisayarınızdan bir dosya yükler; görsel hemen yerleşir.
Library'den alınan görsel projeye kopyalanır. Penceredeki Remove ya da görselin yanındaki ✕ nesnenin görselini temizler; dosya projede kalır.
2. Sığdırın ve çerçeveleyin
Fit resmin kutuyu nasıl dolduracağını belirler:
| Fit | Etkisi |
|---|---|
| Fit inside | Resmin tamamı, oran korunur (varsayılan) |
| Fill (crop) | Kutuyu doldurur, oran korunur, kenarlar kesilir |
| Stretch (distorts) | Kutuyu tam doldurur |
Border, Border R. (kenarlık kalınlığı) ve Corner R. resmi çerçeveler; görselin yanındaki sıfırlama düğmesi kutuyu resmin kendi boyutuna döndürür.
Content grubundaki Rules bir sinyalin her durumu için farklı bir resim gösterir, örneğin kırmızı ve yeşil lamba fotoğrafı. Kurallar yalnız sayfa çalışırken değerlendirilir; editör Image'da seçilen resmi gösterir.
3. Bir SVG yükleyin
SCADA grubunda SVG'ye tıklayın, bir kutu çizin ve SVG File satırındaki Load SVG…'ye (SVG Yükle…) tıklayın. Dosyayı seçin. Editör çizimin her öğesine bir ad verir ve renklerini ve çizgilerini Element Styles altında listeler.
4. Bir öğeyi biçimlendirin
Element Styles'ı açın ve çizimin bir öğesine, burada motor gövdesine, tıklayın. fill ve stroke gibi özellikleri listelenir. Değeri değiştirin ya da özelliği bir sinyali izleyen kurallara çevirmek için kural düğmesine tıklayın. + Add CSS property başka bir özellik ekler; metin öğelerinin bir Text Content bölümü vardır.
+ Add spin animation bir öğeyi, örneğin bir fanı, döndürür: Continuous ya da With tag (bir çalışma sinyali), Fixed RPM ile ya da bir Speed Tag'den, her iki Direction'da. Bir kuralın sinyalinin değeri yokken öğe özgün görünümünü korur; sinyalden dönen bir öğe gri ve durgun gösterilir.
Bilmekte fayda var
- SVG dosyalarından betikler, olay öznitelikleri, dış bağlantılar ve gömülü sayfalar çıkarılır; okunamayan dosya gösterilmez.
- BMP dosyaları PNG olarak saklanır. İki kez yüklenen dosya bir kez saklanır.
- Nesneleri başka bir projeye yapıştırdığınızda görselleri o projeye kopyalanır.
- Görsel eklemek için Choose Image… ya da Load SVG…'yi kullanın.