HA-Animated-cards, hazır kartlardan oluşan bir koleksiyondur (bu satırlar yazılırken 67 model mevcut) ve Home Assistant’ta bir pano “hareketlendirmek” için tasarlanmıştır, özellikle zaten Mushroom kullanıyorsanız. Amaç her yere simsiyahtlar dökmek değil: animasyonlar daha ziyade sade, temizdir ve mantıklı olduğunda devreye girer. Bir çamaşır makinesi “çalışır”, elektrik tükettiğinde, bir fan yalnızca gerçekten çalıştığında döner, bir priz “ışıldar” yalnızca enerji çektiğinde, vb.
İyi haber: bu büyük bir özelleştirilmiş kart değil ve tonlarca JavaScript eklemiyor. Proje esasen Mushroom’u temel alır ve stil (CSS) ve animasyonları enjekte etmek için card-mod’dan yararlanır. Sonuç: hafif, ve zaten var olan bir panoya oldukça iyi entegre edilebilir.
Home Assistant’ta neden ilginç
Bir panoyu hızlıca göz atıyoruz, günde birkaç kez. Ve gerçek hayatta, durumu bir saniyeden daha kısa bir sürede “görmek” bazen “okumak” yerine geçer. HA-Animated-cards, tam da bu anlık okumayı sunar.
Üç somut durumu ele alalım.
Çamaşır makinesi “Açık”, ama gerçekten çalışıyor mu? Güç (W) üzerinden tetiklenen bir animasyon ile, döngünün devam edip etmediğini veya makinenin sadece beklemeye alındığını hemen görebilirsiniz.
Bir pil %23: bunu görüyorsunuz. Ama eğer şarj oluyorsa, detaya girmeden de bunu anlamak istersiniz. “battery/progress” modelleri, bir “şarj cihazı” sensörü aktifken farklı bir davranış sergileyebilir (tipik olarak bir akıllı telefon için).
Sıcaklık / nem: “environment” kartları, eşiklere göre görsel olarak tepki verebilir ve hatta bir eğilim anlamak için süre boyunca etkileşimli bir grafik gösterebilir (duştan sonra nemin artması, gece sıcaklığın düşmesi vb.).
Kısacası, okunabilirlik artar ve panoyu daha fazla keyifle kullanmaya başlarsınız (evet, bu gerçek bir argüman… izlemekten hoşlandığınız bir pano, güncel tutar!).
Gereksinimler
Yazarın önerdiği temel yapıdır: HACS, Mushroom (kartlar ve tema) ve card-mod (HACS üzerinden 2 tıklama ile yüklenebilir).
Modellere göre, mushroom-legacy-template-card ile de karşılaşabilirsiniz (genellikle pratik bir bağımlılık olarak belirtilir) ve bazı “grafikli” varyantlar için mini-graph-card ve vertical-stack-in-card gibi ek kartlar da kullanılabilir.
Saçınızı yolmamanızı sağlayacak bir detay: bir dashboard görünümünü Sections veya Masonry modunda kullanmanız önerilir ve eğer animasyonlar tetiklenmiyorsa, görünüm türünü değiştirmek sorunu çözebilir.
Kurulum: HA-Animated-cards’ın (basit) mantığı
HA-Animated-cards, klasik bir Home Assistant entegrasyonu gibi kurulmaz. Prensip, “kopyala-yapıştır” gibidir: bir Mushroom kartı (veya modele bağlı olarak el ile bir kart) oluşturuyorsunuz, normal şekilde yapılandırıyorsunuz (varlık, ad, simge…), sonra projeyle sağlanan stil/animasyon bloğunu card_mod bölümüne yapıştırıyorsunuz.
Önemli: “HACS’a depo eklemeye” çalışmayın, bu bir eklenti değil. Burada, kartlarınıza yapıştırmanız gereken YAML + stil parçalarını alıyorsunuz.
Adım adım kurulum
Pratikte, kurulum oldukça basittir:
Panonuzu açıyorsunuz, ardından kartları yerleştireceğiniz görünümde Mushroom temasını uyguluyorsunuz (bu kesinlikle önerilir).
Temel kartı ekliyorsunuz, genellikle bir Mushroom Entity Card (veya ışıklar için bir Mushroom Light Card).
Standart alanları ayarlıyorsunuz (varlık, ad, simge, bilgiler…), ardından kod düzenleyiciye geçip HA-Animated-cards tarafından sağlanan card_mod bölümünden stil yapıştırıyorsunuz.
Kopyalanan kodda istenen varlıkları değiştiriyorsunuz. Bazı modeller için bu “iki yerden” (tipik örnek: çevre + grafik kartları) olabilir.
Ve eşiği (sıcaklıklar, wattlar, yüzdeler) KENDİ evinize uyacak şekilde ayarlıyorsunuz. Çünkü bir çamaşır makinesi, bir havalandırma sistemi veya bir radyatörün elektrik tüketim imzası aynı değildir ve tam burada bu kartlar “akıllı” hale gelir.
Örnek 1: Güç tarafından kontrol edilen “akıllı priz” kartı
Çok net bir kullanım durumu: bir çamaşır makinesine, kurutucusuna, 3D yazıcısına ya da hatta bir sunucuya bağlı bir akıllı priz.
Bir priz varlığı için bir Mushroom Entity Card oluşturuyorsunuz. Ardından, karşılık gelen animasyonu yapıştırıyorsunuz ve onu “akıllı” hale getiriyorsunuz: animasyon artık yalnızca Açık/Kapalı durumuna bağlı değil, bir güç sensörüne (W) bağlı. Güç belirli bir eşiği aştığında (genellikle 0 W yeter), animasyon başlar. İhtiyaçlarınıza göre karşılaştırma operatörünü de değiştirebilirsiniz.
Önemli bir detay: card-mod’un rengi doğru bir şekilde alabilmesi için, yazar gerçek bir simge rengi seçmenizi öneriyor ve “birincil” veya “vurgulayıcı” seçeneklerden kaçınmanızı istiyor.
Örnek 2: Grafik içeren çevre kartları (sıcaklık / nem)
İki saniye içinde “tamam, bu harika” dedirten türden bir kart.
Görüldüğü üzere yöntem çok doğrudan: panoya manuel bir kart ekliyorsunuz, modelin YAML’ını yapıştırıyorsunuz, sonra belirtilen yerlerde sensör varlığını değiştiriyorsunuz (tipik olarak, bir kez ana görüntü için ve bir kez grafik için). Sonra, odanıza uygun şekilde min/max değerleri veya kullanılan eşikleri ayarlıyorsunuz (nemli bir bodrum, bir yatak odası gibi ayarlanmaz…).
Yer tasarrufu sağlamak için, iki kartı yan yana bir Grid Kart (2 sütun) ile birleştirmek ve tümünün kompakt kalması için kartların yüksekliğini ve grafiğin genişliğini ayarlamak yeterli.
Örnek 3: pil / yüzde kartları (akıllı telefon, sensör, indirme vb.)
Bu modeller, bir yüzde ifade eden her şeyde geçerlidir: telefon pili, Zigbee sensörü pili, 3D baskı ilerlemesi, indirme ilerlemesi vb.
Demoda, pil sensörü üzerinde bir Mushroom Entity Card ile başlamak önerilir, özel bir simge koymaya gerek yoktur ve daha çok beyaz/gri renkte yapılır. Ardından, seçilen modelin card_mod kısmını yapıştırıyorsunuz.
Bir telefon için hoş bir bonus var: şarjda olduğunda belirli bir animasyon göstermek için bir “şarj cihazı” sensörü (bağlı / şarjda) ekleyebilirsiniz.
Ve kişiselleştirme konusunda somutta kalıyoruz: metin boyutları için değişkenler (birincil/ikincil), simge boyutu ve hatta “bir köşede” konumdan hoşlanmıyorsanız yorum yapılıp silinecek bir satır.
İpuçları ve klasik tuzaklar
Bir animasyon “çarpmıyorsa”, iki çok basit noktayı kontrol ederek başlayın: dashboard görünüm türü (bazı insanlar görünüm değiştirmeyi denediğinde açılmayı sağladıklarını gözlemliyor) ve görünümde Mushroom temasını kullanıp kullanmadığınız.
Bir kartın rengi (ışıklar, simgeler “rengi almak zorunda” olduğunda) ile ilgiliyse, yapılandırma talimatlarına dikkat edin: bazı türler için simge rengi koymuyoruz, diğerleri için ise gerçek bir renk gerekir (birincil/vurgulayıcı olmadan).
Bir sayısal değere (watt, sıcaklık, nem) dayalı bir animasyonu kontrol ediyorsanız, ekipmanınız için uygun bir eşiği seçmek için 2 dakikanızı ayırın. Bu ayar, bir “hediye” animasyonunu gerçek bir yararlı göstergeye dönüştürür.
Modelleri nereden bulabilirim ve nasıl ilerleyebilirim?
Proje GitHub‘ta merkezi olarak toplanmıştır ve felsefesi basittir: bir kart seçiyorsunuz, YAML / stil kopyalıyorsunuz, varlıkları değiştiriyorsunuz ve ardından ayarlıyorsunuz.
Ve eğer video formatını seviyorsanız, yazar adım adım çok “izleme” demoları yayınlıyor, ayrıca düzenli olarak yeni modeller (topluluk tarafından talep edilen kartlar, daha kompakt varyantlar, grafik sürümleri, vb.) ekliyor.
