WEB ET ARDUINO
Le broker qu’est-ce que c’est ?
Pour faire interagir la platine arduino et le web nous utilisons un broker. Son rôle est de distribuer les messages aux ensembles des objets IOT connectés.
Lorsque l’objet IOT a souscrit à un topic, il va recevoir tous les messages de celui - ci. Quand il publie un message tous les objets abonnés à son topic le reçoivent.
Exemple:
Pour interagir avec les différents objets, le broker utilise le protocole MQTT. Vous n’avez pas besoin de rentrer dans la technique pour utiliser celui-ci.
Il existe plusieurs brokers, en principe nous pouvons avoir besoin d’un broker local ou accessible par internet.
J’ai testé le broker Mosquitto en local sur une platine rasberryPi qui remplie efficacement son rôle.
Pour ne pas vous faire acheter du matériel supplémentaire, j’ai choisi le brocker shiftr.io sur internet car il est facile à installer et la documentation remplie les exigences du projet que je souhaite réaliser.
Etape 1: Mise en place du Broker
- Créer un compte sur shiftr.io
- Créer le broker
- Modifier le token avec pour paramètre l’identifiant et le mot de passe.
Ces démarches sont rapides, pour ceux qui auraient des difficultés, je vous renvoie sur la vidéo Web et arduino ci-dessus.
Etape 2: Test avec la platine Arduino
Dans un premier temps, je vous invite à installer la librairie MQTT de Joel Gaehwiller
Ensuite lancer l’exemple
- Fichier/EXEMPLE / MQTT / ArduinoEthernetShield
- Modifier les paramètres de connexion au broker dans la fonction Connect ligne 23 avec votre identifiant et votre mot de passe du token
- Téléverser le programme et vérifier que le broker reçoit l’information
« World » sous le topic « Hello ».
A partir de là, la platine arduino et le broker sont opérationnels.
Etape 3: Le Web
Dans la documentation de shiftr.io vous y touverez le code source de base pour interagir avec le broker et le navigateur.
- Créer un dossier dans lequel vous allez y mettre trois fichiers: index.html, script.js et style.css
- Prenez le code de la documentation sous exemple browser et faites un copier/coller dans les différents fichiers.
- Tester l’envoi du message lorsque vous appuyez sur le bouton
ARDUINO ET WEB
Présentation
Il s'agit d’allumer des diodes aux travers du navigateur, recevoir le retour d’un potentiomètre et d’agir avec un bouton poussoir sur la platine arduino.
Le broker étant opérationnel, nous n’agirons plus sur celui-ci.
Index.html
L’objectif est d’afficher deux boutons pour commander des diodes et un retour potentiomètre.
Style.css
Le fichier style.css permet de donner des paramètres d’affichage de la page index.html
Script.js
Script permet de modifier et d'actualiser la page index.html, son langage est le javascript.
Le javascript a la particularité de modifier la page Web, même après son téléchargement celui-ci est interprété par le navigateur.
Le premier élément, c’est la connexion au broker ligne 4, il faut renseigner ses identifiants de token
Le second élément: lignes 10 et 11 permettent de souscrire aux différents Topic.
Le troisième élément: lignes 15 à 69 modifient le contenu des balises ou leurs styles en fonction des messages reçus .
Exemple
document.getElementById('led7').innerHTML = ‘ON';
Modifie le contenue de la balise qui porte l’identifiant « led7 » dans la page index.html par « ON ».
document.getElementById("led7").style.backgroundColor="green";
Modifie le style backgroundColor de la balise qui porte l’identifiant « led7 » dans la page index.html.
Le dernier élément: ligne 71 à ligne 76 permettent de publier des messages au broker au click de bouton.
Lorsque le bouton est appuyé le message est traité par la fonction de traitement des messages : lignes 15 à 69.
Code source arduino
Le programme est fourni gratuitement en téléchargement https://plaisirarduino.fr/telechargement
Déclaration des variables pour les entrées / sorties de la commande des diodes et des différentes temporisations.
- Connexion avec les identifiants et mot de passe du token
- Souscription aux Topic
La fonction messageReceived traite toutes les interactions des messages reçus par le broker, elle a pour rôle de commander l’état des différentes diodes.
Dans cet exemple, lorsque la platine reçoit le message 9$Led7, elle met la diode 7 à HIGH
Le setup initialise les entrées / sorties et les différents paramètres nécessaires
La première partie de la fonction Loop renvoie toutes les 5 secondes les paramètres des diodes et ceux du potentiomètre en publiant leurs valeurs.
La seconde partie de loop renvoie les valeurs du potentiomètre, seulement quand celui-ci change de valeur.
Et enfin le traitement du bouton poussoir publie la commande de la diode 7 lorsque celui-ci est appuyé.
Recevez gratuitement les codes sources de PlaisirArduino
Amusez-vous tout de suite avec les entrées/sorties de votre carte Arduino Uno
Vous y retrouverez : des scketchs, des schémas et des PDF