Simgeler

Tüm simgeler, farklı yerlerde görselleştirmede kullanılabilir. Böylece bunları değişken veya metin olarak tanımlama olanağı vardır.

Görselleştirmede bir simge göstermek için bu etiket [icon:SYMBOLPFAD] doğrudan metinde bildirilir. Simge yolu sağ tıkla veya CTRL+C ile simge kütüphanesinden kopyalanabilir. Mümkün olduğunca sadece Material Symbols seçilmelidir, böylece görselleştirmenin stili aynı kalır.

Simge Kütüphanesi

Tüm mevcut simgeler, Görselleştirme ▸ Simgeler bağlam menüsünden erişilebilir ve aranabilir. Ayrıca kendi simge setini kütüphaneye içe aktarma olanağı vardır. Bu işlem aşağıda açıklanmaktadır.

Notlar: Simge listesinde gösterilen isim, simge yoluyla aynı değildir. Yolunda bir simge seti belirtilmezse, otomatik olarak Glyphicons seti kullanılır.

Simge kütüphanesi filtresi, kaydedilmiş etiketleri de arar. Bu davranış istenirse, filtre = ile başlayabilir, böylece sadece isimlerde arama yapılacaktır.

Material Symbols Simge Seti (Varsayılan)

Bu simge seti tamamen dinamiktir ve simgelerin stili görselleştirmenin tasarımına göre otomatik olarak yapılandırılır. Ayrıca, bir simgenin aktif olması gerektiğinde otomatik olarak doldurulmuş bir simge kullanılır. Ancak her simgenin doldurulmuş bir varyantı yoktur.

Simgeler, düğme yarıçapı 16 Piksel veya daha büyükse otomatik olarak yuvarlatılır. Yarıçap 0px ise keskin simgeler kullanılır. Ancak düzenleyicide her zaman normal simgeler kullanılacaktır.

Not: Görselleştirmeyi birleştirmek için "Material Symbols" simge setini kullanmanız önerilir.

Material Animated Simge Seti

Seçili Material Symbols simgelerinden bazıları, değerleri göstermek için animasyonlanmıştır. Bu simgelerin sadece bir animasyonu vardır ve bu animasyon simgesi ile yapıda. Seçim yapıldığında daha fazla değişken açılır.

Philips Hue Simge Seti

Philips Hue simgeleri, Hue arayüzü kullanıldığında serbestçe kullanılabilir. Ayrıca Home Assistant HASS topluluğundan ek bir Hue simge seti vardır. Daha fazla bilgi bu bölümün sonunda yer almaktadır.

Hava Durumu Simge Seti

Bu simge seti, görselleştirmedeki hava durumu simgelerini gösterir. Bu simgeler çeşitli arayüzlerden sorunsuz olarak desteklenmektedir. Aşağıdaki bölümde Hava Durumu Simgeleri konusunu inceleyin.

Legacy (Eski) Simge Seti

Legacy simge seti, eski görselleştirmedeki tüm simgeleri içerir. Yeni arayüzün gösterim stili aynı kalır. Simgeler artık kullanılmamalıdır çünkü yeni arayüz için optimize edilmedi.

Çeşitli eski simgeler hala animasyonlu:

  • legacy/door
  • legacy/door_2
  • legacy/lock
  • legacy/shutter
  • legacy/shutter_blinds
  • legacy/window
  • legacy/window_tilt

Gizli Simgeler

Görselleştirme için gizli simgeler de vardır. Bu simgeler aşağıdaki bölümlerde daha ayrıntılı olarak açıklanmaktadır.

Simgelere erişmek için sadece bir URL öneki gerekmektedir.

Kendi Simge Setleriniz

Projenize kendi simge setini içe aktarma olanağı vardır. Her simge seti ZIP dosyası olarak hazırlanmalıdır. Birkaç örnek veri buradan indirilebilir:

Pro-Tip: Başarılı bir içe aktarma işlemi tamamladıktan sonra, simge setini .antobj olarak dışa aktararak içe aktarma işlemini kolaylaştırabilirsiniz. Bunu yapmak için simge setine sağ tıkla ve Dışa Aktar seçeneğini seçin.

Aşağıdaki kurallar, bir simge setinin yapısını ve gereksinimlerini tanımlar. Lütfen bu kuralları dikkatli okuyun ve onlara uyun.

Kurallar

  • Önek
    • Sadece _, a–z ve 0–9 içerebilir.
    • Büyük harfler otomatik olarak küçük harfe dönüştürülür.
    • sys, src veya doc gibi ayrılmış isimler geçersizdir.
    • Bir harf (a–z) ile başlamalıdır. Sadece sayılar izin verilmez.
    • Sonraki alt çizgiler (_) kaldırılır.
    • 3 karakterden az olmamalıdır.
    • Çift alt çizgiler (__) tek bir alt çizgiye indirgenir.
  • Simge İsimleri
    • Otomatik olarak küçük harfe dönüştürülür.
    • İzin verilen karakterler -, _, a–z ve 0–9.
    • Uzun isimler ve ön ekler kaçınılmalıdır.
    • Bir ön ek benzersiz olmalı ve sadece bir kez kullanılmalıdır.
    • Eğer bir simge, aynı adı ve ön eki olan bir sistem simgesi ile aynı ise, bu sisteme yer değiştirebilir.
  • Dosya Kısıtlamaları
    • Temizleme sonrası en büyük dosya boyutu: 10 kB. Büyük dosyalar reddedilir.
    • SVG dosyaları temizlenmiş olmalıdır:
      • Satır atlamaları otomatik olarak kaldırılır.
      • Aşağıdaki öğeler silinir: <title>, <desc>, <script>, <image>, <style>, <foreignObject>.
      • Aşağıdaki özellikler silinir: style, fill, stroke, color, stop-color, flood-color, lighting-color.
      • Gömülü betikler, resimler, CSS veya dış kaynaklar içeren simgeler reddedilir.
      • Eğer stiller renkler veya stil blokları içeriyorsa, içe aktarma da reddedilebilir.
  • SVG Başlık Gereksinimleri
    • viewBox, width ve height içermelidir. Eksik değerler, mümkünse otomatik olarak tamamlanır.
    • Aşağıdaki isim uzayını içermelidir: xmlns="http://www.w3.org/2000/svg". Eğer eksik veya hatalıysa, otomatik olarak tamamlanır.
    • Simge adı boyutlarla tamamen uyuşmalıdır, aksi takdirde simge reddedilir.
    • Boyutlar kare olmalıdır (Genişlik = Yükseklik). Varsayılan: 24px.
    • Çelişkili stiller veya uyumsuz boyutlardan kaçınılmalıdır.
  • Genel
    • Kötü oluşturulan simgeler görüntülemeyi önemli ölçüde yavaşlatabilir veya hatalı yapabilir.
    • Simgelerin telif haklarını mutlaka dikkate alın.
    • Tüm vektörler üç ondalık basamağa yuvarlanır.

Yapı

  • iconset.ini dosyası, simge setini tanımak için zorunludur.
    • Bu ZIP dosyasının kök dizininde veya alt dizininde yer alabilir.
    • iconset.ini olarak küçük harflerle olmalıdır.
    • Simge dosya isimleri kendileri case-sensitive değildir.
  • İçe aktarma otomatik olarak SVG dosyalarını aramaz.
    • iconset.ini içinde simge klasörü açıkça tanımlanmalıdır (büyük/küçük harf duyarlılığı dikkate alın).
    • ZIP dosyası şablonunda icons/ adlı bir klasör tanımlanmıştır.
  • Alt Klasörler
    • Tanımlanan klasörde (icons/) yer alan alt klasörler kategoriler olarak kullanılır.
    • Simge isimleri tüm kategoriler arasında benzersiz olmalıdır.
    • Simge klasöründe isim kuralları:
      • Minimum: Sadece boyut ve dosya uzantısı (örneğin 24.svg).
      • filled24.svg veya round_filled_24.svg gibi varyantlar geçerlidir.
      • Çoklu sayı içeren dosya isimleri (örneğin 24_48.svg) geçersizdir.
      • Stil varyantları şu şekilde tanınır:
        • Doldurulmuş: filled veya fill içermelidir.
        • Yuvarlak: round içermelidir.
        • Keskin: sharp içermelidir.
        • Yuvarlak ve keskin birbirleri ile kombine edilemez.
      • Eğer çoklu kurallar uygun ise, son tanınan dosya kullanılır (seçim rastgele gibi görünebilir).
  • Diğer Kurallar
    • İçe içe alt-alt klasörler aranmaz (bu yedeklemeler veya orijinaller için kullanılabilir).
    • .svg olmayan dosyalar ignor edilir.
    • Bir simge klasöründe, ek etiketler eklemek için tags.txt adlı bir dosya yer alabilir.
      • Etiketler ,, ; veya Satır Atlamaları ile ayrılabilir.

Özel Simge Setleri

Ayrıca kendi simge setleriniz gibi içe aktarılabilen çeşitli özel simge setleri vardır, ancak yukarıdaki kurallara uyulması gerekmez.

Hass Hue Simgeleri

Bunlardan biri GitHub sayfasındaki hass-hue-iconsdır. Bu, Home Assistant HASS topluluğunun ek bir Hue simge setidir ve sadece ticari olmayan projeler için kullanılabilir, çünkü bu Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International lisansı altında yer almaktadır. Bu nedenle, simge seti Antcas Control ile birlikte sunulmaz. Ancak ZIP dosyası hass-hue-icons-main.zip ile her zaman yeni bir simge seti olarak projeye içe aktarılabilir. Bu durumda lütfen GitHub web sitesindeki projelerin lisans koşullarını dikkate alın.

Kaynak: https://github.com/arallsopp/hass-hue-icons.

Pictogrammers'in Material Design Simgeleri

Diğeri Pictogrammers tarafından sağlanmaktadır. Bunun için mdi-###.json dosyasını bir ZIP dosyasına paketleyip içe aktarmanız gerekmektedir. Bu dosya tarayıcının geliştirici konsolunda bulunup indirilebilir. Çizgi simgelerin doldurulmuşlarla birleştirilmesi denemektedir. Kütüphane Material Symbols ile hemen hemen aynıdır. Ancak birçok topluluk genişletmesi vardır. Eğer kütüphanenize diğer simge setlerini entegre etmek istiyorsanız, bizimle iletişime geçebilirsiniz.

Kaynak: https://pictogrammers.com/library/mdi/

Alt Sayfalar