HA-Animated-cards adalah kumpulan kartu siap pakai (67 model pada saat tulisan ini dibuat) untuk “menghidupkan” dasbor Home Assistant, terutama jika Anda sudah menggunakan Mushroom. Ide di sini bukan untuk menempelkan glitter di mana-mana: animasinya cukup halus, bersih, dan diaktifkan saat ada makna. Sebuah mesin cuci “berputar” saat sedang mengonsumsi, sebuah kipas angin mulai berputar saat benar-benar berjalan, sebuah soket “bersinar” hanya jika menarik daya, dsb.
Poin yang menyenangkan: ini bukan kartu custom “besar” yang menambahkan banyak JavaScript. Proyek ini terutama didasarkan pada Mushroom sebagai basis, dan pada card-mod untuk menyuntikkan gaya (CSS) dan animasi. Hasilnya: ini ringan, dan berintegrasi dengan baik ke dalam dasbor yang sudah ada.
Mengapa ini menarik di Home Assistant
Sebuah dasbor, kita sering melihatnya, beberapa kali sehari. Dan di kehidupan nyata, “melihat” status dalam sekejap kadang lebih baik daripada “membaca” sebuah nilai. HA-Animated-cards justru memberikan pembacaan instan ini.
Mari kita lihat tiga situasi yang sangat konkret.
Mesin cuci dalam keadaan “On”, ya… tapi apakah benar-benar berputar? Dengan animasi yang dipicu oleh daya (W), Anda bisa segera melihat apakah siklus sedang berlangsung atau apakah mesin hanya dalam keadaan siaga.
Baterai pada 23%: Anda melihatnya. Tapi jika ia sedang mengisi daya, Anda juga ingin memahaminya tanpa masuk ke detail. Model “battery/progress” dapat menampilkan perilaku yang berbeda ketika sensor “charger” aktif (biasanya untuk smartphone).
Suhu / kelembapan: kartu “environment” dapat bereaksi secara visual sesuai dengan ambang batas, dan bahkan menampilkan grafik interaktif sepanjang waktu untuk memahami sebuah tren (kelembapan yang meningkat setelah mandi, suhu yang turun di malam hari, dsb.).
Singkatnya, kita mendapatkan peningkatan keterbacaan, dan kita terkejut menggunakan dasbor dengan lebih banyak kesenangan (ya, ini argumen yang nyata… dasbor yang kita suka lihat, kita akan memperbarui!).
Prasyarat
Dasar yang disarankan oleh penulis sangat sederhana: HACS, Mushroom (kartu dan tema), dan card-mod (dapat diinstal melalui HACS dalam 2 klik).
Menurut modelnya, Anda juga bisa menggunakan mushroom-legacy-template-card (sering disebut sebagai ketergantungan praktis), dan untuk beberapa variasi “dengan grafik”, kartu tambahan seperti mini-graph-card dan vertical-stack-in-card.
Satu detail yang menghindarkan Anda dari kebingungan: disarankan untuk menggunakan tampilan dasbor dalam mode Sections atau Masonry, dan jika animasi Anda tampak tidak berfungsi, mengubah jenis tampilan dapat menyelesaikan masalah.
Instalasi: logika (sederhana) HA-Animated-cards
HA-Animated-cards tidak diinstal seperti integrasi Home Assistant klasik. Prinsipnya lebih kepada “salin-tempel”: Anda membuat kartu Mushroom (atau kartu manual sesuai model), Anda mengkonfigurasinya seperti biasa (entitas, nama, ikon…), kemudian Anda menempelkan blok gaya/animasi yang disediakan oleh proyek di bagian card_mod.
Penting: jangan mencoba “menambahkan repositori di HACS” seolah itu adalah plugin untuk diinstal. Di sini, Anda mengambil potongan YAML + gaya untuk ditempelkan pada kartu Anda.
Pemasangan langkah demi langkah
Dalam praktiknya, pemasangannya sangat sederhana:
Anda membuka dasbor Anda, lalu menerapkan tema Mushroom pada tampilan di mana Anda akan menempatkan kartu (ini jelas disarankan).
Anda menambahkan kartu dasar, sering kali sebuah Mushroom Entity Card (atau sebuah Mushroom Light Card untuk lampu).
Anda mengatur bidang standar (entitas, nama, ikon, informasi…), kemudian Anda beralih ke editor kode dan menempelkan gaya dari bagian card_mod yang disediakan oleh HA-Animated-cards.
Anda mengganti entitas yang diminta dalam kode yang disalin. Untuk beberapa model, ini “di dua tempat” (contoh tipikal: kartu lingkungan + grafik).
Dan Anda menyesuaikan ambang batas (suhu, watt, persentase) agar sesuai dengan RUMAH Anda. Karena sebuah mesin cuci, VMC, atau radiator tidak semuanya memiliki tanda tangan konsumsi yang sama, dan justru di sinilah kartu-kartu ini menjadi “cerdas”.
Contoh 1: kartu “soket pintar” yang dipandu oleh daya
Kasus penggunaan yang sangat jelas: sebuah soket terhubung pada mesin cuci, pengering, printer 3D, atau bahkan server.
Anda membuat sebuah Mushroom Entity Card untuk entitas soket (switch). Kemudian, Anda menempelkan animasi yang sesuai, dan Anda membuatnya “cerdas”: animasi tidak hanya tergantung pada status On/Off, tetapi juga pada sensor daya (W). Ketika daya melebihi ambang batas (sering kali 0 W sudah cukup), animasi dimulai. Anda juga bisa mengubah operator perbandingan sesuai kebutuhan Anda.
Detail kecil yang penting: agar card-mod dapat mengambil warna dengan benar, penulis menyarankan untuk memilih warna ikonik yang sebenarnya, dan menghindari opsi “primary” atau “accent”.
Contoh 2: kartu lingkungan (suhu / kelembapan) dengan grafik interaktif
Ini adalah jenis kartu yang membuat orang berkata “ok, ini keren” dalam 2 detik.
Metode yang ditunjukkan sangat langsung: Anda menambahkan sebuah kartu manual di dasbor, Anda menempelkan YAML dari model, lalu Anda mengganti entitas sensor di tempat yang ditunjukkan (biasanya, sekali untuk tampilan utama dan sekali untuk grafik). Selanjutnya, Anda menyesuaikan nilai min/max atau ambang batas yang digunakan agar skala sesuai dengan ruangan Anda (sebuah ruang bawah tanah yang lembap tidak diatur seperti sebuah kamar…).
Untuk menghemat ruang, triknya adalah menggabungkan dua kartu berdampingan melalui Grid Card (2 kolom), lalu menyesuaikan tinggi kartu dan lebar grafik supaya semuanya tetap kompak.
Contoh 3: kartu baterai / persentase (smartphone, sensor, pengunduhan…)
Model-model ini berlaku untuk semua yang menampilkan persentase: baterai ponsel, baterai sensor Zigbee, progres pencetakan 3D, progres pengunduhan…
Demo ini menawarkan untuk memulai dengan Mushroom Entity Card pada sensor baterai, tanpa memaksa ikon custom, dan dengan warna yang lebih putih/abu-abu terang. Kemudian, Anda menempelkan bagian card_mod dari model yang dipilih.
Untuk ponsel, ada bonus yang bagus: Anda dapat menambahkan sensor “charger” (terhubung / mengisi daya) untuk menampilkan animasi spesifik saat sedang mengisi daya.
Dan untuk sisi kustomisasi, kita tetap di area nyata: variabel untuk ukuran teks (utama/sedikit), ukuran ikon, dan bahkan satu baris untuk dikomentari/dihapus jika Anda tidak suka posisi “di sudut”.
Tips dan jebakan klasik
Jika sebuah animasi “tidak berhasil”, mulai dengan memeriksa dua poin yang sangat bodoh: jenis tampilan dasbor (beberapa orang menemukan bahwa mengganti tampilan menyelesaikan masalah) dan menggunakan tema Mushroom pada tampilan.
Jika sebuah kartu bergantung pada warna (lampu, ikon yang harus “mengambil” nuansa), berhati-hatilah dengan instruksi konfigurasi: untuk beberapa jenis, kita tidak menempatkan warna ikon, untuk yang lain, sebaliknya dibutuhkan warna yang nyata (bukan primary/accent).
Jika Anda memandu sebuah animasi berdasarkan nilai numerik (watt, suhu, kelembapan), luangkan 2 menit untuk memilih ambang batas yang sesuai dengan peralatan Anda. Pengaturan ini yang mengubah animasi “gadget” menjadi indikator berguna yang sebenarnya.
Di mana menemukan model dan bagaimana melanjutkan
Proyek ini terpusat di GitHub, dan filosofinya sederhana: Anda memilih sebuah kartu, Anda menyalin YAML / gaya, Anda mengganti entitas, lalu Anda sesuaikan.
Dan jika Anda suka format video, penulis menerbitkan demo yang sangat “langkah demi langkah”, dengan secara teratur model-model baru (kartu yang diminta oleh komunitas, variasi yang lebih kompak, versi dengan grafik, dsb.).
