Progress Bar En Pantalla Nextion Arduino

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.

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

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.

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

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

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

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

}

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

La pantalla tiene todo el tamaño de progress bar y cambiara con relación al ajuste del potenciometro