Carte simple thermostat et card mod

Bonjour,

J’ai un souci avec la carte Simple Thermostat : celle-ci fonctionne très bien avec le modèle de base, mais je voudrais la modifier en utilisant le module card-mod. Et là, il ne se passe absolument rien : les ajouts dans le code yaml de la carte n’ont aucun effet !

A noter que j’utilise déjà car-mod avec des cartes mushroom, et ça fonctionne sans problème. Il y aurait donc un problème de compatibilité entre card-mod et simple thermostat ?

J’ai noté que la dernière version de simple thermostat date de 3 ans, donc peut être plus mis à jour ?

D’avance merci pour votre aide
David

Salut @David_Arrouch

A priori non, pas d’incompatibilité « card-mod », « simple-thermostat ».

Il faudrait que tu nous dises ce que tu cherches à faire et que tu partages le code que tu as essayé.

1 « J'aime »

Bonjour,
aucun soucis avec card_mod.

1 « J'aime »

bonsoir @Herbs,

et tout d’abord merci pour ta réactivité :wink: !

J’ai commencé vraiment simple, en voulant changer la couleur de la température de réglage, avec le code suivant, que j’ai trouvé sur community.homeassistant.io :

type: custom:simple-thermostat
entity: climate.chauffage_chambre_1
layout:
  mode:
    icons: true
  step: column
header: null
control: false
step_size: '0.5'
style: |
  ha-card.heating .current--value,
  ha-card.heating ha-icon.header__icon {
    color: red;
  }

Il te manque card_mod:.

card_mod:
  style: |

:sweat_smile:

1 « J'aime »

J’allais le dire :wink:

Je testerai après le repas

merci @WarC0zes pour ta réponse, donc un problème de mon côté, mais je ne sais pas encore si c’est un problème d’écriture de code, ou de configuration …

oui, effectivement je l’avais vu sur la copie d’écran de @WarC0zes , mais il me semblait déjà avoir essayé, et sans succès. Je viens de le tester à nouveau avec ce code :

type: custom:simple-thermostat
entity: climate.chauffage_chambre_1
layout:
  mode:
    icons: true
  step: column
header: null
control: false
step_size: "0.5"
card-mod:
  style: |
    ha-card.heating .current--value,
    ha-card.heating ha-icon.header__icon {
      color: red;
    }

tu veux changer quoi sur simple thermostats ?

à terme je voudrais changer les icônes, les tailles des polices, ajouter ou retirer des bouton pour les mode allumer/éteindre, mettre en chauffe, etc. Bref je voudrais l’adapter à ma sauce :wink:

tu as des variables CSS disponible sur la doc:

exemple:

type: 'custom:simple-thermostat'
card_mod:
  style: |
    ha-card {
      --st-font-size-xl: 24px;
      --st-font-size-m: 20px;
      --st-font-size-title: 20px;
      --st-font-size-sensors: 30px;
      --st-spacing: 2px;
   }

Pour le reste ( bouton ) c’est expliquer dans la doc aussi.

exemple de ma configue:
image

type: custom:simple-thermostat
entity: climate.versatile_thermostat_salon
step_size: "0.1"
sensors:
  - entity: sensor.0x54ef44100050f9c3_power
    name: Conso
  - entity: sensor.0x54ef44100050f9c3_energy
    name: Total Conso
  - entity: sensor.versatile_thermostat_salon_power_percent
    name: Allumé Pourcent
  - entity: >-
      sensor.versatile_thermostat_salon_mean_power_cycle
    name: Power Allumé
layout:
  step: row
  mode:
    headings: true
    icons: true
    names: true
header: {}
control:
  hvac:
    _name: Mode
    "off":
      name: Éteint
    heat:
      name: Chauffe
  preset:
    _name: prédéfini
    none:
      name: Manuel
      icon: mdi:thermometer-lines
    comfort:
      name: Jour
      icon: mdi:weather-sunny
    eco:
      name: Nuit
      icon: mdi:weather-night
    boost:
      name: Boost
      icon: mdi:arrow-top-right-thick
hide:
  temperature: false
  state: 0
card_mod:
  style: |
    ha-card {
      --st-font-size-title: 24px;
      --st-font-size-xl: 35px;
      --st-font-size-sensors: 15px;
      --st-mode-active-background: rgb(68, 115, 158);
      --st-spacing: 2.6px;
    }
    .modes > .mode-item {
      color: darkgrey;
      border-radius: 12px;
    }
    .modes > .mode-title {
      color: darkgrey;
    }
    .modes.heading {
      padding: 2px 10px 2px 10px;
    }

ok ça marche !
J’ai pu prendre une partie de ton code et le tester, juste modifier la taille de la police, et ça fonctionne :

type: custom:simple-thermostat
entity: climate.chauffage_chambre_1
layout:
  mode:
    icons: true
  step: column
header: null
control: false
step_size: "0.5"
card_mod:
  style: |
    ha-card {
      --st-font-size-title: 28px;
    }

Par contre le code qui permet de changer la couleur de la température de consigne ne fonctionne pas, même en ayant bien mis card-mod:

type: custom:simple-thermostat
entity: climate.chauffage_chambre_1
layout:
  mode:
    icons: true
  step: column
header: null
control: false
step_size: "0.5"
card_mod:
  style: |
    ha-card.heating .current--value,
    ha-card.heating ha-icon.header__icon {
      color: red;
    }

Voici le lien où j’ai trouvé ce code :

Pour la température de consigne :

card_mod:
  style: |
    ha-card > section> div.current-wrapper.row > h3 {
      color: red
    }

image

oui ça marche aussi !
Tu as utiliser la fonction « inspecter l’élément » de ton navigateur pour récupérer le code css de la température c’est bien ça ?

Oui avec card-mod c’est la « base » :wink:

1 « J'aime »

ok, merci @Herbs , je procéderai comme ça maintenant, ce sera plus simple, et plus efficace !

Ma dernière étape est que la température de consigne passe en rouge quand le chauffage est activé, je vais donc devoir mettre des structures condition dans card-mod, qui les accepte bien j’imagine ?

Oui, c’est exactement ça :wink:

Si tu regardes bien ma capture, au niveau de l’état j’ai une icône que je colore si les radiateurs chauffent.

Côté card_mod ça donne ça :

      card_mod:
        style: |
          div.sensors.with-labels.as-table > div:nth-child(4) > ha-icon {
          {% if state_attr(config.entity, 'hvac_action') == 'idle' %}
            color: white;
          {% elif state_attr(config.entity, 'hvac_action') == 'heating' %}
            color: coral;      
          {% else %}
            color: slategrey;
          {% endif %}  
          }

Tu peux t’en inspirer :wink:

Top ! Je vais effectivement m’en inspirer pour concevoir la carte qui répond à mes attentes, merci :wink:

Et juste pour revenir sur le card-mod à rajouter en début de code, quand on va sur la doc officielle, celle-ci :

nul part il n’est indiqué qu’il faut rajouter card-mod … !

En effet, la doc de « simple-thermostat » n’a pas été mise à jour.

Par contre, celle de « card-mod » oui :wink:

Bien vu, merci ! :+1: