Réaliser un abreuvoir connecté ESP8266 (Webserver, AJAX)

Il y a pas longtemps j’ai partagé aux abonnés de ma newsletter comment, avec l’aide d’AJAX (Asynchronous JavaScript + XML) piloter une pompe. Cette newletter était simplement une introduction à l’utilisation d’AJAX pour piloter une pompe. Je me suis ensuite laissé aller à l’idée de faire évoluer ce projet.

 

J’ai fini par réaliser pas seulement une pompe pilotable à distance, mais une véritable pompe connectée automatique avec laquelle on peut interagir!

Après réflexion, je ne pense pas qu’utiliser AJAX a été la meilleure solution… Le grand intérêt de cette technologie et la simplicité d’utilisation pour faire évoluer une page web selon les circonstances. J’en reparle ci-dessous !

Commençons par définir ce que j’entends par abreuvoir connecté.

Cahier des charges

Cet abreuvoir aura un capteur et une pompe. Cette contrainte va beaucoup agir sur la complexité du code vous verrez!

L’abreuvoir est composé d’un réservoir d’eau, du système électronique et d’un bol. Le bol sera l’endroit ou viendra s’abreuver l’animal. Le principal travail du système électronique sera de remplir le bol quand le niveau de celui-ci baissera.

Le système embarquera également un serveur web qui affichera une page de supervision ou l’on pourra voir l’état de la pompe (et non le niveau d’eau). On pourra donc observer quand le système remplira le bol et quand le bol aura un niveau d’eau correct. Il sera même possible d’actionner manuellement la pompe !

Il faut également pouvoir détecter et prévenir l’utilisateur s’il n’y a plus d’eau dans le réservoir. C’est là que les choses vont se compliquer avec seulement un capteur!

Au niveau de l’équipement, j’ai un capteur de niveau d’eau qui réagit à partir du moment ou l’eau entre en contact. Le nodemcu contrôlera la pompe à travers un mosfet.

Le câblage

Le schéma et très simple à comprendre :

Dans un premier temps, nous piloterons la pompe à travers un mosfet qui sera actionnable depuis la broche D5. Faites bien attention à la sélection de mosfet. Étant donné que ma pompe est très peut puissante, la majorité des mosfet aurait pu la supporter. Mais si vous utilisé une pompe plus costaude prenez le en compte dans votre choix de mosfet. Pensez également à pull-down celui-ci !

Le capteur de niveau d’eau retourne une valeur analogique et fonctionne parfaitement à 3.3v. Même pas besoin de se préoccuper de la plage de valeur analogique retourné dans notre cas puisque nous faisons simplement de la détection numérique (0 ou 1) et non une mesure.

Vous pouvez voir dans le schéma ci-dessus que j’ai ajouté une alimentation externe pour la pompe, mais sachez que si vous n’utilisez pas une pompe peu ‘puissante’, la sortie 5v du nodemcu suffira (comme dans mon cas).

A NOTER :

pour la suite de l’article vous pouvez vous passer de pompe (assurez-vous simplement qu’elle fonctionne) …

La page web

HTML/CSS

 

J’ai personnellement commencé par coder la page. J’en avais marre, des pages web blanches avec des boutons et des polices d’écritures basiques. Donc j’ai pris un petit moment pour la rendre plus présentable que certaine de mes homologues.

Cette page web est quelque peut classique, seule particularité sera la présence d’un bouton pour actionner manuellement la pompe. Ce bouton fera appel à une fonction JS que nous verrons juste après.

Je suis plutôt fière du résultat que vous l’aurez remarqué, j’ai suivi en quelque sorte la charte graphique de weldybox (hehe).

Pour des raisons de simplicité même si je pense que certains vont hurler j’ai intégré le code css dans la page html directement.  C’est une page html/css assez basique, mais je tenais à vous parler de l’outil CSS flexbox.

Flexbox est encore sous-utilisé je trouve et je pense que cet outil mérite plus de visibilité ! Il s’agit d’un outil de mise en page assez complet qui fonctionne en hiérarchie de ‘boite’.

Vous avez donc une boite qui englobe toutes les autres boites. Ces autres boites elles-mêmes englobent d’autres boites, ect… Vous avez compris. Chaque boite va porter des propriétés qui agiront sur le comportement des boites ‘enfants’. De cette manière, vous pouvez efficacement concevoir des pages web complexes sans pour autant compter les pixels !

JAVASCRIPT

Le JavaScript va nous permettre de faire la liaison entre la page web et l’objet en lui-même. Nous utiliserons pour ce faire AJAX (Asynchronous JavaScript + XML). Cette technologie n’est rien d’autre qu’un mix entre plusieurs langages déjà existants. Elle va permettre à la fois de communiquer avec notre ESP à travers des requêtes HTTP et de mettre à jour la page (pour afficher des informations supplémentaires par exemple).

Bien que le résultat final fonctionne très bien il aurait été préférable dans cette situation d’avoir recourt à un websocket (peut être le sujet d’un prochain article).

Le bouton que nous avons réalisé dans la partie HTML/CSS va pointer vers la fonction pompeControl(). Cette fonction va envoyer une requête HTTP et attendre une réponse ! Cette réponse sera ensuite appliquée à l’élément ayant l’ID « demo ».

Cette fonction sera exécutée deux fois (la première sera pour actionner la pompe et la seconde pour l’éteindre une fois le niveau d’eau rétabli).

La seconde fonction est une fonction d’appel à répétition ! Ce n’est bien évidemment pas l’idéal, mais c’est à travers cette fonction que nous saurons toutes les X secondes si le niveau d’eau est correct et s’il faut activer ou non la pompe.

Cette fonction sera exécutée deux fois (la première sera pour actionner la pompe et la seconde pour l’éteindre une fois le niveau d’eau rétabli).

Code arduino

Le bouton

 

Comme nous pouvons le voir plus haut, il y aura un bouton sur la page web qui va permettre d’actionner la pompe à tout moment ! Ce bouton pointe sur la fonction JS pompeControl() qui s’exécute deux fois donc.

Je ne vais pas m’attarder sur les choses basiques telles que la mise en place de la connexion avec le WiFi. La création et l’initialisation de l’objet ESP8266WebServer ou même la mise en place d’ArduinoOTA. À la place, je vous laisse le lien vers le code ici.

Voici l’algorigramme pour la partie du bouton :

Pour comprendre plus en détail son fonctionnement, je vais retracer avec vous l’action sur ce bouton.

Dans un premier temps, la première exécution va envoyer une requête HTTP GET vers ’/eau’. J’ai donc précisé dans le code que si telle requête est reçue, alors j’appelle la fonction pompeEau().

Cette fonction va en quelque sorte effectuer une analyse de l’état du système. Elle va regarde si c’est la première des deux requêtes, si le niveau d’eau est correct ou pas et si le réservoir est plein.

Dans le cas de figure ou il n’y a pas assez d’eau et que c’est las première itération. Alors elle va simplement allumer la pompe et envoyer au serveur une réponse HTTP contenant le texte à afficher à l’intérieur de la balise <div>. Cette réponse est d’ailleurs on morceau de code HTML qui va afficher une pastille rouge suivie de « remplissage… »

.

À la seconde itération alors la variable go sera égale à 1. Dans le cas de figure ou l’eau ne sera pas revenu à niveau ce qui est fort probable étant donné que ces fonctions sont appelées en un espace de temps très réduit, nous appelons la fonction coupPompe().

Cette fonction en elle-même coupe la pompe. J’ai cependant ajouté une fonction du nom de lvlEauCheck() qui va laisser activer la pompe tant que le niveau d’eau ne sera pas rétabli, ensuite elle enverra une requête vers le serveur web pour actualiser la pastille.

Si tout est correct, nous pouvons à tout moment ajouter de l’eau en appuyant sur le bouton. La pastille verte (native sur l’interface) va devenir rouge et sera suivie d’un texte « remplissage » jusqu’à ce que le niveau soit rétabli. Ensuite, elle redeviendra verte d’elle-même.

Remplissage automatique

 

Je rappelle que dans le code JavaScript la fonction pompeControl () est appelée tous les X secondes par une boucle temporelle.

Comme nous l’avons vue dans la partie précédente la fonction pompeEau() est dans la foulée appelée une première fois. Si le niveau d’eau reste acceptable, aucune action ne sera faite. si ce n’est renvoyer une pastille verte au serveur web. Cependant, si le niveau d’eau diminue, la pompe sera de nouveau allumée. La fonction coupePompe() sera appelée dans la foulée.

Cette fonction itérative en JS simulera en quelque sorte l’action du bouton tous les X secondes. Un problème subsiste… Comment détecter qu’il n’y a plus d’eau dans le réservoir ??

Ce questionnement va faire l’objet de la dernière partie de cet article concernant le code !

 

Détection du niveau d’eau dans le réservoir

 

Quand je parlais de difficulté due au nombre de capteurs réduit, je faisais référence à cette ultime partie ! En effet, avec comme seul capteur celui du niveau d’eau du bol je n’ai aucune possibilité de collecter le niveau du réservoir…

Nous allons user de ruse ! Le but ne va pas être de détecter qu’il n’y a plus d’eau dans le réservoir. Nous allons détecter que le niveau d’eau dans le bol ne monte plus. En effet, on peut déduire une limite de temps d’utilisation de la pompe au-delà duquel elle s’arrêtera de fonctionner jusqu’à remplissage du réservoir.

Pour m’assurer qu’il n’y est pas d’erreurs je vais même l’activer X temps puis l’éteindre et recommencer Y fois. Si après Y fois, le niveau d’eau n’est toujours pas rétabli. Alors la pompe se placera en mode sécurité et s’arrêtera de fonctionner jusqu’à ajout d’eau dans le réservoir.

A NOTER :

À noter : Pour ce type de pompe, il n’est pas conseillé de fonctionner sans eau (c’est pour cela que j’ai nommé ce mode ‘sécurité’).

Pour faciliter la maintenance j’ai utilisé le service IFTTT qui enverra une notification pour me prévenir directement sur mon téléphone.

La fonction lvlEauCheck() va donc patienter X secondes. Si le niveau d’eau n’est toujours pas rétabli elle va incrémenter une variable qui représentera le nombre de tentatives. Une boucle if() testera à chaque itération si le nombre d’itérations n’a pas dépassé le maximum. Dans le cas contraire, la variable noWater passera de l’état 0 à 1, la pompe switchera en mode sécurité.

Dans le cas ou la pompe est en mode sécurité une pastille rouge suivie du texte «plus d’eau » sera envoyée au webserveur et une notification apparaitra sur mon téléphone me disant d’aller en ajouter.

Pour envoyer cette notification, j’ai l’applet Webhook et pushbullet du service IFTTT. Si vous ne savez de quoi il s’agit, je vous invite à lire l’article qui en parle.

J’ai donc créé une fonction appelée dans le cas où il n’y a plus d’eau qui construit une requête HTTP à destination de mon applet IFTTT. L’applet reçoit le message d’un côté et utilise le service puchbullet pour m’envoyer une notification :

Conclusion

 

Cet objet connecté est entièrement autonome du moment que le réservoir contient de l’eau (et qu’il est alimenté). L’interface utilisateur graphique n’est pas forcément nécessaire. mais je trouve qu’elle rajoute une touche professionnelle et m’a permis de me remettre au HTML/CSS 😊

Je n’ai pas encore installé définitivement ce dispositif, mais voici quelques photos de l’installation à l’heure d’aujourd’hui. Rien d’exceptionnel… Faites bien attention à l’effet siphon qui se produit dans le cas ou la pompe est inférieure au niveau d’eau à remplir !

Veillez également à ne pas exposer le système électrique à d’éventuelles éclaboussures d’eau (cela me parait évidente cependant 😉).

-> LE CODE <-

Reçois 1 un petit guide de réalisation DIY par semaine!

+

Du contenu bonus offert à chaque nouvel article!