Progress Bar En Pantalla Nextion Arduino

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

Estos y otros materiales los puedes encontrar en hetpro-store

Software Arduino : Arduino

Nextion Studio: Software

Step 1: 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.

Step 2: 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

Step 3: 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.

Step 4: Paso 4: Configuración De Progress Bar

Se configura con los valores mostrados en la tabla y la vista previa se muestra en la siguiente imagen

Step 5: 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

Step 6:

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

Step 7: 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 se muestran en la imagen al igual que la vista previa

Step 8: Paso 7: Cargar El Programa En Arduino

El código completo lo puedes encontrar en:

https://hetpro-store.com/TUTORIALES/progress-bar/

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

}

Step 9: Paso 8: Cargar El Programa a La Pantalla

insertamos la tarjeta microSD en la computadora. seleccionamos “File>Open build folder”

Se abrirá una ventana con archivos tft. copiar y pegar el archivo a la tarjeta micoSD y retirarla.

*NOTA: La memoria no debe contener ningún otro archivo y debe estar formateada a FAT32

Antes de insertar la memoria a la pantalla Nextion asegurar que esta no este energizada. Una vez colocada la MicroSD alimentar la pantalla e inmediatamente indicara el proceso de carga del programa.

Ya que se encuentre cargado el programa se desconecta la pantalla y se retira la MicroSD