Construire l'application Fridgeye avec un écran Nextion : guide étape par étape

Composants et fournitures

Applications et services en ligne

• Éditeur GUI Nextion
• Arduino IDE
• GIMP (GNU Image Manipulation Program)

À propos de ce projet

En juillet dernier, quelques étudiants en design allemands ont lancé une campagne Kickstarter satirique pour prototyper le Fridgeye : un capteur de lumière élégant pour votre réfrigérateur. Le projet a suscité beaucoup d'intérêt, non pas parce qu'on meurt d'envie de savoir ce que fait la lumière du frigo, mais parce qu'il constitue un excellent point de départ pour se lancer dans l'Internet des objets (IoT) avec un périmètre bien défini et un potentiel d'évolution.

Construire le dispositif Fridgeye

Avant de passer à l'application sur l'écran Nextion, il faut d'abord construire le capteur de lumière. Rien de plus simple : il vous faut un Arduino, une platine d'essai, une photorésistance et une résistance de 3,3 kΩ. Le câblage est illustré ci-dessous (concentrez-vous sur l'Arduino, la résistance et la photorésistance ; les connexions de l'écran viendront plus tard).

J'ai utilisé un ProtoShield avec une mini platine pour garder le tout compact. Voici le montage réalisé :

Téléversez ensuite ce sketch minimal sur l'Arduino pour visualiser les valeurs du capteur via le moniteur série (9600 bauds) :

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

Observez les variations : valeurs proches de 0 dans l'obscurité, jusqu'à 1024 en pleine lumière.

Qu'est-ce que l'application Fridgeye ?

L'application Fridgeye est le compagnon logique de votre dispositif. Dans le monde de l'IoT, un appareil a besoin d'une application pour être vraiment utile. Sur la page Kickstarter, l'application affichait simplement le pourcentage de lumière détecté (0 ou 100 %). Nous allons faire mieux en exploitant toute la plage de 0 à 100 %.

Prise en main de l'écran Nextion

J'utilise l'écran tactile Nextion Enhanced 3,5". C'est un écran résistif qui gère lui-même l'affichage graphique, libérant ainsi l'Arduino de cette tâche. La communication se fait via deux lignes série. La documentation peut sembler ardue au début, mais nous allons avancer pas à pas.

Modèle de programmation de l'affichage

Contrairement aux bibliothèques graphiques classiques qui dessinent pixel par pixel, les écrans Nextion fonctionnent selon un modèle proche de MVVM/MVC : l'interface est conçue entièrement à l'avance et stockée dans l'écran. À l'exécution, l'Arduino ne fait que piloter les éléments d'interface via leurs ID préassignés et reçoit les événements tactiles de la même manière. L'Arduino devient ainsi le chef d'orchestre des vues et contrôles.

Préparation de la vue

Notre application ne nécessite qu'une seule page. Seule la valeur du pourcentage de lumière changera à l'exécution ; le logo, la couleur de fond et la barre verte en bas sont statiques. Créons donc une image de fond contenant ces éléments fixes. En 5 minutes sous GIMP, j'ai obtenu ceci (dimensions exactes de l'écran : 480 × 320 pixels) :

Utilisation de l'éditeur Nextion

Note : L'éditeur Nextion nécessite .NET Framework et ne tourne officiellement que sous Windows. Il fonctionne cependant dans une machine virtuelle Windows 10 (Parallels sur Mac) ; je n'ai pas testé sous Wine/Linux.

Voici les étapes pour créer notre mise en page :

1. Fichier → Nouveau. Nommez le projet et choisissez son emplacement.
2. Une boîte de dialogue demande le modèle d'écran. Sélectionnez Enhanced et le modèle 3,5". Ne cliquez pas encore sur OK.
3. Cliquez sur l'onglet DISPLAY en haut à gauche. Choisissez la direction horizontale 90°.
4. Cliquez maintenant sur OK.
5. Dans la boîte à outils (gauche), cliquez sur Picture. Un élément p0 apparaît dans l'arborescence.
6. Dans le panneau Picture/Font (bas gauche), onglet Picture sélectionné.
7. Cliquez sur le symbole +.
8. Sélectionnez l'image de fond créée dans GIMP et cliquez Ouvrir.
9. Dans le panneau d'attributs (droite), double-cliquez dans la zone de valeur de l'attribut pic. Une boîte de sélection d'image s'ouvre avec notre fond.
10. Sélectionnez l'image de fond et cliquez OK.
11. Cliquez sur Text dans la boîte à outils. Une zone de texte t0 apparaît en haut à gauche. Notez la valeur de son attribut id (ici 2) pour la programmation Arduino.
12. Déplacez la zone sous le texte « Light Status » et redimensionnez-la pour qu'elle occupe une grande surface.
13. Pour rendre le fond de la zone transparent : avec t0 sélectionné, changez l'attribut sta de « solid color » à crop image.
14. Double-cliquez sur la valeur de l'attribut picc de t0. Sélectionnez à nouveau l'image de fond principale et validez. La zone devient transparente.
15. Modifiez l'attribut pco (couleur de police) de t0. J'ai choisi un vert personnalisé : R:125, V:231, B:191.
16. Menu Outils → Font Generator.
17. Dans la boîte de dialogue, choisissez une hauteur de 96 et la police souhaitée (Montserrat pour moi).
18. Nommez la police et cliquez Generate Font. Enregistrez-la dans un endroit facile à retrouver.
19. Fermez la boîte de dialogue. On vous demande d'ajouter la police générée : cliquez Oui. Elle devient l'index de police 0.
20. Ajoutez un texte factice à t0 en modifiant son attribut txt à « 100% ». Cliquez hors de la zone pour rafraîchir l'aperçu.
21. Repositionnez t0 à votre goût.
22. Cliquez Compiler dans la barre d'outils supérieure.

Si tout s'est bien passé, le fichier .tft compilé se trouve dans %AppData%\Nextion Editor\bianyi.

#define DEBUG_SERIAL_ENABLE
#define dbSerial Serial

#define nexSerial Serial

#include "Nextion.h"
long lastUpdate;
int SENSOR = 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();
}

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