Créer une application IoT avec LessCode
Les applications IoT sont complexes : la connectique, des bases de données, différents automates, différents capteurs, différents protocoles, etc... Un mix hétérogène de technologies diverses.
Faire sens de toutes ces données temps-réel et les présenter graphiquement est aussi compliqué.
Dans cet article, nous allons voir comment LessCode simplifie l'affichage (IHM) d'une solution IoT à travers une application concrète.
L'illustration suivante est une représentation d'un appareil IoT communicant avec LessCode et mettant à jour une application. L'API (interface de programmation d'application) utilisée est le REST.
L'objectif est de créer un prototype d'appareil IoT qui envoie des données sur notre serveur qui à son tour met à jour l'affichage des données dans un tableau de bord dans le navigateur web.
Le Hardware / Le Code Arduino
Pour le prototype, j'utilise un microcontrôleur ESP32. J'ai ajouté aux entrées un encodeur rotatif et deux boutons poussoirs. Une LED sert de voyant et clignote quand les données sont envoyées.
La photo suivante est le prototype réalisé.
Le schéma du prototype est le suivant.
Pour développer le programme du microcontrôleur, j'ai utilisé l'IDE d'Arduino.
L'ESP 32 a une carte WiFi intégrée ce qui le rend idéal pour une utilisation comme appareil IoT. Le code final lit les entrées tous les 1ms, regarde si les entrées ont changé d'état puis envoie les données en HTTP sur le serveur LessCode situé sur mon réseau WiFi.
Le code suivant est le setup. Ce code ne tourne qu'une fois au démarrage du microcontrôleur.
(1) La première chose que doit faire l'ESP32 est se connecter à mon réseau WiFi
(2) La dernière chose à faire avant de passer à la boucle principale est d'initialiser un timer. Ce timer, tous les 1 ms, déclenche une alarme qui appelle une fonction. Cette fonction lit les entrées de mon microcontrôleur reliées à l'encodeur rotatif.
La fonction appelée par l'alarme lit les entrées de l'encodeur rotatif et détermine s'il tourne et dans quel sens.
Les données des variables (la valeur de l'encodeur rotatif, l'état des boutons poussoirs) ne sont envoyées que si elles ont été modifiées par une action utilisateur.
L'application
Créer une application IoT avec LessCode est simple. En dessous, le tableau de bord a été créé avec notre éditeur graphique d'IHM. La barre de progression est mise à jour à chaque rotation de l'encodeur.
Les voyants passent au rouge à chaque appui sur les boutons poussoirs.
La barre de progression est un objet LessCode ainsi que les conteneurs, les voyants, etc..
L'application a besoin d'un peu de code pour recevoir les données depuis l'ESP32, les traiter et mettre à jour la barre de progression et les voyants. J'ai choisi de coder en Python mais on aurait pu choisir n'importe quel autre langage inclus dans LessCode.
Je commence par initialiser les variables et les objets que je vais manipuler. Chercher les éléments HTML n'est pas si différent du JavaScript. La barre de progression est un objet donc au lieu de manipuler un élément HTML on doit chercher l'objet associé à cet élément HTML, d'où une syntaxe légèrement différente.
Je dois aussi créer un objet REST API qui va contenir la requête HTTP.
Sur cet objet je rajoute un event listener qui sera déclenché par chaque requête HTTP l'on reçoit de l'appareil. Pour chaque action utilisateur sur l'appareil, la méthode _on_rest_api est appelée.
Le reste du code est ordinaire.
Deux autres méthodes, une pour l'encodeur rotatif et une autre pour les voyants sont implémentées.
Les voyants changent de couleur à chaque changement d'état. La valeur de la barre de progression est mise à jour à chaque rotation de l'encodeur rotatif.
La vidéo suivante montre l'appareil et l'application en fonctionnement.
Toutes les intéractions avec la carte électronique mettent à jour l'application en temps réel.
Cette application tourne dans un navigateur web. L'application est mise à jour en temps-réel par l'appareil IoT.
Sources :
- Musique dans la vidéo
'Machina' by Scott Buckley - released under CC-BY 4.0. www.scottbuckley.com.au