Un bon complément au module de base ESP32 est un petit écran capable d'afficher des messages d'état tels que "Pas de réseau", par exemple, la carte Lolin (que j'ai déjà vue dans une critique précédente) possède cette fonction d'affichage intégrée. . Il y a quelques semaines, mon collègue Mathias Claußen, qui est habituellement esclave dans notre laboratoire, m'a signalé le système de développement M5Stack ESP32. Le module de base intègre une petite carte ESP32 dans un boîtier net et compact. la quasi-totalité de la surface frontale est occupée par un écran couleur prenant en charge les graphiques, avec une résolution de 320 x 240 pixels. Sous la zone d'écran se trouve une rangée de trois boutons-poussoirs; De plus, il existe divers connecteurs d’expansion et ports sur tous les côtés du boîtier. Il existe également des modules ou des boucliers supplémentaires (GPS, par exemple), qui peuvent être facilement branchés entre le haut et le bas du module de base, de sorte que vous puissiez assembler votre propre «pile» personnalisée. Mon collègue Clemens Valens a déjà rédigé une critique sur le système M5Stack.
Sommaire
Comment contrôler l'affichage?
Dans mes critiques, j’essaie toujours de développer un petit exemple d’application mais, comme toujours, le temps est compté. La première chose qui me vint à l’esprit fut de construire un petit croquis pour écrire du texte à l’écran. Pour la connectivité réseau, je pourrais simplement reprendre cette partie de mes projets précédents – l'ESP32 est programmable ici en utilisant l'IDE Arduino bien connu.
J'ai trouvé un tutoriel sur le net montrant comment intégrer toutes les bibliothèques nécessaires à la configuration de mon IDE Arduino. Cela comprenait également quelques petites démos. Il est rapidement devenu évident que les développeurs avaient encapsulé les fonctions du pilote d’affichage (ainsi que le balayage des boutons-poussoirs) dans un objet appelé M5. Après avoir incorporé le Lib avec
#comprendre
et dans l'esquisse, appelez la procédure
M5.begin ();
et maintenant vous pouvez utiliser des commandes telles que
M5.Lcd.setCursor (x, y);
M5.Lcd.setTextSize (2);
M5.Lcd.print (“Hello World!”);
pour contrôler l'affichage.
Sur GitHub, une référence API est également disponible. Cependant, je n’ai pas trouvé tout ce que je cherchais là-bas. Par exemple, je devais expérimenter pour savoir quelles valeurs de paramètre définissaient la taille de la police (M5.Lcd.setTextSize) (NB: les valeurs 2 à 5 sont utiles).
Finalement, j'ai été capable de porter un petit projet, que j'avais précédemment développé pour la carte Lolin OLED, sur le M5Stack. Dans cette application, les valeurs d'un LDR à détection de lumière sont échantillonnées et envoyées à la plate-forme en nuage OpenSenseMap (voir la critique). Je lis la tension sur le LDR (circuit) connecté aux prises de connecteur d’extension situées sur le côté droit du M5Stack (voir photo).
Vous pouvez télécharger ma première application M5Stack ci-dessous. Incidemment, une petite batterie est intégrée au M5Stack (une batterie supplémentaire (plus grande) est également disponible). En utilisant seulement la batterie intégrée, tout le paquet est portable, mais la pile M5 ne fonctionnera que pendant environ une heure avant de devoir être rechargée.
Vous pouvez télécharger ma première application M5Stack ci-dessous. Incidemment, une petite batterie est intégrée au M5Stack (une batterie supplémentaire (plus grande) est également disponible). En utilisant seulement la batterie intégrée, tout le paquet est portable, mais la pile M5 ne fonctionnera que pendant environ une heure avant de devoir être rechargée.
Messages via un serveur web
Bien que le portage rapide d’un projet précédent ait fonctionné, il ne tire pas pleinement parti de l’affichage, de la présentation soignée et de la portabilité du système M5Stack. J'ai réfléchi et décidé ce que je pouvais faire avec. Nous avons une petite installation de DJ à la maison; de temps en temps, des amis et des connaissances utilisent les platines, et nous utilisons une configuration de caméra pour enregistrer des événements. De temps en temps, j’ai besoin de communiquer avec le gars qui travaille aux ponts et j’ai souvent pensé que ce serait plus pratique si je pouvais envoyer un message sans avoir besoin de bouger les bras pour attirer son attention.
La taille de l’affichage M5Stack est idéale pour afficher de petits messages texte dans ce genre de situation. J'ai rapidement rejeté l'idée d'écrire une petite application PC communiquant avec le M5Stack via UDP ou TCP / IP rudimentaire. Il est plus facile et plus flexible de saisir des messages texte via un simple navigateur Web et de les envoyer à l’affichage – cela fonctionnera à partir d’un PC ainsi que de tout appareil mobile.
J'ai déjà programmé un serveur Web ESP32 pour mon blog IoT; Cela envoie une page Web HTML, utilisée pour définir le SSID et le mot de passe de votre propre réseau Wi-Fi. Pour pouvoir saisir les valeurs dans un navigateur, vous devez vous connecter à un réseau «local» auto-généré par l’ESP32 et entrer l’adresse 192.168.4.1 afin d’adresser l’ESP32 (ESP32 en mode point d’accès). Une fois que les données de connexion du réseau de routeurs sont arrivées sur l'ESP32, elles ont pu se connecter puis obtenir une autre adresse (par exemple, il s'agissait de 192.168.0.38 dans mon cas).
Pour construire cette application, j'ai utilisé l'une de mes précédentes esquisses comme base. J'ai développé la fonction de serveur Web de sorte que lorsque cette deuxième adresse est utilisée, une page Web contenant un seul champ de texte (le message adressé au DJ) est générée et un bouton Soumettre pour envoyer le texte. Une fois que le serveur Web ESP32 a reçu le message texte du navigateur Web du client, celui-ci s'affiche sur l'écran M5Stack.
La bibliothèque WiFiWebserver et DisplayBuffer
À propos de mon premier prototype, trois choses me préoccupaient. Premièrement, le message affiché à l’écran a nettement clignoté. Incidemment, il n'y a pas de commande dédiée pour effacer l'écran sur l'API M5Stack; supprimer du texte; vous devez l'écraser avec une chaîne d'espaces, puis écrire le nouveau texte.
Deuxièmement, mon code était un peu lourd, il y avait trop de fonctions individuelles utilisées pour les deux sites Web différents et pour évaluer les demandes. Dans ce cas, nous devrions utiliser une bibliothèque adaptée aux deux sites Web, que vous introduisiez jusqu'à huit valeurs de configuration ou qu'un simple message texte.
Troisièmement, je voulais cesser d'utiliser l'ESP32 à la fois comme point d'accès et en mode station. Non seulement cela risquait de poser problème, mais cela augmentait également la consommation d'énergie.
Après avoir passé du temps à apporter des modifications et des modifications au code, je suis arrivé à la solution que vous pouvez télécharger ci-dessous.
Pour résoudre le problème de scintillement de l'écran, j'ai utilisé un petit tampon de caractères. En fait, il en existe jusqu'à quatre, qui peuvent être utilisés en option à différentes positions du curseur. Dans mon application, le premier tampon est uniquement responsable de l'affichage des pulsations (un caractère qui bascule entre 0 et 1). Un autre tampon stocke le texte d'état (connecté ou non). L'adresse à laquelle l'ESP32 peut être atteint est également affichée ici. Le troisième tampon stocke le corps du message. Les fonctions de réglage de la DisplayBuffer les paramètres (position, taille de la police, longueur du texte) et pour l'écriture de texte sont bien sûr tous documentés dans le code source.
Pour résumer le serveur Web, j’ai d’abord écrit un petit Param class – il gère un ensemble de huit paramètres maximum qui ont un nom, une valeur et un type. Avec les lignes
Param Messages = Param ();
Param NetworkConfig = Param ();
Je «tire» deux objets de cette classe dans l'esquisse d'application. Le premier objet reçoit le texte du message (Messages.PValue[0]). Le deuxième objet est utilisé pour gérer les paramètres (NetworkConfig.PValue[0] est le SSID, NetworkConfig.PValue[1] est le mot de passe). Un tel objet nous permet de transmettre un ensemble de chaînes à d'autres bibliothèques en même temps. De plus, nous pouvons écrire des fonctions qui renvoient un Param-objet (c'est-à-dire plusieurs chaînes à la fois).
Ma nouvelle bibliothèque de serveurs Web en fait usage. Les lignes
#comprendre
WiFiWebserver myWebserver = WiFiWebserver ();
rendre les fonctions du serveur web accessibles via l'objet myWebserver. La ligne
NetworkConfig = myWebserver.DeSerializeFromGETParameter (GETParameter, NetworkConfig);
sépare le paramètre GET qui code les valeurs entrées par l'utilisateur (dans la ligne d'adresse du navigateur après le "?") pour un formulaire Web soumis. Les valeurs obtenues sont ensuite écrites dans le NetworkConfig objet et sont accessibles en utilisant NetworkConfig.PValue[x]. Inversement, vous pouvez utiliser myWebserver.SerializeToHTMLInputTable (NetworkConfig) obtenir un tableau HTML avec les champs de saisie requis, dans lequel l'utilisateur peut entrer les valeurs de NetworkConfig (SSID, mot de passe).
Activité du bouton-poussoir
Il ne reste plus que le troisième problème: l’ESP32 ne doit pas toujours être configuré en tant que point d’accès pour configurer son propre réseau. Dans ma nouvelle application, l'ESP32 passe en mode station au début du programme et tente de se connecter au réseau du routeur. En cas de succès, l'adresse apparaît dans ce réseau avec le texte 'Réseau'; le serveur Web attend alors la demande d'un navigateur Web. Si vous souhaitez modifier les paramètres, vous devez alors appuyer simultanément sur les boutons gauche et central du M5Stack (examinez le code source pour voir comment les boutons-poussoirs sont interrogés). L'adresse 192.168.4.1 que l'ESP32 utilise dans son propre réseau apparaît. Si vous vous connectez à ce réseau (par exemple, à l'aide d'un smartphone), vous pouvez utiliser cette adresse pour accéder à la page Web de configuration. Pour ce projet, seuls le SSID et le mot de passe doivent être entrés. Après l'envoi, l'ESP32 tente de se connecter au réseau du routeur (cela prend un moment). Si vous appuyez à nouveau simultanément sur les deux boutons, l’adresse apparaîtra sur ce réseau après quelques secondes. Vous devez appuyer sur les boutons chaque fois que l'indicateur de pulsation est en marche. S'il s'arrête, l'ESP32 est en train d'effectuer d'autres tâches. Ce n'est bien sûr pas optimal pour l'utilisateur – nous verrons dans l'une des revues à venir comment résoudre ce problème!
Commentaires
Laisser un commentaire