Input_number et tactile

Bonsoir,

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

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 image

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

Merci !

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

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 }}"

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.

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

animate

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: ""

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

C’est top cette astuce !
Merci

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

1 J'aime

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 :+1:

1 J'aime

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

1 J'aime

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…

1 J'aime

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;}

Les outils de développement de ton navigateur :+1:

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