Écran Nextion avec Arduino – Mise en route

Cet article est une introduction à l’affichage Nextion avec l’Arduino. Nous allons vous montrer comment configurer l’écran pour la première fois, télécharger les ressources nécessaires et comment l’intégrer à la carte Arduino UNO. Nous allons également créer une interface utilisateur graphique simple pour contrôler les broches Arduino.

Regardez la vidéo de démonstration

Si vous souhaitez voir différents écrans Nextion et trouver le meilleur prix, rendez-vous sur Maker Advisor pour lire notre guide.

Présentation de l’écran Nextion

Nextion est une solution d’interface homme-machine (IHM). Les écrans Nextion sont des écrans tactiles résistifs qui facilitent la création d’une interface utilisateur graphique (GUI). C’est une excellente solution pour surveiller et contrôler les processus, principalement appliquée aux applications IoT.

Il existe plusieurs modules d’affichage Nextion, avec des tailles allant de 2,4″ à 7″.

Le Nextion dispose d’un microcontrôleur ARM intégré qui contrôle l’affichage, il s’occupe par exemple de générer les boutons, de créer du texte, de stocker des images ou de changer l’arrière-plan. Le Nextion communique avec n’importe quel microcontrôleur en utilisant une communication série à un débit de 9600 bauds.

Ainsi, cela fonctionne avec n’importe quelle carte dotée de capacités série comme Arduino, Raspberry Pi, ESP8266, ESP32, etc.

Pour concevoir l’interface graphique, vous utilisez l’éditeur Nextion, dans lequel vous pouvez ajouter des boutons, des jauges, des barres de progression, des étiquettes de texte, etc. à l’interface utilisateur de manière simple. Nous avons le modèle de base d’affichage Nextion de 2,8 pouces, qui est illustré dans la figure suivante.

Obtenir un écran Nextion

Vous pouvez saisir un modèle de base Nextion ou un modèle amélioré Nextion. Le Nextion amélioré présente de nouvelles fonctionnalités par rapport au modèle de base :

• a un RTC intégré
• prend en charge l’enregistrement des données sur flash
• prend en charge les GPIO
• a une plus grande capacité de flash et une plus grande horloge CPU

Le meilleur modèle pour vous dépendra de vos besoins. Si vous débutez avec Nextion, nous vous recommandons d’obtenir la taille de 3,2 pouces qui est celle utilisée dans les exemples de Nextion Editor (les exemples fonctionnent également avec d’autres tailles, mais vous devez apporter quelques modifications). De plus, c’est la taille la plus utilisée, ce qui signifie plus d’exemples et de ressources open source pour cette taille.

Tu peux vérifier Conseiller Maker site web pour obtenir votre écran Nextion au meilleur prix – cliquez simplement sur les liens ci-dessous :

Installation de l’éditeur Nextion

Pour démarrer avec Nextion, vous devez d’abord installer Nextion Editor. Aller à https://nextion.itead.cc/, sélectionnez l’onglet Ressources, Télécharger > Nextion Editor et installez Nextion Editor. Vous pouvez soit télécharger le fichier .zip, soit le fichier .exe.

Téléchargement des bibliothèques Nextion

Avant de commencer, vous devez également installer les bibliothèques Nextion pour Arduino IDE. Suivez les étapes suivantes pour installer la bibliothèque :

1. Cliquez ici pour télécharger la bibliothèque Nextion pour Arduino – ITEADLIB_Arduino_Nextion. Vous devriez avoir un dossier .zip dans votre dossier Téléchargements.
2. Décompressez le dossier .zip et vous devriez obtenir le dossier ITEADLIB-Arduino-Nextion-master.
3. Renommez votre dossier de ITEADLIB_Arduino_Nextion-master à ITEADLIB_Arduino_Nextion.
4. Déplacez le dossier ITEADLIB_Arduino_Nextion vers le dossier des bibliothèques d’installation de votre IDE Arduino.
5. Enfin, rouvrez votre IDE Arduino.

Configurer la bibliothèque pour Arduino UNO

Cette bibliothèque est configurée pour Arduino MEGA2560 par défaut. Pour le faire fonctionner pour Arduino Uno, vous devez procéder comme suit :

1. Ouvrez le dossier ITEADLIB_Arduino_Nextion

2. Il devrait y avoir un fichier NexConfig.h – ouvrez ce fichier.

3. Commentez la ligne 27, pour qu’elle reste comme suit :

//#define DEBUG_SERIAL_ENABLE

4. Ligne de commentaire 32 :

//#define dbSerial Serial

5. Modifiez la ligne 37 pour obtenir ce qui suit :

#define nexSerial Serial

6. Enregistrez le fichier NexConfig.h.

7. Voici le résultat final :

Vous êtes maintenant prêt à commencer à expérimenter l’affichage Nextion avec Arduino UNO.

Câblage de l’affichage Nextion à l’Arduino

La connexion de l’écran Nextion à l’Arduino est très simple. Il vous suffit de faire quatre connexions : GND, RX, TX et +5V. Ces broches sont étiquetées à l’arrière de votre écran, comme illustré dans la figure ci-dessous.

Brochage de l’affichage Nextion

Voici comment vous devez câbler l’affichage Nextion :

Vous pouvez alimenter l’écran Nextion directement à partir de la broche Arduino 5V, mais ce n’est pas recommandé. Travailler avec une alimentation électrique insuffisante peut endommager l’écran. Vous devez donc utiliser une source d’alimentation externe. Vous devriez utiliser un Adaptateur secteur 5V/1A avec un câble micro USB. Avec votre écran Nextion, vous recevrez également un connecteur USB à 2 broches, utile pour connecter l’adaptateur secteur à l’écran.

Voici le schéma que vous devez suivre pour câbler l’affichage à l’Arduino.

Aperçu du projet

La meilleure façon de se familiariser avec un nouveau logiciel et un nouvel appareil est de faire un exemple de projet. Ici, nous allons créer une interface utilisateur dans l’affichage Nextion pour contrôler les broches Arduino et afficher les données.

Voici les fonctionnalités de l’application que nous allons créer :

• L’interface utilisateur comporte deux pages : l’une contrôle deux LED connectées aux broches Arduino, et l’autre affiche les données recueillies à partir du capteur de température et d’humidité DHT11 ;
• La première page a un bouton pour allumer une LED, un autre bouton pour éteindre une LED, une étiquette indiquant l’état actuel de la LED ;
• Cette première page comporte également un curseur pour contrôler la luminosité d’une autre LED ;
• La deuxième page affiche la température actuelle dans une étiquette de texte et l’humidité actuelle dans une barre de progression ;
• Cette page a un bouton de mise à jour pour mettre à jour les lectures.

Pièces requises

Voici les pièces requises pour ce projet :

Vous pouvez utiliser les liens précédents ou accéder directement à MakerAdvisor.com/tools pour trouver toutes les pièces pour vos projets au meilleur prix !

Schéma du projet

Voici le schéma que vous devez suivre pour réaliser ce projet.

Ressources du projet

Nous ne couvrirons pas étape par étape comment créer l’interface graphique dans l’affichage Nextion. Mais nous allons vous montrer comment créer les parties les plus importantes, afin que vous puissiez apprendre à créer réellement l’interface utilisateur. Après avoir suivi les instructions, vous devriez être en mesure de compléter vous-même l’interface utilisateur.

De plus, nous fournissons toutes les ressources dont vous avez besoin pour mener à bien ce projet. Voici toutes les ressources dont vous avez besoin (sachez que vous devrez peut-être modifier certains paramètres de l’interface utilisateur pour qu’ils correspondent à la taille de votre écran) :

• Fichier .HMI (ce fichier peut être importé dans l’éditeur Nextion pour modifier l’interface graphique) ;
• image de fond utilisé dans l’interface utilisateur doit également se trouver dans le dossier du projet ;
• Fichier .TFT (ce fichier doit être téléchargé sur l’écran Nextion, c’est le fichier que l’écran exécute );
• fichier .ino (c’est le fichier que vous devez télécharger sur votre carte Arduino).

Cliquez ici pour télécharger tous les fichiers.

Présentation générale de l’éditeur Nextion

Voici un aperçu rapide des différentes sections de l’éditeur Nextion.

1. Menu principal
2. Canvas – c’est là que vous ajoutez vos composants pour créer l’interface utilisateur.
3. Boîte à outils – c’est là que vous avez une grande variété de composants que vous pouvez ajouter à l’interface utilisateur, comme des images, une barre de progression, des boutons, des curseurs et bien plus encore.
4. Liste des images/polices – affiche les polices et les images importées dans vos projets. Ici, vous pouvez également ajouter de nouvelles polices et images.
5. Zone de page – vous pouvez gérer vos pages ici, comme ajouter plus de pages, copier et supprimer des pages.
6. Zone d’attributs – cette partie affiche les attributs de votre composant. Vous pouvez modifier les attributs du composant ici.
7. Fenêtre de sortie du compilateur – cela montrera toutes les erreurs survenues lors de la compilation.
8. Fenêtre d’événement – ici, vous pouvez ajouter du code à exécuter lorsqu’un événement est rencontré.

Créer un nouveau projet dans Nextion Editor

Ouvrez Nextion Editor et accédez à Fichier> Nouveau pour créer un nouveau fichier. Donnez-lui un nom et enregistrez-le. Ensuite, une fenêtre apparaît pour choisir votre modèle Nextion, comme le montre la figure ci-dessous.

Ou tu peux importer le fichier .HMI pour ce projet.

Si vous sélectionnez l’onglet Affichage, vous pouvez également définir l’orientation de l’affichage.

Pour cet exemple, nous avons sélectionné Horizontal.

Après avoir sélectionné votre affichage et l’orientation, cliquez simplement sur le bouton OK. Un nouveau projet sur l’éditeur Nextion devrait s’ouvrir.

Ajout d’une image d’arrière-plan

Nous allons commencer par ajouter une image de fond. Pour utiliser une image comme arrière-plan, elle doit avoir exactement les mêmes dimensions que votre écran Nextion. Nous utilisons l’écran 2,8 pouces, donc l’image d’arrière-plan doit être de 240 × 320 pixels. Vérifiez les dimensions de votre écran et modifiez votre image d’arrière-plan en conséquence. À titre d’exemple, nous utilisons l’image suivante :

Après avoir votre image de fond aux bonnes dimensions, suivez les instructions suivantes :

1. Dans le coin inférieur gauche de l’écran Nextion, il y a une fenêtre pour les polices et les images. Sélectionnez l’onglet Image.

2. Cliquez sur le bouton (+) et sélectionnez votre image d’arrière-plan. L’image sera ajoutée à la liste des images et un identifiant lui sera attribué. Dans ce cas c’est 0.

3. Accédez à la boîte à outils et cliquez sur le composant Image. Il sera automatiquement ajouté à votre zone d’affichage.

4. Après avoir sélectionné ce composant, vous devriez voir son attribut dans la zone d’attribut. Vous pouvez double-cliquer sur les attributs pour les modifier. Double-cliquez sur l’attribut pic pour sélectionner l’image souhaitée. Vous devez écrire « 0 » qui est l’index de l’image que vous voulez, ou sélectionner l’image sur la nouvelle fenêtre qui apparaît. Après avoir écrit « 0 », vous devez en fait appuyer sur ENTER pour enregistrer les modifications.

Ajout de polices

Pour écrire du texte sur l’écran, vous devez générer une police dans l’éditeur Nextion. Allez dans Outils > Générateur de polices. Une nouvelle fenêtre devrait s’ouvrir.

Ici, vous pouvez sélectionner la hauteur de la police, le type, l’espacement et si vous voulez qu’elle soit en gras ou non. Donnez-lui un nom et cliquez sur le bouton Générer une police. Après cela, enregistrez le fichier .zi et ajoutez la police du générateur en cliquant sur oui.

La police sera ajoutée à la bibliothèque de polices dans le coin inférieur gauche et un index lui sera attribué. Comme il s’agit de votre première police, elle aura l’index 0.

Remarque : Au moment de la rédaction de ces instructions, il y a un problème avec les types de police. Quel que soit le type de police que vous avez choisi, il aura toujours le même aspect. Pourtant, vous pouvez modifier la taille de la police et si elle est en gras ou non.

Ajout d’étiquettes de texte, de curseurs et de boutons

À ce moment, vous pouvez commencer à ajouter des composants à la zone d’affichage. Pour notre projet, faites glisser trois boutons, deux étiquettes et un curseur, comme indiqué dans la figure ci-dessous. Modifiez leur apparence à votre guise.

Tous les composants ont un attribut appelé objname. C’est le nom du composant. Donnez de bons noms à vos composants car vous en aurez besoin plus tard pour le code Arduino. Notez également que chaque composant a un numéro d’identification unique à ce composant dans cette page. La figure ci-dessous montre le nom d’objet et l’identifiant du curseur.

Vous pouvez modifier les composants comme vous le souhaitez, mais assurez-vous de modifier le curseur maxval à 255, afin qu’il fonctionne avec le code Arduino que nous utiliserons.

Composants tactiles

Vous devez déclencher un événement pour les composants tactiles (les boutons et le curseur) afin que l’Arduino sache qu’un composant a été touché. Vous pouvez déclencher des événements lorsque vous appuyez sur ou lorsque vous relâchez un composant.

Ici, nous allons déclencher un événement lorsque le toucher est relâché. Cet événement enverra simplement l’ID du composant qui a été touché.

Pour ce faire, sélectionnez l’un des boutons et, dans la fenêtre d’événement, sélectionnez l’onglet Touch Release Event et cochez l’option Send Component ID. Répétez ce processus pour l’autre bouton et le curseur.

Création et navigation vers une nouvelle page

Ajouter plus de pages à votre interface graphique est vraiment simple. Dans le coin supérieur droit, dans la zone Page, sélectionnez le bouton Ajouter pour ajouter une nouvelle page. Une nouvelle page sera créée. Dans ce cas, page1.

Pour naviguer d’une page à l’autre, nous avons ajouté un bouton dans chaque page, dans le coin inférieur droit – dans ce cas, il s’appelle bNext.

Pour que ce bouton redirige vers la page 1, vous devez ajouter ce qui suit à la fenêtre Événement, dans la section code utilisateur (comme surligné en rouge ci-dessous).

Si vous souhaitez rediriger vers une autre page, il vous suffit de modifier le Code Utilisateur avec le numéro de la page.

Notre deuxième page affichera les données du capteur de température et d’humidité DHT11. Nous avons plusieurs étiquettes pour maintenir la température en Celsius, la température en Fahrenheit et l’humidité. Nous avons également ajouté une barre de progression pour afficher l’humidité et un bouton MISE À JOUR pour actualiser les lectures. Le bouton bBack redirige vers la page0.

Notez que nous avons des étiquettes pour contenir les unités telles que « ºC », « ºF » et « % », et des étiquettes vides qui seront remplies avec les lectures lorsque notre code Arduino sera en cours d’exécution.

Test de l’interface dans le simulateur

Vous pouvez tester votre interface dans le simulateur. Pour cela, vous devez cliquer sur le bouton de débogage dans le menu principal.

Une nouvelle fenêtre devrait s’ouvrir.

Dans cette fenêtre, vous pouvez cliquer sur les boutons et voir ce qui se passe. Vous devriez pouvoir passer d’une page à l’autre en cliquant sur les boutons correspondants. Vous devriez également voir les données renvoyées lorsque vous cliquez sur chaque bouton, comme surligné en rouge dans la figure ci-dessus.

Compilation et téléchargement de code sur l’écran Nextion

Pour charger votre projet sur l’écran Next, suivez les étapes suivantes :

1. Cliquez sur le bouton Compiler dans le menu principal ;

2. Insérez la carte microSD dans votre ordinateur ;

3. Allez dans Fichier > Ouvrir le dossier de construction ;

4. Copiez le fichier .TFT correspondant au fichier sur lequel vous travaillez actuellement ;

5. Collez ce fichier dans la carte microSD (remarque : la carte microSD doit avoir été préalablement formatée en FAT32) ;

6. Insérez la carte microSD sur l’écran Nextion et branchez l’alimentation.

7. Vous devriez voir un message sur l’écran indiquant que le code est en cours de téléchargement.

8. Lorsqu’il est prêt, il devrait afficher le message suivant :

9. Coupez l’alimentation de l’écran Nextion et débranchez la carte microSD.

10. Remettez sous tension et vous devriez voir l’interface que vous avez créée dans l’éditeur Nextion sur votre écran Nextion.

Écrire le code Arduino

Une fois que l’interface graphique est prête, vous devez écrire le code Arduino afin que le Nextion puisse interagir avec l’Arduino et vice-versa. Écrire du code pour interagir avec l’écran Nextion n’est pas simple pour les débutants, mais ce n’est pas aussi compliqué que cela puisse paraître.

Un bon moyen d’apprendre à écrire du code pour que l’Arduino interagisse avec l’affichage Nextion est d’aller dans le dossier des exemples dans le dossier de la bibliothèque Nextion et d’explorer. Vous devriez pouvoir copier et coller du code pour que l’Arduino fasse ce que vous voulez.

La première chose à faire est de prendre note de vos composants dans l’interface graphique qui interagiront avec l’Arduino et de prendre note de leur ID, de leurs noms et de leur page. Voici un tableau de tous les composants avec lesquels le code interagira (vos composants peuvent avoir un ID différent selon l’ordre dans lequel vous les avez ajoutés à l’interface graphique).

Vous trouverez ci-dessous le code que vous devez télécharger sur votre carte Arduino. Assurez-vous que vous avez sélectionné la bonne carte et le bon port COM.

Vous devez également avoir installé la bibliothèque Adafruit_DHT.

Remarque : assurez-vous de supprimer les connexions TX et RX lors du téléchargement du code.

/*
 * Rui Santos 
 * Complete Project Details https://www.raspberryme.com
 */

#include "Nextion.h"

#include "DHT.h"
#define DHTPIN 4     // what digital pin we're connected to

// Uncomment whatever type you're using!
#define DHTTYPE DHT11   // DHT 11
//#define DHTTYPE DHT22   // DHT 22  (AM2302), AM2321
//#define DHTTYPE DHT21   // DHT 21 (AM2301)

// Initialize DHT sensor.
DHT dht(DHTPIN, DHTTYPE);

// LED pins
const int led1 = 8;
const int led2 = 9;

// Declare your Nextion objects - Example (page id = 0, component id = 1, component name = "b0") 
NexText tState = NexText(0, 4, "tState"); 
NexButton bOn = NexButton(0, 2, "bOn");
NexButton bOff = NexButton(0, 3, "bOff");
NexSlider h0 = NexSlider(0, 5, "h0");
NexText tSlider = NexText(0, 6, "tSlider");
NexText tTempC = NexText(1, 5, "tTempC");
NexText tTempF = NexText(1, 4, "tTempF");
NexProgressBar jHumidity = NexProgressBar(1, 8, "jHumidity");
NexText tHumidity = NexText(1, 9, "tHumidity");
NexButton bUpdate = NexButton(1,10, "bUpdate");

// Register a button object to the touch event list.  
NexTouch *nex_listen_list[] = {
  &bOn,
  &bOff,
  &h0,
  &bUpdate,
  NULL
};
 
/*
 * Button bOn component pop callback function. 
 * When the ON button is released, the LED turns on and the state text changes. 
 */
void bOnPopCallback(void *ptr) {
  tState.setText("State: on");
  digitalWrite(led1, HIGH);
}

/*
 * Button bOff component pop callback function. 
 * When the OFF button is released, the LED turns off and the state text changes. 
 */
void bOffPopCallback(void *ptr) {
  tState.setText("State: off");
  digitalWrite(led1, LOW);
}

/*
 * Slider h0 component pop callback function. 
 * When the slider is released, the LED brightness changes and the slider text changes. 
 */
void h0PopCallback(void *ptr) {
  uint32_t number = 0;
  char temp[10] = {0};
  // change text with the current slider value
  h0.getValue(&number);
  utoa(number, temp, 10);
  tSlider.setText(temp);
  // change LED brightness
  analogWrite(led2, number); 
}

/*
 * Button bUpdate component pop callback function. 
 * When the UPDATE button is released, the temperature and humidity readings are updated. 
 */
void bUpdatePopCallback(void *ptr) {
  // Reading temperature or humidity takes about 250 milliseconds!
  // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
  float h = dht.readHumidity();
  // Read temperature as Celsius (the default)
  float t = dht.readTemperature();
  // Read temperature as Fahrenheit (isFahrenheit = true)
  float f = dht.readTemperature(true);

  // Check if any reads failed and exit early (to try again).
  if (isnan(h) || isnan
    return;
  }
  // Update temperature in Celsius
  static char temperatureCTemp[6];
  dtostrf(t, 6, 2, temperatureCTemp);
  tTempC.setText(temperatureCTemp);

  // Update humidity percentage text and progress bar
  char hTemp[10] = {0}; 
  utoa(int(h), hTemp, 10);
  tHumidity.setText(hTemp);
  jHumidity.setValue(int(h));

  // Update temperature in Fahrenheit
  static char temperatureFTemp[6];
  dtostrf(f, 6, 2, temperatureFTemp);
  tTempF.setText(temperatureFTemp);
}

void setup(void) {    
  dht.begin();
  Serial.begin(9600);
    
  // You might need to change NexConfig.h file in your ITEADLIB_Arduino_Nextion folder
  // Set the baudrate which is for debug and communicate with Nextion screen
  nexInit();

  // Register the pop event callback function of the components
  bOn.attachPop(bOnPopCallback, &bOn);
  bOff.attachPop(bOffPopCallback, &bOff);
  h0.attachPop(h0PopCallback);
  bUpdate.attachPop(bUpdatePopCallback, &bUpdate);
    
  // Set LEDs as outputs
  pinMode(led1, OUTPUT);
  pinMode(led2, OUTPUT);
}

void loop(void) {   
  /*
   * When a pop or push event occured every time,
   * the corresponding component[right page id and component id] in touch event list will be asked.
   */
  nexLoop(nex_listen_list);
}

Afficher le code brut

Continuez à lire le post pour savoir comment fonctionne le code.

Y compris les bibliothèques nécessaires

Tout d’abord, vous incluez les bibliothèques Nextion et DHT.

#include "Nextion.h"
#include "DHT.h"

Le capteur DHT sera connecté à la broche numérique Arduino 4.

#define DHTPIN 4

Ensuite, vous devez sélectionner le type de DHT que vous utilisez :

// Uncomment whatever type you're using!
#define DHTTYPE DHT11 // DHT 11
//#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321
//#define DHTTYPE DHT21 // DHT 21 (AM2301)

Et initialiser le capteur DHT

DHT dht(DHTPIN, DHTTYPE);

Après cela, vous définissez led1 et led2. Ces variables se réfèrent respectivement aux broches numériques 8 et 9. (la led 1 sera contrôlée avec les boutons ON et OFF de l’interface utilisateur, et la luminosité de la led2 sera contrôlée à l’aide du curseur).

const int led1 = 8;
const int led2 = 9;

Déclarer des objets Nextion

Vous devez déclarer tous vos objets Nextion comme suit :

NexText tState = NexText(0, 4, "tState"); 
NexButton bOn = NexButton(0, 2, "bOn");
NexButton bOff = NexButton(0, 3, "bOff");
NexSlider h0 = NexSlider(0, 5, "h0");
NexText tSlider = NexText(0, 6, "tSlider");
NexText tTempC = NexText(1, 5, "tTempC");
NexText tTempF = NexText(1, 4, "tTempF");
NexProgressBar jHumidity = NexProgressBar(1, 8, "jHumidity");
NexButton bUpdate = NexButton(1,10, "bUpdate");
NexText tHumidity = NexText(1, 9, "tHumidity");

Ici, vous utilisez l’ID de page, l’ID de composant et leur nom – vérifiez simplement le tableau ci-dessus avec tous les composants. Pour définir un texte, vous utilisez NexText, pour définir un bouton, vous utilisez NexButton, pour un curseur, vous utilisez NexSlider et pour la barre de progression, vous utilisez NexProgressBar.

Ensuite, vous devez ajouter dans l’extrait suivant tous les composants tactiles qui doivent déclencher des événements sur l’Arduino.

NexTouch *nex_listen_list[] = {
    &bOn,
    &bOff,
    &h0,
    &bUpdate,
    NULL
};

Création de fonctions de rappel

Après cela, vous devez créer des fonctions de rappel qui seront déclenchées lorsque vous toucherez les composants correspondants.

La fonction suivante sera déclenchée lorsque vous relâchez le toucher du bouton bOn :

void bOnPopCallback(void *ptr) {
    tState.setText("State: on");
    digitalWrite(led1, HIGH);
}

Cette fonction réglera le led1 sur HIGH et mettra à jour l’étiquette tState avec le texte « State: on ». La mise à jour des étiquettes de texte est aussi simple que d’utiliser setText().

Le bouton bOff fonctionne de manière similaire :

void bOffPopCallback(void *ptr) {
    tState.setText("State: off");
    digitalWrite(led1, LOW);
}

Pour le curseur (h0), vous disposez de la fonction suivante qui écrit la position actuelle du curseur sur l’étiquette du tSlider et définit la luminosité de led2 en conséquence :

void h0PopCallback(void *ptr) {
    uint32_t number = 0;
    char temp[10] = {0};
    h0.getValue(&number);
    utoa(number, temp, 10);
    tSlider.setText(temp);
    analogWrite(led2, number); 
}

Enfin, vous avez besoin d’une fonction pour le bUpdate (le bouton de mise à jour). Lorsque vous cliquez sur ce bouton, le capteur de température et d’humidité DHT lit la température et l’humidité et les affiche sur les étiquettes correspondantes, ainsi que l’humidité sur la barre de progression. C’est la fonction bUpdatePopCallback().

À l’intérieur de cette fonction, l’extrait suivant lit la température et l’humidité :

float h = dht.readHumidity();
 // Read temperature as Celsius (the default)
 float t = dht.readTemperature();
 // Read temperature as Fahrenheit (isFahrenheit = true)
 float f = dht.readTemperature(true);

// Check if any reads failed and exit early (to try again).
 if (isnan(h) || isnan
 //Serial.println("Failed to read from DHT sensor!");
 return;
 }

La pièce suivante écrit la température en degrés Celsius sur l’étiquette tTempC

static char temperatureCTemp[6];
dtostrf(t, 6, 2, temperatureCTemp);
tTempC.setText(temperatureCTemp);

De la même manière, pour mettre à jour la température en Fahrenheit :

static char temperatureFTemp[6];
dtostrf(f, 6, 2, temperatureFTemp);
tTempF.setText(temperatureFTemp);

Pour mettre à jour l’étiquette d’humidité ainsi que la barre de progression :

char hTemp[10] = {0};
utoa(int(h), hTemp, 10);
tHumidity.setText(hTemp);
jHumidity.setValue(int(h));

Pour définir la valeur de la barre de progression, vous utilisez simplement setValue().

installation()

Dans le setup(), vous devez attacher les fonctions créées aux événements correspondants. Par exemple, lorsque vous cliquez sur le bouton bOn, la fonction bOnPopCallback sera déclenchée.

    bOn.attachPop(bOnPopCallback, &bOn);
    bOff.attachPop(bOffPopCallback, &bOff);
    h0.attachPop(h0PopCallback);
    bUpdate.attachPop(bUpdatePopCallback, &bUpdate);

boucle()

La boucle est aussi simple que la suivante :

void loop(void) { 
    nexLoop(nex_listen_list);
}

Lorsqu’un événement se produit, la fonction correspondante sera déclenchée.

Manifestation

Avec l’interface utilisateur intégrée et le code sur l’Arduino, vous devriez pouvoir contrôler les broches Arduino à partir de l’écran Nextion.

Appuyez sur les boutons Marche et Arrêt pour allumer et éteindre la led1 et déplacez le curseur pour contrôler la luminosité de la led2.

Sur le deuxième écran, appuyez sur le bouton de mise à jour pour mettre à jour avec les dernières lectures de capteur.

Conclusion

Dans cet article, nous vous avons présenté l’écran Nextion. Nous avons également créé une interface utilisateur d’application simple dans l’écran Nextion pour contrôler les broches Arduino. L’application construite n’est qu’un exemple pour vous permettre de comprendre comment interfacer différents composants avec l’Arduino – nous espérons que vous avez trouvé les instructions ainsi que l’exemple fourni utiles.

À notre avis, Nextion est un excellent écran qui rend le processus de création d’interfaces utilisateur simple et facile. Bien que l’éditeur Nextion présente certains problèmes et limitations, il s’agit d’un excellent choix pour créer des interfaces pour vos projets électroniques. Nous avons un projet sur la façon de créer une interface physique Node-RED avec l’écran Nextion et un ESP8266 pour contrôler les sorties. N’hésitez pas à jeter un œil.

Quels projets aimeriez-vous voir utiliser l’écran Nextion ? Écrivez un commentaire ci-dessous.

Merci d’avoir lu.

Découvrez l’histoire de Raspberry Pi dans cette vidéo :