Input_number et tactile

Pulpy-Luke · Avril 13, 2021, 5:50

Bonsoir,

Quelqu’un connait il une autre solution que les 2 modes par défaut pour les input number, adaptée à une interface tactile :

box : c’est carrément impossible … j’ai le sentiment d’avoir des gros doigts et de ne pas savoir viser.
slider: c’est acceptable, à condition de fixer les bornes min/max
numberbox-card c’est pas vraiment la révolution …
GitHub - htmltiger/numberbox-card: Replace input_number sliders with plus and minus buttons

Un truc genre bouton, et si l’on clique dessus, un sélecteur comme pour les thermostats ça pourrait être idéal, mais j’ai pas mis la main sur un exemple

Mais si vous avez des idées/suggestions/astuces je suis preneur !

Merci !

Clemalex · Avril 13, 2021, 8:55

Pour une utilisation tactile, j’ai préféré passer par un sélecteur (input_select) :

https://i.ibb.co/drRPnH3/20210413-224702.gif(taille de l'image supérieure à 4 MB)

Si tu souhaites garder ton nombre input_number, tu fais une automatisation qui se déclenche sur un changement d’état du sélecteur et qui mets à jour le nombre :

#automation:
alias: Mise à jour <du nombre>
description: Permet de mettre à jour le nombre dès que le sélecteur change
mode: single
trigger:
  - platform: state
    entity_id: input_select.hacf
condition: []
action:
  - service: input_number.set_value
    target:
      entity_id: input_number.hacf
    data:
      value: "{{ states('input_select.hacf')|float }}"

Pulpy-Luke · Avril 13, 2021, 9:21

Merci pour cette idée.

Effectivement j’avais pas pensé à mettre un select. C’est une alternative à tester. Avec un pas d’un demi degré sur une plage de 4 à 28 (rapport à mes vannes danfoss), ça fait finalement pas plus de choix que dans ton exemple.

Je vais tester et voir ce que ça donne.

Coté automatisation, il faut que je vérifie mais conserver l’input, si c’est pas une obligation d’avoir un intermédiaire, moi je m’en fiche. L’idée c’est de faire un petit panel de pilotage, donc une fois la température réglée il faut envoyer l’info aux vannes.

Clemalex · Avril 13, 2021, 9:53

Tu peux si tu veux vraiment la même chose que les thermostats les détourner :

type: thermostat
entity: climate.nombre
style:
  round-slider:
    $: |
      svg > g.slider > path.path{stroke: blue;}
      svg > g.slider > path.bar{stroke: green;}
      .handle{stroke: red;}
  .: |
    ha-card > mwc-icon-button{display: none;}
    #info{display: none;}
    #set-mode{display: none;}
    #set-values{overflow: inherit;transform: translate(0%, -140%) !important;}
    #set-values{font-size: 50px !important;}
    #value{stroke: green !important;}

Et pour la définition, tu ruses aussi :

climate:
  - platform: generic_thermostat
    name: nombre
    heater: switch.climate
    target_sensor: sensor.climate
    min_temp: 0
    max_temp: 100
    precision: 1.0
switch:
  - platform: template
    switches:
      climate:
        value_template: "{{ is_state('sensor.climate', 'on') }}"
        turn_on:
          service: switch.turn_on
          target:
            entity_id: switch.climate
        turn_off:
          service: switch.turn_off
          target:
            entity_id: switch.climate
sensor:
  - platform: template
    sensors:
      climate:
        value_template: ""

il y a un léger décalage lors de la première mise à jour de la valeur…à corriger par ceux qui savent

Pulpy-Luke · Avril 14, 2021, 6:47

C’est top cette astuce !
Merci

Bubule · Avril 14, 2021, 8:09

Pour ajuster des consignes, j’ai créé des boutons + et - (leur taille est facilement paramétrable).
Chaque bouton pilote un input_boolean
Puis des automations pilotées par ces boutons qui augmentent ou baissent un input_number.

Un exemple :

- id: 'augmentation consigne Temp salon reduit'
  alias: Augmentation consigne temperature salon reduit
  description: 'incrémentation de la consigne T° salon reduit'
  
  trigger:
    - platform: state
      entity_id: input_boolean.bouton_plus_temperature_sr
      to: 'on'
      
  condition: []      
      
  action: 
    - service: input_number.set_value
      data:
        entity_id: input_number.consigne_salon_nuit
        value: "{{ ( states('input_number.consigne_salon_nuit' ) | float +  0.2 ) | round (1)  }}"
                
    - delay:
        milliseconds: 200
     
    - data:
        entity_id: input_boolean.bouton_plus_temperature_sr
      service: input_boolean.turn_off

   
  
- id: 'diminution consigne Temp salon confort reduit'
  alias: Diminution consigne temperature salon reduit
  description: 'décrémentation de la consigne T° salon reduit'
  
  trigger:
    - platform: state
      entity_id: input_boolean.bouton_moins_temperature_sr
      to: 'on'
      
  condition: []      
      
  action: 
    - service: input_number.set_value
      data:
        entity_id: input_number.consigne_salon_nuit
        value: "{{ ( states('input_number.consigne_salon_nuit' ) | float -  0.2 ) | round (1)  }}"
             
    - delay:
        milliseconds: 200
     
    - data:
        entity_id: input_boolean.bouton_moins_temperature_sr
      service: input_boolean.turn_off

Clemalex · Avril 14, 2021, 9:33

Tu pourrais t’épargner de créer un booléen et une automatisation si ton bouton appelée directement un script contenant uniquement l’action d’incrémentation (et un second script pour la décrémentation sauf si tu passes par des variables, tu n’auras besoin que d’un script)

Si tu ne vois pas comment faire n’hésite pas à ouvrir un post dédié en mettant un lien vers celui-ci, je te guiderais

Pulpy-Luke · Avril 14, 2021, 11:07

Merci @Bubule pour cette autre solution.

Je suis néanmoins partie sur l’adaptation avec les sliders circulaires (j’aime bien le look) et c’est hyper pratique au doigt

Quelques modifs sur les styles (en fait j’ai gardé le style de base pour l’instant) et je vais chercher pour afficher les unités.

Pour l’instant j’ai ça
climate

#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
- platform: generic_thermostat
  name: consigne_confort
  heater: switch.chauffage
  target_sensor: sensor.consigne_confort
  min_temp: 17
  max_temp: 22
  precision: 0.5

sensor

#++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
- platform: template
  sensors:
    consigne_confort:
      value_template: ""
      unit_of_measurement: "°C"

Coté switch

- platform: template
  switches:
    chauffage:
      value_template: "{{ is_state('sensor.consigne_celsius', 'on') }}"
      turn_on:
        service: switch.turn_on
        target:
          entity_id: switch.chauffage
      turn_off:
        service: switch.turn_off
        target:
          entity_id: switch.chauffage

Coté fonctions le mode, je sais pas trop quoi en faire. J’avais jusque là un input_boolean global pour indiquer si chauffage = on ou off. Là c’est un peu différent puisque j’ai potentiellement 4 switchs

Mais ça prends forme

La carte / affichée on/off, et suppression des ombres :

type: conditional
conditions:
  - entity: input_boolean.activation_chauffage
    state: 'on'
card:
  type: 'custom:stack-in-card'
  mode: vertical
  cards:
    - type: grid
      cards:
        - type: thermostat
          entity: climate.consigne_confort
          name: Consigne Confort
          style:
            round-slider:
              $: ''
            .: >
              ha-card > mwc-icon-button{display: none;} #set-mode{display:
              none;} #set-values{overflow: inherit;transform: translate(0%,
              -140%) !important;} #set-values{font-size: 50px !important;}
              #value{stroke: green !important;}
        - type: thermostat
          entity: climate.consigne_eco
          name: Consigne Eco
          style:
            round-slider:
              $: ''
            .: >
              ha-card > mwc-icon-button{display: none;} #set-mode{display:
              none;} #set-values{overflow: inherit;transform: translate(0%,
              -140%) !important;} #set-values{font-size: 50px !important;}
              #value{stroke: green !important;}
        - type: thermostat
          entity: climate.consigne_sdb
          name: Consigne Salle de Bain
          style:
            round-slider:
              $: ''
            .: >
              ha-card > mwc-icon-button{display: none;} #set-mode{display:
              none;} #set-values{overflow: inherit;transform: translate(0%,
              -140%) !important;} #set-values{font-size: 50px !important;}
              #value{stroke: green !important;}
        - type: thermostat
          entity: climate.consigne_absent
          name: Consigne Absent
          style:
            round-slider:
              $: ''
            .: >
              ha-card > mwc-icon-button{display: none;} #set-mode{display:
              none;} #set-values{overflow: inherit;transform: translate(0%,
              -140%) !important;} #set-values{font-size: 50px !important;}
              #value{stroke: green !important;}
      columns: 2
      title: Consignes

Clemalex · Avril 14, 2021, 11:23

Si dans :

Tu remplace "" par "0", tu auras l’affichage en dessous de la température actuelle qui à une unité.

Avec card-mod tu masques la température actuelle pour n’afficher que l’unité qui sera en dessous…

Pulpy-Luke · Avril 14, 2021, 7:28

Il y a une astuce pour trouver le bon élément sur lequel agir et la bonne propriété ?
Je suis passé par la vue html de chrome
Le bloc card-mod est vide
Et l’affichage est dans le bloc avec l’unité dans celui avec l’id température
Comme j’ai le bloc set-values aussi j’ai tenté sans succès

```
#temperature{display: none;}
```

#temperature{visibility: hidden !important;}

Clemalex · Avril 14, 2021, 10:25

Les outils de développement de ton navigateur

Pulpy-Luke · Avril 16, 2021, 9:03

Bonsoir,

J’ai fait quelques essais et j’ai trouvé plusieurs choses :

Dans l’exemple précédent, on perds le mode responsive et donc la consigne se trouve parfois décalée/décentrée en fonction de la résolution sur mobile par exemple…

Donc je suis parti sur l’idée d’exploiter l’attribut current_temperature au lieu de temperature pour l’affichage, puisque là, le centrage est toujours bon et en plus les unités sont là…

Pour synchroniser les deux valeurs, j’ai corrigé le sensor:

- platform: template
  sensors:
    consigne_confort:
      value_template: "{{ state_attr('climate.consigne_confort', 'temperature') | float }}"
      unit_of_measurement: "°C"

Comme ça c’est synchro sans passer par une automatisation ou un script
thermo

Il reste juste un truc : cacher le set-value… pour éviter le doublon

      - type: thermostat
        entity: climate.consigne_confort
        name: Consigne Confort
        style:
          round-slider:
            $: ''
          .: |
            ha-card > mwc-icon-button{display: none;}
            #set-values{display: none;}
            #set-mode{display: none;}

MAIS du coup, on perds l’info pendant le déplacement… pas pratique à moins de viser juste du 1er coup.
thermo
Donc idéalement il faudrait faire le #set-values{display: none;} seulement quand les 2 valeurs sont différentes… mais je sais pas faire

Bruno27610 · Janvier 17, 2023, 9:32

Bonjour Bubule
Pourrais tu donner le code de ta carte stp ?
Je voudrais a peu près la même pour ma pac
Merci
Bonne journee

Bubule · Janvier 21, 2023, 5:07

Bonjour Bruno,

Je ne vais pas détailler la partie qui peut t’intéresser, alors je te donne le code de toute ma carte de gestion de deux zones de chauffage. Sans doute y trouveras tu un ou plusieurs éléments intéressants.


####################################
##########  Chauffage global  #######
####################################

  - title: Chauffage Global
    path: chauffage-global
    panel: false
    icon: 'mdi:thermometer'
    theme: noctis
    badges: []
    cards:
      - type: vertical-stack
        cards:
        
        # Boutons Zones
          - type: horizontal-stack
            cards:
            
              - type: vertical-stack
                cards:

                - type: 'custom:button-card'
                  color_type: card
                  entity: input_boolean.bit_zone_temperature
                  styles:
                    card:
                      - height: 50px
                  state:
                    - value: 'on'
                      color: rgb(31, 61, 160)
                      name: Zone Salon en cours
                      icon: mdi:sofa
                      styles:
                        card:
                          - filter: opacity(100%)
                      
                    - operator: default
                      name: Zone en veille (chambre en cours)
                      color: rgb(130, 150, 30)
                      icon: mdi:bed
                      styles:
                        card:
                          - filter: opacity(30%)
                          
                          
                - type: 'custom:button-card'
                  color_type: card
                  entity: input_boolean.bit_zone_temperature
                  styles:
                    card:
                      - height: 50px
                  state:
                    - value: 'off'
                      color: rgb(31, 61, 160)
                      name: Zone Chambre en cours
                      icon: mdi:bed
                      styles:
                        card:
                          - filter: opacity(100%)
                    - operator: default
                      name: Zone chambre en veille
                      color: rgb(130, 150, 30)
                      icon: mdi:widgets
                      styles:
                        card:
                          - filter: opacity(30%)
              
             
        # Boutons periode        
              - type: vertical-stack
                cards:
              
                - type: 'custom:button-card'
                  color_type: card
                  entity:  input_boolean.bit_temperature_confort_salon
                  styles:
                    card:
                      - height: 50px
                      - filter: |
                          [[[
                            if (states['input_boolean.bit_zone_temperature'].state == 'off')
                              return "opacity(30%)";
                            return "opacity(100%)";
                          ]]]
                  state:
                    - value: 'on'
                      color: rgb(31, 60, 160)
                      name: Salon en confort
                      icon: mdi:weather-sunny
                    - operator: default
                      name: Salon en réduit
                      color: rgb(130, 150, 30)
                      icon: mdi:weather-night 
        
              
                - type: 'custom:button-card'
                  color_type: card
                  entity:  input_boolean.bit_temperature_confort_chambre
                  styles:
                    card:
                      - height: 50px
                      - filter: |
                          [[[
                            if (states['input_boolean.bit_zone_temperature'].state == 'on')
                              return "opacity(30%)";
                            return "opacity(100%)";
                          ]]]
                 
                  state:
                    - value: 'on'
                      color: rgb(31, 60, 160)
                      name: Chambre en confort
                      icon: mdi:weather-sunny
                    - operator: default
                      name: Chambre en réduit
                      color: rgb(130, 150, 30)
                      icon: mdi:weather-night 
                      
                      
                      
     #### INDICATEURS  ####                 
                      
          - type: horizontal-stack
            cards:
            
            - type: 'custom:button-card'
              color_type: blank-card
         
                  
            - type: 'custom:button-card'
              color_type: card
              entity: switch.relais_pompe_chaudiere
              tap_action:
                action: false
              state:
                - value: 'on' 
                  icon: 'mdi:recycle-variant'
                  color: green
                  name: Circulation
                - operator: default
                  icon: 'mdi:recycle-variant'
                  color: grey
                  name: Pompe Arret
              styles:
                card:
                  - height: 30px
                  - width: 50px
                  - font-size: 6px
                  - filter: |
                      [[[
                        if (states['switch.relais_pompe_chaudiere'].state == 'off')
                          return "opacity(30%)";
                        return "opacity(100%)";
                      ]]]                    
             
            - type: 'custom:button-card'
              color_type: card
              entity:  input_boolean.secu_surtemperature
              tap_action:
                action: false
              state:
                - value: 'on' 
                  icon: 'mdi:alert-outline'
                  color: red
                  name: surchauffe
                - value: 'off'
                  styles:
                    card:
                    - filter: opacity(0%)
                    icon:
                    - filter: grayscale(0%)
              styles:
                card:
                  - height: 30px
                  - font-size: 6px
                        
                  
            - type: 'custom:button-card'
              color_type: card
              entity: input_boolean.bouton_boost_temperature
              show_icon: false
              styles:
                card:
                  - height: 30px
                  - width: 150px
       
              state:
                - value: 'on'
                  color: orange
                  name: Boost
                  styles:
                    card:
                      - filter: opacity(100%)
                      - animation: blink 2s ease infinite
                - operator: default
                  name: Boost
                  color: darkcyan
                  icon: mdi:gauge-low
                  styles:
                    card:
                      - filter: opacity(80%)
                                        
             
            - type: 'custom:button-card'
              color_type: card
              entity:  input_boolean.secu_surtemperature
              tap_action:
                action: false
              state:
                - value: 'on' 
                  icon: 'mdi:alert-outline'
                  color: red
                  name: surchauffe
                - value: 'off'
                  styles:
                    card:
                    - filter: opacity(0%)
                    icon:
                    - filter: grayscale(0%)
              styles:
                card:
                  - height: 30px
                  - font-size: 6px
            
                        
            - type: 'custom:button-card'
              color_type: card
              entity: switch.relais_bruleur_chaudiere
              tap_action:
                action: false
              state:
                - value: 'on' 
                  icon: 'mdi:fire'
                  color: orange
                  name: Bruleur
                - operator: default
                  icon: 'mdi:fire'
                  color: grey
                  name: Bruleur
              styles:
                card:
                  - height: 30px
                  - width: 50px
                  - font-size: 6px
                  - filter: |
                      [[[
                        if (states['switch.relais_bruleur_chaudiere'].state == 'off')
                          return "opacity(30%)";
                        return "opacity(100%)";
                      ]]]     
                  
                   
            - type: 'custom:button-card'
              color_type: blank-card
           
            
    #############################################
       
          - type: markdown
            card_size: 10
            content: >-
              <ha-icon icon="mdi:thermometer"></ha-icon> &nbsp;&nbsp;&nbsp;&nbsp;<font size = 5>  Salon <br><br>
              <font size = 2>&nbsp;  &nbsp;  &nbsp;  &nbsp; <font size = 6px>{{states('sensor.temperature_t_salon')}} °C <font size = 3> &nbsp;  &nbsp;  &nbsp; 
              Tendance : {% if is_state('binary_sensor.tendance_temp_salon', 'on') %} <font color = 'orange'><ha-icon icon="mdi:arrow-top-right-bold-outline"></ha-icon>
              {% else %}  <font color = 'deepskyblue'><ha-icon icon="mdi:arrow-bottom-right-bold-outline"></ha-icon>{% endif %}
              <font color = 'white'>
              {% if is_state('input_boolean.bit_zone_temperature', 'on') and states.input_boolean.bit_temperature_confort_salon.state == 'on' %} <font color = 'white'>
              {% else %}  <font color = 'steelblue'>{% endif %}
              
              &nbsp;  &nbsp;
              <font size = 3>Confort :
              <font color={{
              'steelblue' if is_state('input_boolean.bit_temperature_confort_salon', 'off') or states.input_boolean.bit_zone_temperature.state == 'off'
              else 'deepskyblue' if (states('input_number.consigne_salon_confort') < '18' )
              else 'grey' if (states('input_number.consigne_salon_confort') < '18') 
              else 'white' if (states('input_number.consigne_salon_confort') < '19.7')
              else 'orange'if (states('input_number.consigne_salon_confort') < '21.5')
              else 'red'}}> {{states('input_number.consigne_salon_confort')}}</font> °C 
              &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
              <font color = 'white'>
              {% if is_state('input_boolean.bit_zone_temperature', 'on') and states.input_boolean.bit_temperature_confort_salon.state == 'off' %} <font color = 'white'>
              {% else %}  <font color = 'steelblue'>{% endif %}
              Réduit :
              <font color={{
              'steelblue' if is_state('input_boolean.bit_temperature_confort_salon', 'on') or states.input_boolean.bit_zone_temperature.state == 'off'
              else 'deepskyblue'if (states('input_number.consigne_salon_nuit') < '18')
              else 'white' if (states('input_number.consigne_salon_nuit') < '19.7')
              else 'orange'if (states('input_number.consigne_salon_nuit') < '21.5')
              else 'red'}}> {{states('input_number.consigne_salon_nuit')}}</font> °C
          
          # Carte historique T° Salon    
          - type: conditional
            conditions:
              - entity: input_boolean.graph_temp_salon
                state: 'on'
            card:
              type: history-graph
              entities:
                - entity: sensor.temperature_t_salon
              hours_to_show: 48
              refresh_interval: 0
         
              
          # boutons + / -
          - type: horizontal-stack
            cards:
            
              - type: 'custom:button-card'
                icon: mdi:chart-line
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  service_data: 
                    entity_id: input_boolean.graph_temp_salon
                styles:
                  card:
                    - height: 30px
                    - border-radius: 5px
                    - --mdc-ripple-color: white
                    - --mdc-ripple-press-opacity: 0.2
           
                             
              - type: 'custom:button-card'
                icon_height: 23px 
                icon: mdi:minus-circle-outline
                tap_action:
                  action: call-service
                  service: script.increment_decrement_consignes
                  service_data:
                    entity_id: input_number.consigne_salon_confort
                    operation: '-'
                    value: 0.2
                styles:
                  icon:
                    - color: rgb(60, 154, 163)
                  card:
                    - height: 30px
                    - border-radius: 5px
                    - --mdc-ripple-color: white
                    - --mdc-ripple-press-opacity: 0.2
                    - background-color: rgb(31, 61, 160)
                    - opacity: >
                        [[[
                          if (states['input_boolean.bit_temperature_confort_salon'].state == 'on' && states['input_boolean.bit_zone_temperature'].state == 'on' ) return '100%'
                            return '30%'
                        ]]]
                 
              - type: 'custom:button-card'
                icon_height: 23px 
                icon: mdi:plus-circle-outline
                state:    
                  - value: 'on'
                    color: pink
                  - operator: default
                tap_action:
                  action: call-service
                  service: script.increment_decrement_consignes
                  service_data:
                    entity_id: input_number.consigne_salon_confort
                    operation: '+'
                    value: 0.2
                styles:
                  icon:
                    - color: rgb(220, 70, 33)
                  card:
                    - height: 30px
                    - border-radius: 5px
                    - --mdc-ripple-color: white
                    - --mdc-ripple-press-opacity: 0.2
                    - background-color: rgb(31, 61, 160)
                    - opacity: >
                        [[[
                          if (states['input_boolean.bit_temperature_confort_salon'].state == 'on' && states['input_boolean.bit_zone_temperature'].state == 'on' ) return '100%'
                            return '30%'
                        ]]]
                        
                    
              - type: 'custom:button-card'
                color_type: blank-card
         
              
              - type: 'custom:button-card'
                icon_height: 23px 
                icon: mdi:minus-circle-outline
                tap_action:
                  action: call-service
                  service: script.increment_decrement_consignes
                  service_data:
                    entity_id: input_number.consigne_salon_nuit
                    operation: '-'
                    value: 0.2
                styles:
                  icon:
                    - color: rgb(36, 109, 66)
                  card:
                    - height: 30px
                    - border-radius: 5px
                    - --mdc-ripple-color: white
                    - --mdc-ripple-press-opacity: 0.2
                    - background-color: rgb(130, 150, 30)
                    - opacity: >
                        [[[
                          if (states['input_boolean.bit_temperature_confort_salon'].state == 'off' && states['input_boolean.bit_zone_temperature'].state == 'on' ) return '100%'
                            return '30%'
                        ]]]
                 
              - type: 'custom:button-card'
                icon_height: 23px 
                icon: mdi:plus-circle-outline
                state:    
                  - value: 'on'
                    color: pink
                  - operator: default
                tap_action:
                  action: call-service
                  service: script.increment_decrement_consignes
                  service_data:
                    entity_id: input_number.consigne_salon_nuit
                    operation: '+'
                    value: 0.2
                styles:
                  icon:
                    - color: rgb(187, 62, 189)
                  card:
                    - height: 30px
                    - border-radius: 5px
                    - --mdc-ripple-color: white
                    - --mdc-ripple-press-opacity: 0.2
                    - background-color: rgb(130, 150, 30)
                    - opacity: >
                        [[[
                          if (states['input_boolean.bit_temperature_confort_salon'].state == 'off' && states['input_boolean.bit_zone_temperature'].state == 'on' ) return '100%'
                            return '30%'
                        ]]]
                        
                        
              - type: 'custom:button-card'
                color_type: blank-card
             
            
          - type: 'custom:button-card'
            color_type: blank-card
            styles:
              card:
                - height: 1px   
        
 ############## CHAMBRE  ##########       
        
          - type: markdown
            card_size: 0
            content: >-
              <ha-icon icon="mdi:thermometer"></ha-icon> &nbsp;&nbsp;&nbsp;<font size = 5> Chambre <br><br>
              <font size = 2>&nbsp;  &nbsp;  &nbsp;  &nbsp; <font size = 6px>{{states('sensor.temperature_t_chambre')}} °C <font size = 3> &nbsp;  &nbsp;  &nbsp; 
              Tendance : {% if is_state('binary_sensor.tendance_temp_chambre', 'on') %} <font color = 'orange'><ha-icon icon="mdi:arrow-top-right-bold-outline"></ha-icon>
              {% else %}  <font color = 'deepskyblue'><ha-icon icon="mdi:arrow-bottom-right-bold-outline"></ha-icon>{% endif %}
              <font color = 'white'>
              {% if is_state('input_boolean.bit_zone_temperature', 'off') and states.input_boolean.bit_temperature_confort_chambre.state == 'on'%} <font color = 'white'>
              {% else %}  <font color = 'steelblue'>{% endif %}
             
              &nbsp;  &nbsp;
              <font size = 3>Confort :
              <font color={{
              
              'steelblue' if is_state('input_boolean.bit_temperature_confort_chambre', 'off') or states.input_boolean.bit_zone_temperature.state == 'on'
              else 'deepskyblue'if (states('input_number.consigne_chambre_confort') < '18')
              else 'white' if (states('input_number.consigne_chambre_confort') < '19.7')
              else 'orange'if (states('input_number.consigne_chambre_confort') < '21.5')
              else 'red'}}> {{states('input_number.consigne_chambre_confort')}}</font> °C 
              &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
              <font color = 'white'>
              {% if is_state('input_boolean.bit_zone_temperature', 'off') and states.input_boolean.bit_temperature_confort_chambre.state == 'off' %} <font color = 'white'>
              {% else %}  <font color = 'steelblue'>{% endif %}
              Réduit :
              <font color={{
              'steelblue' if is_state('input_boolean.bit_temperature_confort_chambre', 'on') or states.input_boolean.bit_zone_temperature.state == 'on'
              else 'deepskyblue' if (states['input_number.consigne_chambre_nuit'].state < '18') 
              else 'white' if (states['input_number.consigne_chambre_nuit'].state < '19.7')
              else 'orange'if (states['input_number.consigne_chambre_nuit'].state < '20.5')
              else 'red'}}> {{states('input_number.consigne_chambre_nuit')}}</font> °C
              
              
          # Carte historique T° Chambre           
          - type: conditional
            conditions:
              - entity: input_boolean.graph_temp_chambre
                state: 'on'
            card:
              type: history-graph
              entities:
                - entity: sensor.temperature_t_chambre
              hours_to_show: 48
              refresh_interval: 0
       
              
          # boutons + / -
          - type: horizontal-stack
            cards:
            
              - type: 'custom:button-card'
                icon: mdi:chart-line
                tap_action:
                  action: call-service
                  service: input_boolean.toggle
                  service_data: 
                    entity_id: input_boolean.graph_temp_chambre
                styles:
                  card:
                    - height: 30px
                    - border-radius: 5px
                    - --mdc-ripple-color: white
                    - --mdc-ripple-press-opacity: 0.2
                
                 
              - type: 'custom:button-card'
                icon_height: 23px 
                icon: mdi:minus-circle-outline
                tap_action:
                  action: call-service
                  service: script.increment_decrement_consignes
                  service_data:
                    entity_id: input_number.consigne_chambre_confort
                    operation: '-'
                    value: 0.2
                styles:
                  icon:
                    - color: rgb(60, 154, 163)
                  card:
                    - height: 30px
                    - border-radius: 5px
                    - --mdc-ripple-color: white
                    - --mdc-ripple-press-opacity: 0.2
                    - background-color: rgb(31, 61, 160)
                    - opacity: >
                        [[[
                          if (states['input_boolean.bit_temperature_confort_chambre'].state == 'on' && states['input_boolean.bit_zone_temperature'].state == 'off' ) return '100%'
                            return '30%'
                        ]]]
                 
              - type: 'custom:button-card'
                icon_height: 23px 
                icon: mdi:plus-circle-outline
                state:    
                  - value: 'on'
                    color: pink
                  - operator: default
                tap_action:
                  action: call-service
                  service: script.increment_decrement_consignes
                  service_data:
                    entity_id: input_number.consigne_chambre_confort
                    operation: '+'
                    value: 0.2
                styles:
                  icon:
                    - color: rgb(220, 70, 33)
                  card:
                    - height: 30px
                    - border-radius: 5px
                    - --mdc-ripple-color: white
                    - --mdc-ripple-press-opacity: 0.2
                    - background-color: rgb(31, 61, 160)
                    - opacity: >
                        [[[
                          if (states['input_boolean.bit_temperature_confort_chambre'].state == 'on' && states['input_boolean.bit_zone_temperature'].state == 'off' ) return '100%'
                            return '30%'
                        ]]]
                        
                    
              - type: 'custom:button-card'
                color_type: blank-card
            
              
              - type: 'custom:button-card'
                icon_height: 23px 
                icon: mdi:minus-circle-outline
                tap_action:
                  action: call-service
                  service: script.increment_decrement_consignes
                  service_data:
                    entity_id: input_number.consigne_chambre_nuit
                    operation: '-'
                    value: 0.2
                styles:
                  icon:
                    - color: rgb(36, 109, 66)
                  card:
                    - height: 30px
                    - border-radius: 5px
                    - --mdc-ripple-color: white
                    - --mdc-ripple-press-opacity: 0.2
                    - background-color: rgb(130, 150, 30)
                    - opacity: >
                        [[[
                          if (states['input_boolean.bit_temperature_confort_chambre'].state == 'off' && states['input_boolean.bit_zone_temperature'].state == 'off' ) return '100%'
                            return '30%'
                        ]]]
                 
              - type: 'custom:button-card'
                icon_height: 23px 
                icon: mdi:plus-circle-outline
                state:    
                  - value: 'on'
                    color: pink
                  - operator: default
                tap_action:
                  action: call-service
                  service: script.increment_decrement_consignes
                  service_data:
                    entity_id: input_number.consigne_chambre_nuit
                    operation: '+'
                    value: 0.2
                styles:
                  icon:
                    - color: rgb(187, 62, 189)
                  card:
                    - height: 30px
                    - border-radius: 5px
                    - --mdc-ripple-color: white
                    - --mdc-ripple-press-opacity: 0.2
                    - background-color: rgb(130, 150, 30)
                    - opacity: >
                        [[[
                          if (states['input_boolean.bit_temperature_confort_chambre'].state == 'off' && states['input_boolean.bit_zone_temperature'].state == 'off' ) return '100%'
                            return '30%'
                        ]]]
                        
              - type: 'custom:button-card'
                color_type: blank-card
            
              
                    
          - type: 'custom:button-card'
            color_type: blank-card
            styles:
              card:
                - height: 1px   
        
          
              
           # Historique               
       ###################################
       
          - type: history-graph
            title: Historique Chaudiere sur 24 heures
            entities:
            - entity: switch.relais_pompe_chaudiere
              name: Historique
            hours_to_show: 24
            refresh_interval: 0