App Inventor avec routeur
Schéma de câblage :
Programme Arduino ESP32 : Contrôle des sorties via une application Android
Ouvrez l'IDE Arduino et allez dans Fichier > Nouveau pour créer un nouveau fichier. Copiez le code ci-dessous dans ce fichier.
Dans le schéma suivant, l'ESP32 héberge un serveur web permettant à l'utilisateur de contrôler les broches GPIO4 et GPIO5 via des boutons. Ces broches sont connectées à des LED et configurées en sortie. Le serveur web comporte des boutons ON et OFF pour chaque LED. Un clic sur un bouton génère une requête HTTP à une URL et l'ESP32 répond en conséquence en activant ou désactivant la broche de sortie correspondante.
Veillez à remplacer les identifiants réseau pour vous connecter correctement à votre réseau Wi-Fi local en salle SIN.
Lorsque l'utilisateur cliquera sur les boutons ON/OFF, la page web le redirigera vers l'URL /led1ON ou /led1OFF pour led1 et vers les URL /led2ON et /led2OFF pour led2. À chaque requête HTTP GET effectuée sur l'URL spécifiée, la LED connectée à la broche GPIO correspondante du module ESP32 s'allumera ou s'éteindra en conséquence.
Création d'une application avec MIT App Inventor
MIT App Inventor est une application web remarquable qui permet de créer des applications Android intéressantes. Cet outil de programmation par blocs permet de concevoir des applications entièrement fonctionnelles pour appareils Android tels que smartphones et tablettes. Souvent qualifié d'intuitif, il est facile à prendre en main, même pour les débutants en programmation. Nous l'utiliserons également pour développer notre application Arduino.
Étapes pour créer une application Android
Rendez-vous sur le site web suivant : et cliquez sur le bouton « Créer des applications ! ».
Vous serez redirigé vers une nouvelle fenêtre où il vous sera demandé de vous connecter avec votre adresse e-mail. Après vous être connecté, vous devrez accepter les conditions générales ci-dessous.
Vous recevrez un message de bienvenue. Vous pouvez cliquer sur le lien pour obtenir plus d'informations sur l'installation de l'application Inventor sur votre smartphone. Appuyez sur « Continuer » pour poursuivre. Si vous le souhaitez, vous pouvez consulter les tutoriels proposés. Sinon, cliquez sur « Créer un projet vierge » pour commencer à développer votre application.
Il vous sera demandé de préciser le nom de votre projet. Choisissez un nom approprié. Cliquez sur « OK ».
L'éditeur s'ouvre. C'est ici que nous allons concevoir l'interface utilisateur de notre application. Nous pouvons ajouter du texte, des boutons, des images et diverses autres fonctionnalités en faisant glisser des composants de la palette vers la zone de visualisation. Ensuite, nous définirons leurs attributs via la colonne « Propriétés ».
Créer un design
Tout d'abord, nous allons ajouter un titre à notre application. Accédez à Palette > Interface utilisateur et sélectionnez « Étiquette ». Cliquez et faites glisser l'étiquette. Déposez-la dans la zone de visualisation. Vous pourrez alors la visualiser à la fois dans la zone de visualisation et dans la liste des composants. Renommez-la « Titre », comme indiqué dans la section Composants.
Accédez aux « Propriétés » pour modifier le texte, la taille et la couleur de la police. L'étiquette sera automatiquement mise à jour dans la visionneuse. Notez que la visionneuse vous montrera l'apparence finale de votre application telle qu'elle apparaîtra sur votre smartphone.
Vous pouvez modifier les propriétés de l'étiquette pour intégrer l'espacement souhaité en modifiant sa largeur et sa hauteur.
Section de commande LED 1
Sélectionnez ensuite HorizontalArrangement dans la mise en page. Définissez les propriétés comme indiqué ci-dessous.
Accédez à Palette > Interface utilisateur et sélectionnez « Étiquette ». Cliquez et faites glisser l'étiquette. Déposez-la du côté de l'afficheur. Renommez-la « led1state », comme indiqué dans la section Composants.
Rendez-vous dans les « Propriétés » pour modifier le texte, la taille et la couleur de la police.
Ajoutez un autre HorizontalArrangement sous l'étiquette led1state. Définissez les propriétés comme indiqué ci-dessous.
Accédez à Interface utilisateur > Bouton et glissez-déposez deux boutons dans HorizontalArrangement2. Renommez-les respectivement « led1ONbutton » et « led1OFFbutton ». Modifiez également leurs propriétés. Ces boutons serviront à contrôler la LED connectée à GPIO4.
L'image ci-dessous illustre les propriétés du bouton led1OFF.
Pour ajouter un espacement entre la première section LED et la deuxième section LED, nous ajouterons un HorizontalArrangement de hauteur 10 pixels sous HorizontalArrangement2.
Section de commande LED 2
De la même manière, nous allons créer la section pour la deuxième LED.
Sélectionnez ensuite HorizontalArrangement dans la mise en page et placez-le sous HorizontalArrangement3. Définissez les propriétés comme indiqué ci-dessous.
Accédez à Palette > Interface utilisateur et sélectionnez « Étiquette ». Cliquez et faites glisser l'étiquette. Déposez-la du côté de l'afficheur. Renommez-la « led2state », comme indiqué dans la section Composants.
Rendez-vous dans les « Propriétés » pour modifier le texte, la taille et la couleur de la police.
Ajoutez un autre élément HorizontalArrangement sous l'étiquette led2state. Définissez ses propriétés comme indiqué ci-dessous.
Accédez à Interface utilisateur > Bouton et glissez-déposez deux boutons dans HorizontalArrangement5. Renommez-les respectivement « led2ONbutton » et « led2OFFbutton ». Modifiez également leurs propriétés. Ces boutons serviront à contrôler la LED connectée à GPIO5.
L'image ci-dessous illustre les propriétés du bouton led2OFF.
Informations sur l'adresse IP actuelle
Ajoutez ensuite un HorizontalArrangement sous HorizontalArrangement5. Définissez ses propriétés comme indiqué ci-dessous :
Accédez à Palette > Interface utilisateur et sélectionnez « Étiquette ». Cliquez et faites glisser l'étiquette. Déposez-la dans HorizontalArrangement6. Renommez-la « ESP32IPlabel », comme indiqué dans la section Composants. Le texte est actuellement défini sur « Adresse IP actuelle ».
Rendez-vous dans les « Propriétés » pour modifier le texte, la taille et la couleur de la police.
Faites glisser une autre étiquette et déposez-la à côté de ESP32IPlabel, comme indiqué ci-dessous. Renommez-la « ESP32IPinfoLabel ». Le texte est vide pour le moment.
Enregistrer l'adresse IP
Ajoutez un autre élément HorizontalArrangement sous HorizontalArrangement6. Renommez-le « SaveArrangement », comme indiqué dans la section Composants. Cet élément ne sera visible que lorsque l'utilisateur cliquera sur le bouton « Définir l'adresse IP ».
Configurez ses propriétés comme indiqué ci-dessous. Activez initialement la visibilité car nous devons placer une zone de texte et un bouton dans cette disposition.
Accédez à Palette > Interface utilisateur et sélectionnez « Zone de texte ». Glissez-déposez-la ensuite dans la zone « Visionneuse », à l'intérieur de l'élément « SaveArrange ». La section Propriétés affiche les propriétés définies pour cet élément.
Il s'agit de la zone de texte où l'utilisateur saisira l'adresse IP du module ESP32.
Ajoutez ensuite un bouton à côté de la zone de texte, comme indiqué ci-dessous. Renommez ce bouton « saveButton » et configurez ses propriétés comme indiqué dans la section Propriétés.
Décochez maintenant la case « Visibilité de SaveArrangement ».
Bouton « Définir l’adresse IP »
Pour le bouton « Définir l'adresse IP », ajoutez d'abord un HorizontalArrangement sous saveArrangement et définissez ses propriétés comme indiqué.
Placez maintenant un bouton dans cette disposition horizontale. Renommez-le « SetIPbutton » et configurez ses propriétés comme indiqué ci-dessous :
Accédez à Stockage > TinyDB et glissez-déposez l'élément dans la visionneuse. Il s'agit d'un composant invisible de l'application qui stockera des données telles que l'adresse IP du module ESP32.
Enfin, accédez à Interface utilisateur > WebViewer et faites glisser l'élément dans la visionneuse. Décochez ensuite sa visibilité.
Le WebViewer sera utilisé pour accéder au serveur web de contrôle des sorties ESP32 afin de contrôler les LED lorsque les boutons ON/OFF seront cliqués.
Disposition des blocs
Cliquez maintenant sur le bouton « Blocs » situé en haut de la fenêtre. Un nouvel éditeur s'ouvre. Nous allons y concevoir le comportement de notre application. Pour assembler les blocs dans l'espace de travail, cliquez et faites-les glisser.
Configuration et enregistrement de l'adresse IP
Commencez par assembler les blocs pour les boutons SetIPbutton et saveButon comme indiqué ci-dessous.
Lorsque l'utilisateur clique sur le bouton « Définir l'adresse IP », la visibilité de l'élément « Enregistrer la configuration » est activée. Cela signifie que la zone de texte et le bouton « Enregistrer » deviennent visibles. En revanche, la visibilité de l'élément « Définir l'adresse IP » est désactivée.
L'utilisateur saisit l'adresse IP du module ESP32 dans le champ texte et clique sur le bouton Enregistrer. L'adresse IP est alors enregistrée dans TinyDB avec l'étiquette « esp_ip ». Le texte de l'étiquette ESP32IPinfoLabel affiche la valeur enregistrée. Si l'étiquette n'est pas encore présente, une chaîne vide s'affiche. Par ailleurs, la visibilité de SaveArrangement est désactivée et celle de setIParrangement est activée.
Contrôle LED
Lorsque l'utilisateur clique sur le bouton led1ON , le WebViewer accède au serveur web de contrôle des sorties ESP32 en ouvrant l'URL correspondant à l'adresse IP du module suivie de /led1ON. Cette adresse IP est enregistrée dans TinyDB sous l'étiquette « esp_ip ». Lorsque l'utilisateur clique sur le bouton ON de led1, l'application Android ouvre l'URL : http://VOTRE_ADRESSE_IP/led1ON. La LED s'allume alors.
Ensuite, l'état de la LED1 est également enregistré dans TinyDB sous l'étiquette « led1state » avec la valeur « LED à GPIO4 est allumée ». Le texte de led1state est défini sur la valeur de l'étiquette « led1state » enregistrée dans TinyDB. Si aucune étiquette n'était encore présente, le texte de led1state serait « LED à GPIO4 ».
Lorsque l'utilisateur clique sur le bouton led1OFF , le WebViewer accède au serveur web de contrôle des sorties ESP32 en ouvrant l'URL correspondant à l'adresse IP du module suivie de /led1OFF. Cette adresse IP est enregistrée dans TinyDB sous l'étiquette « esp_ip ». Lorsque l'utilisateur clique sur le bouton OFF de led1, l'application Android ouvre l'URL : http://VOTRE_ADRESSE_IP/led1OFF. La LED s'éteint alors.
Ensuite, l'état de la LED1 est également enregistré dans TinyDB sous l'étiquette « led1state » avec la valeur « LED à GPIO4 éteinte ». Le texte de led1state correspond à la valeur de l'étiquette « led1state » enregistrée dans TinyDB. Si aucune étiquette n'était présente, le texte de led1state serait « LED à GPIO4 ».
La même logique est utilisée pour les boutons led2ON et led2OFF, comme indiqué ci-dessous :
Initialisation de l'application
Lors de l'initialisation de l'application Android, le texte de ESP32IPinfoLabel est initialisé avec la valeur enregistrée dans TinyDB sous l'étiquette « esp_ip ». Si aucune étiquette n'est présente, une chaîne vide est affichée. De même, le texte de led1state est initialisé avec la valeur enregistrée dans TinyDB sous l'étiquette « led1state ». Si aucune étiquette n'est présente, la valeur « LED at GPIO4 » est affichée. Enfin, le texte de led2state est initialisé avec la valeur enregistrée dans TinyDB sous l'étiquette « led2state ». Si aucune étiquette n'est présente, la valeur « LED at GPIO5 » est affichée.
Pour plus d'informations sur la création de votre application dans MIT App Inventor, suivez ce guide : Tutoriels App Inventor.
Configuration d'App Inventor sur smartphone
Maintenant que nous avons créé notre application dans MIT App Inventor et écrit son code, installons App Inventor sur notre smartphone. Ainsi, nous pourrons accéder à notre application depuis n'importe où dans le monde. Suivez attentivement les étapes.
Tout d'abord, rendez-vous sur le Play Store et installez « MIT AI2 Companion ».
Après avoir installé l'application, ouvrez-la. Vous devrez soit scanner un code QR, soit saisir un code à 6 caractères.
Pour y accéder, rendez-vous sur la page principale de MIT App Inventor, là où nous avons initialement créé notre application. Cliquez ensuite sur « Créer » > « Application Android (.apk) » . Après quelques instants, votre code-barres sera généré. Vous pourrez alors télécharger le fichier .apk ou scanner le code-barres avec MIT App Inventor.
Après avoir installé le fichier .apk sur notre téléphone Android, nous pourrons visualiser l'écran que nous avons créé.
Nous allons maintenant faire la démonstration du projet.
Démonstration
Avant de téléverser votre code sur la carte, assurez-vous de sélectionner la carte et le port COM appropriés. Accédez à Outils > Carte et sélectionnez Module de développement ESP32. Ensuite, accédez à Outils > Port et sélectionnez le port auquel votre carte est connectée.
Cliquez sur le bouton de téléchargement pour transférer le code vers la carte de développement ESP32.
Nous allons maintenant transférer les fichiers sur notre carte ESP32. Allez dans Outils > Transfert de données ESP32. Le transfert des fichiers prendra quelques instants.
Une fois votre code et les fichiers téléchargés sur la carte de développement ESP32, appuyez sur son bouton ENABLE.
Dans votre IDE Arduino, ouvrez le moniteur série et vous pourrez voir l'adresse IP de votre module ESP32 une fois qu'il se sera connecté au réseau Wi-Fi local.
Moniteur série
Ouvrez l'application MIT Companion sur votre smartphone. Appuyez ensuite sur le bouton « Définir l'adresse IP ».
Une zone de texte et un bouton Enregistrer apparaîtront.
Saisissez l'adresse IP obtenue à partir du moniteur série dans la zone de texte. Appuyez ensuite sur le bouton Enregistrer.
L'adresse IP actuelle a été mise à jour avec celle que nous venons d'enregistrer.
Appuyez maintenant sur les boutons ON/OFF de chaque LED pour contrôler les sorties ESP32.
Créé avec HelpNDoc Personal Edition: Créer des aides HTML, DOC, PDF et des manuels depuis une même source