Muchas veces hemos hablado en Rincón Ingenieril sobre como crear interfaces de usuario o HMI (Human Machine Interface) en nuestros dispositivos. La conclusión a la que solemos llegar es que usar pantallas suele ser una muy buena opción y si es táctil, mejor que mejor. Es por esto que hoy analizamos una pantalla un tanto especial, la pantalla Nextion fabricada por Itead y la conectaremos a Arduino para mostrar datos y controlar salidas digitales.
Es posible que antes ya conozcas y que hayas usado pantallas LCD TFT como la que aprendimos a usar en este tutorial. Esta pantalla es genial para crear interfaces gráficas poco cargadas y en las cuales no se necesita un panel táctil. Un ejemplo puede ser el slider para cámaras que montamos en el pasado.
Pantalla Nextion
Una pantalla nextion no deja de ser una pantalla TFT con un panel táctil de la familia denominada como Nextion. Estas pantallas son fabricadas por Itead, un fabricante asentado en Shenzhen.
Existen muchos tipos de pantallas de este fabricante, principalmente están divididas en el grupo de pantallas que tiene GPIO y EEPROM y las que no lo tienen. Dentro de estos dos grupos, existen distintos dimensiones de panel, las más pequeñas de 2.4 pulgadas y las más grandes de 7 pulgadas. En este tutorial usaremos el modelo NX8048T050, es decir un modelo sin GPIO, sin EEPROM y con 5 pulgadas de dimensiones de panel.
Una de las peculiaridades de Nextion es que la interfaz gráfica se carga en la memoria flash de la propia pantalla y no en el mirco que controla el sistema, por tanto, el mircro principal queda un poco más libre y el refresco de pantalla es mucho más rápido. Como la luz y el día.
Otra de las grandes peculiaridades de la pantalla es que usa una UART para comunicarse y por tanto solo usaremos los 2 pines del puerto serie de nuestro microcontrolador para gestionar la pantalla, tanto lo que se muestra como las lecturas del panel táctil.
Ventajas y desventajas de la pantalla Nextion
Se me ocurren muchas ventajas sobre estas pantallas, para empezar tienen hardware dedicado. Cuentan con un micro basado en ARM 7 y una memoria flash dedicada al control de la pantalla, solo para el control de la pantalla. Y en los modelos más grandes encontramos memoria DRAM y una FPGA de Altera para gestionar en HARDWARE el refresco de pantalla.

Esto es lo que hace que estas pantallas sean muy interesantes, el disponer de hardware dedicado a procesar y almacenar los datos de la pantalla provoca que el refresco de la imagen y la carga de nuevos datos sea muy rápido, quizá no la más «rápida del oeste», pero si es muy rápida.
La comunicación entre nuestro sistema y la pantalla se hace por UART, lo que simplifica el número de líneas necesarias para la comunicación y simplifica el control.
La interfaz se diseña desde un software específico y por tanto, aunque no se te de bien el diseño gráfico, puedes conseguir grandes resultados.
Todas las pantallas son táctiles, con panel resistivo. Y existen muchos tamaños (y precios) para ajustarse a las necesidades de tu proyecto.
Si eres de los míos, es decir, del equipo Open Source, seguro que ya te han chirriado un par de cosas, entre ellas que Nextion Editor no es Open Source. Es gratuito, pero no es Open Source.
Nextion editor para crear la interface gráfica
Nextion tiene su propio software diseñado para diseñar, probar y subir a la memoria de la pantalla la interface que usaremos. Este software se llama Nextion Editor el cual podemos descargar gratis desde su web oficial pero que hasta donde yo se, no es Open Source.

El editor Nextion está dividido en seis secciones, tres columnas y dos filas. En la columna de la izquierda nos encontramos con dos secciones, arriba se encuentra una lista con todos los elemetos que podemos introducir en pantalla denominada toolbox. Debajo encontramos la lista de fuente y de imágenes.
En el toolbox encontramos, textos, números, botones, pulsadores, imágenes, barras de progreso, sliders y muchos elementos más.
La tabla de fuentes, no es otra cosa que el conjunto de tipografías y de tamaños de texto que vamos a usar y en la tabla de imágenes tendremos todas las imágenes que queramos mostrar en pantalla..
La columna de la izquierda tiene un primer cuadro con todas las distintas páginas que vayamos a mostrar en pantalla y un poco más abajo está la tabla de atributos con la cual podemos configurar todos los elementos de pantalla.
En la columna central tenemos una representación visual de como quedarán los elementos en pantalla y códigos de diálogo para configurar código propio de la pantalla.
Colocar elementos en pantalla es tan fácil como arrastrar desde el toolbox hasta la pantalla en la columna central y luego acudir a la sección de atributos para configurar texto, tamaño, posición, etc.
En el vídeo configuramos la pantalla que hay en la imagen de arriba, puedes echarle un vistazo para aprender el proceso.
Elementos en pantalla
Colocaremos 3 textos a fijos:
- Rincón Ingenieril en la parte superior de la pantalla.
- Temperatura
- ºC
Y los elementos modificables
- Un número, que en este caso recibe la referencia n0
- Una barra de progresión con el nombre j0
- Un botón con el nombre b0
El número y la barra de progresión ayudaran a mostrar la temperatura y el botón servirá para controlar el LED de la placa Arduino en el pin 13.
De Nextion Editor a la pantalla Nextion
Una vez terminado el diseño de las distintas pantallas de nuestra interface, debemos subir esos datos a la memoria flash. Para hacer esto usaremos un conversor USB a serie TTL de esos que estoy seguro que tienes en algún cajón del laboratorio o de casa.
Conectaremos los cables de la pantalla nextion respetando lo que indica la PCB, Vcc a 5v, GND a GND y Tx y Rx con sus respectivos en el conversor USB a serie.

Antes de conectar la pantalla al USB, debemos asegurar que la interfaz que hemos montado funciona correctamente y esto lo hacemos con el debuguer que incorpora el editor. Al hacer click sobre el botón Debug se abrirá el simulador con el cual verificaremos que todo funciona correctamente. Si el editor no se abre es porque existe algún error, este último lo podremos conocer si nos fijamos en el apartado Output ( en la parte inferior de Nextion Editor).

Ahora si que podemos subir el código a la pantalla. Pulsa en el botón Upload del menú y se abrirá un cuadro de diálogo en el cual podrás seleccionar en que puerto está conectada la pantalla y a que velocidad está configurada. Si no lo tienes claro, puedes dejar en e automático, nunca me ha fallado en automático, es bastante bueno detectandolo.

Por último dale a Go y deja que el puerto serie haga su magia.
La carga puede tardar unos minutos y si tienes imágenes aun más, ten en cuenta que es un puerto serie, normalmente a 115200 baudios.
Librería para Arduino
Este tipo de pantallas se pueden controlar desde Arduino y por tanto Itead se ha encargado de crear una librería que nos proporciona acceso a los parámetros de la pantalla nextion. Con ella podemos modificar textos, números, colores, leer botones y otras muchas cosas.
Puedes descargar la librería desde le Github de Itead.
¡¡¡Ojo!!! Cuidado
Es importante conocer que la mejor opción si estas desarrollando con la pantalla es usar un Arduino Mega ya que la librería está preparada para usar el puerto serie 0 de Arduino para depurar la comunicación con la pantalla y el puerto serie 2 para comunicarse con la pantalla.
Si quieres usar otro Arduino como el Arduino Uno, deberás modificar un par de parámetros en al librería.
Si decides usar un Arduino Uno, accede al archivo NexConfig.h en la carpeta de la librería, comenta la línea
#define DEBUG_SERIAL_ENABLE
y cambia la línea
#define nexSerial Serial2
por la línea
#define nexSerial Serial
De esta manera desactivarás la depuración por puerto serie y podrás conectar la pantalla Nextion al puerto serie de los pines 0 y 1 de Arduino Uno.
Nextion y Arduino mega
Una vez instalada y configurada la librería, podemos conectar la pantalla a Arduino y de esa manera empezar a controlarla. Para este ejemplo usaré un Arduino Mega 2560. La pantalla la conectaremos en los pines del puerto serie 2.

En el ejemplo de este tutorial vamos a obtener la lectura de un sensor de temperatura lm335 y lo mostraremos en pantalla modificando el valor del número «n0» de la interface gráfica y modificando la altura de la barra de progreso «j0»
Además controlaremos un LED, concretamente el LED del pin 13 de Arduino usando el botón «b0» en pantalla.
En el código, lo primero será incluir la librería Nextion.h e instanciar los objetos. Debemos crear un objeto por cada elemento que queramos controlar de la pantalla. En este caso debemos controlar n0, j0, y b0 por eso creamos los siguientes tres objetos, cada uno con su clase correspondiente.
NexButton b0 = NexButton(0, 5, "b5"); NexNumber n0 = NexNumber(0, 3, "n0"); NexProgressBar j0 = NexProgressBar(0, 2, "j0");

Es muy importante que configuremos bien los constructores de los objetos, es decir, es muy importante que pongamos los parámetros adecuados en los paréntesis.
El primer número corresponde al identificador de la página en la que se encuentra el objeto. En este caso todos los objetos se encuentran en la página 0 y por esto su valor es 0. Puedes ver cual es el identificador de la página fijándote en el cuadro de páginas.

El segundo valor corresponde con el identificador del objeto y este lo podemos encontrar con el nombre id en el cuadro de atributos tras seleccionar el objeto haciendo clic sobre él. Por ejemplo en la imagen vemos los atributos del objeto n0.
Por último encontramos el tercer parámetro que corresponde con el nombre que se proporcionamos al objeto. Nextion siempre trabaja con identificadores, sin embargo, a los seres humanos nos resulta más fácil acordarnos de nombres, por esto tenemos la posibilidad de darle uno.
Te recomiendo que el nombre del objeto en Arduino sea el mismo que el nombre del objeto en Nextion Editor, de esta manera evitaras confusiones a la hora de trabajar con la pantalla y con el código.
Como puedes ver, usamos una clase para cada tipo de objeto, una clase NexButton para los botones, NexNumber para los números y NexProgressBar para las barras de progresión.
Si accedes a la carpeta «Doc» que encontraras dentro de la librería y abres el archivo «index.html» podrás ver toda la documentación sobre la librería y sobre que clases y métodos existen para comunicarse con cada uno de los elementos que podamos usar en pantalla.
Hay que reconocer que la documentación podría ser un poco más visible, pero, al menos está disponible.
No se te olvide que siempre debes inicializar la pantalla y para eso debes usar nexInit(); en el void setup();
nexInit();
Escribir un número en pantalla
Empezaremos por enviar un número desde Arduino hacia la pantalla para que se muestre en el objeto de tipo número que hemos puesto en la interfaz HMI.
En este caso, como el número que queremos mandar a la pantalla es un valor de temperatura, lo primero que hacemos es leer el valor de la entrada analógica de Arduino y calcular la temperatura.
temperatura = (analogRead(A0) * 0.48828)-273; if(temperatura != temperatura_salida) { cuenta++; } else { cuenta = 0; }
Tras calcular el valor que demos enviar, llamaremos al método «setValue» del objeto a modificar y le pasaremos el valor a mostrar. En este caso queremos cambiar el valor del objeto de tipo número n0 por tanto usamos:
n0.setValue(temperatura);
Ya que estamos también vamos a actualizar el valor de la barra de progreso vertical, para ello, primero calculamos el valor que debemos enviar. Este número debe estar comprendido entre 0 y 100.
Tras tener el valor llamamos al método «setValue» pero del objeto correspondiente, es decir j0.
progress = map(temperatura, -10, 50, 0, 100); j0.setValue(progress);
Leer cambios de un botón.
Este proceso es un poco más largo. Primero debemos crear (antes del setup) una lista con todos los botones de los que es sistema debe estar pendiente. Para ellos introducimos los nombre de los botones en una lista como esta:
NexTouch *nex_listen_list[] = { &b0, NULL };
Luego pasaremos a crear una función la cual se ejecutará cuando el botón sea pulsado. En este caso la función se llama cambiarLED y lo que hace es cambiar el estado del LED, si estaba encendido lo apaga y si estaba apagado lo enciende.
void cambiarLED(void *ptr) { digitalWrite(13, !digitalRead(13)); }
En el void setup debemos asociar cada botón con su función correspondiente, en este caso, el botón b0 con la función cambiarLED.
b0.attachPop(cambiarLED, &b0);
Y por último, debemos indicar a Arduino que esté atento a los cambios que se produzcan en el panel táctil de la pantalla. Esto lo haremos con la función nexLoop(); dentro del void loop
nexLoop(nex_listen_list);
Con todo esto, cuando se presione el botón en la pantalla táctil, Arduino ejecutará la función que hemos asociado a ese botón.
Aquí tienes el código completo.
#include "Nextion.h" NexButton b0 = NexButton(0, 5, "b5"); NexNumber n0 = NexNumber(0, 3, "n0"); NexProgressBar j0 = NexProgressBar(0, 2, "j0"); float temperatura = 0.0; float temperatura_salida = 0.0; int cuenta = 0; int progress = 0; NexTouch *nex_listen_list[] = { &b0, NULL }; void cambiarLED(void *ptr) { digitalWrite(13, !digitalRead(13)); } void setup() { nexInit(); b0.attachPop(cambiarLED,&b0); pinMode(13, OUTPUT); } void loop() { nexLoop(nex_listen_list); temperatura = (analogRead(A0) * 0.48828)-273; if(temperatura != temperatura_salida) { cuenta++; } else { cuenta = 0; } if(cuenta == 5){ temperatura_salida = temperatura; cuenta = 0; n0.setValue(temperatura); progress = map(temperatura, -10, 50, 0, 100); j0.setValue(progress); } delay(100); }
en la nextion tengo 5 pages, como le pido con arduino que muestre la page que seleccione en la programacion, para que se muestre en la nextion y el ususario pueda tomar una desicion
Hola!,
tengo una situacion rara, tengo el software funcionando para Arduino con mi nextion, pero si conecto un Wemos / Lolin, el wemos no es capaz de escribir ni leer nada del Nextion. ¿podrias ayudarme?Porque puede ser?
Tengo un Arduino UNO:
(adjunto imagen y funciona perfectamente)
Y un Wemos(Lolin): https://postimg.cc/nXSP2XVt (Usando las mismas conexiones) que ni pinta nada en la pantalla que envio, ni detecta los eventos cuando pulso la pantalla.
Un saludo.
Hola!,
tengo una situacion rara, tengo el software funcionando para Arduino con mi nextion, pero si conecto un Wemos / Lolin, el wemos no es capaz de escribir ni leer nada del Nextion. ¿podrias ayudarme?Porque puede ser?
Gracias
¿Como tendría que configurar la librería para utilizar un ESP8266 con un rtc y la pantalla nextion?.
Muchas gracias de antemano.
Buenas tendras informacion sobre un elemento llamado switch? Son solo usadas en la gama inteligente. Contra mas busco no encuentro como leerlas desde arduino ya que no puedo crear la variable. Desde aqui gracias.
Muy buenas Enrique. Muchas gracias por el tuto, todo muy claro, Funciona perdfect!! de los mejorcitos.
Tenia una pregunta acerca de los metodos, pues me estoy volviendo loco para encontrarlos… no encuentro el docu index.html.
Mi pregunta es la siguiente; cual es el metodo para poder leer un texto o un numero «t0» «n0» en Arduino, q se escriba desde la interface Nextion.
Muchas graicias de antemano! saludos!
Hola Enrique buen día, voy varios días sin con un problema en la Nextion de 7 pulgadas básica, estaría muy agradecido si tu me podrías ayudar. He programado el Arduino y la HMI para leer los datos de un sensor e ingresar un valor de temperatura por pantalla, al probar en el compilador todo funciona correctamente pero al carga en la pantalla Nextion la lectura del sensor es correcta, el problema esta en el ingreso de valores numéricos y la pulsación de botones, es decir, recibe datos pero no envía nada. He probado la pantalla con un programa básico de… Leer más »
hola buenas tardes amigo. me gustaria tu ayuda. estoy haciendo basicamente lo mismo pero con una termocupla y con el modulo max6675. agradeceria tu ayuda
Buenas excelente tutoria, la paret del arduino muy claro donde flaquea un poquito es en a parte de la pantalla, podrias haber puesto el codigo o algo parapode r configurarla con el arduino-
Saludos Enrique desde Venezuela, tengo tiempo siguiendo tus turoriales y de verdad este tema de las pantallas me deja emocionado y puede ser aplicado a varios proyectos que tengo con arduino, pero el problemas es que en Venezuela eso dispositivos son muy costosos e incluso ya no los venden es muy costoso. yo soy profesor Universitario y me gustaría enseñar esto. La limitante es la pantalla no habrá un emulador que se instale en la PC y programar la pantalla y se conecte el arduino por USB y lograr el objetivo de programar y diseñar la pantalla sin tener la… Leer más »
Hola Jose, el software de la pantalla tiene un simulador integrado. Por cierto he respondido a tu comentario en YouTube hace unos minutos.
Muchas gracias por el aporte Enrique! Estoy empezando con una pantalla nextion y aunque aun no me ha llegado para probar, tengo una duda de como realizar el montaje. El asunto es que ya tengo un programa muy extenso, cuyo ciclo completo de loop pueden ser 30 seg, funcionando en un arduino Mega y quisiera mantener la estructura de este programa pero dar prioridad a la lectura de eventos de la pantalla. Mi pregunta es, con la linea «nexLoop(nex_listen_list);» solo escucha el evento cuando llega a ejecutarse esta linea, cierto? no se si necesitaria implementar tema de interrupciones + otro… Leer más »
Hola buen día, llevo un par de días en busca de una respuesta. y quería preguntar si tu me podrías ayudar.
¿Me podrías ayudar por favor?.
Este es el caso
no puedo lograr encontrar el comando para cambiar de estado el botón de mi HMI adquiriendo la señal de un botón que va conectado a arduino.
Saludos
.