{"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\/en\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant","title":{"rendered":"I replace my temperature badges with gauges"},"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-6ae8755f2c9cf\" 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-6ae8755f2c9cf\"  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\/en\/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\u2718 Why I wanted to modernise the display of temperatures<\/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\/en\/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 My old display with state badges<\/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\/en\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%A7%A9_Les_cartes_que_jai_retenues\" >\ud83e\udde9 The cards I have selected<\/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\/en\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%93%A6_Linstallation_dans_Home_Assistant\" >\ud83d\udce6 Installation in 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\/en\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%9B%92_Linstallation_avec_HACS\" >\ud83d\uded2 Installation with 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\/en\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%9B%A0%EF%B8%8F_Lalternative_sans_HACS\" >\ud83d\udee0\u2718 The HACS-free alternative<\/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\/en\/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 My new display: a circle and a gauge<\/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\/en\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%E2%9A%AA_Le_cercle_en_arriere-plan\" >\u26aa The circle in the background<\/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\/en\/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\u2718 The temperature and humidity map<\/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\/en\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%E2%9A%99%EF%B8%8F_Les_reglages_que_jai_retenus\" >\u2699\u2718 The settings I have chosen<\/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\/en\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%A7%AD_La_presentation_en_jauge\" >\ud83e\udded The presentation in gauge<\/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\/en\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%AA%9F_Un_affichage_volontairement_allege\" >\ud83e\ude9f A voluntarily lightened display<\/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\/en\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%93%90_Le_positionnement_sur_le_plan\" >\ud83d\udcd0 The positioning on the plane<\/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\/en\/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 The full code of my new display<\/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\/en\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%8E%81_Bonus_jutilise_decluttering_templates\" >\ud83c\udf81 Bonus: I use 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\/en\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%A7%A9_A_quoi_sert_decluttering_templates\" >\ud83e\udde9 What is decluttering_templates used for?<\/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\/en\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%93%A6_Le_prerequis_decluttering-card\" >\ud83d\udce6 The prerequisite: 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\/en\/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 My trick to group two elements in a single 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\/en\/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 A conditional... unconditional!<\/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\/en\/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\u2718 Where I place the template<\/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\/en\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%A7%BE_Le_template_complet_de_ma_jauge\" >\ud83e\uddfe The complete template of my gauge<\/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\/en\/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 I position the group, then I superimpose the elements<\/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\/en\/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 A single variable to manage size<\/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\/en\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%8E%A8_Je_choisis_la_couleur_du_cercle\" >\ud83c\udfa8 I choose the color of the circle<\/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\/en\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%94%A7_Les_valeurs_par_defaut\" >\ud83d\udd27 Default values<\/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\/en\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%93%8D_Lappel_pour_mon_salon\" >\ud83d\udccd The call for my living room<\/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\/en\/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 I reuse the display in other rooms<\/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\/en\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%E2%9C%85_Ce_que_jai_gagne_avec_cette_modification\" >\u2705 What I gained with this change<\/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\/en\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%8E%AF_Conclusion\" >\ud83c\udfaf Conclusion<\/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\u2718 Why I wanted to modernise the display of temperatures<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>On my Home Assistant dashboard, I display the temperatures directly on the map of the house.<\/p>\n<p>This is convenient: I immediately see the temperature in each room, without the need to open another page.<\/p>\n<p>Until now, I used elements <code>state-badge<\/code>. The result was clearly legible, with a temperature displayed roughly in a round badge.<\/p>\n<p>But I wanted something that was visually lighter, that fits better into the plan and also shows the humidity.<\/p>\n<p>The idea was not to change my sensors or redo my entire dashboard. I just wanted to present the same information differently.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%94%98_Mon_ancien_affichage_avec_des_state-badge\"><\/span>\ud83d\udd18 My old display with state badges<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>My initial configuration was quite simple: one element per sensor, positioned on the plane with the properties <code>top<\/code> and <code>left<\/code>.<\/p>\n<p>Note that these cards are included in a card of <strong>type: picture-elements<\/strong> general<\/p>\n<p>Here is, for example, the code I used for my living room:<\/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>This display was doing the job. The temperature was visible and each badge had its place on the plane.<\/p>\n<p>But the badge took on an important visual position, with its dark background and the unit displayed in a separate insert.<\/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 The cards I have selected<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>For this new display, I used the project <a href=\"https:\/\/github.com\/skyrotter\/ha-appliance-electromenager-cards\" target=\"_blank\" rel=\"noopener\">Appliance Appliance Appliance Cards<\/a> from <a href=\"https:\/\/github.com\/skyrotter\" target=\"_blank\" rel=\"noopener\">Skyrotter<\/a> or (<a tabindex=\"0\" href=\"https:\/\/forum.hacf.fr\/u\/nicolas59\" target=\"_blank\" rel=\"noopener\" aria-label=\"Profile of nicolas59\" data-user-card=\"nicolas59\">nicolas59<\/a> on HACF).<\/p>\n<p>The name is mostly reminiscent of washing machines, refrigerators and other equipment in the house. But in my case, it is the mood map of a room that interests me: <code>custom:appliance-room-climate-card<\/code>.<\/p>\n<p>For the new gauges, I also put you the link to the message on the HACF forum:<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\">The HACF discussion around maps and new gauges<\/a>.<\/p>\n<p>I will use a tiny part of the possibilities of the format <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>The aim, at home, is to keep only the information that is useful in terms of temperature and humidity, without adding a large full map per room.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%93%A6_Linstallation_dans_Home_Assistant\"><\/span>\ud83d\udce6 Installation in 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 with HACS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To install the cards, the easiest way is to go through HACS.<\/p>\n<p>In HACS, search <code>Animated Appliance &amp; Energy Cards<\/code>, then download the project (version higher than 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>Once the download is complete, reload the Home Assistant page. On a computer, you can use <code>Ctrl + F5<\/code> to force the browser to reload.<\/p>\n<p>If the project does not appear in the search, you can add it manually:<\/p>\n<ol>\n<li>Open HACS.<\/li>\n<li>Open the menu with the three dots.<\/li>\n<li>Go to custom repositories.<\/li>\n<li>Add the address of the deposit below.<\/li>\n<li>Choose the category of dashboard cards, called <code>Dashboard<\/code> in the project documentation.<\/li>\n<li>Then search for the project in HACS and download it.<\/li>\n<\/ol>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"text\">https:\/\/github.com\/skyrotter\/ha-appliance-electromenager-cards<\/pre>\n<p>Remember to reload your browser after installation.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%9B%A0%EF%B8%8F_Lalternative_sans_HACS\"><\/span>\ud83d\udee0\u2718 The HACS-free alternative<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The project also offers manual installation.<\/p>\n<p>In this case, it is necessary to recover the file <code>ha-appliance-electromenager-cards.js<\/code> present in the file <code>dist<\/code> of the repository, then copy it to the folder <code>\/config\/www\/<\/code> Home Assistant.<\/p>\n<p>It is then necessary to add a resource in the parameters of the dashboards:<\/p>\n<ul>\n<li>Address: <code>\/local\/ha-appliance-electromenager-cards.js<\/code><\/li>\n<li>Type: JavaScript module<\/li>\n<\/ul>\n<p>It is an alternative to HACS. There is no need to do both installations.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%8E%A8_Mon_nouvel_affichage_un_cercle_et_une_jauge\"><\/span>\ud83c\udfa8 My new display: a circle and a gauge<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To integrate the gauge into my plan, I used two overlapping elements:<\/p>\n<ul>\n<li>A circular image in the background.<\/li>\n<li>The temperature and humidity map above.<\/li>\n<\/ul>\n<p>The circle allows the display to be slightly detached from the decor, without completely hiding the room.<\/p>\n<p>The gauge then displays the values and colored arcs.<\/p>\n<p>On my new catch, the temperature appears in the centre and the humidity just below. The result is lighter than my old badge, while giving additional information.<\/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 The circle in the background<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>I started by adding the image that serves as background:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- type: image image: \/local\/house\/circlebleu.png style: top: 60% left: 42% width: 120px transform: translate(-50%, -50%) opacity: 0.5<\/pre>\n<p>In this example, my file is called <code>circlebleu.png<\/code>.<\/p>\n<p>Here is my file but everyone can customize. There are 3 other colors.<\/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>It is placed in the folder <code>\/config\/www\/house\/<\/code>, which corresponds to the address <code>\/local\/house\/circlebleu.png<\/code> used in the dashboard.<\/p>\n<p>This file is an image to be expected from your side: it is not an element provided automatically by the card. You can use your own circular background by adapting the path.<\/p>\n<p>I have retained a width of <code>120px<\/code> and an opacity of <code>0.5<\/code>. I wanted a visible background, but not an opaque disc that hides the plane.<\/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\u2718 The temperature and humidity map<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>I then added the map to the same location:<\/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 animations: false transparent: true name: \" \" variant: gauge show_trend: false style: top: 60% left: 42% width: 130px illustration_size: 120<\/pre>\n<p>This time, the example is about the fair. The entities are therefore different from those of the two outdoor temperatures shown at the beginning of the article.<\/p>\n<p>I use the following two entities:<\/p>\n<ul>\n<li><code>sensor.temperature_salon_temperature<\/code> for temperature.<\/li>\n<li><code>sensor.temperature_salon_humidity<\/code> for moisture.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%E2%9A%99%EF%B8%8F_Les_reglages_que_jai_retenus\"><\/span>\u2699\u2718 The settings I have chosen<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 The presentation in gauge<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>This presentation is chosen using the following parameter:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">variant: gauge<\/pre>\n<p>It is this setting that I use to get the display with the arcs around the values.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%AA%9F_Un_affichage_volontairement_allege\"><\/span>\ud83e\ude9f A voluntarily lightened display<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In terms of the house, I do not need all the information that a full map can offer.<\/p>\n<p>I have therefore deactivated several elements:<\/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>I thus keep the essentials for this view: read the temperature and humidity quickly.<\/p>\n<p>I also use these settings:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">transparent: true name: \" \" icon: '' animations: false<\/pre>\n<p>In my setup, I don't want any additional room names or icons, and I disable animations.<\/p>\n<p>The location of the gauge on the plan already provides context. I do not need to repeat \u2018Salon\u2019 there.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%93%90_Le_positionnement_sur_le_plan\"><\/span>\ud83d\udcd0 The positioning on the plane<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The circle and the map use exactly the same coordinates:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">top: 60% left: 42%<\/pre>\n<p>This makes it possible to place them in the same place. I played a little bit on width, but it was up to everyone to adapt to their screen.<\/p>\n<p>These dimensions correspond to my plan and my display. They are to be adjusted according to the space available on your dashboard.<\/p>\n<p>Both blocks are to be inserted in the list <code>elements:<\/code> of my card <code>picture-elements<\/code>, instead of the old badges concerned.<\/p>\n<p>Therefore, these are not two independent maps to be added elsewhere on the dashboard.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%A7%BE_Le_code_complet_de_mon_nouvel_affichage\"><\/span>\ud83e\uddfe The full code of my new display<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To have both elements in the same place in the configuration, here is the complete block that I use for the living room.<\/p>\n<p>The image is declared first, then the gauge:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- type: image image: \/local\/house\/circlebleu.png style: top: 60% left: 42% width: 120px transform: translate(-50%, -50%) opacity: 0.5 - 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 animations: false transparent: true name: \" \" variant: gauge show_trend: false style: top: 60% left: 42% width: 130px illustration_size: 120<\/pre>\n<p>To reproduce this display in another room, I take the two elements by changing the entities and the coordinates.<\/p>\n<p>I simply make sure to keep the same values of <code>top<\/code> and <code>left<\/code> for the bottom and the gauge of the same piece.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%8E%81_Bonus_jutilise_decluttering_templates\"><\/span>\ud83c\udf81 Bonus: I use decluttering_templates<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>At this point, my new display works with two elements: the background circle and the gauge.<\/p>\n<p>For a single piece, it is not inconvenient to keep both blocks directly in the dashboard.<\/p>\n<p>But to reproduce this display in several rooms, I will have to copy a good part of the code each time.<\/p>\n<p>And the day I want to change the presentation, it will be necessary to take each block, with the risk of forgetting one.<\/p>\n<p>So I grouped this display in a reusable template with <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 What is decluttering_templates used for?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The principle is simple: I define once the structure of my display, then I reuse it by passing some variables.<\/p>\n<p>In my case, the structure always remains the same:<\/p>\n<ul>\n<li>A circle in the background.<\/li>\n<li>A temperature and humidity gauge above.<\/li>\n<li>The same options to keep a light display.<\/li>\n<\/ul>\n<p>What changes from room to room are the sensors, the position on the plane and possibly the size, colour or opacity of the circle.<\/p>\n<p>I therefore separate the presentation, defined in the template, from the information specific to each item, provided at the time of the call.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%93%A6_Le_prerequis_decluttering-card\"><\/span>\ud83d\udce6 The prerequisite: decluttering-card<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>This part assumes that the custom card <code>decluttering-card<\/code> is already installed in Home Assistant.<\/p>\n<p>Be careful not to confuse the two names:<\/p>\n<ul>\n<li><code>decluttering _templates:<\/code> is the section in which I declare my models.<\/li>\n<li><code>type: custom:decluttering-card<\/code> is the element that calls one of these templates in my dashboard.<\/li>\n<\/ul>\n<p>The template does not replace the temperature map. It simply reuses its configuration, associating it with my background image.<\/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 My trick to group two elements in a single template<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>And here is the little trick I share with you for this montage.<\/p>\n<p>Normally, a decluttering template describes a single card with <code>card:<\/code>, or a single plan element with <code>element:<\/code>.<\/p>\n<p>This does not mean that it is impossible to group several elements together, but it is necessary to go through a structure that contains them.<\/p>\n<p>In my case, I need two elements: the image of the circle and the temperature map.<\/p>\n<p>So I can't just put two blocks directly under <code>element:<\/code>. I need something that can contain both.<\/p>\n<p>This is where I use a small diversion of <code>type: conditional<\/code>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%8E%81_Un_conditional%E2%80%A6_sans_condition\"><\/span>\ud83c\udf81 A conditional... unconditional!<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Usually, an element <code>conditional<\/code> is used to display items only when certain conditions are met.<\/p>\n<p>But above all it has something very practical for my need: a list <code>elements:<\/code>, in which I can place several elements.<\/p>\n<p>The principle of grouping, in a simplified form, is as follows:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">element: type: conditional conditions: [] elements: - type: image # My background circle - type: custom:appliance-room-climate-card # My temperature and humidity gauge<\/pre>\n<p>With <code>conditions: []<\/code>, I do not define any conditions to meet: in my assembly, the group remains displayed.<\/p>\n<p>The <code>conditional<\/code> So I don't use it to manage a condition. It serves as a container to bring my two elements together.<\/p>\n<p>This is all the trick: only one <code>element:<\/code> for decluttering, but two elements inside!<\/p>\n<p>At the time of use, only one call for <code>custom:decluttering-card<\/code> It is then sufficient to display the circle and gauge together.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%97%82%EF%B8%8F_Ou_je_place_le_template\"><\/span>\ud83d\uddc2\u2718 Where I place the template<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>I place the rubric <code>decluttering _templates:<\/code> at the root of the dashboard YAML configuration, at the same level as <code>views:<\/code>.<\/p>\n<p>It should therefore not be added to the list <code>elements:<\/code> of the plan.<\/p>\n<p>If you already have a section <code>decluttering _templates:<\/code>, just add the template <code>temperature_gauge:<\/code> inside, next to your other templates.<\/p>\n<p>To make this change, I'm going to <strong>Raw Configuration Editor<\/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 The complete template of my gauge<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Here is the full code I use:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">decluttering_templates: gauge_temperature: default: - width: 120 - opacite_background: 0.5 - color_circle: blue element: type: conditional conditions: [] style: position: absolute top: '[[top]]' left: '[[left]]' width: calc([[width]]px + 10px) height: calc([[width]]px + 10px) transform: translate(-50%, -50%) elements: - type: image image: '\/local\/house\/circle[[color_circle]].png' style: position: absolute top: 50% left: 50% width: '[[width]]px' opacity: '[[opacite_fond]]' transform: translate(-50%, -50%) z-index: 0 - type: custom:appliance-room-climate-card icon: '' entity_temperature: '[[temperature]]' entity_humidity: '[[wet]]' temperature_unit: C language: fr show_status: false show_outdoor: false show_dew_point: false show_advice: false show_graph: false animations: false transparent: true name: \" \" variant: gauge show_trend: false illustration_size: '[[width]]' style: position: absolute top: 50% left: 50% width: calc([[width]]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 I position the group, then I superimpose the elements<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The position on the plane is defined on the container, with the coordinates transmitted to the template:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">top: '[[top]]' left: '[[left]]'<\/pre>\n<p>These coordinates move the whole: the circle and the gauge remain associated.<\/p>\n<p>Within the group, I focus both elements with the same properties:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">position: absolute top: 50% left: 50% transform: translate(-50%, -50%)<\/pre>\n<p>This is what allows them to be superimposed.<\/p>\n<p>I insist on this point because I encountered the problem during my tests: without this internal positioning, the circle and the map were displayed one above the other, instead of being superimposed.<\/p>\n<p>Finally, I define <code>z-index: 0<\/code> on the circle and <code>z-index: 1<\/code> on the gauge to keep the background behind the information.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%93%8F_Une_seule_variable_pour_gerer_la_taille\"><\/span>\ud83d\udccf A single variable to manage size<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>I have chosen to keep only one size variable: <code>width<\/code>.<\/p>\n<p>Its value is a number without a unit, for example:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- width: 120<\/pre>\n<p>This is important because the parameter <code>illustration_size<\/code> of the card expects here a value like <code>120<\/code>, not <code>120px<\/code> :<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">illustration_size: '[[width]]'<\/pre>\n<p>For CSS properties, I therefore add the unit directly in the template:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">width: '[[width]]px'<\/pre>\n<p>And for the card and its container, I keep a width greater than 10 pixels:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">width: calc([[width]]px + 10px)<\/pre>\n<p>With a value of <code>120<\/code>, so my bottom measures <code>120px<\/code> wide and map <code>130px<\/code>.<\/p>\n<p>I no longer need to fill in two widths separately.<\/p>\n<p>Be careful, in calls to the template, you must write <code>width: 120<\/code>, without adding <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 I choose the color of the circle<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To change the colour of the background, I have set the variable <code>color_circle<\/code>.<\/p>\n<p>The image path is constructed with this value:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">image: '\/local\/house\/circle[[color_circle]].png'<\/pre>\n<p>With <code>color_circle: blue<\/code>, the template uses:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"text\">\/local\/house\/circlebleu.png<\/pre>\n<p>With <code>color_circle: orange<\/code>, it uses:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"text\">\/local\/house\/cercleorange.png<\/pre>\n<p>I can thus choose from the four funds presented above:<\/p>\n<ul>\n<li><code>blue<\/code><\/li>\n<li><code>beige<\/code><\/li>\n<li><code>green<\/code><\/li>\n<li><code>orange<\/code><\/li>\n<\/ul>\n<p>You must of course have placed the corresponding files in the folder <code>\/config\/www\/house\/<\/code>, retaining those names.<\/p>\n<p>This variable only changes the background image. It does not change the colors of the gauge arches.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%94%A7_Les_valeurs_par_defaut\"><\/span>\ud83d\udd27 Default values<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The block <code>default:<\/code> defines the values used when I do not specify them in the call:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">default: - width: 120 - opacite_background: 0.5 - color_circle: blue<\/pre>\n<p>If I do not ask for anything special, then I get a blue circle of <code>120px<\/code> wide, with an opacity of <code>0.5<\/code>.<\/p>\n<p>I can replace these values for a specific part, without changing the common model.<\/p>\n<p>On the other hand, temperature and humidity entities and coordinates <code>top<\/code> and <code>left<\/code> must be filled in each call in this template.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%93%8D_Lappel_pour_mon_salon\"><\/span>\ud83d\udccd The call for my living room<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In the list <code>elements:<\/code> of my card <code>picture-elements<\/code>, I am now replacing the two old blocks with this one call:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- type: custom:decluttering-card template: jauge_temperature variables: - temperature: sensor.temperature_salon_temperature - humidite: sensor.temperature_salon_humidity - top: 60% - left: 47% - width: 120 - color_circle: blue<\/pre>\n<p>But since I use the default values, I can simplify by:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- type: custom:decluttering-card template: jauge_temperature variables: - temperature: sensor.temperature_salon_temperature - humidite: sensor.temperature_salon_humidity - top: 60% - left: 47%\r\n<\/pre>\n<p>Here, I use the sensors of the show, I place the group at <code>60%<\/code> from above and <code>47%<\/code> from the left, and I choose the orange background.<\/p>\n<p>The width remains at <code>120<\/code>. I left it in the example to show where to change it, but I could delete this row as it is already the default.<\/p>\n<p>Same for opacity: as it does not appear in this call, the template keeps <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 I reuse the display in other rooms<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To add another gauge, I only duplicate this small call block.<\/p>\n<p>I replace the two entities and the coordinates and then adjust the width, colour or opacity if necessary.<\/p>\n<p>For example, if I want a smaller display, I can use:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- width: 80<\/pre>\n<p>And if I want to make the background more discreet:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- opacite_fond: 0.3<\/pre>\n<p>These lines must be entered in the list <code>variables:<\/code> of the relevant call.<\/p>\n<p>I no longer have to copy the entire layout of the map or image.<\/p>\n<p>And if I want to modify an option common to all my gauges, I do it in the template rather than in each room.<\/p>\n<p>This is especially what I was looking for: a configuration that is easier to maintain, without losing the possibility of adapting each display.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%E2%9C%85_Ce_que_jai_gagne_avec_cette_modification\"><\/span>\u2705 What I gained with this change<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In the end, I keep the operation I already loved: the temperatures remain directly visible on the plane of the house.<\/p>\n<p>But now I have a lighter presentation, with the humidity in the same place.<\/p>\n<p>And thanks to the template, I can reproduce this display in several rooms without multiplying the identical configuration blocks.<\/p>\n<p>The small diversion of the <code>conditional<\/code> Allows me to keep the circle and gauge together, with a single call for each piece.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%8E%AF_Conclusion\"><\/span>\ud83c\udfaf Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>I have not changed my sensors or the principle of my dashboard.<\/p>\n<p>I simply replaced my old badges with gauges, added a discreet background and grouped it all in a reusable model.<\/p>\n<p>The result suits me better visually, and the configuration remains simpler to evolve.<\/p>\n<p>For me, this is a good way to modernise an existing dashboard: improve the presentation, without starting all over again.<\/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\/en\/wp-json\/wp\/v2\/posts\/11930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/comments?post=11930"}],"version-history":[{"count":5,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/posts\/11930\/revisions"}],"predecessor-version":[{"id":11955,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/posts\/11930\/revisions\/11955"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/media\/11932"}],"wp:attachment":[{"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/media?parent=11930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/categories?post=11930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/tags?post=11930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}