Comment créer des objets connectés avec un Relay et un ESP8266!

INTRODUCTION

 

Bienvenue dans mon premier article projet !

Cet article est la continuité du premier et est là pour approfondir le sujet du shield relay. Je vais te montrer comment utiliser le shield relay (que nous avons appris à mettre en place précédemment) dans un projet plus vaste.

On va réaliser une commande connectée sur batterie ! Tu pourras l’utiliser telle une télécommande pour contrôler quelque objet que ce soit!

La batterie qui sera un inconvénient puisqu’elle a besoin d’être rechargée peut s’avérer être un avantage si cette télécommande est destinée à ne pas être fixe et soumise à différents voltages différents.

Comment installer et programmer un shield relay Wemos

SOMMAIRE

 

  1. Le matériel
  2. Préparation du matériel
  3. Programmation d’une interface web avec bootstrap
  4. Programmation de la carte wemos et assemblage
  5. Branchement au relay
  6. Rendu final

Le Matériel

Ce projet m’a couté environ 8€50, il est composé d’une carte Wemos d1 mini (le cerveau du projet), d’un shield relay, d’un shield batterie.

Il y a bien évidemment la Batterie! il en fallait une de 3.7V et j’en est pas trouvé à vendre en solo, du coup j’ai commandé un lot de 4 avec un hub de charge (les liens d’achats sont disponibles en dessous).

Pour ce projet vous aurez aussi besoin d’un fer à souder. Le mien n’est pas terrible, mais a fait l’affaire. Je vous conseille aussi un pistolet à colle, et des trucs capables de couper (couteaux, ciseaux).

💎 Acheter le matériel 💎

Préparation du matériel

Avant d’assembler notre carte Wemos avec les shields il va falloir faire quelques soudures et modifier le shield batterie. Pourquoi modifier le shield batterie ?

Et bien c’est pour une question de place et de longueur de broche. En effet nous avons vu dans l’article précédent que les cartes wemos sont livrées avec des longs male to female pin. Nous allons les utiliser, pour connecter les 2 shields et la carte.

ATTENTION

Le connecteur batterie est trop imposant pour que la longueur des broches atteignent la carte. J’ai donc décidé de le retirer et de souder les fils + et – de la batterie à la place (On y gagne aussi beaucoup d’espace).

J’ai ensuite soudé les broches au shield relay qui sera sur le dessus de notre système. J’y est placé le shield batterie que j’ai dans la foulé soudé pour bien le maintenir en place.

Par soucis d’esthétisme et aussi parce que c’est plus pratique j’ai décidé de coller la batterie avec de la colle chaude en-dessous de la carte wemos. Il ne restera plus qu’à connecter la carte wemos (en la pluggant). Cependant, nous allons tout d’abord nous intéresser au code de celle-ci !

Programmation d’une interface web avec bootstrap

Pour cette première partie de programmation, nous allons nous intéresser au rendu de la page web qui servira de panneau de contrôle.

Dans le dernier article je vous ai initié à la programmation de serveur web avec un esp8266 et, même si c’était pratique, le rendu de notre page était très basique et pas très esthétique.

Ici nous allons créer une interface digne de ce nom (esthétique et pratique). Même si c’est très amusant de programmer des sites internet à la main avec du HTML du CSS et du JavaScript je ne pense pas être la personne la plus compétente pour vous l’apprendre (et ce n’est pas le but de ce projet).

C’est pourquoi ici, nous utiliserons bootstrap, un framework qui permet avec peu de connaissance de créer de joli site web.

Pour nous simplifier encore plus la tâche, j’ai utilisé un builder visuel en ligne -> boostrap layoutit (juste à glisser-déposer les éléments que tu souhaites sur ta page).

Pour ma part je ne me suis pas embêter j’ai simplement mis des titres un paragraphe et deux boutons (ON, OFF). Simple, mais efficace.

Une fois que vous avez fini votre interface, vous pouvez récupérer le code HTML ! Maintenant, avant de passer à la suite de la partie programmation, intéressons-nous à son incorporation au programme arduino.

En effet le code HTML que nous avons se réfère à la librairie boostrap… mais n’ayant pas tant de stockage que ça sur la carte wemos, il faut utiliser des liens dans lesquels elle pourra aller la chercher !

Les voici :

<link rel=’stylesheet’ href=’https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css’>

(CSS de bootstrap)

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js’></script>

(Bibliothèque java script jquery)

<script src=’https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js’></script>

(Javascript de bootstrap)

Il faudra aussi rajouter juste en dessous du head une ligne qui permet de s’adapter aux formats d’écrans, très utile pour les smartphones. C’est une fonction que bootstrap offre qui s’appelle mobile first. Voici la ligne en question :

<meta name=’viewport’ content=’width=device-width, initial-scale=1′>

Et voilà ! Notre code html est désormais pratiquement bon et prêt à être ajouté au code arduino ! Voyons comment s’y prendre.

Programmation de la carte wemos

Sur arduino il va d’abord falloir faire un serveur web esp8266 classique (avec ssid et adresse ip), je ne vais pas redétailler comment faire ici. Tu peux aller voir mon article précédent si tu veux en apprendre plus.

En réalité l’ajout du code html est très similaire à celui de l’article d’avant ! Il est même équivalent 😀

ATTENTION

De base layoutit fournit un code html avec («) partout ! Et dans le code html les lignes aussi sont entourées de («). Pensez bien à les modifier par des (‘) 😉

La seule différence va être la méthode pour récupérer l’état des boutons ON / OFF.  Cette fois, nous utiliserons la méthode POST dans un formulaire qu’il faudra ajouter dans le code HTML!

Comme le montre la screen ci-dessous j’ai englobé chacun des boutons dans un formulaire qui aura comme action de modifier l’url de la page (/relay=ON ou /relay=OFF selon les cas) ! La suite vous la connaissez puisque désormais le bouton agit comme un lien !

Vous voilà maintenant fin prête pour la dernière partie du projet !

SI TU AS BESOINS DE PLUS DE DÉTAILS SUR LE CODE DU SERVEUR WEB RETROUVE MON CODE ICI.

Branchement au relay

 

Le code est téléversé dans la carte ? Très bien tu peux maintenant la connecter aux shields que nous avons laissés avant. Si tout se passe bien, la carte est alimentée. Elle devrait s’allumer et vous devriez pouvoir aller sur le serveur !

SI vous devez intervenir directement sur votre réseau électrique, veillez bien à couper le courant ! Sinon débrancher simplement votre appareil ! Il faut faire très attention aux hautes tensions et prendre toutes les précautions possibles.

Il est temps maintenant de brancher ma lampe au relay!!

Avant toute chose j’ai coupé le câble d’alimentation de ma lampe pour y faire apparaitre les fils + et -. Maintenant reste à savoir ou les brancher sur le relay? Voyons tout d’abord comment marche un relay.

Comment ça marche un relay !

Une relay à 3 entrées, une normale open, une normale closed et une common. Nous nous intéresserons seulement aux entrées normales open et common.

Une relay agit comme un interrupteur. Quand on lui envoie un signal, le normale open entre en contact avec le common et le courant passe !

Pour notre usage il faut brancher le + du secteur (ou alimentation) au common et le + de l’équipement à alimenter au normale open.

Ensuite il ne reste plus qu’à souder le – de chaque côté comme dans son état initial.

Voici le schéma du shield relay wemos :

ATTENTION

En effet, si vous utilisé un autre relay regardez bien son schéma ou alors vérifiz vous-même quels ports est quoi (on travaille sur de grandes tensions je le rappel).

RENDU FINAL

 

Voici à quoi le système ressemble vue d’ensemble:

Avec le serveur Web pour le contrôler:

Résultat vidéo:

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

+

Du contenu bonus offert à chaque nouvel article!