Progress Bar Pantalla Nextion +ARDUINO

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

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.

NUEVO ARCHIVO NEXTION

CREAR NUEVO 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

AÑADIR IMAGEN EN NEXTION

AGREGAR IMAGENES

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 

 

PROGRESS BAR IMAGEN

IMAGEN PROGRESS BAR VACÍA

 

 

PROGRESS BARR NEXTION ARDUINO

IMAGEN PROGRESS BARR LLENA

 

 

Paso 3: Insertar progress bar

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

PROGRESS BAR NEXTION

INSERTAR 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.

EDITAR PROGRESS BAR

VISTA INICIAL DEL PROGRESS BAR

 

 

Paso 4: Configuración de progress bar

PROGRESS BAR EDIT

CONFIGURACIÓN PROGRESS BAR

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

VISTA PREVIA NEXTION

VISTA PREVIA DE PROGRES BAR

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

FONT CREATOR

EDITOR DE FUENTE DE TEXTO

 

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

nextion15

AGREGAR TIPOS DE FUENTE

 

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:

CONFIGURACIÓN DE TEXTO NEXTION

OPCIONES DE CONFIGURACIÓN DE TEXTO

 

PROGRESS BAR HETPRO

PROGRESS BAR Y CUADROS DE TEXTO

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.

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

Diagrama de conexión

NEXTION ARDUINO UNO

DIAGRAMA DE CONEXIÓN NEXTION ARDUINO

NEXTION_HETPRO

PROGRESS BAR NEXTION ARDUINO

VISTA FINAL DEL PROGRESS BAR

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

12 Comments

  1. daniel castro paso junio 13, 2016
  2. Jose Manuel junio 22, 2016
    • MAYA julio 6, 2016
  3. Jacob Vazquez agosto 24, 2016
  4. Jacob Vazquez agosto 24, 2016
    • Saul Jesus agosto 25, 2016
      • John Florian febrero 1, 2017
  5. Larry Diaz enero 13, 2017
    • Saul Jesus enero 16, 2017
  6. Daniel marzo 19, 2017

Escríbenos tus dudas o comentarios

Usamos Cookies en nuestro sitio WEB

Por favor confirma, si aceptas nuestras cookies de rastreo. También puedes negar el uso de cookies de rastreo y seguir navegando sin que ninguna información sea enviada a servicios de terceros.