Créer l'application Fridgeye avec un écran Nextion

Applications et services en ligne

	Éditeur d'interface graphique Nextion
	Arduino IDE
	GIMP - Programme de manipulation d'images GNU

À propos de ce projet

En juillet de cette année, quelques étudiants en design allemands ont lancé un Kickstarter satirique pour prototyper le Fridgeye; un beau capteur de lumière pour votre réfrigérateur. Combinez le fait que nous nous attendons généralement à ce que des projets matériels ridicules apparaissent sur Kickstarter avec les efforts déployés par l'équipe pour les rendre réels, il n'est pas étonnant que les gens ne savaient pas quoi penser. Ce n'est un secret pour personne que j'étais fan du projet depuis le début, mais pas parce que je meurs d'envie de savoir ce que fait la lumière de mon réfrigérateur. Le Fridgeye est un projet à la portée parfaite à aborder avec un potentiel de croissance si vous cherchez à vous lancer dans l'Internet des objets.

Construisez l'appareil Fridgeye

L'essentiel de cet article sera axé sur l'exécution de l'application Fridgeye avec l'écran tactile Nextion connecté à un Arduino, mais avant d'aller aussi loin, nous avons besoin d'un appareil réel capable de détecter la lumière. Aucun problème. Prenons 5 minutes et construisons-en un. Je te promets que ça ne prendra pas une seconde de plus. Tout ce dont vous avez besoin est un Arduino, une maquette, une photorésistance et une résistance de 3,3K. Nous allons le câbler comme ça. Ne vous inquiétez pas pour l'instant des connexions de l'écran. Concentrez-vous simplement sur l'Arduino, la résistance et la photorésistance.

J'avais en fait un ProtoShield qui traînait; J'ai donc mis une mini planche à pain dessus afin de pouvoir tout garder dans un joli emballage empilé de boucliers tout en ayant la liberté d'une planche à pain. Voilà à quoi ressemble le mien.

D'accord, j'ai menti, ça n'a pris que 4 minutes environ. Mais vous pouvez utiliser la minute qui vous reste pour lancer ce croquis super simple sur votre Arduino et regarder la sortie série du capteur de lumière depuis l'IDE Arduino.

void setup() { Serial.begin(9600); } void loop() { int val =analogRead(A0); Serial.println(val); retard (500); }  

Après avoir programmé l'Arduino, ouvrez le moniteur série à partir des Outils menu. Assurez-vous que le débit en bauds est défini sur 9600. Vous devriez voir une nouvelle valeur entière représentant le niveau de lumière environ toutes les demi-secondes. Allez-y, prenez une minute et jouez avec. Couvrez le capteur, allumez et éteignez les lumières, et peut-être même essayez d'allumer la lampe de votre smartphone dessus. Regardez les valeurs changer. Vous remarquerez qu'ils vont de presque 0 dans l'obscurité totale à près de 1024 lorsqu'ils sont bombardés de lumière.

Qu'est-ce que l'application Fridgeye ?

L'application Fridgeye est le compagnon fidèle de votre appareil Fridgeye. Fini le temps où les appareils devenaient cerf. Tout le monde sait que dans le grand monde de l'IoT d'aujourd'hui, votre appareil n'a aucune chance à moins qu'il n'ait une application quelconque pour l'accompagner. C'est du beurre d'arachide et de la gelée, du lait et des céréales, des pois et des carottes.

L'application est assez simple. Si nous jetons un coup d'œil à la page Kickstarter, il s'agit littéralement du pourcentage de lumière que le Fridgeye détecte et qui semble n'être que de 0 ou 100 %.

Je suis sûr que nous pouvons faire un peu mieux et utiliser certaines de ces 99 valeurs entre les deux pour qu'elles ne se sentent pas mal. Partons directement des dessins conceptuels et amenons-le dans le monde réel.

Premiers pas avec l'écran Nextion

Pour ce projet, j'utilise l'écran tactile Nextion Enhanced 3,5". Il s'agit d'un écran tactile entièrement résistif conçu pour gérer les tâches lourdes du contrôle graphique afin que même les appareils très bas de gamme comme l'Arduino puissent lui parler via une paire de lignes série. Bien que l'affichage lui-même soit très agréable, la documentation peut être très difficile à parcourir, surtout pour les débutants, alors passons en revue une étape à la fois.

Modèle de programmation d'affichage

Si vous avez déjà programmé un Arduino pour utiliser un affichage auparavant, vous avez probablement déjà utilisé quelque chose comme une simple bibliothèque graphique qui éliminait les commandes de bas niveau de dessin sur la surface de l'écran. Bien que très agréables, ces bibliothèques nécessitent toujours que vous fassiez une grande partie de la poussée des pixels pour dessiner des choses à l'écran. Les écrans Nextion utilisent une approche différente qui vous semblera très familière si vous êtes habitué aux modèles MVVM ou MVC. Essentiellement, l'apparence de l'application est entièrement configurée à l'avant et stockée sur l'écran lui-même. Au moment de l'exécution, l'Arduino référence des éléments de l'interface utilisateur à l'aide d'ID pré-attribués. L'Arduino récupère également des informations de l'écran comme des événements tactiles de la même manière. Cela signifie qu'au lieu de dessiner des éléments au moment de l'exécution, l'Arduino n'agit que comme chef d'orchestre des vues et des contrôles. Si cela n'a pas de sens, restez avec moi un peu plus longtemps pendant que nous le traversons.

Préparer la vue

Parce que notre application Fridgeye est si simple, elle ne nécessitera qu'une seule page. L'écran Nextion, cependant, est capable de gérer des applications très complexes avec plusieurs pages et transitions. Que vous conceviez une application simple comme la nôtre ou très complexe, vous utiliserez l'éditeur d'interface graphique Nextion. Il s'agit d'un éditeur WYSIWYG pour la famille d'écrans Nextion et nous aidera à obtenir une mise en page parfaite. Encore une fois, la documentation et l'expérience de démarrage peuvent être très difficiles pour les débutants, mais une fois que vous aurez compris, vous pourrez rapidement concevoir des mises en page complexes.

Avant d'ouvrir l'éditeur, nous devons préparer un élément d'arrière-plan. En faisant référence à notre image fictive ci-dessus, nous pouvons voir que la seule chose qui changera sur notre écran au moment de l'exécution est le pourcentage de lumière détectée. Le logo, la couleur d'arrière-plan et la barre verte en bas sont statiques. Créons une image avec ces éléments que nous pouvons utiliser comme arrière-plan. Cela m'a pris 5 minutes dans GIMP et ressemble à ceci.

La chose importante à retenir ici est de faire de l'image exactement la taille dont vous avez besoin pour votre écran. Dans mon cas, j'utilise l'écran 3,5" qui se traduit par 480 x 320 pixels. C'est exactement la taille de mon image dans GIMP.

Utilisation de l'éditeur Nextion

REMARQUE : L'éditeur Nextion nécessite le .NET Framework et n'est actuellement pris en charge que sous Windows. J'ai pu l'exécuter sans aucun problème dans une machine virtuelle Windows 10 via Parallels sur mon Macbook. Je ne l'ai pas testé dans Wine sous Linux.

Les étapes suivantes vous guideront tout au long de la création de notre mise en page d'application simple dans l'éditeur Nextion. Avec l'éditeur Nextion ouvert, procédez comme suit.

1. Fichier->Nouveau . Donnez à votre projet un nom et un emplacement sur votre machine.

2. Une boîte de dialogue apparaîtra vous demandant de sélectionner votre appareil. Dans mon cas, j'ai sélectionné Enhanced et le numéro de modèle 3,5". NE CLIQUEZ PAS SUR OK . Passez à l'étape 3.

3. Cliquez sur AFFICHAGE dans le coin supérieur gauche de la boîte de dialogue. Sélectionnez la direction d'affichage 90 horizontale.

4. Vous pouvez maintenant cliquer sur OK.

5. Cliquez sur Image de la Boîte à outils sur la gauche. Cela ajoutera un élément p0 à votre contour.

6. Dans Image/Police volet en bas à gauche, assurez-vous d'avoir l'Image onglet sélectionné.

7. Cliquez sur le + symbole.

8. Accédez à l'image que nous avons créée dans GIMP qui fournit l'arrière-plan de notre application et cliquez sur Ouvrir .

9. Dans le volet des attributs à droite, double-cliquez sur la photo zone de valeur d'attribut. Une boîte de dialogue de sélection d'image s'ouvrira avec l'arrière-plan de notre application.

10. Sélectionnez l'arrière-plan de l'application et cliquez sur OK .

11. Cliquez sur Texte de la boîte à outils. Cela ajoutera une zone de texte nommée t0 dans le coin supérieur gauche de notre écran. Notez la valeur de l'id attribut car vous en aurez besoin plus tard lors de la programmation de l'Arduino.

12. Faites glisser la zone de texte à l'emplacement souhaité sous les mots « État de la lumière » et redimensionnez-la afin qu'elle remplisse une grande zone.

13. Pour corriger l'arrière-plan blanc, nous devons définir l'arrière-plan de la zone de texte pour qu'il soit une version recadrée de notre arrière-plan principal. Avec t0 sélectionné modifier le sta attribut dans le volet d'attributs de la couleur unie à l'rogner l'image .

14. Double-cliquez sur la photo valeur d'attribut pour la zone de texte t0 . Cela ouvrira la boîte de dialogue de sélection d'image. Sélectionnez à nouveau l'image d'arrière-plan principale et cliquez sur OK . Cela a pour effet de rendre l'arrière-plan de la zone de texte transparent.

15. Changer le pco attribut de t0 être la couleur de police que vous voulez. J'ai opté pour une couleur personnalisée de rouge :125, vert :231, bleu :191.

16. Depuis les Outils menu sélectionnez Générateur de polices.

17. Dans la boîte de dialogue Font Creator, sélectionnez une hauteur de 96 et sélectionnez la police que vous souhaitez utiliser. Le mien est Montserrat.

18. Donnez un nom à la police et cliquez sur Générer la police . Assurez-vous de l'enregistrer dans un emplacement facile à mémoriser. Nous en aurons encore besoin dans une seconde.

19. Fermez la boîte de dialogue Créateur de polices. Il vous sera demandé si vous souhaitez ajouter la police générée. Cliquez sur Oui . Cette police est maintenant référencée comme l'index de police 0.

20. Ajoutez du texte factice à t0 pour voir à quoi cela ressemblera en changeant l'attribut txt de t0 à 100%. Vous devez cliquer hors de la zone de valeur d'attribut pour que la zone de l'éditeur se mette à jour.

21. Repositionner t0 à votre goût.

22. Cliquez sur Compiler dans la barre d'outils supérieure.

Si tout s'est bien passé, vous aurez maintenant un fichier TFT compilé prêt à l'emploi situé dans %AppData%\Nextion Editor\bianyi .

Mettre à jour l'affichage

Il existe plusieurs façons d'afficher notre nouveau design sur l'écran lui-même. Si vous disposez d'un convertisseur USB vers TTL, vous pouvez vous connecter directement à votre écran depuis l'IDE Nextion et télécharger directement le fichier TFT compilé. Sinon, vous devrez copier le fichier TFT compilé sur une carte micro SD qui peut être insérée directement dans une fente à l'arrière de l'écran. La carte SD DOIT être formatée en FAT32 et doit contenir un seul fichier TFT ou vous rencontrerez des erreurs. L'éditeur Nextion place les fichiers compilés avec succès dans le répertoire suivant sous Windows.

C:\Users\[votre nom d'utilisateur]\AppData\Roaming\Nextion IDE\bianyi\[nom du projet].tft  

Remarque, vous devrez peut-être activer l'affichage des fichiers masqués car le dossier AppData est marqué comme masqué.

Avec le fichier TFT sur la carte SD, procédez comme suit.

• Assurez-vous que l'écran est éteint

• Insérez la carte SD dans l'écran

• Allumez l'écran. L'écran indiquera qu'il est en cours de mise à jour.

• Une fois la mise à jour terminée, éteignez l'écran

• Retirez la carte SD. N'oubliez pas cette étape car l'écran n'exécutera pas votre vue avec la carte SD toujours insérée.

• Rallumez l'écran. Vous devriez maintenant voir notre belle application Fridgeye. La seule chose qui manque est la valeur du capteur de lumière.

Apprenez à l'Arduino à parler Nextion

Maintenant que l'écran a notre vue d'application, nous devons écrire du code sur l'Arduino afin qu'il puisse interagir avec lui et définir le pourcentage d'état de la lumière.

Installez la bibliothèque Nextion

1. Téléchargez la dernière version de la bibliothèque Nextion Arduino.

2. Copiez l'intégralité du ITEADLIB_Arduino_Nextion dossier dans votre dossier de bibliothèques Arduino. Sous Windows, il sera situé à :

C:\Users\[votre_nom d'utilisateur]\Documents\Arduino\libraries 

Sur Mac, il sera situé à :

~/Documents/Arduino/libraries 

3. Si vous utilisez un Arduino Mega, passez à l'étape 7.

4. Si vous utilisez un Arduino Uno, ouvrez le NexConfig.h fichier situé dans le ITEADLIB_Arduino_Nextion dossier que vous venez de copier dans le dossier des bibliothèques Arduino.

5. Commentez les lignes suivantes :

#define DEBUG_SERIAL_ENABLE #define dbSerial Serial  

6. Modifiez le #define pour nexSerial être Serial au lieu de Serial2. Cela nous permet de connecter l'écran directement aux lignes RX et TX de l'UNO.

#define nexSerial Serial  

7. Redémarrez l'IDE Arduino s'il était déjà ouvert. Cela rendra la bibliothèque disponible via les menus.

8. Depuis le Fichier menu sélectionnez Nouveau pour créer une nouvelle esquisse.

9. Remplacez le code d'esquisse par défaut par le suivant :

#include "Nextion.h" long lastUpdate ; int CAPTEUR =A0; NexText t0 =NexText(0, 2, "t0"); void checkSensor() { int val =map(analogRead(SENSOR), 0, 1024, 0, 100); String displayText =String(val) + "%" ; t0.setText(displayText.c_str()); } void setup(void) { lastUpdate =millis(); pinMode(SENSOR, INPUT); nexInit(); } boucle vide (vide) { nexLoop (NULL); if (millis() - lastUpdate> 100) { checkSensor(); lastUpdate =millis(); } }  

Procédure pas à pas du code

Si votre Arduino foo vous permet de comprendre ce croquis, vous pouvez ignorer entièrement cette section. Vous êtes génial. Si vous êtes nouveau sur le code Arduino, ne vous laissez pas effrayer. Regardons ce croquis pièce par pièce.

#include "Nextion.h"  

Cela indique notre intention d'utiliser la bibliothèque Nextion. Nous n'avons rien d'autre à faire car l'IDE Arduino sait où le trouver puisque nous le mettons dans le dossier des bibliothèques.

long lastUpdate ; 

Il s'agit simplement d'une variable nommée lastUpdate cela nous permettra de contrôler la fréquence à laquelle nous mettons à jour l'écran plus tard dans l'esquisse.

int CAPTEUR =A0;  

Ici, nous donnons simplement à la broche A0 de notre Arduino un nom plus lisible par le code que nous pouvons utiliser pour la référencer plus tard. Cela n'a pas vraiment d'importance dans ce croquis car c'est la seule broche d'E/S à laquelle nous avons affaire, mais c'est une bonne habitude à prendre car cela vous sera utile lorsque vous aurez beaucoup de choses connectées à votre Arduino.

NexText t0 =NexText(0, 2, "t0");  

Ici, nous créons un objet dans notre croquis qui fait référence à l'élément de texte que nous avons créé dans l'interface graphique. N'oubliez pas que nous l'avons nommé "t0 ". Le premier argument est le numéro de page qui est 0 dans notre cas et le deuxième argument est l'ID du composant dont nous nous souvenons plus tôt est 2. Si vous avez oublié de l'écrire, retournez simplement dans l'éditeur Nextion, cliquez sur le t0 élément et regardez dans le volet des attributs pour voir l'ID.

void checkSensor() { int val =map(analogRead(SENSOR), 0, 1024, 0, 100); String displayText =String(val) + "%" ; t0.setText(displayText.c_str()); }  

Le checkSensor() est la viande de notre application. Sur la première ligne, nous effectuons en fait deux opérations. Nous appelons d'abord analogRead(SENSOR) ce qui nous donne une valeur entière représentant la tension présente sur la broche A0 (rappelez-vous que nous l'avons appelée SENSOR). Sur un Arduino UNO, l'appel analogRead renverra une valeur de 0 à 1024, mais nous voulons la mapper dans la plage de 0 à 100 %. Aucun problème. L'IDE Arduino nous a couvert avec un map() intégré fonction qui nous permet de spécifier une valeur suivie d'un [from range] et [to range]. Nous changeons ensuite cette valeur int en un type String et ajoutons un signe %. La dernière étape consiste à appeler setText() sur notre NexText t0 objet que nous avons créé plus tôt.

void setup(void) { lastUpdate =millis(); pinMode(SENSOR, INPUT); nexInit(); }  

Il s'agit de la fonction de configuration standard d'Arduino qui est exécutée avant tout autre code d'esquisse. Nous initialisons lastUpdate maintenant en appelant le millis() fonction, configurez notre broche A0 comme entrée et initialisez la bibliothèque Nextion.

void loop(void) { nexLoop(NULL); if (millis() - lastUpdate> 100) { checkSensor(); lastUpdate =millis(); } }  

En programmation Arduino la loop() La fonction est exécutée en continu jusqu'à ce que l'Arduino soit éteint et rallumé ou réinitialisé d'une autre manière. Nous devons continuellement desservir la bibliothèque Nextion en appelant nexLoop() . Le paramètre NULL signifie simplement que dans notre exemple, nous n'écoutons aucun événement tactile de l'écran. Nous avons alors un contrôle très simple pour voir s'il s'est écoulé plus de 100 millisecondes depuis notre dernière lecture de capteur. Si c'est le cas, nous appelons notre checkSensor() méthode et définissez le lastUpdate variable à maintenant avec un autre appel à millis() .

C'est ça. Moins de 30 lignes de code suffisent pour interagir avec notre écran Nextion à partir d'un Arduino.

Connectez l'écran

Avant de connecter réellement l'écran à notre Arduino, allons-y et poussons notre code d'esquisse à partir de l'IDE en cliquant sur la petite flèche droite dans la barre du haut ou en utilisant le raccourci Ctrl+U.

L'écran ne peut pas être connecté pendant le téléchargement car sur l'Arduino UNO, les mêmes lignes série utilisées par l'écran sont nécessaires à l'IDE pour pousser de nouvelles esquisses. Si vous utilisez un Arduino Mega à la place, vous n'avez pas à vous en soucier.

Maintenant, avec le code transmis à l'Arduino, connectons l'écran. N'oubliez pas de couper d'abord l'alimentation de l'Arduino. Voir le schéma Fritzing pour les informations de connexion.

Lorsque vous alimentez la sauvegarde Arduino, votre application Fridgeye devrait vous montrer avec plaisir la lecture actuelle du capteur de lumière.

Conclusion

Ouf! Nous l'avons créé. Donc, vous demandez peut-être à ce stade avec une pointe de rage dans votre ton "QU'EST-CE QUE C'EST BON ? Je dois mettre le tout dans mon réfrigérateur pour que je ne puisse même pas voir l'écran." Vous êtes un élève très astucieux, mais je n'ai jamais dit que tout cela était utile, juste très amusant à construire et à apprendre.

Si cela vous fait vous sentir mieux, je vous mets au défi d'aller plus loin dans ce projet et de comprendre comment vous pourriez mettre le capteur dans votre réfrigérateur et avoir l'affichage ailleurs. Il y a tellement de façons d'atteindre cet objectif. WiFi, Bluetooth, Zigbee et émetteurs radio génériques ne sont que quelques-uns qui me viennent à l'esprit. Beaucoup d'options et beaucoup de choses à apprendre. Si vous vous y essayez, contactez-moi sur Twitter @KevinSidwar ou envoyez-moi un e-mail (Kevin à sidwar dot com). J'aimerais entendre parler de vos aventures dans l'IoT. Jusqu'à la prochaine fois, bon hack.

Si vous avez apprécié mon article et que vous souhaitez en savoir plus sur les premiers pas dans l'IoT, vous pourriez être intéressé par un cours que je crée actuellement autour du concept Fridgeye . Sinon, je vous remercie sincèrement d'avoir lu jusqu'au bout. J'espère que vous avez une journée géniale. Vous le méritez.

Code

Arduino Sketch pour l'application Fridgeye

Schémas