🔥 HA-Animated-cards : التعديل على Home Assistant الذي يغير كل شيء (بدون جافا سكريبت ثقيلة)

HA-Animated-cards هي مجموعة من بطاقات جاهزة للاستخدام (67 نموذجًا في الوقت الذي تُكتب فيه هذه السطور) لـ “تحريك” لوحة معلومات Home Assistant، خاصة إذا كنت تستخدم Mushroom بالفعل. الفكرة ليست في وضع اللمعان في كل مكان: الرسوم المتحركة بشكل عام خفية ونظيفة، وتُفعّل عندما يكون لذلك معنى. تعمل الغسالة “عندما تستهلك”، ويبدأ المروحة بالدوران عندما تكون قيد التشغيل بالفعل، والمقبس “يتلألأ” فقط إذا كان يستهلك الطاقة، إلخ.

النقطة التي تسر: ليست بطاقة مخصصة “هائلة” تضيف كمية كبيرة من JavaScript. يعتمد المشروع بشكل أساسي على Mushroom كقاعدة، وcard-mod لحقن النمط (CSS) والرسوم المتحركة. النتيجة: خفيف، ويتكامل بشكل جيد مع لوحة معلومات موجودة بالفعل.

لماذا هو مثير للاهتمام في Home Assistant

لوحة المعلومات نتفقدها بسرعة، عدة مرات في اليوم. وفي الحياة الحقيقية، “رؤية” الحالة في جزء من الثانية أحيانًا أفضل من “قراءة” قيمة. تجلب HA-Animated-cards هذه القراءة الفورية بالضبط.

دعونا نأخذ ثلاث حالات واضحة جدًا.

الغسالة “قيد التشغيل”، نعم… لكن هل هي تعمل حقًا؟ مع الرسوم المتحركة التي تُفعّل على الطاقة (وحدات واط)، يمكنك رؤية ما إذا كانت الدورة مستمرة أو إذا كانت الغسالة مجرد في وضع السكون.

بطارية بنسبة 23%: يمكنك رؤيتها. ولكن إذا كانت تشحن، فإنك تريد أيضًا أن تفهم ذلك دون الدخول في التفاصيل. يمكن لنماذج “battery/progress” عرض سلوك مختلف عندما يكون المستشعر “الشاحن” نشطًا (عادةً لجهاز smartphone).

درجة الحرارة / الرطوبة: يمكن أن تتفاعل بطاقات “environment” بصريًا وفقًا للعتبات، وحتى عرض رسم تفاعلي على مدى الزمن لفهم الاتجاه (الرطوبة التي ترتفع بعد الاستحمام، ودرجة الحرارة التي تضعف في الليل، إلخ).

بالمختصر، نربح في وضوح الرؤية، ونتفاجأ بالاستخدام المتلذذ للوحة المعلومات (نعم، هذه حجة حقيقية… لوحة معلومات نحب النظر إليها، نحتفظ بها محدثة!).

المتطلبات

الأساس الموصى به من قبل المؤلف هو بسيط: HACS و Mushroom (البطاقات والموضوع)، و card-mod (يمكن تثبيته عبر HACS بنقرات قليلة).

وفقًا للنماذج، يمكنك أيضًا دمج mushroom-legacy-template-card (الذي غالبًا ما يُشار إليه كاعتماد عملي)، وللبعض من المتغيرات “مع الرسم”، بطاقات إضافية مثل mini-graph-card و vertical-stack-in-card.

تفصيل يمنعك من سحب شعرك: يُوصى باستخدام عرض لوحة المعلومات في وضع الأقسام أو الماسونية، وإذا بدت الرسوم المتحركة أنك لا تعمل، قد يساعد تغيير نوع العرض في حل المشكلة.

التثبيت: منطق HA-Animated-cards (بسيط)

لا يتم تثبيت HA-Animated-cards مثل تكامل Home Assistant الكلاسيكية. المبدأ هو “نسخ ولصق”: تخلق بطاقة Mushroom (أو بطاقة يدوية حسب النموذج)، ثم تقوم بإعدادها بشكل عادي (الكيان، الاسم، الرمز…)، ثم تلصق كتلة النمط/الرسوم المتحركة المقدمة من المشروع في قسم card_mod.

من المهم: لا تحاول “إضافة المستودع في HACS” كما لو كان مكونًا إضافيًا لتثبيته. هنا، تحصل على قطع من YAML + نمط للصقها في بطاقاتك.

الترتيب خطوة بخطوة

في الممارسة العملية، فإن الترتيب بسيط جدًا:

تفتح لوحة المعلومات الخاصة بك، ثم تطبق موضوع Mushroom على العرض الذي تخطط لوضع البطاقات فيه (هذا موصى به بوضوح).

تضيف البطاقة الأساسية، غالبًا بطاقة Mushroom Entity Card (أو بطاقة Mushroom Light Card للأضواء).

تقوم بضبط الحقول القياسية (الكيان، الاسم، الرمز، المعلومات…)، ثم تنتقل إلى محرر الكود وتلصق النمط من قسم card_mod المقدم من HA-Animated-cards.

تستبدل الكيانات المطلوبة في الكود المنسوخ. لبعض النماذج، تكون “في مكانين” (مثال نموذجي: بطاقات البيئة + الرسم).

وتقوم بضبط العتبات (درجات الحرارة، الواط، النسب المئوية) لتتناسب مع منزلك. لأن الغسالة، أو VMC، أو المدفأة ليسوا جميعًا لديهم نفس توقيع الاستهلاك، وهذا هو بالضبط المكان الذي تصبح فيه هذه البطاقات “ذكية”.

مثال 1: بطاقة “مقبس ذكي” مدفوعة بالطاقة

حالة استخدام واضحة جدًا: مقبس متصل على غسالة، مجفف، طابعة ثلاثية الأبعاد، أو حتى خادم.

تقوم بإنشاء بطاقة Mushroom Entity Card على كيان المقبس (switch). بعد ذلك، تلصق الرسوم المتحركة المقابلة، وتجعلها “ذكية”: الرسوم المتحركة لم تعد تعتمد فقط على الحالة On/Off، ولكن على مستشعر الطاقة (W). عندما تتجاوز الطاقة عتبة معينة (غالبًا 0 W تكفي)، تبدأ الرسوم المتحركة. يمكنك أيضًا تغيير عامل المقارنة حسب احتياجاتك.

تفصيل صغير ولكنه مهم: لكي يستطيع card-mod استرداد اللون بشكل صحيح، ينصح المؤلف باختيار لون رمز حقيقي، وتجنب الخيارات “الأساسية” أو “العرضية”.

مثال 2: بطاقات البيئة (درجة الحرارة / الرطوبة) مع رسم تفاعلي

هذا هو نوع البطاقة التي تجعل الناس يقولون “حسناً، هذا رائع” في دقيقتين.

الطريقة الموضحة مباشرة جدًا: تضيف بطاقة يدوية في لوحة المعلومات، تلصق YAML من النموذج، ثم تستبدل كيان المستشعر في المواقع المحددة (عادةً، مرة واحدة للعرض الرئيسي ومرة واحدة للرسم). بعد ذلك، تقوم بتكييف القيم الدنيا/القصوى أو العتبات المستخدمة بحيث يتناسب المقياس مع غرفتك (لا يتم ضبط القبو الرطب مثل غرفة النوم…).

لتحسين المساحة، تكمن الحيلة في دمج بطاقتين جنبًا إلى جنب عبر بطاقة شبكة (عمودين)، ثم ضبط ارتفاع البطاقات وعرض الرسم بحيث يبقى المجموع مضغوطًا.

مثال 3: بطاقات البطارية / النسبة المئوية (هاتف ذكي، مستشعر، تنزيل…)

تنطبق هذه النماذج على كل ما يكشف عن نسبة مئوية: بطارية هاتف، بطارية مستشعر Zigbee، تقدم طباعة ثلاثية الأبعاد، تقدم تنزيل…

تقترح العرض بدءًا من بطاقة Mushroom Entity على كيان البطارية، دون فرض رمز مخصص، ومع لون أبيض / رمادي فاتح. بعد ذلك، تلصق الجزء card_mod من النموذج المختار.

بالنسبة للهاتف، هناك مكافأة ممتعة: يمكنك إضافة مستشعر “الشاحن” (موصول / قيد الشحن) لعرض رسوم متحركة محددة عند الشحن.

ومن حيث التخصيص، نبقى في المجال العملي: متغيرات لحجم النص (أساسي / ثانوي)، حجم الرمز، وحتى سطر للتعليق / الحذف إذا كنت لا تحب الوضع “في زاوية”.

نصائح والفخاخ الشائعة

إذا “لم تعمل” الرسوم المتحركة، ابدأ بالتحقق من نقطتين غبيتين جدًا: نوع عرض لوحة المعلومات (يلاحظ بعض الأشخاص أن تغيير العرض يحرر الموقف) واستخدام موضوع Mushroom في العرض.

إذا كانت بطاقة تعتمد على اللون (الأضواء، الرموز التي يجب “استعادة” اللون)، انتبه لتعليمات التكوين: بالنسبة لبعض الأنواع، لا نضع لون رمز، ولأخرى، يجب أن يكون هناك لون حقيقي (ليس أساسي / عرضي).

إذا كنت تتحكم في الرسوم المتحركة بناءً على قيمة رقمية (وات، درجة حرارة، رطوبة)، خذ دقيقتين لاختيار عتبة تتناسب مع جهازك. إن هذا الإعداد هو الذي يحول الرسوم المتحركة “الجهاز” إلى مؤشر فعلي مفيد.