PROGRESS BAR  EN LA PANTALLA NEXTION Y ARDUINO UNO

Progress bar es una herramienta que nos permite visualizar el progreso de carga de algún elemento  que  por medio de un potenciometro y  una entrada analógica del Arduino UNO cambiara su valor. Como ya se vio en el tutorial anterior de la Pantalla Nextion puede proporciona una interfaz de control y visualización entre un humano, máquina y un proceso, es la mejor solución para reemplazar la pantalla LCD tradicional.

En este caso omitiré algunos pasos, te recomiendo ver el tutorial anterior para posibles dudas:Pantalla Nextion NX3224T028 + Arduino UNO

Materiales

• Pantalla Nextion  NX3224T028
• Arduino uno
• Memoria MicroSD (formateada a fat32)
• Adaptador para MicroSD
• Potenciometro
• Cables dupont macho-macho

Los materiales los puedes encontrar en  hetpro-store

Software Arduino :   Arduino

Nextion Studio:   Software

PASO 1: Crear un nuevo proyecto

Al abrir el programa de  Nextion Studio, se selecciona  “File>New”, se le asigna el  nombre al archivo.

En seguida se abrirá una nueva ventana donde se selecciona el tamaño de la  pantalla Nextion, La pantalla es de 320×240 y se selecciona  horizontal.

Paso 2: Cargar imágenes

Del lado izquierdo de la pantalla se encuentra el apartado “picture”  junto con una serie de botones para agregar o eliminar imágenes, se presiona  el botón de “Add” se abrirá  una ventana nueva y se selecciona todas las imágenes que sean necesarias. Para este proyecto se necesitan dos una que sera la barra cuando esta vacía y otra que mostrara cuando este llena.

*Nota: las imágenes pueden ser del tamaño que ustedes quieran solo recuerden no sobrepasar los 320×240 del display 

Paso 3: Insertar progress bar

En la pestaña “Add component” seleccionar la opción  “progress bar”

Aparecerá una pequeña barra que simboliza la progress bar etiquetada con «j0″ esto es importante ya que se utilizara en la programación del Arduino, al seleccionarla se muestra una tabla del lado derecho que son las configuraciones de la barra.

Paso 4: Configuración de progress bar

Una vez configurada la barra en la vista previa de la pantalla Nextion quedara de la siguiente manera

Paso 5: Agregar una nueva fuente

Una  ventaja de la pantalla Nextion es que puedes crear varios tipos de fuentes para la misma aplicación. Para  generar una fuente en la barra de herramientas se selecciona «Tools>Font Generator», ya que se elija el tamaño y tipo de fuente deseada seleccionamos «Genarate font» se guarda el archivo.

*Nota: este archivo lo puedes usar en otros proyectos para no crear varias fuente iguales

En el apartado del lado izquierdo llamado «Fonts» se selecciona «Add» se agrega el archivo que se genero, aquí se agregan todos los tipos de fuente que desee, al agregar una fuente se le asigna un numero el cual se utiliza como referencia en las configuraciones de cuadro de texto

Paso 6: Insertar cuadro de texto

El texto ayudara a mostrar el porcentaje al que se encuentra la barra para esto se necesitan dos entradas una para que muestre el valor y otra el símbolo de porcentaje. para crearlo en la pestaña “Add component” seleccionar la opción  “text”. De igual manera aparecerá un recuadro etiquetado con «t0» y otro con «t1»

Las configuraciones del cuadro de texto son las siguientes:

Paso 7: Cargar los programas en la pantalla Nextion y Arduino

Compilar el programa y enseguida Cargar el archivo  tft generado.

Para el Arduino se carga el siguiente código, que básicamente se lee la entrada analógica y manda los valores por el puerto serial.

[code language=»c»]
//codigo original en: http://pastebin.com
int pot = 0; // entrada analigoca del potenciometro
int Valor = 0; // variable para almacenar los datos de la entrada
int val =0; //variable para mandar por el puerto serial
void setup() {
Serial.begin(9600); //inicia el puerto serial a 9600
}
void loop() {
Valor = analogRead(pot); //lee el valor del potenciometro
val= (Valor/4)/2.55;// se divide entre 4 porque los valores analogicos se leen de 0 a 1023 y los valores analogicos se escriben de 0 a255
//y se divide entre 2.55 para que de el porcentaje
delay(150);
Serial.print("j0.val="); //variable de la pantalla que se va a modificar
Serial.print(val); //manda el valor optenido del potenciometro
Serial.write(0xff);
Serial.write(0xff);
Serial.write(0xff);
Serial.print("t0.txt="); //variable de la pantalla que se va a modificar
Serial.write(0x22);
Serial.print(val); //manda el porcentaje de la entrada
Serial.write(0x22);
Serial.write(0xff);
Serial.write(0xff);
Serial.write(0xff);
Serial.print("t1.txt="); // variable de la pantalla nextion
Serial.write(0x22);
Serial.print("%"); //solo manda el simbolo de porcentaje
Serial.write(0x22);
Serial.write(0xff);
Serial.write(0xff);
Serial.write(0xff);
}
[/code]

Diagrama de conexión

NEXTION_HETPRO

[youtube https://www.youtube.com/watch?v=gCskCJqWjsY]