Bouton portail et retour d'état

Bonjour à tous,

je souhaite créer une carte pour gérer l’ouverture et la fermeture de mon portail, et également connaitre l’état d’ouverture.
Pour se faire, j’ai paramétré un bouton permettant d’actionner mon portail, et j’ai un binary.sensor pour connaitre l’état d’ouverture. Jusque la, je m’en sort facilement.

Maintenant, j’aimerai que ma carte bouton qui actionne l’ouverture de mon portail change de couleur en fonction de l’état d’ouverture. (Soit à minima la couleur de l’icone, ou encore mieux le fond).
Petit plus, si l’iconne peux avoir une couleur intermédiaire pendant x secondes après l’appui cela serait top (pour valider visuellement l’appui)

Pouvez-vous me donner un coup de main sur le sujet, car je bloque un peu ^^

Merci la communauté
Sébastien


Bonjour,

je pense que ce fil est pour toi, au lieu d’une porte de garage, c’est un portail, le principe est le même.
Animer un icône pendant une durée déterminée

1 « J'aime »

J’ai créé un template pour avoir la position de la porte de mon garage, que j’utilise pour ma carte cover:

    - name: "Position porte du garage"
      unique_id: position_porte_du_garage
      state: >-
        {% if is_state('binary_sensor.capteur_fermeture_garage_ouverture', 'off') %}
          Fermé
        {% elif is_state('binary_sensor.capteur_ouverture_garage', 'off') %}
          Ouvert
        {% else %}
          Intermédiaire
        {% endif %}
      icon: >-
        {% if is_state('sensor.position_porte_du_garage', 'Ouvert') %}
          mdi:garage-open-variant
        {% elif is_state('sensor.position_porte_du_garage', 'Fermé') %}
          mdi:garage-variant-lock         
        {% else %}
          mdi:garage-alert-variant
        {% endif %}

Sur mon tableau de bord, j’ai la carte suivante:
image

Salut,

oui j’ai lu ce matin ce post mais je suis perdu ^^. J’ai pas tout compris malheureusement.
Pour cela que je demande de l’aide sur un autre post.

Sinon pour faire simple. Comment paramétrer une carte pour que l’icone et la couleur change en fonction de l’état ?.
De ce fait je ferais un bouton pour déclencher l’ouverture et la fermeture, et a coté une carte avec un icone « dynamique ». Peux être plus simple avec 2 cartes différentes ?

Merci

Bonjour, dis-moi où tu bloques par rapport au post que t’a indiqué @LeLapinFou
Moi, pour être sur de l’état de mon poratil, j’ai mis des capteurs d’ouverture zigbee dans des boîtes étanches avec des aimants plus puissants que ceux fournis avec les capteurs et ça fonctionne très bien. Sinon, un timer virtuel permet d’avoir une estimation de l’état en fonction du temps que met ton portail à s’ouvrir et se fermer.

Le code de la carte que j’avais faite pour @Skycoyotte :

type: custom:button-card
aspect_ratio: 3/1
entity: input_boolean.position_garage
name: Garage
icon: |
  [[[
    if (states['input_boolean.position_garage'].state == 'off')
      return 'mdi:garage';
    else if (states['input_boolean.position_garage'].state == 'on')
      return 'mdi:garage-open';
  ]]]
show_label: true
label: |
  [[[
    if (states['input_boolean.position_garage'].state == 'off' && states['timer.essai_timer'].state == 'idle')
      return '<font color= "green"><b>fermé</font>';
    else if (states['input_boolean.position_garage'].state == 'off' && states['timer.essai_timer'].state == 'active')
      return '<font color= "orange"><b>fermeture</font>';
    else if (states['input_boolean.position_garage'].state == 'on' && states['timer.essai_timer'].state == 'idle')
      return '<font color= "red"><b>ouvert</font>';
    else if (states['input_boolean.position_garage'].state == 'on' && states['timer.essai_timer'].state == 'active')
      return '<font color= "orange"><b>ouverture</font>';
  ]]]
styles:
  name:
    - font-size: 0.9em
    - justify-self: middle
    - align-self: end
    - color: rgba(255,255,255,0.6)
  card:
    - background-color: rgba(64,64,64,0.8)
    - box-shadow: 4px 4px 4px 0px rgba(32,32,32,0.5)
    - border: 2px rgba(211,211,211,1.0) outset
  icon:
    - border-radius: 50%
    - border: none
    - box-shadow: 0px 0px 5px 5px rgba(0,128,0,0.5)
    - box-shadow: |
        [[[
          if (states['input_boolean.position_garage'].state == 'off' && states['timer.essai_timer'].state == 'idle')
            return '0px 0px 5px 5px rgba(0,128,0,0.5)';
          else if (states['input_boolean.position_garage'].state == 'off' && states['timer.essai_timer'].state == 'active')
            return '0px 0px 5px 5px rgba(255,140,0,0.5)';
          else if (states['input_boolean.position_garage'].state == 'on' && states['timer.essai_timer'].state == 'idle')
            return '0px 0px 5px 5px rgba(255,0,0,0.5)';
          else if (states['input_boolean.position_garage'].state == 'on' && states['timer.essai_timer'].state == 'active')
            return '0px 0px 5px 5px rgba(255,140,0,0.5)';
        ]]]
    - background-color: |
        [[[
          if (states['input_boolean.position_garage'].state == 'off' && states['timer.essai_timer'].state == 'idle')
            return 'rgba(0,128,0,0.5)';
          else if (states['input_boolean.position_garage'].state == 'off' && states['timer.essai_timer'].state == 'active')
            return 'rgba(255,140,0,0.5)';
          else if (states['input_boolean.position_garage'].state == 'on' && states['timer.essai_timer'].state == 'idle')
            return 'rgba(255,0,0,0.5)';
          else if (states['input_boolean.position_garage'].state == 'on' && states['timer.essai_timer'].state == 'active')
            return 'rgba(255,140,0,0.5)';
        ]]]
    - width: 60px
    - height: 60px
    - color: |
        [[[
          if (states['input_boolean.position_garage'].state == 'off' && states['timer.essai_timer'].state == 'idle')
            return 'rgba(0,255,0,1.0)';
          else if (states['input_boolean.position_garage'].state == 'off' && states['timer.essai_timer'].state == 'active')
            return 'rgba(255,140,0,1.0)';
          else if (states['input_boolean.position_garage'].state == 'on' && states['timer.essai_timer'].state == 'idle')
            return 'rgba(255,0,0,1.0)';
          else if (states['input_boolean.position_garage'].state == 'on' && states['timer.essai_timer'].state == 'active')
            return 'rgba(255,140,0,1.0)';
        ]]]
    - animation: |
        [[[
          if (states['timer.essai_timer'].state == 'active')
            return 'blink 2s ease infinite';
        ]]]
tap_action:
  action: call-service
  service: script.essai_garage
hold_action:
  action: none

Je peux t’aider à l’adapter à ton besoin.

Pour faire simple sur mon installation :

J’ai un capteur binaire sur mon portail (contact sec O/F) en fonction de son ouverture. 1 Seule capteur qui passe à « on » quand il est fermé et à « off » quand il est ouvert.

Son nom : binary_sensor.portail

Ensuite j’ai un bouton KNX pour lancer l’ouverture et la fermeture de ce dernier
Son nom : button.portail

Après je ne suis pas expert en code (loin de la), d’où mon besoin d’aide ^^

PS : j’ai bien button-card d’installé

Sébastien

OK, tu n’as donc pas besoin de timer. Ton bouton KNX accepte la fonction Toggle ? Quand tu appuies dessus et que ton portail est fermé, il l’ouvre (à priori), si tu appuies dessus alors que ton portail est en cours d’ouverture, le portail s’arrête ? et si tu rappuies une troisième fois, il se referme ?

Oui c’est bien cela. Je confirme :slight_smile:

Bon, je modifie le code et je poste le nouveau avec tes entités.

Une dernière question : quand ton portail est en cours d’ouverture ou de fermeture, ton capteur binaire indique « off » ou il n’y a pas d’état ?

S’il indique « off » dès qu’il a commencé à s’ouvrir, veux-tu une indication visuelle particulière durant le temps que met ton portail à s’ouvrir ou se fermer complètement (basée sur un timer virtuel) ?

Teste celà pour commencer (je suis parti de l’hypothèse qu’il n’y avait pas d’état pour ton capteur en cas de position intermédiaire entre ouvert ou fermé mais ça doit fonctionner même s’il passe en « off » dès qu’il commence à s’ouvrir) :

type: custom:button-card
aspect_ratio: 3/1
entity: button.portail
name: Portail
icon: |
  [[[
    if (states['binary_sensor.portail'].state == 'off')
      return 'mdi:gate-open';
    else if (states['binary_sensor.portail'].state == 'on')
      return 'mdi:gate';
  ]]]
show_label: true
label: |
  [[[
    if (states['binary_sensor.portail'].state == 'off')
      return '<font color= "red"><b>ouvert</font>';
    else if (states['binary_sensor.portail'].state == 'on')
      return '<font color= "green"><b>fermé</font>';
    else
      return '<font color= "orange"><b>en mouvement</font>';
  ]]]
styles:
  name:
    - font-size: 0.9em
    - justify-self: middle
    - align-self: end
    - color: rgba(255,255,255,0.6)
  card:
    - background-color: rgba(64,64,64,0.8)
    - box-shadow: 4px 4px 4px 0px rgba(32,32,32,0.5)
    - border: 2px rgba(211,211,211,1.0) outset
  icon:
    - border-radius: 50%
    - border: none
    - box-shadow: 0px 0px 5px 5px rgba(0,128,0,0.5)
    - box-shadow: |
        [[[
          if (states['binary_sensor.portail'].state == 'on')
            return '0px 0px 5px 5px rgba(0,128,0,0.5)';
          else if (states['binary_sensor.portail'].state == 'off')
            return '0px 0px 5px 5px rgba(255,0,0,0.5)';
          else
            return '0px 0px 5px 5px rgba(255,140,0,0.5)';
        ]]]
    - background-color: |
        [[[
          if (states['binary_sensor.portail'].state == 'on')
            return '0px 0px 5px 5px rgba(0,128,0,0.5)';
          else if (states['binary_sensor.portail'].state == 'off')
            return '0px 0px 5px 5px rgba(255,0,0,0.5)';
          else
            return '0px 0px 5px 5px rgba(255,140,0,0.5)';
        ]]]
    - width: 60px
    - height: 60px
    - color: |
        [[[
          if (states['binary_sensor.portail'].state == 'off')
            return 'rgba(0,255,0,1.0)';
          else if (states['binary_sensor.portail'].state == 'on')
            return 'rgba(255,0,0,1.0)';
          else
            return 'rgba(255,140,0,1.0)';
        ]]]
    - animation: |
        [[[
          if (states['binary_sensor.portail'].state <> 'on' && states['binary_sensor.portail'].state <> 'off')
            return 'blink 2s ease infinite';
        ]]]
tap_action:
  action: Toggle
hold_action:
  action: none

Slt,

merci pour ton retour.

j’ai ce message d’erreur quand je colle le code :

tu as tout dans l’énoncé de l’erreur

… il vient d’où ce essai_timer ? pas du dernier code de @Cleya

vous ne lisez pas et attendez que l’on fasse tout a votre place, ce n’est pas de l’assistance que vous venez chercher, mais de l’assistanat.

1 « J'aime »

J’ai collé le mauvais print écran, dsl.
Pour le coup c’est de l’assistanat que j’ai besoin effectivement. Je n’ai pas le niveau pour cela et je m’en excuse :confused:

La j’ai :

image

Je suis là, on va voir ce qu’on peut faire pour arranger ça :smile:

type: custom:button-card
aspect_ratio: 3/1
entity: button.portail
name: Portail
icon: |
  [[[
    if (states['binary_sensor.portail'].state == 'off')
      return 'mdi:gate-open';
    else if (states['binary_sensor.portail'].state == 'on')
      return 'mdi:gate';
  ]]]
show_label: true
label: |
  [[[
    if (states['binary_sensor.portail'].state == 'off')
      return '<font color= "red"><b>ouvert</font>';
    else if (states['binary_sensor.portail'].state == 'on')
      return '<font color= "green"><b>fermé</font>';
    else
      return '<font color= "orange"><b>en mouvement</font>';
  ]]]
styles:
  name:
    - font-size: 0.9em
    - justify-self: middle
    - align-self: end
    - color: rgba(255,255,255,0.6)
  card:
    - background-color: rgba(64,64,64,0.8)
    - box-shadow: 4px 4px 4px 0px rgba(32,32,32,0.5)
    - border: 2px rgba(211,211,211,1.0) outset
  icon:
    - border-radius: 50%
    - border: none
    - box-shadow: 0px 0px 5px 5px rgba(0,128,0,0.5)
    - box-shadow: |
        [[[
          if (states['binary_sensor.portail'].state == 'on')
            return '0px 0px 5px 5px rgba(0,128,0,0.5)';
          else if (states['binary_sensor.portail'].state == 'off')
            return '0px 0px 5px 5px rgba(255,0,0,0.5)';
          else
            return '0px 0px 5px 5px rgba(255,140,0,0.5)';
        ]]]
    - background-color: |
        [[[
          if (states['binary_sensor.portail'].state == 'on')
            return '0px 0px 5px 5px rgba(0,128,0,0.5)';
          else if (states['binary_sensor.portail'].state == 'off')
            return '0px 0px 5px 5px rgba(255,0,0,0.5)';
          else
            return '0px 0px 5px 5px rgba(255,140,0,0.5)';
        ]]]
    - width: 60px
    - height: 60px
    - color: |
        [[[
          if (states['binary_sensor.portail'].state == 'off')
            return 'rgba(0,255,0,1.0)';
          else if (states['binary_sensor.portail'].state == 'on')
            return 'rgba(255,0,0,1.0)';
          else
            return 'rgba(255,140,0,1.0)';
        ]]]
tap_action:
  action: Toggle
hold_action:
  action: none

J’ai supprimé l’animation, l’erreur que tu avais doit être résolue. Colle le code ci-dessus à la place de ce que tu avais.

Tu ne m’as pas répondu sur l’état de ton capteur binaire.

1 « J'aime »

Dis-moi ce qu’il en est.

Oui c’est cela, il indique « off », et « on » quand il est fermé.

Donc, dès que ton portail commence à s’ouvrir, il passe sur « off » ? Il n’y a pas de moment ou il n’y a pas d’état ?

Non il y a toujours un état c’est bien ca.
Je viens de coller le code et cela marche. Si je veux que ce même bouton lance l’action d’ouverture ou de fermeture je complete la fin du code c’est bien ca ?