Produits

Affichage Arduino Nextion - Ocra Electronic
21764
post-template-default,single,single-post,postid-21764,single-format-standard,theme-nouveau,nouveau-core-1.0.4,woocommerce-no-js,ajax_fade,page_not_loaded,,wpb-js-composer js-comp-ver-6.4.1,vc_responsive

Affichage Arduino Nextion

Home > ARDUINO > Affichage Arduino Nextion

Affichage Arduino Nextion

05.09.2021 , yahya kirakoya , ARDUINO, Ecrans Arduino, Non classé 0

Nextion Display avec Arduino – Prise en main

Cet article est une introduction à l’affichage Nextion avec l’Arduino. Nous allons vous montrer comment configurer l’affichage 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 souhaitezavoir un écran Nextion et trouver le au meilleur prix, rendez-vous sur  Ocra electronic .

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, par exemple il s’occupe 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 la 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 facilement des boutons, des jauges, des barres de progression, des étiquettes de texte et plus encore à l’interface utilisateur. Nous avons le modèle de base de l’écran Nextion de 2,8 pouces, illustré dans la figure suivante.

Obtenir un écran Nextion

Vous pouvez vous procurer un modèle de base Nextion ou un modèle amélioré Nextion. Le Nextion Enhanced a de nouvelles fonctionnalités par rapport au modèle de base :

  • a un RTC intégré
  • prend en charge la sauvegarde des données sur flash
  • prend en charge les GPIO
  • a une plus grande capacité 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 l’éditeur Nextion (les exemples fonctionnent également avec d’autres tailles, mais vous devez apporter quelques modifications). De plus, il s’agit de la taille la plus utilisée, ce qui signifie davantage d’exemples et de ressources open source pour cette taille.

Vous pouvez consulter le site Web de Ocra electronic pour obtenir votre écran Nextion au meilleur prix – cliquez simplement sur le lien ci-dessous :

Installation de l’éditeur Nextion

Pour commencer avec Nextion, vous devez d’abord installer Nextion Editor. Accédez à https://nextion.itead.cc/ , sélectionnez l’ onglet Ressources , Télécharger > Nextion Editor et installez Nextion Editor. Vous pouvez télécharger le fichier .zip ou 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-maître à ITEADLIB_Arduino_Nextion.
  4. Déplacez le dossier ITEADLIB_Arduino_Nextion vers votre dossier de bibliothèques d’installation Arduino IDE.
  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 que cela fonctionne 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, afin qu’elle reste comme suit :

//#define DEBUG_SERIAL_ENABLE

4. Commentaire ligne 32 :

//#define dbSerial Serial

5. Modifiez la ligne 37 pour obtenir les éléments suivants :

#define nexSerial Série

6. Enregistrez le fichier NexConfig.h .

7. Voici le résultat final :

Maintenant, vous êtes prêt à commencer à expérimenter avec l’écran Nextion avec Arduino UNO.

Câblage de l’écran 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 d’affichage Nextion

Voici comment câbler l’écran Nextion :

NextionCâblage à
GNDGND
RéceptionBroche Arduino 1 (TX)
ÉmissionBroche Arduino 0 (RX)
VCC5V

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 devez utiliser un adaptateur secteur 5V/1A avec un câble micro USB. En plus de 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’écran à 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’écran 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 dispose également d’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 aller directement sur Ocra electronic 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 terminer 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 construire les pièces les plus importantes, afin que vous puissiez apprendre à construire réellement l’interface utilisateur. Après avoir suivi les instructions, vous devriez être en mesure de compléter l’interface utilisateur vous-même.

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 éditer l’interface graphique) ;
  • l’image d’arrière-plan utilisée 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) ;
  • .ino fichier(ceest le fichiervous 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 bref aperçu 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 – cela montre 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 affichera 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 s’ouvre pour choisir votre modèle Nextion, comme le montre la figure ci-dessous.

Ou vous pouvez importer le fichier .HMI pour ce projet.

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

Après avoir votre image de fond avec les 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 à 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 la 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’indice 0.

Remarque : Au moment de la rédaction de ces instructions, il existe un problème avec les types de polices. Quel que soit le type de police que vous avez choisi, il sera toujours le même. Néanmoins, 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 comme vous le souhaitez.

Tous les composants ont un attribut appelé nom_objet. 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 qui est 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 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 de l’é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

Adding more pages to your GUI is really simple. On the top right corner, in the Page area, select the Add button to add a new page. A new page will be created. In this case, 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 page1, vous devez ajouter ce qui suit à la fenêtre Événement, dans la section du 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  » Update » 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 nous aurons notre code Arduino 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 du code sur l’écran Nextion

Pour télé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 sur 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 à l’écran indiquant que le code est en cours de téléchargement.

8. Lorsqu’il est prêt, il doit 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 pour que 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 non plus 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 que vous devez faire est de prendre note de vos composants dans l’interface graphique qui interagiront avec l’Arduino et de noter leur identifiant, leurs noms et 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).

Nom d’objetTypeIdentifiant de la pageidentifiant
tStatetexte04
bOnbouton02
bOffbouton03
h0glissière05
tSlidertexte06
tTempCtexte15
tTempFtexte14
jHumidityBarre de progression18
tHumiditytexte19
bUpdatebouton1dix

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://randomnerdtutorials.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(t) || isnan(f)) {
    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);
}

Continuez à lire l’article 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.

#définir DHTPIN 4

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

// Décommentez le type que vous utilisez !
#définir 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éclaration 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 tHumidité = NexText (1, 9, "tHumidité");

Ici, vous utilisez l’ID de la page, l’ID du composant et leur nom – il suffit de vérifier 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 devraient déclencher des événements sur l’Arduino.

NexTouch *nex_listen_list[] = {
    & bOn ,
    & bDésactivé ,
    & h0 ,
    & bMettre à jour ,
    NUL
} ;

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âcherez le toucher du bouton bOn :

void bOnPopCallback (void *ptr) {
    tState.setText("État : activé");
    digitalWrite(led1, HAUT);
}

Cette fonction réglera la 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("Etat : off");
    digitalWrite(led1, LOW);
}

Pour le slider ( h0 ), vous avez la fonction suivante qui écrit la position actuelle du slider sur l’étiquette du tSlider et règle la luminosité de la led2 en conséquence :

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

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 indique la température et l’humidité :

float h = dht.readHumidity();
 // Lecture de la température en Celsius (valeur par défaut)
 float t = dht.readTemperature();
 // Lecture de la température en Fahrenheit (isFahrenheit = true)
 float f = dht.readTemperature(true);

// Vérifiez si des lectures ont échoué et quittez plus tôt (pour réessayer).
 si (isnan(h) || isnan(t) || isnan(f)) {
 //Serial.println("Impossible de lire depuis le capteur DHT !");
 revenir;
 }

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

static char temperatureCTemp[6];
dtostrf(t, 6, 2, températureCTemp);
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, températureFTemp);
tTempF.setText(temperatureFTemp);

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

car hTemp[10] = {0};
utoa(int(h), hTemp, 10);
tHumidité.setText(hTemp);
jHumidity.setValue(int(h));

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

setup()

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(bOnPopRappel, &bOn);
    bOff.attachPop(bOffPopRappel, &bOff);
    h0.attachPop(h0PopRappel);
    bUpdate.attachPop(bUpdatePopRappel, &bUpdate);

loop()

La boucle est aussi simple que la suivante :

boucle vide (vide) { 
    nexLoop(nex_listen_list);
}

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

Manifestation

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

Appuyez sur les boutons On et Off 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 du capteur.

Fin…

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 créée 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 constitue un excellent choix pour créer des interfaces pour vos projets électroniques. 

Votre Panier
Il n'y a pas d'articles dans le panier !
Continuer les achats
0