{"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\/es\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant","title":{"rendered":"Reemplazo mis insignias de temperatura con medidores"},"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-6ae8755e36159\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">alternar<\/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-6ae8755e36159\"  aria-label=\"Alternador\" \/><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\/es\/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 Por qu\u00e9 quer\u00eda modernizar la visualizaci\u00f3n de las temperaturas<\/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\/es\/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 Mi antigua pantalla con insignias de estado<\/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\/es\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%A7%A9_Les_cartes_que_jai_retenues\" >\ud83e\udde9 Las cartas que he seleccionado<\/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\/es\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%93%A6_Linstallation_dans_Home_Assistant\" >\ud83d\udce6 Instalaci\u00f3n en el hogar Asistente<\/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\/es\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%9B%92_Linstallation_avec_HACS\" >\ud83d\uded2 Instalaci\u00f3n con 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\/es\/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 La alternativa libre de 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\/es\/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 Mi nueva pantalla: un c\u00edrculo y un medidor<\/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\/es\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%E2%9A%AA_Le_cercle_en_arriere-plan\" >\u26aa El c\u00edrculo en el fondo<\/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\/es\/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 El mapa de temperatura y humedad<\/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\/es\/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 Los ajustes que he elegido<\/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\/es\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%A7%AD_La_presentation_en_jauge\" >\ud83e\udded La presentaci\u00f3n en 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\/es\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%AA%9F_Un_affichage_volontairement_allege\" >\ud83e\ude9f Una pantalla iluminada voluntariamente<\/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\/es\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%93%90_Le_positionnement_sur_le_plan\" >\ud83d\udcd0 El posicionamiento en el avi\u00f3n<\/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\/es\/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 El c\u00f3digo completo de mi nueva pantalla<\/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\/es\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%8E%81_Bonus_jutilise_decluttering_templates\" >\ud83c\udf81 Bonus: Uso 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\/es\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%A7%A9_A_quoi_sert_decluttering_templates\" >\ud83e\udde9 \u00bfPara qu\u00e9 se utiliza 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\/es\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%93%A6_Le_prerequis_decluttering-card\" >\ud83d\udce6 El prerrequisito: 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\/es\/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 Mi truco para agrupar dos elementos en una sola plantilla<\/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\/es\/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 Un condicional... \u00a1incondicional!<\/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\/es\/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 Donde coloco la plantilla<\/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\/es\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%A7%BE_Le_template_complet_de_ma_jauge\" >\ud83e\uddfe La plantilla completa de mi medidor<\/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\/es\/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 Posiciono el grupo, luego superpongo los elementos<\/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\/es\/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 Una \u00fanica variable para gestionar el tama\u00f1o<\/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\/es\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%8E%A8_Je_choisis_la_couleur_du_cercle\" >\ud83c\udfa8 Elijo el color del c\u00edrculo<\/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\/es\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%94%A7_Les_valeurs_par_defaut\" >\ud83d\udd27 Valores predeterminados<\/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\/es\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%93%8D_Lappel_pour_mon_salon\" >\ud83d\udccd La llamada para mi sala de estar<\/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\/es\/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 Reutilizo la pantalla en otras habitaciones<\/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\/es\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%E2%9C%85_Ce_que_jai_gagne_avec_cette_modification\" >\u2705 Lo que gan\u00e9 con este cambio<\/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\/es\/je-remplace-mes-badges-de-temperature-par-des-jauges-dans-home-assistant\/#%F0%9F%8E%AF_Conclusion\" >\ud83c\udfaf Conclusi\u00f3n<\/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 Por qu\u00e9 quer\u00eda modernizar la visualizaci\u00f3n de las temperaturas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>En mi panel de control de Home Assistant, muestro las temperaturas directamente en el mapa de la casa.<\/p>\n<p>Esto es conveniente: veo inmediatamente la temperatura en cada habitaci\u00f3n, sin la necesidad de abrir otra p\u00e1gina.<\/p>\n<p>Hasta ahora, he utilizado elementos <code>distintivo del Estado<\/code>. El resultado fue claramente legible, con una temperatura mostrada aproximadamente en una insignia redonda.<\/p>\n<p>Pero quer\u00eda algo que fuera visualmente m\u00e1s ligero, que encajara mejor en el plan y que tambi\u00e9n mostrara la humedad.<\/p>\n<p>La idea no era cambiar mis sensores o rehacer todo mi tablero. Solo quer\u00eda presentar la misma informaci\u00f3n de manera diferente.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%94%98_Mon_ancien_affichage_avec_des_state-badge\"><\/span>\ud83d\udd18 Mi antigua pantalla con insignias de estado<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Mi configuraci\u00f3n inicial fue bastante simple: un elemento por sensor, posicionado en el plano con las propiedades <code>top<\/code> y <code>izquierda<\/code>.<\/p>\n<p>Tenga en cuenta que estas tarjetas est\u00e1n incluidas en una tarjeta de <strong>Tipo: elementos de imagen<\/strong> general<\/p>\n<p>Aqu\u00ed est\u00e1, por ejemplo, el c\u00f3digo que us\u00e9 para mi sala de estar:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- tipo: entidad de estado-insignia: sensor.temperature_salon_temperature style: top: 98% izquierda: 22% tama\u00f1o de fuente: 40px text-align: centro font-weight: negrita color: transparente<\/pre>\n<p>Esta pantalla estaba haciendo el trabajo. La temperatura era visible y cada insignia ten\u00eda su lugar en el avi\u00f3n.<\/p>\n<p>Pero la insignia tom\u00f3 una posici\u00f3n visual importante, con su fondo oscuro y la unidad mostrada en un inserto separado.<\/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 Las cartas que he seleccionado<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Para esta nueva pantalla, utilic\u00e9 el proyecto <a href=\"https:\/\/github.com\/skyrotter\/ha-appliance-electromenager-cards\" target=\"_blank\" rel=\"noopener\">Tarjetas de electrodom\u00e9sticos<\/a> desde <a href=\"https:\/\/github.com\/skyrotter\" target=\"_blank\" rel=\"noopener\">Skyrotter<\/a> o (<a tabindex=\"0\" href=\"https:\/\/forum.hacf.fr\/u\/nicolas59\" target=\"_blank\" rel=\"noopener\" aria-label=\"Perfil de nicolas59\" data-user-card=\"nicolas59\">nicolas59<\/a> sobre HACF).<\/p>\n<p>El nombre es en su mayor\u00eda una reminiscencia de lavadoras, refrigeradores y otros equipos en la casa. Pero en mi caso, es el mapa de humor de una habitaci\u00f3n lo que me interesa: <code>custom:appliance-room-climate-card<\/code>.<\/p>\n<p>Para los nuevos medidores, tambi\u00e9n le pongo el enlace al mensaje en el foro HACF:<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\">La discusi\u00f3n de HACF en torno a mapas y nuevos medidores<\/a>.<\/p>\n<p>Voy a utilizar una peque\u00f1a parte de las posibilidades del formato <strong>g\u00e1libo<\/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>El objetivo, en casa, es mantener solo la informaci\u00f3n que es \u00fatil en t\u00e9rminos de temperatura y humedad, sin agregar un gran mapa completo por habitaci\u00f3n.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%93%A6_Linstallation_dans_Home_Assistant\"><\/span>\ud83d\udce6 Instalaci\u00f3n en el hogar Asistente<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 Instalaci\u00f3n con HACS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Para instalar las tarjetas, la forma m\u00e1s f\u00e1cil es pasar por HACS.<\/p>\n<p>En HACS, buscar <code>Electrodom\u00e9sticos animados &amp; Tarjetas de energ\u00eda<\/code>, luego descargue el proyecto (versi\u00f3n superior a 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>Una vez completada la descarga, vuelva a cargar la p\u00e1gina del Asistente de inicio. En una computadora, puede usar <code>Ctrl + F5<\/code> para forzar al navegador a recargar.<\/p>\n<p>Si el proyecto no aparece en la b\u00fasqueda, puede a\u00f1adirlo manualmente:<\/p>\n<ol>\n<li>Abrir HACS.<\/li>\n<li>Abre el men\u00fa con los tres puntos.<\/li>\n<li>Vaya a repositorios personalizados.<\/li>\n<li>Agregue la direcci\u00f3n del dep\u00f3sito a continuaci\u00f3n.<\/li>\n<li>Elija la categor\u00eda de tarjetas de tablero, llamada <code>Cuadro de mandos<\/code> en la documentaci\u00f3n del proyecto.<\/li>\n<li>Luego busque el proyecto en HACS y desc\u00e1rguelo.<\/li>\n<\/ol>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"text\">https:\/\/github.com\/skyrotter\/ha-appliance-electromenager-cards<\/pre>\n<p>Recuerde volver a cargar su navegador despu\u00e9s de la instalaci\u00f3n.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%9B%A0%EF%B8%8F_Lalternative_sans_HACS\"><\/span>\ud83d\udee0\u2718 La alternativa libre de HACS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>El proyecto tambi\u00e9n ofrece instalaci\u00f3n manual.<\/p>\n<p>En este caso, es necesario recuperar el archivo <code>ha-appliance-electromenager-cards.js<\/code> presente en el expediente <code>dist<\/code> del repositorio, luego c\u00f3pielo en la carpeta <code>\/config\/www\/<\/code> Asistente de casa.<\/p>\n<p>A continuaci\u00f3n, es necesario a\u00f1adir un recurso en los par\u00e1metros de los cuadros de mando:<\/p>\n<ul>\n<li>Direcci\u00f3n: <code>\/local\/ha-appliance-electromenager-cards.js<\/code><\/li>\n<li>Tipo: M\u00f3dulo JavaScript<\/li>\n<\/ul>\n<p>Es una alternativa a HACS. No hay necesidad de hacer ambas instalaciones.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%8E%A8_Mon_nouvel_affichage_un_cercle_et_une_jauge\"><\/span>\ud83c\udfa8 Mi nueva pantalla: un c\u00edrculo y un medidor<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Para integrar el medidor en mi plan, utilic\u00e9 dos elementos superpuestos:<\/p>\n<ul>\n<li>Una imagen circular en el fondo.<\/li>\n<li>El mapa de temperatura y humedad de arriba.<\/li>\n<\/ul>\n<p>El c\u00edrculo permite que la pantalla est\u00e9 ligeramente separada de la decoraci\u00f3n, sin ocultar completamente la habitaci\u00f3n.<\/p>\n<p>A continuaci\u00f3n, el indicador muestra los valores y los arcos de colores.<\/p>\n<p>En mi nueva captura, la temperatura aparece en el centro y la humedad justo debajo. El resultado es m\u00e1s ligero que mi antigua insignia, mientras que da informaci\u00f3n adicional.<\/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 El c\u00edrculo en el fondo<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Empec\u00e9 a\u00f1adiendo la imagen que sirve de fondo:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- tipo: imagen imagen: \/local\/house\/circlebleu.png estilo: top: 60% izquierda: 42% anchura: Transformaci\u00f3n 120px: translate(-50%, -50%) opacidad: 0.5<\/pre>\n<p>En este ejemplo, mi archivo se llama <code>circlebleu.png<\/code>.<\/p>\n<p>Aqu\u00ed est\u00e1 mi archivo, pero todo el mundo puede personalizar. Hay otros 3 colores.<\/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>Se coloca en la carpeta <code>\/config\/www\/house\/<\/code>, que corresponde a la direcci\u00f3n <code>\/local\/casa\/circlebleu.png<\/code> utilizado en el panel de control.<\/p>\n<p>Este archivo es una imagen que se espera de su lado: no es un elemento proporcionado autom\u00e1ticamente por la tarjeta. Puede usar su propio fondo circular adaptando el camino.<\/p>\n<p>He conservado un ancho de <code>120px<\/code> y una opacidad de <code>0.5<\/code>. Quer\u00eda un fondo visible, pero no un disco opaco que ocultara el avi\u00f3n.<\/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 El mapa de temperatura y humedad<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Luego agregu\u00e9 el mapa a la misma ubicaci\u00f3n:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- tipo: custom:appliance-room-climate-card icono: '' entity_temperature: sensor.temperature_salon_temperature entity_humidity: sensor.temperature_salon_humidity temperature_unit: Lenguaje C: fr show_status: false show_outdoor: false show_dew_point: false show_advice: false show_graph: false animations: false transparent: true name: Variante \" \": gauge show_trend: false style: top: 60% izquierda: 42% anchura: 130px ilustraci\u00f3n_tama\u00f1o: 120<\/pre>\n<p>Esta vez, el ejemplo es sobre la feria. Por lo tanto, las entidades son diferentes de las dos temperaturas exteriores que se muestran al principio del art\u00edculo.<\/p>\n<p>Utilizo las dos entidades siguientes:<\/p>\n<ul>\n<li><code>sensor.temperature_salon_temperature<\/code> para la temperatura.<\/li>\n<li><code>sensor.temperature_salon_humidity<\/code> para la humedad.<\/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 Los ajustes que he elegido<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 La presentaci\u00f3n en gauge<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Esta presentaci\u00f3n se elige utilizando el siguiente par\u00e1metro:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">variante: g\u00e1libo<\/pre>\n<p>Es esta configuraci\u00f3n la que utilizo para obtener la pantalla con los arcos alrededor de los valores.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%AA%9F_Un_affichage_volontairement_allege\"><\/span>\ud83e\ude9f Una pantalla iluminada voluntariamente<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>En cuanto a la casa, no necesito toda la informaci\u00f3n que un mapa completo puede ofrecer.<\/p>\n<p>Por lo tanto, he desactivado varios elementos:<\/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>Por lo tanto, guardo lo esencial para esta vista: leer la temperatura y la humedad r\u00e1pidamente.<\/p>\n<p>Tambi\u00e9n utilizo estos ajustes:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">transparente: nombre verdadero: Icono \" \": Animaciones '': falsas<\/pre>\n<p>En mi configuraci\u00f3n, no quiero nombres de habitaci\u00f3n o iconos adicionales, y desactivo las animaciones.<\/p>\n<p>La ubicaci\u00f3n del medidor en el plan ya proporciona contexto. No necesito repetir \u00abSalon\u00bb all\u00ed.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%93%90_Le_positionnement_sur_le_plan\"><\/span>\ud83d\udcd0 El posicionamiento en el avi\u00f3n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>El c\u00edrculo y el mapa utilizan exactamente las mismas coordenadas:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">top: 60% izquierda: 42%<\/pre>\n<p>Esto hace posible colocarlos en el mismo lugar. Jugu\u00e9 un poco en ancho, pero depend\u00eda de todos adaptarse a su pantalla.<\/p>\n<p>Estas dimensiones corresponden a mi plan y mi pantalla. Deben ajustarse de acuerdo con el espacio disponible en su tablero.<\/p>\n<p>Ambos bloques deben insertarse en la lista <code>elementos:<\/code> de mi tarjeta <code>elementos pict\u00f3ricos<\/code>, en lugar de las antiguas tarjetas de identificaci\u00f3n de que se trate.<\/p>\n<p>Por lo tanto, estos no son dos mapas independientes que se agregar\u00e1n en otra parte del tablero.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%A7%BE_Le_code_complet_de_mon_nouvel_affichage\"><\/span>\ud83e\uddfe El c\u00f3digo completo de mi nueva pantalla<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Para tener ambos elementos en el mismo lugar en la configuraci\u00f3n, aqu\u00ed est\u00e1 el bloque completo que utilizo para la sala de estar.<\/p>\n<p>La imagen se declara primero, luego el medidor:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- tipo: imagen imagen: \/local\/house\/circlebleu.png estilo: top: 60% izquierda: 42% anchura: Transformaci\u00f3n 120px: translate(-50%, -50%) opacidad: 0.5 - tipo: custom:appliance-room-climate-card icono: '' entity_temperature: sensor.temperature_salon_temperature entity_humidity: sensor.temperature_salon_humidity temperature_unit: Lenguaje C: fr show_status: false show_outdoor: false show_dew_point: false show_advice: false show_graph: false animations: false transparent: true name: Variante \" \": gauge show_trend: false style: top: 60% izquierda: 42% anchura: 130px ilustraci\u00f3n_tama\u00f1o: 120<\/pre>\n<p>Para reproducir esta pantalla en otra habitaci\u00f3n, tomo los dos elementos cambiando las entidades y las coordenadas.<\/p>\n<p>Simplemente me aseguro de mantener los mismos valores de <code>top<\/code> y <code>izquierda<\/code> para el fondo y el calibre de la misma pieza.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%8E%81_Bonus_jutilise_decluttering_templates\"><\/span>\ud83c\udf81 Bonus: Uso decluttering_templates<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>En este punto, mi nueva pantalla funciona con dos elementos: el c\u00edrculo de fondo y el medidor.<\/p>\n<p>Para una sola pieza, no es inconveniente mantener ambos bloques directamente en el tablero.<\/p>\n<p>Pero para reproducir esta pantalla en varias habitaciones, tendr\u00e9 que copiar una buena parte del c\u00f3digo cada vez.<\/p>\n<p>Y el d\u00eda que quiera cambiar la presentaci\u00f3n, ser\u00e1 necesario coger cada bloque, con el riesgo de olvidar uno.<\/p>\n<p>As\u00ed que agrup\u00e9 esta pantalla en una plantilla reutilizable con <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 \u00bfPara qu\u00e9 se utiliza decluttering_templates?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>El principio es simple: defino una vez la estructura de mi pantalla, luego la reutilizo pasando algunas variables.<\/p>\n<p>En mi caso, la estructura siempre sigue siendo la misma:<\/p>\n<ul>\n<li>Un c\u00edrculo en el fondo.<\/li>\n<li>Un medidor de temperatura y humedad arriba.<\/li>\n<li>Las mismas opciones para mantener una pantalla de luz.<\/li>\n<\/ul>\n<p>Lo que cambia de habitaci\u00f3n en habitaci\u00f3n son los sensores, la posici\u00f3n en el avi\u00f3n y posiblemente el tama\u00f1o, color u opacidad del c\u00edrculo.<\/p>\n<p>Por lo tanto, separe la presentaci\u00f3n, definida en la plantilla, de la informaci\u00f3n espec\u00edfica de cada elemento, proporcionada en el momento de la convocatoria.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%93%A6_Le_prerequis_decluttering-card\"><\/span>\ud83d\udce6 El prerrequisito: decluttering-card<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Esta parte asume que la tarjeta personalizada <code>decluttering-card<\/code> ya est\u00e1 instalado en Home Assistant.<\/p>\n<p>Tenga cuidado de no confundir los dos nombres:<\/p>\n<ul>\n<li><code>desmontaje de _templates:<\/code> es la secci\u00f3n en la que declaro mis modelos.<\/li>\n<li><code>Tipo: custom:decluttering-card<\/code> es el elemento que llama a una de estas plantillas en mi panel de control.<\/li>\n<\/ul>\n<p>La plantilla no reemplaza el mapa de temperatura. Simplemente reutiliza su configuraci\u00f3n, asoci\u00e1ndola con mi imagen de fondo.<\/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 Mi truco para agrupar dos elementos en una sola plantilla<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Y aqu\u00ed est\u00e1 el peque\u00f1o truco que comparto con ustedes para este montaje.<\/p>\n<p>Normalmente, una plantilla de decluttering describe una sola tarjeta con <code>tarjeta:<\/code>, o un \u00fanico elemento del plan con <code>elemento:<\/code>.<\/p>\n<p>Esto no significa que sea imposible agrupar varios elementos, pero es necesario pasar por una estructura que los contenga.<\/p>\n<p>En mi caso, necesito dos elementos: la imagen del c\u00edrculo y el mapa de temperatura.<\/p>\n<p>As\u00ed que no puedo simplemente poner dos bloques directamente debajo <code>elemento:<\/code>. Necesito algo que pueda contener ambos.<\/p>\n<p>Aqu\u00ed es donde uso una peque\u00f1a desviaci\u00f3n de <code>tipo: condicional<\/code>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%8E%81_Un_conditional%E2%80%A6_sans_condition\"><\/span>\ud83c\udf81 Un condicional... \u00a1incondicional!<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Por lo general, un elemento <code>condicional<\/code> se utiliza para mostrar elementos solo cuando se cumplen ciertas condiciones.<\/p>\n<p>Pero sobre todo tiene algo muy pr\u00e1ctico para mi necesidad: una lista <code>elementos:<\/code>, en el que puedo colocar varios elementos.<\/p>\n<p>El principio de agrupaci\u00f3n, en forma simplificada, es el siguiente:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">Elemento: tipo: condiciones condicionales: [] elementos: - tipo: imagen # Mi c\u00edrculo de fondo - tipo: custom:appliance-room-climate-card # Mi medidor de temperatura y humedad<\/pre>\n<p>Con <code>condiciones: []<\/code>, no defino ninguna condici\u00f3n a cumplir: en mi ensamblaje, el grupo permanece exhibido.<\/p>\n<p>El <code>condicional<\/code> As\u00ed que no lo uso para manejar una condici\u00f3n. Sirve como un contenedor para unir mis dos elementos.<\/p>\n<p>Este es todo el truco: solo uno <code>elemento:<\/code> para el decluttering, pero dos elementos en el interior!<\/p>\n<p>En el momento del uso, solo una llamada para <code>custom:decluttering-card<\/code> Entonces es suficiente mostrar el c\u00edrculo y el calibre juntos.<\/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 Donde coloco la plantilla<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Coloco la r\u00fabrica <code>desmontaje de _templates:<\/code> en la ra\u00edz de la configuraci\u00f3n YAML del tablero, al mismo nivel que <code>vistas:<\/code>.<\/p>\n<p>Por lo tanto, no debe a\u00f1adirse a la lista. <code>elementos:<\/code> del plan.<\/p>\n<p>Si ya tienes una secci\u00f3n <code>desmontaje de _templates:<\/code>, solo tiene que a\u00f1adir la plantilla <code>calibre de temperatura:<\/code> dentro, junto a tus otras plantillas.<\/p>\n<p>Para hacer este cambio, voy a <strong>Editor de configuraci\u00f3n en bruto<\/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 La plantilla completa de mi medidor<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Aqu\u00ed est\u00e1 el c\u00f3digo completo que uso:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">decluttering_templates: gauge_temperature: default: - width: 120 - opacite_background: 0.5 - color_circle: azul elemento: tipo: condiciones condicionales: [] estilo: posici\u00f3n: top absoluto: \u00ab[[arriba]]\u00bb a la izquierda: Ancho '[[izquierda]]': calc([[ancho]]px + 10px) altura: calc([[ancho]]px + 10px) transformaci\u00f3n: translate(-50%, -50%) elementos: - tipo: imagen imagen: '\/local\/house\/circle[[color_circle]].png' style: position: absolute top: 50% izquierda: 50% anchura: '[[ancho]]px' opacidad: '[[opacite_fond]]' transform: translate(-50%, -50%) \u00edndice z: 0 - tipo: custom:appliance-room-climate-card icono: '' entidad_temperatura: \u00ab[[temperatura]]\u00bb entidad_humedad: \u00ab[[wet]]\u00bb unidad de temperatura: Lenguaje C: fr show_status: false show_outdoor: false show_dew_point: false show_advice: false show_graph: false animations: false transparent: true name: \" \" variante: gauge show_trend: false illustration_size: Estilo '[[ancho]]': posici\u00f3n: top absoluto: 50% izquierda: 50% ancho: calc([[ancho]]px + 10px) transform: translate(-50%, -50%) \u00edndice z: 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 Posiciono el grupo, luego superpongo los elementos<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La posici\u00f3n en el plano se define en el contenedor, con las coordenadas transmitidas a la plantilla:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">top: \u00ab[[arriba]]\u00bb a la izquierda: \u00ab[[izquierda]]\u00bb<\/pre>\n<p>Estas coordenadas mueven el todo: el c\u00edrculo y el medidor permanecen asociados.<\/p>\n<p>Dentro del grupo, enfoco ambos elementos con las mismas propiedades:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">posici\u00f3n: top absoluto: 50% izquierda: 50% transformar: traducir(-50%, -50%)<\/pre>\n<p>Esto es lo que les permite superponerse.<\/p>\n<p>Insisto en este punto porque me encontr\u00e9 con el problema durante mis pruebas: sin este posicionamiento interno, el c\u00edrculo y el mapa se mostraban uno encima del otro, en lugar de superponerse.<\/p>\n<p>Finalmente, defino <code>\u00cdndice z: 0<\/code> en el c\u00edrculo y <code>\u00cdndice z: 1<\/code> en el g\u00e1libo para mantener el fondo detr\u00e1s de la informaci\u00f3n.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%93%8F_Une_seule_variable_pour_gerer_la_taille\"><\/span>\ud83d\udccf Una \u00fanica variable para gestionar el tama\u00f1o<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>He optado por mantener solo una variable de tama\u00f1o: <code>ancho<\/code>.<\/p>\n<p>Su valor es un n\u00famero sin unidad, por ejemplo:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- anchura: 120<\/pre>\n<p>Esto es importante porque el par\u00e1metro <code>Ilustraci\u00f3n_tama\u00f1o<\/code> de la tarjeta espera aqu\u00ed un valor como <code>120<\/code>, no <code>120px<\/code> :<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">Ilustraci\u00f3n_tama\u00f1o: \u00ab[[ancho]]\u00bb<\/pre>\n<p>Para las propiedades CSS, por lo tanto, agrego la unidad directamente en la plantilla:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">anchura: \u00ab[[ancho]]px\u00bb<\/pre>\n<p>Y para la tarjeta y su contenedor, mantengo un ancho superior a 10 p\u00edxeles:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">ancho: calc([[ancho]]px + 10px)<\/pre>\n<p>Con un valor de <code>120<\/code>, por lo que mis medidas de fondo <code>120px<\/code> ancho y mapa <code>130px<\/code>.<\/p>\n<p>Ya no necesito rellenar dos anchos por separado.<\/p>\n<p>Tenga cuidado, en las llamadas a la plantilla, debe escribir <code>anchura: 120<\/code>, sin a\u00f1adir <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 Elijo el color del c\u00edrculo<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Para cambiar el color del fondo, he establecido la variable <code>color_c\u00edrculo<\/code>.<\/p>\n<p>La ruta de la imagen se construye con este valor:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">Imagen: '\/local\/casa\/c\u00edrculo[[color_circle]].png'<\/pre>\n<p>Con <code>color_c\u00edrculo: azul<\/code>, la plantilla utiliza:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"text\">\/local\/casa\/circlebleu.png<\/pre>\n<p>Con <code>color_c\u00edrculo: naranja<\/code>, utiliza:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"text\">\/local\/casa\/cercleorange.png<\/pre>\n<p>Por lo tanto, puedo elegir entre los cuatro fondos presentados anteriormente:<\/p>\n<ul>\n<li><code>azul<\/code><\/li>\n<li><code>beige<\/code><\/li>\n<li><code>verde<\/code><\/li>\n<li><code>naranja<\/code><\/li>\n<\/ul>\n<p>Por supuesto, debe haber colocado los archivos correspondientes en la carpeta <code>\/config\/www\/house\/<\/code>, conservando esos nombres.<\/p>\n<p>Esta variable solo cambia la imagen de fondo. No cambia los colores de los arcos de calibre.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%94%A7_Les_valeurs_par_defaut\"><\/span>\ud83d\udd27 Valores predeterminados<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>El bloque <code>por defecto:<\/code> define los valores utilizados cuando no los especifico en la llamada:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">por defecto: - anchura: 120 - opacite_background: 0.5 - color_c\u00edrculo: azul<\/pre>\n<p>Si no pido nada especial, entonces obtengo un c\u00edrculo azul de <code>120px<\/code> ancho, con una opacidad de <code>0.5<\/code>.<\/p>\n<p>Puedo reemplazar estos valores para una parte espec\u00edfica, sin cambiar el modelo com\u00fan.<\/p>\n<p>Por otro lado, entidades y coordenadas de temperatura y humedad <code>top<\/code> y <code>izquierda<\/code> debe cumplimentarse en cada convocatoria de este modelo.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%F0%9F%93%8D_Lappel_pour_mon_salon\"><\/span>\ud83d\udccd La llamada para mi sala de estar<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>En la lista <code>elementos:<\/code> de mi tarjeta <code>elementos pict\u00f3ricos<\/code>, Ahora estoy reemplazando los dos bloques antiguos con esta llamada:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- type: custom:decluttering-card template: jauge_temperature variables: - temperatura: sensor.temperature_salon_temperature - humidite: sensor.temperature_salon_humidity - top: 60% - izquierda: 47% - anchura: 120 - color_c\u00edrculo: azul<\/pre>\n<p>Pero como uso los valores predeterminados, puedo simplificar:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- type: custom:decluttering-card template: jauge_temperature variables: - temperatura: sensor.temperature_salon_temperature - humidite: sensor.temperature_salon_humidity - top: 60% - izquierda: 47%\r\n<\/pre>\n<p>Aqu\u00ed, uso los sensores del espect\u00e1culo, coloco el grupo en <code>60%<\/code> desde arriba y <code>47%<\/code> desde la izquierda, y elijo el fondo naranja.<\/p>\n<p>El ancho permanece en <code>120<\/code>. Lo dej\u00e9 en el ejemplo para mostrar d\u00f3nde cambiarlo, pero podr\u00eda eliminar esta fila ya que ya es la predeterminada.<\/p>\n<p>Lo mismo para la opacidad: como no aparece en esta llamada, la plantilla se mantiene <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 Reutilizo la pantalla en otras habitaciones<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Para agregar otro medidor, solo duplico este peque\u00f1o bloque de llamadas.<\/p>\n<p>Reemplazo las dos entidades y las coordenadas y luego ajusto el ancho, el color o la opacidad si es necesario.<\/p>\n<p>Por ejemplo, si quiero una pantalla m\u00e1s peque\u00f1a, puedo usar:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- anchura: 80<\/pre>\n<p>Y si quiero hacer el fondo m\u00e1s discreto:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">- opacite_fond: 0.3<\/pre>\n<p>Estas l\u00edneas deben introducirse en la lista <code>variables:<\/code> de la convocatoria correspondiente.<\/p>\n<p>Ya no tengo que copiar todo el dise\u00f1o del mapa o la imagen.<\/p>\n<p>Y si quiero modificar una opci\u00f3n com\u00fan a todos mis medidores, lo hago en la plantilla en lugar de en cada habitaci\u00f3n.<\/p>\n<p>Esto es especialmente lo que estaba buscando: una configuraci\u00f3n que sea m\u00e1s f\u00e1cil de mantener, sin perder la posibilidad de adaptar cada pantalla.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%E2%9C%85_Ce_que_jai_gagne_avec_cette_modification\"><\/span>\u2705 Lo que gan\u00e9 con este cambio<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Al final, mantengo la operaci\u00f3n que ya amaba: las temperaturas permanecen directamente visibles en el plano de la casa.<\/p>\n<p>Pero ahora tengo una presentaci\u00f3n m\u00e1s ligera, con la humedad en el mismo lugar.<\/p>\n<p>Y gracias a la plantilla, puedo reproducir esta pantalla en varias salas sin multiplicar los bloques de configuraci\u00f3n id\u00e9nticos.<\/p>\n<p>El peque\u00f1o desv\u00edo de la <code>condicional<\/code> Me permite mantener el c\u00edrculo y el calibre juntos, con una sola llamada para cada pieza.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%F0%9F%8E%AF_Conclusion\"><\/span>\ud83c\udfaf Conclusi\u00f3n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>No he cambiado mis sensores ni el principio de mi panel de control.<\/p>\n<p>Simplemente reemplac\u00e9 mis insignias antiguas con medidores, agregu\u00e9 un fondo discreto y lo agrup\u00e9 todo en un modelo reutilizable.<\/p>\n<p>El resultado me conviene mejor visualmente, y la configuraci\u00f3n sigue siendo m\u00e1s f\u00e1cil de evolucionar.<\/p>\n<p>Para m\u00ed, esta es una buena manera de modernizar un panel de control existente: mejorar la presentaci\u00f3n, sin comenzar todo de nuevo.<\/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\/es\/wp-json\/wp\/v2\/posts\/11930","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sigalou-domotique.fr\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sigalou-domotique.fr\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/es\/wp-json\/wp\/v2\/comments?post=11930"}],"version-history":[{"count":5,"href":"https:\/\/www.sigalou-domotique.fr\/es\/wp-json\/wp\/v2\/posts\/11930\/revisions"}],"predecessor-version":[{"id":11955,"href":"https:\/\/www.sigalou-domotique.fr\/es\/wp-json\/wp\/v2\/posts\/11930\/revisions\/11955"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/es\/wp-json\/wp\/v2\/media\/11932"}],"wp:attachment":[{"href":"https:\/\/www.sigalou-domotique.fr\/es\/wp-json\/wp\/v2\/media?parent=11930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/es\/wp-json\/wp\/v2\/categories?post=11930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/es\/wp-json\/wp\/v2\/tags?post=11930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}