Visualiza Temperatura, Humedad y Presión BME280 en Pantalla Táctil Nextion

Componentes y Suministros

Componente	Cantidad
Arduino Nano R3	1
Sensor atmosférico BME280 (SparkFun)	1
Pantalla táctil Nextion NX8048T070 7.0" HMI TFT LCD (Itead)	1
Conversor USB a Serie FT232RL (SparkFun)	1

Aplicaciones y Servicios Online

• Visuino - Entorno de Desarrollo Gráfico para Arduino
• Arduino IDE

Sobre el Proyecto

Hay muchas opciones de Display para añadir interfaz gráfica de usuario a placas Arduino. La mayoría requieren considerable memoria y tiempo de procesamiento, y no son adecuadas para placas Arduino con memoria y potencia limitadas como Arduino UNO o Arduino Nano. Cuando la memoria es limitada y se necesita una interfaz de usuario avanzada, las Pantallas Seriales Inteligentes Programables Nextion son una opción popular. Itead ofrece un Editor Gráfico Nextion gratuito para diseñar la interfaz de usuario de la pantalla.

El BME280 es un sensor combinado muy preciso de Temperatura, Humedad y Presión Barométrica. Puede conectarse con interfaz I2C o SPI.

Visuino tiene soporte completo para Pantalla Nextion, y llevaba tiempo planeando un tutorial para el soporte de Nextion. También quería hacer un tutorial para el sensor BME280. Finalmente decidí combinarlos y hacer un único tutorial mostrando Temperatura, Humedad y Presión Barométrica del BME280 en los 3 canales de un componente Scope (Forma de onda) en la Pantalla Nextion.

Paso 1: Componentes

• Una placa Arduino compatible (uso Arduino Nano, porque tengo una, pero cualquier otra servirá)
• Un Módulo Sensor BME280
• Una Pantalla Inteligente Serial Nextion (usé NX4024K032_11 pero cualquier otra debería funcionar)
• 4 cables jumper hembra-hembra
• Para programar la pantalla también necesitarás un Módulo Conversor USB a Serie TTL 5V

Paso 2: Conectar la Pantalla Nextion al Módulo de Comunicación Serie USB

Para programar la Pantalla Nextion con el Editor Nextion necesitas conectarla con un Conversor USB a Serie TTL a tu ordenador:

• Conecta el Conector de Cables Nextion a la Pantalla (Imagen 1)
• Si tu Módulo USB a Serie es configurable, asegúrate de que está configurado para proporcionar alimentación 5V (Imagen 2) (En mi caso necesitaba configurarlo con un jumper de selección de alimentación)
• Conecta el Cable de Tierra (Negro) de la Pantalla Nextion al Pin de Tierra del Módulo Conversor USB a Serie TTL (Imagen 2)
• Conecta el Cable de Alimentación (+5V) (Rojo) de la Pantalla Nextion al Pin de Alimentación (VCC/+5V) del Módulo Conversor USB a Serie TTL (Imagen 2)
• Conecta el Cable RX (Amarillo) de la Pantalla Nextion al Pin TX del Módulo Conversor USB a Serie TTL (Imagen 2)
• Conecta el Cable TX (Azul) de la Pantalla Nextion al Pin RX del Módulo Conversor USB a Serie TTL (Imagen 2)
• Conecta el Módulo Conversor USB a Serie TTL al ordenador con un cable USB (Imagen 3)

Paso 3: Iniciar el Editor Nextion y Seleccionar Tipo y Orientación de Pantalla

Para programar la Pantalla Nextion, necesitas Descargar e Instalar el Editor Nextion.

• Inicia el Editor Nextion (Imagen 1)
• Del Menú selecciona |ArchivoNuevo| (Imagen 1)
• En el diálogo "Guardar Como", escribe nombre del archivo de proyecto y selecciona ubicación para guardar (Imagen 2)
• Haz clic en el botón "Guardar" (Imagen 2)
• En el diálogo "Configuración", selecciona el Tipo de pantalla (En mi caso NX4024K032_11) (Imagen 3)
• Haz clic en la pestaña "PANTALLA" a la izquierda para mostrar la Configuración de pantalla (Imagen 4)
• Selecciona orientación Horizontal para la pantalla (Imagen 4)
• Haz clic en el botón "OK" para cerrar el diálogo (Imagen 4)

Paso 4: En el Editor Nextion: Añadir y Configurar Componente Waveform (Scope)

Necesitamos añadir un componente Scope y configurarlo para tener 3 canales para Temperatura, Presión y Humedad:

• En el "Panel de herramientas" a la izquierda haz clic en el componente "Forma de onda" (Imagen 1) para añadirlo al área de diseño (Imagen 2)
• Redimensiona el componente para llenar la pantalla (Imagen 3)
• En el "Panel de atributos", establece el valor del atributo "ch" a "3" (Imagen 3)
• En el "Panel de atributos", establece el valor del atributo "dir" a "right to left" (Imagen 4)

Paso 5: En el Editor Nextion: Subir el Proyecto a la Pantalla Nextion

• Haz clic en el botón "Subir" (Imagen 1)
• En el diálogo "Subir a Dispositivo Nextion", haz clic en el botón "Ir" (Imagen 2) para iniciar la subida (Imagen 3)
• Cuando termine la subida (Imagen 4), haz clic en el botón "Salir" para cerrar el diálogo.

Paso 6: Iniciar Visuino y Seleccionar Tipo de Placa Arduino

Como el Arduino Nano tiene solo un puerto Serie, y se necesita para programar el Arduino, tendrás que programar el Arduino Nano antes de conectar la Pantalla Nextion.

Para empezar a programar el Arduino, necesitas tener el Arduino IDE instalado desde: https://www.arduino.cc/.

Ten en cuenta que hay errores críticos en Arduino IDE 1.6.6.

Asegúrate de instalar 1.6.7 o superior, ¡de lo contrario este tutorial no funcionará!

Visuino: https://www.visuino.com también necesita estar instalado.

• Inicia Visuino como se muestra en la primera imagen
• Haz clic en el botón "Herramientas" en el componente Arduino (Imagen 1) en Visuino
• Cuando aparezca el diálogo, selecciona Arduino Nano como se muestra en Imagen 2

Paso 7: En Visuino: Añadir Componente Pantalla Nextion y Elemento Scope

Para controlar la Pantalla Nextion, necesitamos añadir el componente Pantalla Nextion en Visuino, y luego añadirle un elemento para controlar el Scope:

• Escribe "next" en el cuadro Filtro de la Caja de herramientas de Componentes, luego selecciona el componente "Pantalla Nextion" (Imagen 1) y arrástralo al área de diseño
• Haz clic en el botón "Herramientas" del componente DisplayNextion1 (Imagen 2)
• En el editor "Elementos" selecciona el elemento "Scope(Wave)", y luego haz clic en el botón "" a la izquierda (Imagen 2) para añadir el elemento Scope (Imagen 3)

Paso 8: En Visuino: Añadir 3 Canales al Elemento Scope y Conectar la Pantalla Nextion

Luego necesitamos añadir canales al Scope.

• En el Inspector de Objetos, haz clic en el botón "..." junto al valor de la sub-propiedad "Canales" del elemento Scope1 (Imagen 1)
• En el editor de Canales selecciona el elemento "Canal" a la derecha, y luego haz clic 3 veces en el botón "" a la izquierda (Imagen 2) para añadir 3 canales (Imagen 3)
• Cierra los diálogos "Canales" y "Elementos" de la Pantalla
• Conecta el pin de salida "Out" del componente DisplayNextion1 al pin de entrada "In" del canal "Serial[ 0 ]" del componente Arduino (Imagen 4)

Paso 9: En Visuino: Añadir y Configurar 3 Componentes Map Range

Los canales Scope de la Pantalla Nextion están diseñados para mostrar valores entre 0.0 y 1.0. Para mostrar Temperatura, Humedad y Presión, necesitamos convertir los valores al rango 0.0 a 1.0. Podemos usar componentes Map Range para esto:

• Escribe "map" en el cuadro Filtro de la Caja de herramientas de Componentes, luego selecciona el componente "Map Range" (Imagen 1) y arrastra 3 de ellos al área de diseño
• Selecciona el componente MapRange1 (Imagen 2)
• En el Inspector de Objetos expande la propiedad "Rango de Entrada" (Imagen 2)
• En el Inspector de Objetos establece el valor de la subpropiedad "Max" de la propiedad "Rango de Entrada" a "101000" (Imagen 2) (Puede que necesites valor diferente si la presión atmosférica en tu ubicación es muy distinta)
• En el Inspector de Objetos establece el valor de la subpropiedad "Min" de la propiedad "Rango de Entrada" a "99000" (Imagen 2) (Puede que necesites valor diferente si la presión atmosférica en tu ubicación es muy distinta)
• Selecciona el componente MapRange2 (Imagen 3)
• En el Inspector de Objetos expande la propiedad "Rango de Entrada" (Imagen 3)
• En el Inspector de Objetos establece el valor de la subpropiedad "Max" a "100" (Imagen 3)
• En el Inspector de Objetos establece el valor de la subpropiedad "Min" a "-20" (Imagen 3)
• Selecciona el componente MapRange3 (Imagen 4)
• En el Inspector de Objetos expande la propiedad "Rango de Entrada" (Imagen 4)
• En el Inspector de Objetos establece el valor de la subpropiedad "Max" a "100" (Imagen 4)

Paso 10: En Visuino: Conectar Componentes Map Range a Canales Nextion

• Conecta la salida "Out" del componente MapRange1 al pin de entrada "In" del elemento "Elements.Scope1.Channels.Channel1" del componente DisplayNextion1 (Imagen 1)
• Conecta la salida "Out" del componente MapRange2 al pin de entrada "In" del elemento "Elements.Scope1.Channels.Channel2" del componente DisplayNextion1 (Imagen 2)
• Conecta la salida "Out" del componente MapRange3 al pin de entrada "In" del elemento "Elements.Scope1.Channels.Channel3" del componente DisplayNextion1 (Imagen 3)

Paso 11: En Visuino: Añadir y Conectar Componente BME280

Necesitamos añadir un componente para leer datos del Módulo BME280:

• Escribe "280" en el cuadro Filtro de la Caja de herramientas de Componentes, luego selecciona el componente "Presión Temperatura Humedad BME280 I2C" (Imagen 1) y arrástralo al área de diseño
• Mi Módulo BME280 tiene dirección I2C de 118 (0x76). Si tu módulo tiene dirección diferente, necesitarás establecer el valor de la propiedad "Dirección" (Imagen 2)
• Conecta el pin de salida "Presión(Pa)" del componente PressureTemperatureHumidity1 al pin "In" del componente MapRange1 (Imagen 2)
• Conecta el pin de salida "Temperatura" del componente PressureTemperatureHumidity1 al pin "In" del componente MapRange2 (Imagen 3)
• Conecta el pin de salida "Humedad(%)" del componente PressureTemperatureHumidity1 al pin "In" del componente MapRange3 (Imagen 4)
• Conecta el pin de salida "Out" del componente PressureTemperatureHumidity1 al pin "In" del canal I2C del componente Arduino (Imagen 5)

Paso 12: En Visuino: Añadir, Configurar y Conectar Componente Generador de Reloj

Podemos usar el proyecto tal cual, pero refrescaría el Scope muy rápido todo el tiempo. Es mejor si el Scope se actualiza, por ejemplo, 10 veces por segundo. Para esto añadiremos un componente reloj para cadenciar la lectura del sensor y la actualización del Scope.

• Escribe "reloj" en el cuadro Filtro de la Caja de herramientas de Componentes, luego selecciona el componente "Generador de Reloj" (Imagen 1) y arrástralo al área de diseño
• En el Inspector de Objetos, establece el valor de la propiedad "Frecuencia" del ClockGenerator1 a "10" (Imagen 2)
• Conecta la salida "Out" del componente ClockGenerator1 al pin de entrada "Clock" del componente PressureTemperatureHumidity1 (Imagen 3)

Paso 13: Generar, Compilar y Subir el Código Arduino

• En Visuino, presiona F9 o haz clic en el botón mostrado en Imagen 1 para generar el código Arduino y abrir el Arduino IDE
• En el Arduino IDE, haz clic en el botón Subir, para compilar y subir el código (Imagen 2)

Paso 14: Conectar Sensor BME280 de Temperatura, Humedad y Presión a Arduino

• Conecta Alimentación 3V3 VCC (Rojo), Tierra (Negro), SDA (Verde) y SCL (Amarillo) al Módulo BME280 (Imagen 1)
• Conecta el otro extremo del cable de Tierra (Negro) al pin Tierra de la placa Arduino Nano (Imagen 2)
• Conecta el otro extremo del cable de Alimentación 3V3 VCC (Rojo) al pin de alimentación 3V3 de la placa Arduino Nano (Imagen 2)
• Conecta el otro extremo del cable SDA (Verde) a SDA/Pin analógico 4 de la placa Arduino Nano (Imagen 2)
• Conecta el otro extremo del cable SCL (Amarillo) a SCL/Pin analógico 5 de la placa Arduino Nano (Imagen 2)
• Imagen 3 muestra dónde están los pines Tierra, Alimentación 3V3, SDA/Pin analógico 4 y SCL/Pin analógico 5 del Arduino Nano

Paso 15: Conectar la Pantalla Nextion al Arduino

• Desconecta los cables de la Pantalla Nextion del Módulo Conversor USB a Serie TTL
• Conecta el Cable de Tierra (Negro) de la Pantalla Nextion al pin Tierra del Arduino Nano (Imagen 2)
• Conecta el Cable TX (Azul) de la Pantalla Nextion al pin RX(D0) del Arduino Nano (Imagen 2)
• Conecta el Cable RX (Amarillo) de la Pantalla Nextion al pin TX(D1) del Arduino Nano (Imagen 2)
• Imagen 4 muestra dónde están los pines Tierra, Alimentación 5V, RX/Pin digital 0 y TX/Pin digital 1 del Arduino Nano
• Conecta el Cable de Alimentación +5V (Rojo) de la Pantalla Nextion al pin de Alimentación 5V del Arduino Nano (Imagen 3)
• Imagen 4 muestra en Rojo dónde están los pines Tierra, Alimentación 5V, RX/Pin digital 0 y TX/Pin digital 1 del Arduino Nano (En Azul se muestran los pines conectados en el paso anterior)

Paso 16: ¡Y a Jugar!

¡Felicidades! Has completado el proyecto.

Imagen 1 muestra el proyecto conectado y encendido. Como ves en la imagen y en el Video, el Scope en la Pantalla Nextion trazará la Presión, la Temperatura y la Humedad del Módulo BME280.

En Imagen 2 puedes ver el diagrama completo de Visuino.

Adjunto está el proyecto Visuino que creé para este Tutorial. Puedes descargarlo y abrirlo en Visuino: https://www.visuino.com

También adjunto en el mismo zip el proyecto del Editor Nextion para la Pantalla Nextion.

FJE6Y04IWE4O3H6.zip