{"id":11930,"date":"2026-11-01T12:12:41","date_gmt":"2026-11-01T10:12:41","guid":{"rendered":"https:\/\/www.sigalou-domotique.fr\/?p=11930"},"modified":"2026-11-01T16:35:31","modified_gmt":"2026-11-01T14:35:31","slug":"je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant","status":"publish","type":"post","link":"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant","title":{"rendered":"Ich ersetze meine Temperaturausweise durch Messger\u00e4te"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<label for=\"ez-toc-cssicon-toggle-item-6ae8755e2680a\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6ae8755e2680a\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%8C%A1%EF%B8%8F_Pourquoi_jai_voulu_moderniser_laffichage_des_temperatures\" >\ud83c\udf21\u21d0 Warum ich die Temperaturanzeige modernisieren wollte<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%94%98_Mon_ancien_affichage_avec_des_state-badge\" >\ud83d\udd18 Mein altes Display mit State-Badge<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%A7%A9_Les_cartes_que_jai_retenues\" >\ud83e\udde9 Die Karten, die ich ausgew\u00e4hlt habe<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%93%A6_Linstallation_dans_Home_Assistant\" >\ud83d\udce6 Installation im Home Assistant<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%9B%92_Linstallation_avec_HACS\" >\ud83d\uded2 Installation mit HACS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%9B%A0%EF%B8%8F_Lalternative_sans_HACS\" >\ud83d\udee0\u21d0 Die Alternative ohne HACS<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%8E%A8_Mon_nouvel_affichage_un_cercle_et_une_jauge\" >\ud83c\udfa8 Meine neue Anzeige: ein Kreis und ein Messger\u00e4t<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%E2%9A%AA_Le_cercle_en_arriere-plan\" >\u26aa Der Kreis im Hintergrund<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%8C%A1%EF%B8%8F_La_carte_de_temperature_et_dhumidite\" >\ud83c\udf21\u21d0 Die Temperatur- und Feuchtigkeitskarte<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%E2%9A%99%EF%B8%8F_Les_reglages_que_jai_retenus\" >\u2699\u21d0 Die Einstellungen, die ich gew\u00e4hlt habe<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%A7%AD_La_presentation_en_jauge\" >\ud83e\udded Die DMS-Pr\u00e4sentation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%AA%9F_Un_affichage_volontairement_allege\" >\ud83e\ude9f Eine bewusst erleichterte Anzeige<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%93%90_Le_positionnement_sur_le_plan\" >\ud83d\udcd0 Die Positionierung auf dem Plan<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%A7%BE_Le_code_complet_de_mon_nouvel_affichage\" >\ud83e\uddfe Der vollst\u00e4ndige Code meines neuen Displays<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%8E%81_Bonus_jutilise_decluttering_templates\" >\ud83c\udf81 Bonus: Ich verwende decluttering_templates<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%A7%A9_A_quoi_sert_decluttering_templates\" >\ud83e\udde9 Wozu dient decluttering_templates?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%93%A6_Le_prerequis_decluttering-card\" >\ud83d\udce6 Die Voraussetzung: decluttering-card<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%92%A1_Mon_astuce_pour_regrouper_deux_elements_dans_un_seul_template\" >\ud83d\udca1 Mein Tipp zum Gruppieren von zwei Elementen in einem Template<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%8E%81_Un_conditional%E2%80%A6_sans_condition\" >\ud83c\udf81 Eine Konditionalit\u00e4t... bedingungslos!<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%97%82%EF%B8%8F_Ou_je_place_le_template\" >\ud83d\uddc2\u21d0 Wo ich das Template platziere<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%A7%BE_Le_template_complet_de_ma_jauge\" >\ud83e\uddfe Das komplette Template meines Messger\u00e4ts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%93%90_Je_positionne_le_groupe_puis_je_superpose_les_elements\" >\ud83d\udcd0 Ich positioniere die Gruppe und \u00fcberlagere dann die Elemente<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%93%8F_Une_seule_variable_pour_gerer_la_taille\" >\ud83d\udccf Eine einzige Variable zum Verwalten der Gr\u00f6\u00dfe<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%8E%A8_Je_choisis_la_couleur_du_cercle\" >\ud83c\udfa8 Ich w\u00e4hle die Farbe des Kreises<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%94%A7_Les_valeurs_par_defaut\" >\ud83d\udd27 Die Standardwerte<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%93%8D_Lappel_pour_mon_salon\" >\ud83d\udccd Der Aufruf zu meinem Wohnzimmer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%8F%A0_Je_reutilise_laffichage_dans_les_autres_pieces\" >\ud83c\udfe0 Ich verwende die Anzeige wieder in anderen R\u00e4umen<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%E2%9C%85_Ce_que_jai_gagne_avec_cette_modification\" >\u2705 Was ich mit dieser \u00c4nderung gewonnen habe<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/www.sigalou-domotique.fr\/de\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%8E%AF_Conclusion\" >\ud83c\udfaf Schlussfolgerung<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%8C%A1%EF%B8%8F_Pourquoi_jai_voulu_moderniser_laffichage_des_temperatures\"><\/span>\ud83c\udf21\u21d0 Warum ich die Temperaturanzeige modernisieren wollte<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Auf meinem Home Assistant-Dashboard zeige ich die Temperaturen direkt auf der Ebene des Hauses an.<\/p>\n<p>Das ist praktisch: Ich sehe sofort die Temperatur in jedem Raum, ohne eine andere Seite \u00f6ffnen zu m\u00fcssen.<\/p>\n<p>Bisher habe ich Elemente verwendet. <code>state-badge<\/code>. Das Ergebnis war gut lesbar, mit einer Temperatur, die im Gro\u00dfen und Ganzen in einem runden Abzeichen angezeigt wurde.<\/p>\n<p>Aber ich wollte etwas, das optisch leichter ist, sich besser in die Ebene einf\u00fcgt und auch Feuchtigkeit anzeigt.<\/p>\n<p>Es ging nicht darum, meine Sensoren zu wechseln oder mein gesamtes Dashboard neu zu erstellen. Ich wollte die gleichen Informationen einfach anders pr\u00e4sentieren.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%94%98_Mon_ancien_affichage_avec_des_state-badge\"><\/span>\ud83d\udd18 Mein altes Display mit State-Badge<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Meine Ausgangskonfiguration war ziemlich einfach: ein Element pro Sensor, positioniert auf der Ebene mit den Eigenschaften <code>top<\/code> und <code>left<\/code>.<\/p>\n<p>Beachten Sie, dass diese Karten in einer Karte von enthalten sind <strong>Typ: picture-elements<\/strong> allgemein<\/p>\n<p>Hier ist zum Beispiel der Code, den ich f\u00fcr meinen Salon verwendet habe:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- type: state-badge entity: sensor.temperature_salon_temperature style: top: 98% left: 22% font-size: 40px text-align: center font-weight: bold color: transparent<\/pre>\n<p>Diese Anzeige machte die Arbeit. Die Temperatur war sichtbar und jedes Abzeichen hatte seinen Platz auf dem Plan.<\/p>\n<p>Das Abzeichen nahm jedoch einen wichtigen visuellen Platz ein, mit seinem dunklen Hintergrund und der Einheit, die in einer separaten Einlage angezeigt wurde.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11935\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-10-31-143839.png\" alt=\"\" width=\"349\" height=\"280\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-10-31-143839.png 349w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-10-31-143839-300x241.png 300w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-10-31-143839-15x12.png 15w\" sizes=\"auto, (max-width: 349px) 100vw, 349px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%A7%A9_Les_cartes_que_jai_retenues\"><\/span>\ud83e\udde9 Die Karten, die ich ausgew\u00e4hlt habe<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>F\u00fcr diese neue Anzeige habe ich das Projekt verwendet. <a href=\"https:\/\/github.com\/skyrotter\/ha-appliance-electromenager-cards\" target=\"_blank\" rel=\"noopener\">Haushaltsger\u00e4te-Appliance Cards<\/a> von <a href=\"https:\/\/github.com\/skyrotter\" target=\"_blank\" rel=\"noopener\">Skyrotter<\/a> oder (<a tabindex=\"0\" href=\"https:\/\/forum.hacf.fr\/u\/nicolas59\" target=\"_blank\" rel=\"noopener\" aria-label=\"Profil von nicolas59\" data-user-card=\"nicolas59\">nicolas59<\/a> auf HACF).<\/p>\n<p>Der Name erinnert vor allem an Waschmaschinen, K\u00fchlschr\u00e4nke und andere Ger\u00e4te im Haus. Aber in meinem Fall interessiert mich die Atmosph\u00e4renkarte eines Raumes: <code>custom:appliance-room-climate-card<\/code>.<\/p>\n<p>F\u00fcr die neuen Messger\u00e4te stelle ich Ihnen auch den Link zur Nachricht im HACF-Forum zur Verf\u00fcgung:<br \/>\n<a href=\"https:\/\/forum.hacf.fr\/t\/carte-44-cartes-animees-pour-lelectromenager-une-prise-connectee-suffit\/84646\/74\" target=\"_blank\" rel=\"noopener\">Die HACF-Diskussion rund um Karten und neue Messger\u00e4te<\/a>.<\/p>\n<p>Ich werde einen kleinen Teil der M\u00f6glichkeiten des Formats nutzen <strong>gauge<\/strong> :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11936\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-11-01-112119.png\" alt=\"\" width=\"939\" height=\"188\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-11-01-112119.png 939w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-11-01-112119-300x60.png 300w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-11-01-112119-768x154.png 768w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-11-01-112119-18x4.png 18w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-11-01-112119-600x120.png 600w\" sizes=\"auto, (max-width: 939px) 100vw, 939px\" \/><\/p>\n<p>Bei mir geht es darum, nur die f\u00fcr den Plan n\u00fctzlichen Informationen \u2013 Temperatur und Luftfeuchtigkeit \u2013 aufzubewahren, ohne eine gro\u00dfe vollst\u00e4ndige Karte pro Raum hinzuzuf\u00fcgen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%93%A6_Linstallation_dans_Home_Assistant\"><\/span>\ud83d\udce6 Installation im Home Assistant<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%9B%92_Linstallation_avec_HACS\"><\/span>\ud83d\uded2 Installation mit HACS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Um die Karten zu installieren, ist es am einfachsten, \u00fcber HACS zu gehen.<\/p>\n<p>Suchen Sie in HACS <code>Animated Appliance &amp; Energy Cards<\/code>, Laden Sie das Projekt herunter (Version gr\u00f6\u00dfer als v1.52.0)<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11937\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-10-30-163227.png\" alt=\"\" width=\"955\" height=\"276\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-10-30-163227.png 955w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-10-30-163227-300x87.png 300w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-10-30-163227-768x222.png 768w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-10-30-163227-18x5.png 18w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-10-30-163227-600x173.png 600w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/p>\n<p>Nachdem der Download abgeschlossen ist, laden Sie die Home Assistant-Seite neu. Auf einem Computer k\u00f6nnen Sie <code>Strg + F5<\/code> um das erneute Laden des Browsers zu erzwingen.<\/p>\n<p>Wenn das Projekt nicht in der Suche angezeigt wird, k\u00f6nnen Sie es manuell hinzuf\u00fcgen:<\/p>\n<ol>\n<li>\u00d6ffnen Sie HACS.<\/li>\n<li>\u00d6ffnen Sie das Men\u00fc mit den drei Punkten.<\/li>\n<li>Gehen Sie zu benutzerdefinierten Repositories.<\/li>\n<li>F\u00fcgen Sie unten die Adresse der Einreichung hinzu.<\/li>\n<li>W\u00e4hlen Sie die Kategorie der Dashboard-Karten, genannt <code>Dashboard<\/code> in der Projektdokumentation.<\/li>\n<li>Dann suchen Sie das Projekt in HACS und laden Sie es herunter.<\/li>\n<\/ol>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"text\">https:\/\/github.com\/skyrotter\/ha-appliance-electromenager-cards<\/pre>\n<p>Denken Sie daran, Ihren Browser nach der Installation neu zu laden.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%9B%A0%EF%B8%8F_Lalternative_sans_HACS\"><\/span>\ud83d\udee0\u21d0 Die Alternative ohne HACS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Das Projekt bietet auch eine manuelle Installation an.<\/p>\n<p>In diesem Fall m\u00fcssen Sie die Datei wiederherstellen <code>ha-appliance-electromenager-cards.js<\/code> in der Akte <code>dist<\/code> aus dem Projektarchiv und kopieren Sie es dann in den Ordner <code>\/config\/www\/<\/code> von Home Assistant.<\/p>\n<p>Anschlie\u00dfend muss in den Dashboard-Einstellungen eine Ressource hinzugef\u00fcgt werden:<\/p>\n<ul>\n<li>Anschrift: <code>\/local\/ha-appliance-electromenager-cards.js<\/code><\/li>\n<li>Typ: JavaScript-Modul<\/li>\n<\/ul>\n<p>Dies ist eine Alternative zu HACS. Beide Anlagen sind nicht erforderlich.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%8E%A8_Mon_nouvel_affichage_un_cercle_et_une_jauge\"><\/span>\ud83c\udfa8 Meine neue Anzeige: ein Kreis und ein Messger\u00e4t<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Um das Messger\u00e4t in meinen Plan zu integrieren, habe ich zwei \u00fcberlappende Elemente verwendet:<\/p>\n<ul>\n<li>Ein kreisf\u00f6rmiges Bild im Hintergrund.<\/li>\n<li>Die Temperatur- und Feuchtigkeitskarte oben.<\/li>\n<\/ul>\n<p>Der Kreis erm\u00f6glicht es, die Anzeige leicht vom Dekor zu l\u00f6sen, ohne den Raum vollst\u00e4ndig zu verdecken.<\/p>\n<p>Das Messger\u00e4t zeigt dann die Werte und farbigen B\u00f6gen an.<\/p>\n<p>Bei meinem neuen Fang erscheint die Temperatur in der Mitte und die Luftfeuchtigkeit direkt darunter. Das Ergebnis ist leichter als mein altes Abzeichen und gibt gleichzeitig zus\u00e4tzliche Informationen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11938\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-11-01-110410.png\" alt=\"\" width=\"317\" height=\"275\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-11-01-110410.png 317w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-11-01-110410-300x260.png 300w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-11-01-110410-14x12.png 14w\" sizes=\"auto, (max-width: 317px) 100vw, 317px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%E2%9A%AA_Le_cercle_en_arriere-plan\"><\/span>\u26aa Der Kreis im Hintergrund<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Zun\u00e4chst f\u00fcge ich das Bild hinzu, das als Hintergrund dient:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- type: image image: \/local\/haus\/cerclebleu.png style: top: 60% left: 42% width: 120px transform: translate(-50%, -50%) opacity: 0.5<\/pre>\n<p>In diesem Beispiel hei\u00dft meine Datei <code>circlebleu.png<\/code>.<\/p>\n<p>Hier ist meine Datei, aber jeder kann anpassen. Es gibt drei weitere Farben.<\/p>\n<table style=\"border-collapse: collapse; width: 100%;\">\n<tbody>\n<tr>\n<td style=\"width: 50%;\"><a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cerclebleu.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-11942 size-full\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cerclebleu.png\" alt=\"\" width=\"200\" height=\"200\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cerclebleu.png 200w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cerclebleu-150x150.png 150w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cerclebleu-12x12.png 12w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cerclebleu-100x100.png 100w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/td>\n<td style=\"width: 50%;\"><a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cerclebeige.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-11945 size-full\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cerclebeige.png\" alt=\"\" width=\"200\" height=\"200\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cerclebeige.png 200w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cerclebeige-150x150.png 150w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cerclebeige-12x12.png 12w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cerclebeige-100x100.png 100w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"width: 50%;\"><a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cerclevert.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-11943 size-full\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cerclevert.png\" alt=\"\" width=\"200\" height=\"200\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cerclevert.png 200w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cerclevert-150x150.png 150w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cerclevert-12x12.png 12w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cerclevert-100x100.png 100w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/td>\n<td style=\"width: 50%;\"><a href=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cercleorange.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-11944 size-full\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cercleorange.png\" alt=\"\" width=\"200\" height=\"200\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cercleorange.png 200w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cercleorange-150x150.png 150w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cercleorange-12x12.png 12w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/cercleorange-100x100.png 100w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Es wird in den Ordner gelegt <code>\/config\/www\/haus\/<\/code>, was der Anschrift entspricht <code>\/local\/haus\/cerclebleu.png<\/code> Wird im Dashboard verwendet.<\/p>\n<p>Bei dieser Datei handelt es sich um ein Bild, das von Ihrer Seite zu erwarten ist: Es handelt sich nicht um ein Element, das automatisch von der Karte bereitgestellt wird. Sie k\u00f6nnen Ihren eigenen kreisf\u00f6rmigen Hintergrund verwenden, indem Sie den Pfad anpassen.<\/p>\n<p>Ich habe eine Breite von <code>120px<\/code> und eine Undurchsichtigkeit von <code>0.5<\/code>. Ich wollte einen sichtbaren Hintergrund, aber keine undurchsichtige Scheibe, die den Plan verbirgt.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%8C%A1%EF%B8%8F_La_carte_de_temperature_et_dhumidite\"><\/span>\ud83c\udf21\u21d0 Die Temperatur- und Feuchtigkeitskarte<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Anschlie\u00dfend f\u00fcgte ich die Karte an derselben Stelle hinzu:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- type: custom:appliance-room-climate-card icon: '' entity_temperature: sensor.temperature_salon_temperature entity_humidity: sensor.temperature_salon_humidity temperature_unit: C language: fr show_status: false show_outdoor: false show_dew_point: false show_advice: false show_graph: false Animationen: false transparent: true name: \" \" variant: gauge show_trend: false style: top: 60% left: 42% width: 130px illustration_size: 120<\/pre>\n<p>Diesmal bezieht sich das Beispiel auf die Messe. Die Einheiten unterscheiden sich daher von den beiden am Anfang des Artikels gezeigten Au\u00dfentemperaturen.<\/p>\n<p>Ich nutze die beiden folgenden Einrichtungen:<\/p>\n<ul>\n<li><code>sensor.temperature_salon_temperature<\/code> f\u00fcr die Temperatur.<\/li>\n<li><code>sensor.temperature_salon_humidity<\/code> f\u00fcr Feuchtigkeit.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%E2%9A%99%EF%B8%8F_Les_reglages_que_jai_retenus\"><\/span>\u2699\u21d0 Die Einstellungen, die ich gew\u00e4hlt habe<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%A7%AD_La_presentation_en_jauge\"><\/span>\ud83e\udded Die DMS-Pr\u00e4sentation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Diese Pr\u00e4sentation wird mit folgendem Parameter ausgew\u00e4hlt:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">Variante: gauge<\/pre>\n<p>Diese Einstellung verwende ich, um die Anzeige mit den B\u00f6gen um die Werte herum zu erhalten.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%AA%9F_Un_affichage_volontairement_allege\"><\/span>\ud83e\ude9f Eine bewusst erleichterte Anzeige<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In Bezug auf das Haus ben\u00f6tige ich nicht alle Informationen, die eine vollst\u00e4ndige Karte bieten kann.<\/p>\n<p>Daher habe ich mehrere Elemente deaktiviert:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">show_status: false show_outdoor: false show_dew_point: false show_advice: false show_graph: false show_trend: false<\/pre>\n<p>Damit behalte ich das Wesentliche f\u00fcr diese Sicht: Temperatur und Luftfeuchtigkeit schnell lesen.<\/p>\n<p>Ich verwende auch diese Einstellungen:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">transparent: true name: \" \" icon: '' Animationen: false<\/pre>\n<p>In meinem Setup m\u00f6chte ich keinen Raumnamen oder zus\u00e4tzliche Symbole, und ich schalte Animationen aus.<\/p>\n<p>Die Lage des Messger\u00e4ts auf der Ebene gibt bereits den Kontext vor. Ich brauche \u201eSalon\u201c an dieser Stelle nicht zu wiederholen.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%93%90_Le_positionnement_sur_le_plan\"><\/span>\ud83d\udcd0 Die Positionierung auf dem Plan<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Der Kreis und die Karte verwenden genau die gleichen Koordinaten:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">top: 60% left: 42%<\/pre>\n<p>Dadurch k\u00f6nnen sie an einem Ort platziert werden. Ich habe ein bisschen auf width gespielt, aber jeder muss sich an seinen bildschirm anpassen.<\/p>\n<p>Diese Abmessungen entsprechen meinem Grundriss und meiner Anzeige. Sie sind entsprechend dem verf\u00fcgbaren Platz auf Ihrem Dashboard anzupassen.<\/p>\n<p>Beide Bl\u00f6cke sind in die Liste einzuf\u00fcgen <code>Elemente:<\/code> von meiner Karte <code>picture-elements<\/code>, Anstelle der alten Zugangsausweise.<\/p>\n<p>Es handelt sich somit nicht um zwei unabh\u00e4ngige Karten, die an anderer Stelle im Dashboard hinzugef\u00fcgt werden sollen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%A7%BE_Le_code_complet_de_mon_nouvel_affichage\"><\/span>\ud83e\uddfe Der vollst\u00e4ndige Code meines neuen Displays<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Um beide Elemente in der Konfiguration an einem Ort zu haben, ist hier der vollst\u00e4ndige Block, den ich f\u00fcr das Wohnzimmer verwende.<\/p>\n<p>Das Bild wird zuerst deklariert, dann das Messger\u00e4t:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- type: image image: \/local\/haus\/cerclebleu.png style: top: 60% left: 42% width: 120px transform: translate(-50%, -50%) opacity: 0.5 - Typ: custom:appliance-room-climate-card icon: '' entity_temperature: sensor.temperature_salon_temperature entity_humidity: sensor.temperature_salon_humidity temperature_unit: C language: fr show_status: false show_outdoor: false show_dew_point: false show_advice: false show_graph: false Animationen: false transparent: true name: \" \" variant: gauge show_trend: false style: top: 60% left: 42% width: 130px illustration_size: 120<\/pre>\n<p>Um diese Anzeige in einem anderen Raum zu reproduzieren, greife ich beide Elemente auf, indem ich die Entit\u00e4ten und Koordinaten \u00e4ndere.<\/p>\n<p>Ich achte nur darauf, die gleichen Werte von <code>top<\/code> und <code>left<\/code> f\u00fcr den Boden und das Messger\u00e4t ein und desselben Teils.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%8E%81_Bonus_jutilise_decluttering_templates\"><\/span>\ud83c\udf81 Bonus: Ich verwende decluttering_templates<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>An diesem Punkt funktioniert meine neue Anzeige mit zwei Elementen: dem Hintergrundkreis und dem Messger\u00e4t.<\/p>\n<p>F\u00fcr ein einzelnes St\u00fcck ist es nicht \u00e4rgerlich, beide Bl\u00f6cke direkt im Dashboard aufzubewahren.<\/p>\n<p>Aber um diese Anzeige in mehreren R\u00e4umen zu reproduzieren, muss ich jedes Mal einen guten Teil des Codes kopieren.<\/p>\n<p>Und an dem Tag, an dem ich die Pr\u00e4sentation \u00e4ndern m\u00f6chte, muss jeder Block wieder aufgenommen werden, mit dem Risiko, einen zu vergessen.<\/p>\n<p>Daher habe ich diese Anzeige in einem wiederverwendbaren Template mit <code>decluttering-card<\/code>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%A7%A9_A_quoi_sert_decluttering_templates\"><\/span>\ud83e\udde9 Wozu dient decluttering_templates?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Das Prinzip ist einfach: Ich definiere die Struktur meiner Anzeige nur einmal und verwende sie dann wieder, indem ich ihr einige Variablen \u00fcbergebe.<\/p>\n<p>In meinem Fall bleibt die Struktur immer gleich:<\/p>\n<ul>\n<li>Ein Kreis im Hintergrund.<\/li>\n<li>Ein Temperatur- und Feuchtigkeitsmessger\u00e4t dar\u00fcber.<\/li>\n<li>Die gleichen Optionen, um ein leichtes Display zu erhalten.<\/li>\n<\/ul>\n<p>Was sich von einem Raum zum anderen \u00e4ndert, sind die Sensoren, die Position auf der Ebene und m\u00f6glicherweise die Gr\u00f6\u00dfe, Farbe oder Deckkraft des Kreises.<\/p>\n<p>Ich separiere daher die im Template definierte Pr\u00e4sentation von den raumspezifischen Informationen, die zum Zeitpunkt der Aufforderung eingegeben wurden.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%93%A6_Le_prerequis_decluttering-card\"><\/span>\ud83d\udce6 Die Voraussetzung: decluttering-card<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Dieser Teil geht davon aus, dass die benutzerdefinierte Karte <code>decluttering-card<\/code> ist bereits im Home Assistant installiert.<\/p>\n<p>Achten Sie darauf, die beiden Namen nicht zu verwechseln:<\/p>\n<ul>\n<li><code>decluttering_templates:<\/code> ist die Rubrik, in der ich meine Modelle deklariere.<\/li>\n<li><code>Typ: custom:decluttering-card<\/code> ist das Element, das eine dieser Vorlagen in meinem Dashboard aufruft.<\/li>\n<\/ul>\n<p>Das Template ersetzt nicht die Temperaturkarte. Er verwende einfach seine Konfiguration und verkn\u00fcpfe sie mit meinem Hintergrundbild.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%92%A1_Mon_astuce_pour_regrouper_deux_elements_dans_un_seul_template\"><\/span>\ud83d\udca1 Mein Tipp zum Gruppieren von zwei Elementen in einem Template<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Und hier ist der kleine Trick, den ich Ihnen f\u00fcr diese Montage teile.<\/p>\n<p>Normalerweise beschreibt ein decluttering Template eine einzelne Karte mit <code>Card:<\/code>, oder ein einzelnes Planelement mit <code>Element:<\/code>.<\/p>\n<p>Dies bedeutet nicht, dass es unm\u00f6glich ist, mehrere Elemente zu gruppieren, aber es muss eine Struktur durchlaufen werden, die sie enth\u00e4lt.<\/p>\n<p>In meinem Fall ben\u00f6tige ich gerade zwei Elemente: das Kreisbild und die Temperaturkarte.<\/p>\n<p>Ich kann also nicht einfach zwei Bl\u00f6cke direkt unter <code>Element:<\/code>. Ich brauche ein Element, das beides aufnehmen kann.<\/p>\n<p>Hier verwende ich eine kleine Veruntreuung von <code>Typ: bedingt<\/code>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%8E%81_Un_conditional%E2%80%A6_sans_condition\"><\/span>\ud83c\udf81 Eine Konditionalit\u00e4t... bedingungslos!<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In der Regel ein Element <code>bedingt<\/code> Wird nur verwendet, um Elemente anzuzeigen, wenn bestimmte Bedingungen erf\u00fcllt sind.<\/p>\n<p>Aber es hat vor allem etwas sehr Praktisches f\u00fcr meine Bed\u00fcrfnisse: eine Liste <code>Elemente:<\/code>, in dem ich mehrere Elemente platzieren kann.<\/p>\n<p>Das Prinzip der B\u00fcndelung in vereinfachter Form lautet wie folgt:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">element: Typ: conditional Bedingungen: [] elements: - Typ: Bild # Mein Hintergrundkreis - Typ: custom:appliance-room-climate-card # Mein Temperatur- und Feuchtigkeitsmessger\u00e4t<\/pre>\n<p>Mit <code>Bedingungen: []<\/code>, ich lege keine Bedingungen fest, die erf\u00fcllt werden m\u00fcssen: In meiner Montage bleibt die Gruppe angezeigt.<\/p>\n<p>Die <code>bedingt<\/code> Es dient mir also nicht dazu, mit einer Bedingung umzugehen. Es dient mir als Container, um meine beiden Elemente zusammenzubringen.<\/p>\n<p>Das ist der ganze Trick: nur einer <code>Element:<\/code> f\u00fcr decluttering, aber zwei Elemente im Inneren!<\/p>\n<p>Zum Zeitpunkt der Nutzung wird nur eine Aufforderung zur Einreichung von Vorschl\u00e4gen <code>custom:decluttering-card<\/code> Dann reicht es aus, den Kreis und das Messger\u00e4t zusammen anzuzeigen.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%97%82%EF%B8%8F_Ou_je_place_le_template\"><\/span>\ud83d\uddc2\u21d0 Wo ich das Template platziere<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ich platziere die Rubrik <code>decluttering_templates:<\/code> an der Wurzel der YAML-Dashboard-Konfiguration auf der gleichen Ebene wie <code>Views:<\/code>.<\/p>\n<p>Sie sollte daher nicht in die Liste aufgenommen werden. <code>Elemente:<\/code> des Plans.<\/p>\n<p>Wenn Sie bereits eine Rubrik haben <code>decluttering_templates:<\/code>, f\u00fcgen Sie einfach die Vorlage hinzu <code>metuge_temperature:<\/code> drinnen, neben Ihren anderen Templates.<\/p>\n<p>Um diese \u00c4nderung vorzunehmen, gehe ich auf <strong>Rohkonfigurationseditor<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11951\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-11-01-143335.png\" alt=\"\" width=\"373\" height=\"239\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-11-01-143335.png 373w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-11-01-143335-300x192.png 300w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-11-01-143335-18x12.png 18w\" sizes=\"auto, (max-width: 373px) 100vw, 373px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%A7%BE_Le_template_complet_de_ma_jauge\"><\/span>\ud83e\uddfe Das komplette Template meines Messger\u00e4ts<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Hier ist der vollst\u00e4ndige Code, den ich verwende:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">decluttering_templates: metuge_temperature: default: - Breite: 120 - opacite_fond: 0.5 - Farbe_Kreis: blau Element: Typ: Conditional Bedingungen: [] Stil: Position: absolute top: '[[top]]' left: '[[left]]' width: calc([[Breite]]px + 10px) height: calc([[Breite]]px + 10px) transform: translate(-50%, -50%) elements: - type: image image: '\/lokal\/Haus\/Kreis[[Farbe_Kreis]].png' Stil: Position: absolute top: 50% left: 50% width: '[[Breite]]px' opacity: '[[opacite_fond]]' transform: translate(-50%, -50%) z-index: 0 - Typ: custom:appliance-room-climate-card icon: '' entity_temperature: '[[temperature]]' entity_humidity: '[[humidite]]' temperature_unit: C language: fr show_status: false show_outdoor: false show_dew_point: false show_advice: false show_graph: false Animationen: false transparent: true name: \" \" variant: gauge show_trend: false illustration_size: '[[Breite]]' Stil: Position: absolute top: 50% left: 50% width: calc([[Breite]]px + 10px) transform: translate(-50%, -50%) z-index: 1<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%93%90_Je_positionne_le_groupe_puis_je_superpose_les_elements\"><\/span>\ud83d\udcd0 Ich positioniere die Gruppe und \u00fcberlagere dann die Elemente<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Die Position auf dem Plan wird auf dem Container mit den Koordinaten festgelegt, die an das Template \u00fcbermittelt werden:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">top: '[[top]]' left: '[[left]]'<\/pre>\n<p>Diese Koordinaten verschieben das Ganze: Der Kreis und das Messger\u00e4t bleiben verbunden.<\/p>\n<p>Innerhalb der Gruppe fokussiere ich beide Elemente mit denselben Eigenschaften:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">position: absolute top: 50% left: 50% transform: translate(-50%, -50%)<\/pre>\n<p>Dadurch k\u00f6nnen sie \u00fcberlagert werden.<\/p>\n<p>Ich betone dies, weil ich bei meinen Versuchen auf das Problem gesto\u00dfen bin: Ohne diese interne Positionierung wurden der Kreis und die Karte \u00fcbereinander angezeigt, anstatt \u00fcbereinander gelegt zu werden.<\/p>\n<p>Schlie\u00dflich definiere ich <code>z-index: 0<\/code> auf dem Kreis und <code>z-index: 1<\/code> auf dem Messger\u00e4t, um den Boden hinter den Informationen zu halten.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%93%8F_Une_seule_variable_pour_gerer_la_taille\"><\/span>\ud83d\udccf Eine einzige Variable zum Verwalten der Gr\u00f6\u00dfe<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ich habe mich daf\u00fcr entschieden, nur eine Gr\u00f6\u00dfenvariable beizubehalten: <code>breite<\/code>.<\/p>\n<p>Sein Wert ist eine Zahl ohne Einheit, z. B.:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- Breite: 120<\/pre>\n<p>Dies ist wichtig, da der Parameter <code>illustration_size<\/code> der Karte wartet hier auf einen Wert wie <code>120<\/code>, und nicht <code>120px<\/code> :<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">Abbildung_size: '[[Breite]]'<\/pre>\n<p>F\u00fcr CSS-Eigenschaften f\u00fcge ich daher die Einheit direkt in das Template ein:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">width: '[[Breite]]px'<\/pre>\n<p>Und f\u00fcr die Karte und ihren Beh\u00e4lter behalte ich eine gr\u00f6\u00dfere Breite von 10 Pixeln:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">width: calc([[Breite]]px + 10px)<\/pre>\n<p>Mit einem Wert von <code>120<\/code>, mein Hintergrund misst also <code>120px<\/code> breit und die Karte <code>130px<\/code>.<\/p>\n<p>Ich brauche nicht mehr zwei Breiten getrennt anzugeben.<\/p>\n<p>Seien Sie vorsichtig, bei Aufrufen des Templates m\u00fcssen Sie also schreiben <code>Breite: 120<\/code>, ohne Zusatz <code>px<\/code>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%8E%A8_Je_choisis_la_couleur_du_cercle\"><\/span>\ud83c\udfa8 Ich w\u00e4hle die Farbe des Kreises<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Um die Hintergrundfarbe zu \u00e4ndern, habe ich die Variable <code>Farbe_Kreis<\/code>.<\/p>\n<p>Der Pfad des Bildes ist mit diesem Wert aufgebaut:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">Bild: '\/lokal\/Haus\/Kreis[[Farbe_Kreis]].png'<\/pre>\n<p>Mit <code>Farbe_Kreis: blau<\/code>, verwendet das Template:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"text\">\/local\/haus\/cerclebleu.png<\/pre>\n<p>Mit <code>Farbe_Kreis: orange<\/code>, verwendet er:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"text\">\/lokal\/haus\/cercleorange.png<\/pre>\n<p>So kann ich aus den vier oben genannten Fonds w\u00e4hlen:<\/p>\n<ul>\n<li><code>blau<\/code><\/li>\n<li><code>beige<\/code><\/li>\n<li><code>gr\u00fcn<\/code><\/li>\n<li><code>orange<\/code><\/li>\n<\/ul>\n<p>Nat\u00fcrlich m\u00fcssen Sie die entsprechenden Dateien im Ordner platziert haben <code>\/config\/www\/haus\/<\/code>, wobei diese Namen beibehalten werden.<\/p>\n<p>Diese Variable \u00e4ndert nur das Hintergrundbild. Es \u00e4ndert nicht die Farben der B\u00f6gen des Messger\u00e4ts.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%94%A7_Les_valeurs_par_defaut\"><\/span>\ud83d\udd27 Die Standardwerte<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Der Block <code>default:<\/code> legt die Werte fest, die verwendet werden, wenn ich sie in der Aufforderung nicht anf\u00fchre:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">default: - Breite: 120 - opacite_fond: 0.5 - Farbe_Kreis: blau<\/pre>\n<p>Wenn ich nichts Besonderes verlange, erhalte ich daher einen blauen Kreis von <code>120px<\/code> breit, mit einer Opazit\u00e4t von <code>0.5<\/code>.<\/p>\n<p>Ich kann diese Werte f\u00fcr ein bestimmtes Teil ersetzen, ohne das gemeinsame Modell zu \u00e4ndern.<\/p>\n<p>Temperatur- und Feuchtigkeitseinheiten sowie Koordinaten <code>top<\/code> und <code>left<\/code> m\u00fcssen bei jedem Aufruf in diesem Template ausgef\u00fcllt werden.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%93%8D_Lappel_pour_mon_salon\"><\/span>\ud83d\udccd Der Aufruf zu meinem Wohnzimmer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In der Liste <code>Elemente:<\/code> von meiner Karte <code>picture-elements<\/code>, Ich ersetze nun die beiden alten Bl\u00f6cke durch diesen einzigen Aufruf:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- type: custom:decluttering-card template: jauge_temperature variable: - temperature: sensor.temperature_salon_temperature - humidite: sensor.temperature_salon_humidity - top: 60% - left: 47% - Breite: 120 - Farbe_Kreis: blau<\/pre>\n<p>Da ich jedoch die Standardwerte verwende, kann ich Folgendes vereinfachen:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- type: custom:decluttering-card template: jauge_temperature variable: - temperature: sensor.temperature_salon_temperature - humidite: sensor.temperature_salon_humidity - top: 60% - left: 47%\r\n<\/pre>\n<p>Hier benutze ich die Sensoren des Salons, ich stelle die Gruppe auf <code>60%<\/code> von oben und <code>47%<\/code> von links, und ich w\u00e4hle den orangefarbenen Hintergrund.<\/p>\n<p>Die Breite bleibt bei <code>120<\/code>. Ich habe es im Beispiel gelassen, um zu zeigen, wo ich es \u00e4ndern kann, aber ich k\u00f6nnte diese Zeile l\u00f6schen, da dies bereits der Standardwert ist.<\/p>\n<p>Gleiches gilt f\u00fcr die Undurchsichtigkeit: Da sie in diesem Aufruf nicht erscheint, beh\u00e4lt das Template <code>0.5<\/code>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-11938\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-11-01-110410.png\" alt=\"\" width=\"317\" height=\"275\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-11-01-110410.png 317w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-11-01-110410-300x260.png 300w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2026\/11\/Capture-decran-2026-11-01-110410-14x12.png 14w\" sizes=\"auto, (max-width: 317px) 100vw, 317px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%8F%A0_Je_reutilise_laffichage_dans_les_autres_pieces\"><\/span>\ud83c\udfe0 Ich verwende die Anzeige wieder in anderen R\u00e4umen<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Um ein weiteres Messger\u00e4t hinzuzuf\u00fcgen, dupliziere ich nur diesen kleinen Anrufblock.<\/p>\n<p>Ich ersetze beide Entit\u00e4ten und Koordinaten und passe dann gegebenenfalls Breite, Farbe oder Deckkraft an.<\/p>\n<p>Wenn ich beispielsweise eine kleinere Anzeige m\u00f6chte, kann ich Folgendes verwenden:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- Breite: 80<\/pre>\n<p>Und wenn ich den Hintergrund diskreter gestalten m\u00f6chte:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- opacite_fond: 0.3<\/pre>\n<p>Diese Zeilen sind in der Liste einzutragen. <code>Variablen:<\/code> der betreffenden Aufforderung zur Einreichung von Vorschl\u00e4gen.<\/p>\n<p>Ich muss nicht mehr die gesamte Konfiguration der Karte oder des Bildes kopieren.<\/p>\n<p>Und wenn ich eine Option \u00e4ndern m\u00f6chte, die allen meinen Messger\u00e4ten gemeinsam ist, mache ich dies in der Vorlage und nicht in jedem Raum.<\/p>\n<p>Dies ist vor allem das, wonach ich gesucht habe: eine Konfiguration, die einfacher zu pflegen ist, ohne die M\u00f6glichkeit zu verlieren, jede Anzeige anzupassen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%E2%9C%85_Ce_que_jai_gagne_avec_cette_modification\"><\/span>\u2705 Was ich mit dieser \u00c4nderung gewonnen habe<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Letztendlich bleibe ich bei der Arbeit, die ich bereits geliebt habe: Die Temperaturen bleiben auf der Ebene des Hauses direkt sichtbar.<\/p>\n<p>Aber jetzt habe ich eine leichtere Pr\u00e4sentation mit Feuchtigkeit an einem Ort.<\/p>\n<p>Und dank des Templates kann ich diese Anzeige in mehreren R\u00e4umen reproduzieren, ohne die identischen Konfigurationsbl\u00f6cke zu multiplizieren.<\/p>\n<p>Die kleine Abzweigung des <code>bedingt<\/code> erm\u00f6glicht es mir, den Kreis und das Messger\u00e4t zusammenzuhalten, mit nur einem Anruf f\u00fcr jedes St\u00fcck.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%8E%AF_Conclusion\"><\/span>\ud83c\udfaf Schlussfolgerung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ich habe weder meine Sensoren noch mein Dashboard-Prinzip ge\u00e4ndert.<\/p>\n<p>Ich habe einfach meine alten Abzeichen durch Messger\u00e4te ersetzt, einen diskreten Hintergrund hinzugef\u00fcgt und alles in einem wiederverwendbaren Modell zusammengefasst.<\/p>\n<p>Das Ergebnis passt mir optisch besser und die Konfiguration l\u00e4sst sich noch einfacher skalieren.<\/p>\n<p>F\u00fcr mich ist dies ein guter Weg, um ein bestehendes Dashboard zu modernisieren: die Pr\u00e4sentation zu verbessern, ohne von vorne zu beginnen.<\/p>","protected":false},"excerpt":{"rendered":"<p>\ud83c\udf21\ufe0f Pourquoi j\u2019ai voulu moderniser l\u2019affichage des temp\u00e9ratures Sur mon dashboard Home Assistant, j\u2019affiche les temp\u00e9ratures directement sur le plan de la maison. C\u2019est pratique : je vois tout de suite la temp\u00e9rature dans chaque pi\u00e8ce, sans avoir besoin d\u2019ouvrir une autre page. Jusqu\u2019\u00e0 pr\u00e9sent, j\u2019utilisais des \u00e9l\u00e9ments state-badge. Le r\u00e9sultat \u00e9tait bien lisible, avec [&hellip;]<\/p>","protected":false},"author":1,"featured_media":11932,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[14,53,166],"tags":[],"class_list":["post-11930","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-domotique","category-home-assistant","category-retex"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.sigalou-domotique.fr\/de\/wp-json\/wp\/v2\/posts\/11930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sigalou-domotique.fr\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sigalou-domotique.fr\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/de\/wp-json\/wp\/v2\/comments?post=11930"}],"version-history":[{"count":5,"href":"https:\/\/www.sigalou-domotique.fr\/de\/wp-json\/wp\/v2\/posts\/11930\/revisions"}],"predecessor-version":[{"id":11955,"href":"https:\/\/www.sigalou-domotique.fr\/de\/wp-json\/wp\/v2\/posts\/11930\/revisions\/11955"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/de\/wp-json\/wp\/v2\/media\/11932"}],"wp:attachment":[{"href":"https:\/\/www.sigalou-domotique.fr\/de\/wp-json\/wp\/v2\/media?parent=11930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/de\/wp-json\/wp\/v2\/categories?post=11930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/de\/wp-json\/wp\/v2\/tags?post=11930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}