Pantalla Nextion con Arduino: introducción

¿Eres un apasionado de la electrónica y la programación? Si es así, seguramente ya has escuchado acerca de las pantallas Nextion y su compatibilidad con Arduino. En esta guía introductoria, te explicaremos todo lo que necesitas saber sobre cómo utilizar una pantalla Nextion junto con tu Arduino. ¡Sigue leyendo para descubrir todas las posibilidades que se abren al combinar estos dos poderosos dispositivos!

Esta publicación es una introducción a la pantalla Nextion con Arduino. Le mostraremos cómo configurar la pantalla por primera vez, descargar los recursos que necesita e integrarla en la placa Arduino UNO. También crearemos una interfaz gráfica de usuario sencilla para controlar los pines de Arduino.

Mira el vídeo de demostración

Si quieres ver diferentes displays Nextion y encontrar el mejor precio, accede a Maker Advisor para leer nuestra guía.

Presentamos la pantalla Nextion

Nextion es una solución de interfaz hombre-máquina (HMI). Las pantallas Nextion son pantallas táctiles resistivas que facilitan la creación de una interfaz gráfica de usuario (GUI). Es una gran solución para monitorear y controlar procesos y se utiliza principalmente en aplicaciones de IoT.

Hay varios módulos de pantalla Nextion que varían en tamaño desde 2,4 hasta 7 pulgadas.

Nextion tiene un microcontrolador ARM integrado que controla la pantalla. Por ejemplo, se encarga de generar los botones, crear texto, guardar imágenes o cambiar el fondo. Nextion se comunica con cada microcontrolador a través de una interfaz serie con una velocidad de 9600 baudios.

Por lo tanto, funciona con cualquier placa que tenga capacidades seriales como Arduino, Raspberry Pi, ESP8266, ESP32, etc.

Para diseñar la GUI, utilice Nextion Editor, que le permite agregar fácilmente botones, indicadores, barras de progreso, etiquetas de texto y más a la interfaz. Estamos utilizando el modelo base Nextion Display de 2,8 pulgadas que se muestra en la imagen a continuación.

Tengo una pantalla Nextion

Puede elegir un modelo básico de Nextion o un modelo mejorado de Nextion. El Nextion Enhanced tiene nuevas características respecto al modelo básico:

• Tiene un reloj de tiempo real integrado (RTC)
• admite guardar datos en flash
• admite GPIO
• tiene una mayor capacidad de flash y una mayor velocidad de reloj de la CPU

El mejor modelo para usted depende de sus necesidades. Si recién está comenzando con Nextion, le recomendamos el tamaño de 3,2 pulgadas utilizado en los ejemplos del Editor Nextion (los ejemplos también funcionan con otros tamaños, pero deberá realizar algunos cambios). Además, este es el tamaño más utilizado, lo que significa que hay más ejemplos y recursos de código abierto para este tamaño.

Usted puede mirar Asesor de creadores sitio web para obtener su pantalla Nextion al mejor precio: simplemente haga clic en los enlaces a continuación:

• Modelo básico Nextion 2,8″
• Modelo base Nextion de 3,2″

Instalar el editor Nextion

Para comenzar con Nextion, primero debe instalar Nextion Editor. Ir a https://nextion.itead.cc/elegir recursos Pestaña, Descargar > editor de próxima edición e instale Nextion Editor. Puedes hacer eso .Cremallera archivo o el .exe Archivo.

Descargar bibliotecas Nextion

Antes de comenzar, también necesitarás instalar las bibliotecas Nextion para Arduino IDE. Siga los siguientes pasos para instalar la biblioteca:

1. Haga clic aquí para descargar la biblioteca Nextion para Arduino – ITEADLIB_Arduino_Nextion. Debería haber una carpeta .zip en tu carpeta de descargas.
2. Extraiga la carpeta .zip y debería obtener la carpeta ITEADLIB-Arduino-Nextion-master.
3. Cambie el nombre de su carpeta de ITEADLIB_Arduino_Nextion Master a ITEADLIB_Arduino_Nextion.
4. Mueva la carpeta ITEADLIB_Arduino_Nextion a la carpeta de la biblioteca de instalación de su Arduino IDE.
5. Finalmente, vuelva a abrir su IDE de Arduino.

Configurando la biblioteca para Arduino UNO

Esta biblioteca está configurada por defecto para Arduino MEGA2560. Para que funcione para Arduino Uno, debes hacer lo siguiente:

1. Abre esto ITEADLIB_Arduino_Nextion Carpeta

2. Debería haber uno NexConfig.h Archivo: abre este archivo.

3. Comente la línea 27 para que diga:

//#define DEBUG_SERIAL_ENABLE

4. Línea de comentario 32:

//#define dbSerial Serial

5. Cambie la línea 37 para obtener esto:

#define nexSerial Serial

6. Guarde el NexConfig.h Archivo.

7. Aquí está el resultado final:

Ahora puedes empezar a experimentar con la pantalla Nextion con Arduino UNO.

Cableado de la pantalla Nextion al Arduino

Conectar la pantalla Nextion al Arduino es muy fácil. Sólo necesitas realizar cuatro conexiones: GND, RX, TX y +5V. Estos pines están etiquetados en la parte posterior de su pantalla, como se muestra en la imagen a continuación.

Asignación de pines de la pantalla Nextion

Así es como debes cablear la pantalla Nextion:

Próximo	Cableado con
Dimensiones	Dimensiones
RX	Pin 1 de Arduino (TX)
Texas	Pin 0 de Arduino (RX)
VCC	5V

Puede alimentar la pantalla Nextion directamente desde el pin Arduino 5V, pero no es recomendable. Trabajar con energía insuficiente puede dañar la pantalla. Por lo tanto, debería utilizar una fuente de alimentación externa. deberías tener uno Fuente de alimentación de 5V/1A con un cable micro USB. Junto con su pantalla Nextion, también obtiene un conector USB a 2 pines que es útil para conectar el adaptador de corriente a la pantalla.

Aquí está el esquema que debe seguir para conectar la pantalla al Arduino.

Descripción del proyecto

La mejor manera de familiarizarse con un nuevo software y dispositivo es crear un ejemplo de proyecto. Aquí crearemos una interfaz de usuario en la pantalla de Nextion para controlar los pines de Arduino y mostrar datos.

Estas son las características de la aplicación que vamos a crear:

• La interfaz consta de dos páginas: una controla dos LED conectados a los pines Arduino y la otra muestra los datos recopilados por el sensor de temperatura y humedad DHT11.
• En la primera página hay un botón para encender un LED, otro botón para apagar un LED y una etiqueta que muestra el estado actual del LED.
• También hay un control deslizante en esta primera página para controlar el brillo de otro LED.
• La segunda página muestra la temperatura actual en una etiqueta de texto y la humedad actual en una barra de progreso.
• Hay un botón en esta página para actualizar las métricas.

Piezas requeridas

Aquí están las piezas necesarias para este proyecto:

• Pantalla Nextion de 2,8 pulgadas (o Pantalla Nextion de 3,2 pulgadas)
• Tarjeta micro SD
• Arduino UNO – leer Los mejores kits de inicio de Arduino
• 2x LED
• Sensor de temperatura y humedad DHT11
• 2 resistencias de 220 ohmios
• Resistencia de 4,7k ohmios
• tablero de circuitos
• Cables de puente

Puedes utilizar los enlaces anteriores o ir directamente MakerAdvisor.com/tools ¡Para encontrar todas las piezas para tus proyectos al mejor precio!

Esquema del proyecto

Aquí está el esquema que debe seguir para completar este proyecto.

Recursos del proyecto

No explicaremos paso a paso cómo crear la GUI en la pantalla Nextion. Pero le mostraremos cómo construir las partes más importantes para que pueda aprender cómo construir realmente la interfaz. Después de seguir las instrucciones, debería poder completar la interfaz usted mismo.

Además, le proporcionaremos todos los recursos que necesita para completar este proyecto. Aquí están todos los recursos que necesita (tenga en cuenta que es posible que deba cambiar algunas configuraciones de la interfaz para que se ajusten al tamaño de su pantalla):

• .HMI archivo (este archivo se puede importar al editor Nextion para editar la GUI);
• imagen de fondo utilizado en la interfaz de usuario también debe estar en la carpeta del proyecto;
• .TFT archivo (este archivo debe cargarse en la pantalla Nextion ya que es el archivo que se ejecutará en la pantalla);
• .en O archivo (Este es el archivo que debes cargar en tu placa Arduino).

Haga clic aquí para descargar todos los archivos.

Descripción general del editor Nextion

Aquí hay una descripción general rápida de las diferentes secciones del editor Nextion.

1. menú principal
2. lienzo – aquí es donde agrega sus componentes para crear la interfaz de usuario.
3. Caja de herramientas – Hay numerosos componentes disponibles aquí que puedes agregar a la interfaz, como imágenes, barras de progreso, botones, controles deslizantes y mucho más.
4. Lista de imágenes/fuentes – Las fuentes e imágenes importadas a sus proyectos se muestran aquí. También puedes agregar nuevas fuentes e imágenes aquí.
5. Página Área – Puede administrar sus páginas aquí, por ejemplo agregando más páginas, copiando y eliminando páginas.
6. Área de atributos – esta parte muestra los atributos de su componente. Puede editar los atributos del componente aquí.
7. Ventana de salida del compilador – todos los errores que ocurrieron durante la compilación se muestran aquí.
8. Ventana de evento – aquí puede agregar código que se ejecutará cuando ocurra un evento.

Creando un nuevo proyecto en Nextion Editor

Abra Nextion Editor y vaya a archivo > Nuevo para crear un nuevo archivo. Dale un nombre y guárdalo. Luego se abrirá una ventana donde podrá seleccionar su modelo Nextion como se muestra en la imagen a continuación.

O tu puedes Importar el archivo .HMI para este proyecto.

Si selecciona la pestaña Pantalla, también puede configurar la orientación de la pantalla.

Para este ejemplo seleccionamos «Horizontal».

Una vez que haya elegido su visualización y orientación, simplemente haga clic DE ACUERDO Botón. Debería abrirse un nuevo proyecto en Nextion Editor.

Agregar una imagen de fondo

Comenzaremos agregando una imagen de fondo. Para utilizar una imagen como fondo, debe tener exactamente las mismas dimensiones que su pantalla Nextion. Estamos utilizando una pantalla de 2,8 pulgadas, por lo que el fondo de pantalla debe tener 240 x 320 píxeles. Verifique las dimensiones de su pantalla y edite su fondo de pantalla en consecuencia. Como ejemplo utilizamos la siguiente imagen:

Después de crear su fondo de pantalla con las dimensiones correctas, siga las siguientes instrucciones:

1. En la esquina inferior izquierda de la pantalla de Nextion hay una ventana para fuentes e imágenes. Selecciona el Imagen Pestaña.

2. presione eso (+) y selecciona tu fondo de pantalla. La imagen se agrega a la lista de imágenes y se le asigna una identificación. En este caso es 0.

3. Vaya a la caja de herramientas y haga clic en el componente de imagen. Se agregará automáticamente a su área de visualización.

4. Una vez que haya seleccionado este componente, debería ver su atributo en el panel Atributos. Puede hacer doble clic en los atributos para editarlos. Haga doble clic en el atributo de la imagen para seleccionar la imagen deseada. Debes escribir “0”, que es el índice de la imagen deseada, o seleccionar la imagen en la nueva ventana que aparece. Después de escribir «0», en realidad necesita presionar Enter para guardar los cambios.

Agregar fuentes

Para escribir texto en la pantalla, debe generar una fuente en el Editor Nextion. Ir a Herramientas > Generador de fuentes. Debería abrirse una nueva ventana.

Aquí puede seleccionar la altura de la fuente, el tipo, el espaciado y la fuente en negrita. Asigne un nombre a la fuente y haga clic en el botón Generar fuente. A continuación, guarde el archivo .zi y agregue la fuente del generador haciendo clic en Sí.

La fuente se agrega a la biblioteca de fuentes en la esquina inferior izquierda y se le asigna un índice. Como esta es su primera fuente, tiene índice 0.

nota: Al momento de escribir esta guía, hay un problema con las fuentes. No importa qué fuente elijas, siempre se verá igual. Sin embargo, puede editar el tamaño de la fuente y si desea que la fuente esté en negrita o no.

Agregar etiquetas de texto, controles deslizantes y botones

Ahora puede comenzar a agregar componentes al área de visualización. Para nuestro proyecto, arrastre tres botones, dos etiquetas y un control deslizante como se muestra en la imagen a continuación. Edita su apariencia como desees.

Todos los componentes tienen un atributo llamado objname. Este es el nombre del componente. Dé buenos nombres a sus componentes, ya que los necesitará más adelante para el código Arduino. También tenga en cuenta que cada componente tiene un IDENTIFICACIÓN Número exclusivo de este componente en esta página. La siguiente imagen muestra el nombre del objeto y el ID del control deslizante.

Puede editar los componentes como desee, solo asegúrese de editar el valor máximo del control deslizante a 255 para que funcione con el código Arduino que estamos usando.

Componentes táctiles

Debes activar un evento en los componentes táctiles (los botones y el control deslizante) para que Arduino sepa que se ha tocado un componente. Puede activar eventos cuando presiona o suelta un componente.

Aquí activamos un evento cuando se suelta el toque. Este evento simplemente envía el ID del componente que se tocó.

Para hacer esto, seleccione uno de los botones y seleccione en la ventana de eventos Evento de lanzamiento táctil y pon una marca de verificación Enviar ID de componente Opción. Repita este proceso para el otro botón y control deslizante.

Crear y navegar a una nueva página

Agregar más páginas a su GUI es fácil. En la sección Página en la parte superior derecha, seleccione la Agregar para agregar una nueva página. Se crea una nueva página. En este caso página1.

Para navegar de una página a otra, agregamos un botón en la parte inferior derecha de cada página; en este caso se llama «bNext».

Para que este botón redirija a la página 1, debe agregar lo siguiente en la sección de código de usuario de la ventana de eventos (resaltada en rojo a continuación).

Si desea redirigir a otra página, sólo necesita cambiar el código de usuario con el número de página.

Nuestra segunda página muestra datos del sensor de temperatura y humedad DHT11. Disponemos de múltiples etiquetas para mostrar la temperatura en Celsius, la temperatura en Fahrenheit y la humedad. También agregamos una barra de progreso para mostrar la humedad y un botón «ACTUALIZAR» para actualizar las lecturas. El botón “Volver” redirige a la página 0.

Tenga en cuenta que tenemos etiquetas para las unidades como «ºC», «ºF» y «%», así como etiquetas vacías que se llenarán con las medidas cuando se ejecute nuestro código Arduino.

Probando la interfaz en el simulador.

Puedes probar tu interfaz en el simulador. Para hacer esto, haga clic en el botón «Depurar» en el menú principal.

Debería abrirse una nueva ventana.

En esta ventana puede hacer clic en los botones y ver qué sucede. Debería poder cambiar entre páginas haciendo clic en los botones correspondientes. También debería ver los datos devueltos al hacer clic en cada botón, como se resalta en rojo en la imagen de arriba.

Compile y cargue código en la pantalla de Nextion

Para cargar su proyecto en la pantalla Siguiente, siga los siguientes pasos:

1. Haga clic en el botón «Compilar» en el menú principal.

2. Inserte la tarjeta microSD en su computadora;

3. Ir a archivo > Abrir carpeta de compilación;

4. Copie el .TFT Archivo correspondiente al archivo en el que está trabajando actualmente;

5. Inserte el archivo en la tarjeta microSD (Nota: la tarjeta microSD debe haber sido formateada previamente como FAT32).

6. Inserte la tarjeta microSD en la pantalla Nextion y conecte el dispositivo a la fuente de alimentación.

7. Debería aparecer un mensaje en la pantalla indicando que el código se está cargando.

8. Cuando esté listo, deberías ver el siguiente mensaje:

9. Desconecte la alimentación de la pantalla Nextion y retire la tarjeta microSD.

10. Vuelva a encender la alimentación. Luego debería ver la interfaz que creó en el editor de Nextion en su pantalla de Nextion.

Escribiendo el código Arduino

Una vez que la GUI esté lista, deberá escribir el código Arduino para que Nextion pueda interactuar con Arduino y viceversa. Escribir código para interactuar con la pantalla Nextion no es fácil para los principiantes, pero tampoco es tan complicado como podría parecer.

Una buena manera de aprender a escribir código para interactuar entre Arduino y la pantalla Nextion es ir a la carpeta de ejemplos en la carpeta de la biblioteca Nextion y explorar. Deberías poder copiar y pegar código para que Arduino haga lo que quieres.

Lo primero que debes hacer es anotar los componentes en la GUI que interactúan con el Arduino y anotar su ID, nombre y página. Aquí hay una tabla de todos los componentes con los que interactúa el código (sus componentes pueden tener una ID diferente según el orden en que los agregó a la GUI).

Nombre del objeto	Tipo	ID de página	IDENTIFICACIÓN
tEstado	texto	0	4
pierna	botón	0	2
bApagado	botón	0	3
h0	control deslizante	0	5
tControl deslizante	texto	0	6
tTempC	texto	1	5
tTempF	texto	1	4
humedad	Barra de progreso	1	octavo
humedad	texto	1	9
bActualizar	botón	1	10

A continuación se muestra el código que debe cargar en su placa Arduino. Asegúrese de haber seleccionado la placa y el puerto COM correctos.

También debes tener instalada la biblioteca Adafruit_DHT.

Nota: asegúrese de eliminar las conexiones TX y RX al cargar el código.

/*
 * 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
    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);
}

Ver código sin formato

Continúe leyendo la publicación para saber cómo funciona el código.

Inclusión de las bibliotecas requeridas.

Primero, incluya las bibliotecas Nextion y DHT.

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

El sensor DHT está conectado al pin digital 4 del Arduino.

#define DHTPIN 4

Luego debes seleccionar el tipo de DHT que estás utilizando:

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

E inicializa el sensor DHT.

DHT dht(DHTPIN, DHTTYPE);

Luego defina LED1 y LED2. Estas variables se refieren a los pines digitales 8 y 9, respectivamente (el LED 1 se controla con los botones ON y OFF de la interfaz de usuario, y el brillo del LED2 se controla con el control deslizante).

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

Declarando objetos Nextion

Debes declarar todos tus objetos Nextion de esta manera:

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");

Aquí utiliza el ID de la página, el ID del componente y sus nombres; simplemente consulte la tabla anterior con todos los componentes. Para definir un texto, utilice Siguiente textopara definir un botón que utilizas Siguiente botónpara un control deslizante que estás usando NexSlider y para la barra de progreso que usas NexProgressBar.

A continuación, en el siguiente fragmento, debe agregar todos los componentes táctiles que desea que activen eventos en el Arduino.

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

Crear funciones de devolución de llamada

Después de eso, debes crear funciones de devolución de llamada que se activarán cuando toques los componentes correspondientes.

La siguiente función se activa cuando tocas el pierna Botón:

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

Esta función configura el LED1 en ALTO y actualiza la etiqueta tState con el texto «Estado: activado». Actualizar etiquetas de texto es tan fácil como usar setText().

El bApagado El botón funciona de manera similar:

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

Para el control deslizante (h0), tiene la siguiente función, que escribe la posición actual del control deslizante en la etiqueta tSlider y ajusta el brillo del LED2 en consecuencia:

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); 
}

Finalmente necesitas una función para eso. bActualizar (el botón “Actualizar”). Cuando hace clic en este botón, el sensor de temperatura y humedad DHT leerá la temperatura y la humedad y las mostrará en las etiquetas correspondientes y mostrará la humedad en la barra de progreso. Esta es la función bUpdatePopCallback().

Dentro de esta función, el siguiente fragmento de código lee la temperatura y la humedad:

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 siguiente pieza escribe la temperatura en Celsius en la etiqueta tTempC

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

Para actualizar la temperatura en Fahrenheit de manera similar:

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

Para actualizar la etiqueta de humedad y la barra de progreso:

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

Para establecer el valor de la barra de progreso, simplemente use setValue().

configuración()

En setup() necesitas adjuntar las funciones creadas a los eventos correspondientes. Por ejemplo, si hace clic en el botón bOn, el bOnPopCallback se activa la función.

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

Cinta()

El bucle es tan simple como esto:

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

Cuando ocurre un evento, se activa la función correspondiente.

demostración

Una vez creada la interfaz de usuario y el código en el Arduino, deberías poder controlar los pines del Arduino desde la pantalla de Nextion.

Toque los botones «Encendido» y «Apagado» para encender y apagar el LED1 y mueva el control deslizante para controlar el brillo del LED2.

En la segunda pantalla, toque el botón Actualizar para ver las últimas lecturas del sensor.

Envolver

En este artículo le presentamos la pantalla Nextion. También creamos una interfaz de usuario de aplicación simple en la pantalla de Nextion para controlar los pines de Arduino. La aplicación creada es sólo un ejemplo para ayudarte a entender cómo conectar varios componentes al Arduino. Esperamos que las instrucciones y el ejemplo proporcionados le hayan resultado útiles.

En nuestra opinión, Nextion es una gran pantalla que hace que la creación de interfaces de usuario sea sencilla y directa. Aunque Nextion Editor tiene algunos problemas y limitaciones, es una excelente opción para crear interfaces para sus proyectos de electrónica. Tenemos un proyecto para crear una interfaz física Node-RED usando la pantalla Nextion y un ESP8266 para controlar las salidas. Siéntete libre de echar un vistazo.

¿Qué proyectos le gustaría ver usando la pantalla Nextion? Escribe un comentario a continuación.

Gracias por leer.

Introducción a la Pantalla Nextion con Arduino

Este artículo es una introducción a la pantalla Nextion con Arduino. Te mostraremos cómo configurar la pantalla por primera vez, descargar los recursos necesarios y cómo integrarla con la placa Arduino UNO. También crearemos una interfaz gráfica de usuario simple para controlar los pines de Arduino.

Presentación de la Pantalla Nextion

Nextion es una solución de Interfaz Hombre-Máquina (IHM). Las pantallas Nextion son pantallas táctiles resistivas que facilitan la construcción de una Interfaz Gráfica de Usuario (GUI). Es una excelente solución para monitorear y controlar procesos, aplicándose principalmente en aplicaciones de IoT.

Hay varios módulos de pantalla Nextion, con tamaños que van desde 2.4” hasta 7”.

La Nextion tiene un microcontrolador ARM incorporado que controla la pantalla, por ejemplo, se encarga de generar los botones, crear texto, almacenar imágenes o cambiar el fondo. La Nextion se comunica con cualquier microcontrolador utilizando comunicación serial a una velocidad de baudios de 9600.

Por lo tanto, funciona con cualquier placa que tenga capacidades seriales como Arduino, Raspberry Pi, ESP8266, ESP32, y más.

Para diseñar la interfaz de usuario, se utiliza el Nextion Editor, en el cual puedes añadir botones, medidores, barras de progreso, etiquetas de texto y más a la interfaz de usuario de manera sencilla.

¿Dónde conseguir una Pantalla Nextion?

Puedes obtener una pantalla Nextion modelo básico o un modelo mejorado. El modelo mejorado de Nextion cuenta con nuevas características en comparación con el modelo básico, como un RTC incorporado, soporte para guardar datos en flash, soporte para GPIOs, entre otros.

El mejor modelo para ti dependerá de tus necesidades. Si estás comenzando con Nextion, recomendamos obtener la pantalla de 3.2”, que es la utilizada en los ejemplos del Nextion Editor.

Para informarte sobre las distintas pantallas Nextion y encontrar el mejor precio, visita Maker Advisor para leer nuestra guía.

Instalación del Editor de Nextion

Para comenzar con Nextion, primero necesitas instalar el Editor de Nextion. Ve a https://nextion.itead.cc/, selecciona la pestaña Recursos, Descargar > Nextion Editor e instala Nextion Editor.

Descarga de las Bibliotecas de Nextion

Antes de empezar, también necesitas instalar las bibliotecas de Nextion para el IDE de Arduino. Sigue los siguientes pasos para instalar la biblioteca:

1. Descarga la biblioteca de Nextion para Arduino haciendo clic aquí.
2. Descomprime la carpeta .zip y obtendrás la carpeta ITEADLIB-Arduino-Nextion.
3. Renombra la carpeta de ITEADLIB_Arduino_Nextion-master a ITEADLIB_Arduino_Nextion.
4. Mueve la carpeta ITEADLIB_Arduino_Nextion a la carpeta de bibliotecas de instalación de tu IDE de Arduino.
5. Por último, vuelve a abrir tu IDE de Arduino.

Configuración de la Biblioteca para Arduino UNO

Esta biblioteca está configurada por defecto para Arduino MEGA2560. Para que funcione con Arduino Uno, debes realizar lo siguiente:

1. Abre la carpeta ITEADLIB_Arduino_Nextion.
2. Debería haber un archivo NexConfig.h, ábrelo.
3. Comenta la línea 27, de modo que quede así: //#define DEBUG_SERIAL_ENABLE
4. Comenta la línea 32: //#define dbSerial Serial
5. Cambia la línea 37, de modo que quede como: #define nexSerial Serial
6. Guarda el archivo NexConfig.h.

Ahora estás listo para comenzar a experimentar con la pantalla Nextion en Arduino UNO.