Intégration d'un écran tactile sous openHASP dans Jeedom

Utilisation du core de Jeedom
1

Bonjour,

Voici un tuto complet pour intégrer un écran tactile sous openHASP dans l’écosystème Jeedom pour un budget de moins de 50€.
Dans cet exemple je vais vous partager la configuration de l’écran et de Jeedom pour contrôler des lampes Phillips HUE.

openhasp_01
openhasp_01851×970 80.5 KB

Et quelques exemples de rendus personnels :
openhasp_02 openhasp_03 …

1. Matériel

Beaucoup de matériels sont compatibles openHASP, vous trouverez les listes exhaustives sur le site Hardware d’openHASP ainsi que sur les pages de téléchargement des firmware stables ou en développement

Ce tuto ne va présenter qu’un seul modèle d’écran :

Smart Panlee
Smart Serial LCD Display
ZX3D95CE01S-AR-4848
2024-12-11 13_40_14-4 pouces 86 panneau tactile de commande centrale de boîte ESP32-S3 carte de déve 2024-12-11 13_40_28-4 pouces 86 panneau tactile de commande centrale de boîte ESP32-S3 carte de déve 2024-12-11 13_40_41-ZX3D95CE01S-AR-4848+Datasheet.pdf - Adobe Acrobat Reader (64-bit)

Ce modèle dispose d’une mécanique arrière pour l’encastrer « facilement » dans un mur, c’est juste carré au lieu du rond plus classique chez nous.
Ses dimensions extérieurs sont de 87mm x 87mm, il s’intègre parfaitement au dessus des boutons existants.
Côté caractéristiques de l’écran, c’est un petit 4 Pouces avec une résolution de 480x480 RGB. Ce n’est pas fait pour diffuser une vidée HD mais largement suffisant pour nos contrôles.
Ce modèle consomme 260mA à 5V DC avec la luminosité au max, on descend à 80mA à 5V DC en veille (je n’ai pas trouvé la puissance consommée dans la datasheet, ce sont les mesures à la maison). Il vous faudra une alimentation 5V DC :

  • Il y a un modèle avec un convertisseur 230V AC en 5V DC qui loge dans la mécanique arrière, ça vous permettra d’utiliser une prise proche de l’écran.
  • Pour ma part j’ai utilisé une source 12V DC qui se promène dans toute la maison dans un câble Ethernet, c’est le réseau IPX V5 pour les produits GCE, convertie en 5V DC
    J’ai également une alimentation 5V DC dans le câble ethernet avec le réseau IPX V5, mais il y a trop de perte sur la distance et elle n’est pas assez puissante pour plusieurs écrans.

L’écran est livré avec un firmware de démo, on ne va pas l’utiliser et le remplacer directement par openHASP.

2. Achat

Ali, Amazon, etc…
Les liens changent souvent, je vous liste donc les références à chercher :

  • Modèle d’écran, environ 45€ : ZX3D95CE01S
  • Boîte d’encastrement, environ 1€ : boite doublure sèche (et oui ça fonctionne comme ça Ali)
    2024-12-11 14_10_25-Boîte de Montage à Doublure Sèche Simple pour Plaques de Plâtre, 35mm, 47mm de P

Vous aurez besoin d’un convertisseur USB TTL pour programmer l’écran la première fois avec openHASP. Ça ressemble à ça et ne coûte que quelques euros :
2024-12-11 14_21_22-Module de communication série industriel USB vers TTL, convertisseur UART, multi

Et pour finir j’ai eu besoin d’un convertisseur +12V DC en +5V DC. J’utilise pour cela un mini convertisseur, qui loge très bien dans la mécanique arrière de l’écran, pour moins de 2€ :
2024-12-11 14_24_11-ARCELI 5 Pcs Ultra Petit DC-DC 3A Puissance Module abaisseur réglable Convertiss 2024-12-11 14_24_24-ARCELI 5 Pcs Ultra Petit DC-DC 3A Puissance Module abaisseur réglable Convertiss

3. Installer openHASP dans l’écran

Utiliser le firmware V0.7 disponible sur la page de développement : modèle Panlee puis sélectionner ZW3D95CE01S-TR.

Branchements à effectuer pour le flashage :
IMG20241211155026 2024-12-11 15_53_19-Ecran - OneNote (Unlicensed Product)

PIN écran Convertisseur USB TTL
GND GND
+5V +5V
TX0 RX
RX0 TX
IO0 GND pour la Mise Sous Tension, déconnecter après

Pensez à déconnecter IO0 après la MST, sinon l’écran redémarrera en mode flashage à chaque fois.

Pour l’opération de flashage, que ça soit avec votre navigateur ou avec l’outil Flash Download Tool d’Espressif, suivez simplement les instructions.

A la fin du flashage l’écran redémarre et vous aurez cet écran de démarrage furtif

Screenshot_2024-12-11-16-03-11-16_92460851df6f172a4592fca41cc2d2e6~2
Screenshot_2024-12-11-16-03-11-16_92460851df6f172a4592fca41cc2d2e6~2958×986 161 KB

Enfin configurez le WIFI dans l’écran en suivant les instructions de configuration du réseau WIFI
Votre écran se connectera automatiquement au réseau WIFI enregistré, vous pourrez vous y connecter avec votre navigateur en allant sur http://Adresse_IP_De_Lécran. La page par défaut installée avec openHASP affiche un popup avec l’adresse IP de l’écran, c’est bien fait !

Il ne vous reste plus qu’à modifier le contenu de la page principale pages.jsonl pour y ajouter tous vos objets. Petite astuce, il existe un outil graphique pour vous aider à concevoir vos IHM et qui génère le code jsonl correspondant, allez voir ce site.

4. Jeedom pour avoir le brocker MQTT et le plugin openHASP

Vous devez avoir un brocker MQTT, le plugin Jeedom MQTT Manager et le plugin Jeedom openHASP.
Le plus simple est de suivre la section Configuration de l’aide du plugin openHASP.

  • Personnellement j’utilise le broker MQTT local avec le plugin Jeedom MQTT Manager.
  • J’ai juste ajouté un nouvel utilisateur/mot-de-passe-pas-trop-long pour openHASP.

Attention : le plugin Jeedom openHASP est encore en Beta à la date de publication de ce tuto
Demande de passage en Stable faite

5. Gestion de lampes Phillips HUE

J’ai 3 points lumineux de marque Phillips HUE qui sont déjà pilotables avec le plugin Jeedom Philips Hue. C’est hors périmètre de ce tuto, ça fonctionne très bien.

J’adore ces lampes mais il leur manque vraiment une interface de contrôle autre que le téléphone, comme ça par exemple :
image
C’est réalisable avec openHASP / Jeedom !

5.1 Ecran

Voici mon exemple de page pour piloter les 3 points lumineux :

Contenu du fichier pages.jsonl 
{"page":0,"comment":"All pages","bg_color":"#000000"}
{"page":0,"id":1,"obj":"btn","comment":"Previous","x":0,"y":430,"w":150,"h":50,"radius":0,"bg_color":"#000000","border_color":"#ffffff","text":"\uE141","text_font":36,"text_color":"#FFFFFF","action":{"down":"page prev"}}
{"page":0,"id":2,"obj":"btn","comment":"Home","x":150,"y":430,"w":180,"h":50,"radius":0,"bg_color":"#000000","border_color":"#ffffff","text":"\uE2DC","text_font":36,"text_color":"#FFFFFF","action":{"down":"page back"}}
{"page":0,"id":3,"obj":"btn","comment":"Next","x":330,"y":430,"w":150,"h":50,"radius":0,"bg_color":"#000000","border_color":"#ffffff","text":"\uE142","text_font":36,"text_color":"#FFFFFF","action":{"down":"page next"}}
{"page":0,"id":6,"obj":"label","x":160,"y":5,"h":50,"w":300,"text":"Chambre","align":0,"bg_color":"#000000","text_color":"#FFFFFF"}
{"page":0,"id":7,"obj":"label","x":5,"y":5,"h":50,"w":70,"text":"00:00","align":0,"bg_color":"#000000","text_color":"#FFFFFF","template":"%H:%M"}

{"page":1,"comment":"Welcome","bg_color":"#000000"}
{"page":1,"id":10,"obj":"slider","x":40,"y":170,"w":20,"h":220,"radius":0,"bg_color":"#673bb7","bg_color10":"#a9a9a9","border_color":"#ffffff","val":100,"radius20":1,"text":"Luminosité"}
{"page":1,"id":11,"obj":"cpicker","x":90,"y":160,"w":220,"h":220,"text":"Couleur"}
{"page":1,"id":12,"obj":"btn","x":350,"y":220,"w":120,"h":40,"radius":10,"bg_color":"#212121","border_color":"#ffffff","text":"Feu","text_font":25,"toggle":true}
{"page":1,"id":13,"obj":"btn","x":350,"y":150,"w":120,"h":40,"radius":10,"bg_color":"#212121","border_color":"#ffffff","text":"Bougie","text_font":25,"toggle":true}
{"page":1,"id":14,"obj":"btn","x":350,"y":290,"w":120,"h":40,"radius":10,"bg_color":"#212121","border_color":"#ffffff","text":"Prisme","text_font":25,"toggle":true}
{"page":1,"id":15,"obj":"btn","x":350,"y":360,"w":120,"h":40,"radius":10,"bg_color":"#212121","border_color":"#ffffff","text":"Blanc","text_font":25,"toggle":true}
{"page":1,"id":17,"obj":"checkbox","x":40,"y":80,"border_color":"#212121","text":"Lavabo","text_font":25,"val":1}
{"page":1,"id":18,"obj":"checkbox","x":180,"y":80,"border_color":"#212121","text":"Baignoire","text_font":25,"val":1}
{"page":1,"id":19,"obj":"checkbox","x":340,"y":80,"border_color":"#212121","text":"Douche","text_font":25,"val":1}

Rendu graphique :
openhasp_04

Cette IHM permet :

  • D’activer/désactiver chaque point lumineux indépendamment
  • D’activer un effet sur les points lumineux actifs, les effets ne sont pas modifiables, ce sont ceux du plugin Jeedom Phillips Hue (Bougie, Feu et Prisme)
  • De modifier la couleur et la luminosité des points lumineux actifs

Vous remarquerez que j’utilise des boutons ‹ toggle › pour garder visible l’état actif.

5.2 Plugin Jeedom openHASP

On va faire vite et simple pour ajouter l’écran comme équipement openHASP dans Jeedom

  1. Allez dans le plugin openHASP
  2. Ajouter un nouvel équipement
  3. Configurer son nom, objet parent etc…
  4. Configurer l’écran → Configuration par Adresse IP
    Entrez l’adresse IP de l’écran et cliquez sur « Valider IP »
  5. Aller dans « Commandes spécifiques »
  6. Cliquer sur « Importer les objets de l’écran »

La page va se rafraîchir et vous verrez touts les objets supportés par le plugin openHASP qui auront des commandes associées :

image
image1348×338 38.4 KB

5.3 Comprendre la philosophie de la communication écran openHASP / Jeedom

Cas simple et transposable pour presque tous les autres objets : le checkbox :

  • Côté écran openHASP : 1 objet « checkbox » en page 1 qui peut avoir 2 états « coché » et « décoché » (assez classique) et qui affiche par exemple le texte « Baignoire »
  • Côté plugin Jeedom openHASP : 2 commandes
    • 1 commande Info nommée « Page 1 - Checkbox Baignoire » qui récupère l’état du checkbox « Baignoire » envoyé par l’écran
    • 1 commande Action nommée « Page 1 - Checkbox Baignoire Commande » qui permet d’envoyer à l’écran une nouvelle valeur pour le checkbox « Baignoire »

Scénario d’exemple 1 :

  1. Etat initial
    1. Le checkbox « Baignoire » à l’écran est décoché
    2. Jeedom : Commande Info nommée « Page 1 - Checkbox Baignoire » = 0
  2. Action : On appuie sur le checkbox « Baignoire » à l’écran
    1. Le checkbox « Baignoire » à l’écran est coché
    2. Jeedom reçoit une mise à jour de la Commande Info nommée « Page 1 - Checkbox Baignoire » = 1

Scénario d’exemple 2 :

  1. Etat initial
    1. Le checkbox « Baignoire » à l’écran est décoché
    2. Jeedom : Commande Info nommée « Page 1 - Checkbox Baignoire » = 0
  2. Action : Depuis Jeedom, on envoie la commande Action nommée « Page 1 - Checkbox Baignoire Commande » avec valeur = 1
    1. Le checkbox « Baignoire » à l’écran est coché
    2. Jeedom reçoit une mise à jour de la Commande Info nommée « Page 1 - Checkbox Baignoire » = 1

5.4 Gestion avec un scénario

Les échanges de données via MQTT sont rapides mais absolument pas déterministes : on peut vite bloquer un scénario à attendre un retour d’info de l’écran.

J’ai fait le choix d’avoir un seul scénario pour gérer la page de l’écran.

  • Type : Multi-lancement
  • Mode du scénario : Provoqué avec toutes les commandes infos de l’écran et également les états des lampes du plugin Phillips HUE (pour voir les états synchronisés)
    (ça fait quelques évènements !)

Ensuite voici un aperçu de comment je gère le checkbox « Baignoire » qui contrôle 1 lampe et éviter que ça tourner en boucle :

image
image1344×372 43 KB

image
image1338×373 44.2 KB

Réactivité à l’utilisation : ce n’est pas immédiat comme un inter mais presque, je dirais 1s, parfois 2s grand grand max (après il faut refaire le cheminement de l’information avec écran openHASP → Brocker MQTT → Plugin Jeedom MQTT → Plugin Jeedom openHASP → Scénario déclenché → Plugin Jeedom Phillips HUE → Hub Phillips HUE → point lumineux Phillips HUE)

Ça a été validé par le test du singe, enfin des enfants, qui ont tout essayé et n’ont pas fini de jouer avec.

6. Conclusion

C’était assez long comme ça, juste amusez vous !

5 « J'aime »