Carte pour portail coulissant/battant 2 positions

Pulpy-Luke · Juillet 2, 2022, 9:53

Hello,

Un petit partage d’une carte facile à faire avec quelques astuces : Afficher un visuel représentant un portail coulissant qui s’ouvre partiellement et complément
portail

L’astuce consiste à avoir 2 images transparentes au premier plan via le style opacity (ci-dessus en grises) pour définir les zones ou l’on peut cliquer et associer l’action à un toggle par exemple
A coté le state_image permet d’afficher une image différente en fonction des cas en arrière plan

la carte

type: custom:stack-in-card
cards:
  - type: picture-elements
    image: /local/images/empty.png
    elements:
      - type: image
        image: /local/images/devices/bati.png
        style:
          top: 50%
          left: 33%
          width: 60%
      - type: image
        image: /local/images/empty.png
        entity: sensor.portailfake_global
        style:
          top: 50%
          left: 33%
          width: 60%
        state_image:
          ouvert: /local/images/devices/portail-ouvert.png
          portillon: /local/images/devices/portail-portillon.png
          fermé: /local/images/devices/portail-ferme.png
          desynchro: /local/images/devices/portail-ferme.png
      - type: image
        image: /local/images/red.png
        entity: input_boolean.portailfake_relais1
        style:
          top: 50%
          left: 50%
          width: 25%
          opacity: 0
        tap_action:
          action: toggle
      - type: image
        image: /local/images/red.png
        entity: input_boolean.portailfake_relais2
        style:
          top: 50%
          left: 16%
          width: 25%
          opacity: 0
        tap_action:
          action: toggle

les input_boolean (pour mémoriser l’état des switch)

portailfake_relais1:
  name: portailfake_relais1
portailfake_relais2:
  name: portailfake_relais2

les switchs (en mode input dans la vraie vie chez moi)

- platform: template
  switches:
    portail:
      friendly_name: Portailfake
      turn_on:
        service: input_boolean.turn_on
        target:
          entity_id: input_boolean.portailfake_relais2
      turn_off:
        service: input_boolean.turn_on
        target:
          entity_id: input_boolean.portailfake_relais2

- platform: template
  switches:
    portillon:
      friendly_name: Portillionfake
      turn_on:
        service: input_boolean.turn_on
        target:
          entity_id: input_boolean.portailfake_relais1
      turn_off:
        service: input_boolean.turn_on
        target:
          entity_id: input_boolean.portailfake_relais1

le sensor (3 états)

- platform: template
  sensors:
    portailfake_global:
      value_template: >
        {%- if states("input_boolean.portailfake_relais2") == states("input_boolean.portailfake_relais1") and states("input_boolean.portailfake_relais1") == 'on'-%}
          ouvert
        {%- elif states("input_boolean.portailfake_relais2") == states("input_boolean.portailfake_relais1") and states("input_boolean.portailfake_relais1") == 'off'-%}
          fermé
        {%- elif states("input_boolean.portailfake_relais1") == "on"-%}
          portillon
        {%- elif  states("input_boolean.portailfake_relais2") == "unknown" or states("input_boolean.portailfake_relais1") == "unknown"-%}
          desynchro
        {%- else -%}
          ouvert
        {%- endif %}

Les images (attention à garde la même taille partout pour faciliter la superposition)

voilà
Pour adapter à un portail double-battants, il suffit de remplacer :

portail-portillon.png => 1 battant ouvert
portail-ferme.png => 2 battants fermés
portail-ouvert.png => 2 battants ouverts

portail

pyloutom · Octobre 19, 2022, 11:04

Bonjour Pulpy j’ai un contact pour ouverture de portail zigbee, tu penses que je peux l’adapter à ton système ou peut-être il y a eu des idées nouvelles depuis. Je trouve ton partage super en attendant.

Voici mon système le souci, c’est que je dois actionner le contact deux fois pour qu’il revienne au repos, c’est pourtant un contact spécifique pour porte de garage.

L’objet sur Aliexpress que j’ai reçu

Pulpy-Luke · Octobre 20, 2022, 2:30

Salut

La carte c’est juste du cosmétique donc ça doit pouvoir s’adapter à presque tout, quitte à revoir en profondeur sa mécanique. Si tu sais à partir de la combinaison des informations de ton module déterminer quel est sa position c’est le seul truc important.
Malheureusement c’est pas très riche en informations pour répondre, tu n’indique pas, la référence zigbee du module (et l’intégration), ni quels entités remontent dans HA ni leur états potentiels donc je donne ma langue au chat.
Quant au double appui, si c’est pas une option du module, c’est compensable avec un(des) switch(s) virtuel(s) et une automatisation qui faut on/pause/off.

pyloutom · Octobre 20, 2022, 7:31

Salut à toi merci pour ta reponse,

Voici mon module: https://www.zigbee2mqtt.io/devices/PJ-ZGD01.html#tuya-pj-zgd01

Voici comment il est configurer dans Z2M

   "0xa4c1382e71cc903b": {
        "garage_door_contact": true,
        "trigger": false,
        "linkquality": 18
    },

Je ne comprends pas pourquoi je n’ai pas l’option du module pour faire un simple bouton poussoir.

Pour mon module, j’ai un capteur quand il est fermé donc je pense avoir ce qu’il faut pour le mettre en place cela fonctionnais en wifi (j’avais un capteur similaire.) mais en zigbee ce n’est pas si simple.

Pulpy-Luke · Octobre 20, 2022, 7:52

A priori, ton portail attends un contact sec, mais le boitier ne le propose pas. Accessoirement il faut que ça soit intégré.
Du coup, tu feras une automatisation et la carte sera à créer (1 état seulement par rapport au sujet ici)

pyloutom · Octobre 20, 2022, 7:56

Bien, je vais créer une automatisation avec nod red pour avec un contact sec, je ne connais pas avec HA

thetux · Août 11, 2023, 10:24

Bonjour,
Merci pour cette astuce,
Tu aurais le images pour le portail battant?
Merci

Pulpy-Luke · Août 11, 2023, 10:31

Salut,

J’ai pas du tout gardé l’exemple du portail à double battant. J’avais surement trouvé l’image sur un catalogue en ligne quelconque.
Genre comme celui-ci
Il doit en exciter plein, ensuite à toi de faire un peu d’Edition photo pour le découpage/détourage

thetux · Août 11, 2023, 2:53

D’accord merci je vais regarder ça

C-DriK · Décembre 27, 2024, 11:36

Bonjour @Pulpy-Luke,

J’essaie de mettre en place cette carte pour gérer mon portail mais je n’arrive pas à transposer ta carte sur mon installation.

Le visuel fonctionne, je peux ouvrir, entre ouvrir et fermer le portail. les images s’affichent correctement mais le portail ne bouge pas.
Je n’ai pas nom plus les 2 switchs qui s’affichent en dessus du portail.

Chez moi :

l’ouverture/fermeture se fait via l’entité « switch.portail »
Lorsque j’appuie dessus :
* le portail s’ouvre, s’il est fermé
* Le portail se ferme, s’il est fermé
* le portail s’arrête, s’il est en cours d’ouverture/fermeture
Je récupère l’état actuellement via un capteur identifié par « binary_sensor.portail_ouvert_ferme »
Le second capteur (« binary_sensor.portail_ouvert_ferme ») me permettra de savoir si le portail est entre-ouvert ( mode piéton) mais pour le moment il est désactivé.

mon problème doit venir de mes switchs et input_boolean mais je vois pas ou.
Si toi ou une autre personne aurait une idée, je suis preneur.

Merci.

Pulpy-Luke · Décembre 27, 2024, 8:25

Salut,

C’est adapatable. Tu dois juste utiliser une grande image transparente pour le switch : comme ça c’est clicable

type: custom:stack-in-card
cards:
  - type: picture-elements
    image: /local/images/empty.png
    elements:
      - type: image
        image: /local/images/devices/bati.png
        style:
          top: 50%
          left: 33%
          width: 60%
      - type: image
        image: /local/images/empty.png
        entity: binary_sensor.portail_ouvert_ferme
        style:
          top: 50%
          left: 33%
          width: 60%
        state_image:
          on: /local/images/devices/portail-ouvert.png
          off: /local/images/devices/portail-ferme.png
      - type: image
        image: /local/images/red.png
        entity: switch.portail
        style:
          top: 50%
          left: 50%
          width: 100%
          opacity: 0
        tap_action:
          action: toggle