Introducción a Nextion HMI

Este tutorial le enseñará cómo utilizar y programar la pantalla HMI (Interfaz hombre-máquina). Las pantallas HMI llevan mucho tiempo en el mercado, pero su precio ha bajado en los últimos años y ahora los fabricantes de bricolaje las están utilizando en proyectos.

Tenga en cuenta que la pantalla HMI es diferente de la pantalla táctil. La pantalla táctil solo muestra el texto o la imagen que el usuario envía para su visualización. Sin embargo, la HMI no es sólo una pantalla táctil. También puede procesar datos por sí mismo y tomar medidas adicionales basadas en el software programado del programador.

Las pantallas Nextion HMI son las más populares entre los entusiastas del bricolaje y aprenderemos a programarlas, interactuar y trabajar con ellas. Descargue e instale el editor de creación de GUI de nextion. Una vez instalado, abra el editor y comience a crear un nuevo proyecto. Vaya a Archivo>Nuevo en la ventana y asigne al proyecto un nombre válido y el proyecto se guardará. Extensión HMI. Después de crear el proyecto, aparecerá una nueva ventana donde se le pedirá que seleccione su HMI. Nextion ofrece varias HMI en las categorías Básica, Mejorada e Inteligente. Busque su categoría de HMI, asígnele un nombre y selecciónela.

NX8048T070_011 mide 7 pulgadas y 800×480. Cuando termine, haga clic en Aceptar . A continuación, se debe seleccionar la orientación de la pantalla. Seleccione la orientación de la pantalla. También puede seleccionar la codificación de caracteres. Prefiero trabajar con el estándar iso-8891-1. Presione Aceptar y habrá terminado con la configuración de pantalla.

ventana principal del editor

La ventana principal del editor comprende muchas ventanas pequeñas, cada una utilizada para definir diferentes parámetros/funciones y configuraciones, con vistas a la ventana principal y sus subventanas.

Creemos dos páginas y saltemos de una a la otra. En el encabezado de la página principal, quiero mostrar el logotipo de EngineersGarage. Primero necesito importar el logo al editor. Haga clic en el botón Agregar, navegue hasta la imagen y presione Entrar. El logotipo se importa y se muestra en la ventana. Los parámetros de tamaño, alto, ancho y formato del logotipo aparecen debajo. Al logotipo se le asigna un ID-0. A cada objeto en el editor se le asigna una ID.

Para colocar esta imagen en el panel de visualización, haga doble clic en el objeto de imagen. Aparecerá un cuadro rectangular en el panel de visualización. p0(imagen0) es el nombre del objeto.

Para mostrar el logotipo de EngineersGarage en el cuadro de imagen, haga clic en el cuadro y navegue hasta la ventana de atributos. Los atributos de P0 se enumeran en la ventana. El ID es 1, el alcance es local (si es global, este objeto se puede ver en otras páginas). El atributo de foto es donde tenemos que colocar el id de la imagen que queremos mostrar en el cuadro de imagen. En nuestro caso, el ID del logotipo es 0, así que coloque 0 y presione Entrar (también puede usar la función de exploración para seleccionar manualmente las imágenes disponibles en la ventana de imagen). El logo aparecerá en el cuadro de imagen.

Asegúrese de que su imagen no esté fuera del panel de visualización. Ajústelo en un panel usando el mouse.

Mostrar texto

Para mostrar el texto primero, tenemos que generar una fuente. La aplicación generadora de fuentes es parte del editor. Vaya a Herramientas > Generador de fuentes .

Genere la fuente que desea mostrar en la HMI. Asigne a cada fuente un nombre válido, seleccione la altura y la codificación, etc. Si más de una fuente forma parte del proyecto, genere cada una de ellas una por una.

Especifiqué dos fuentes. Puede obtener una vista previa de las fuentes en la ventana de fuentes. Cada fuente recibe una identificación y un nombre.

Para asignar un cuadro de texto a una fuente específica, inserte el ID de la fuente junto al atributo Fuente . El atributo TXT es donde ingresa el texto, que luego aparece en el cuadro de texto. El atributo Pco cambia el color del texto. Cada objeto y sus atributos se pueden estudiar utilizando la opción de ayuda del editor.

Creé dos páginas con pocas imágenes y cuadros de texto presentes en cada página. Se coloca un botón en la página principal. Al presionar el botón pasará a la página siguiente.

Para cambiar entre páginas usando un botón, debemos crear un evento. El evento puede ocurrir al presionar o soltar el botón. Lo especifiqué en el lanzamiento. Coloque la página Página 1 en el evento de liberación del botón. Los comandos se pueden estudiar con la ayuda del menú del editor.

Ahora todo lo que necesitas hacer es compilar el código y comenzar a depurar.

Nota: No necesita ningún hardware externo para este proyecto, solo una fuente de alimentación para alimentar la HMI.

Cargando el boceto en HMI

Después de depurar con éxito la aplicación GUI, es hora de cargar el boceto en la HMI. La mejor solución es cargarlo mediante un convertidor de USB a TTL. Conecte el convertidor serial al puerto USB y sus líneas UART con HMI. En el editor de texto de la barra de herramientas, seleccione el puerto COM, establezca la velocidad en baudios en 9600 y haga clic en cargar. El boceto comenzará a cargarse y tardará entre 3 y 6 minutos, según el tamaño de la aplicación.

Otro método es copiar el archivo .TFT generado por el editor nextion a una tarjeta SD. Inserte la tarjeta en la ranura para tarjetas SD de la HMI y encienda la HMI. El programa GUI se cargará automáticamente en la HMI. Puede retirar la tarjeta SD cuando se complete la carga.

Hagámoslo tú mismo: ¿dónde comprar piezas?

Mouser: Pantalla HMI de Nextion

Ratón: USB a UART

Ratón: fuente de alimentación

contenido relacionado

Regresar al blog

Deja un comentario

Ten en cuenta que los comentarios deben aprobarse antes de que se publiquen.