1. Uno Arduino Placa compatible (uso Arduino Nano, porque tengo uno, pero cualquier otro estará bien)
2. Uno Módulo de sensor BME280
3. Uno Nextion Serial Interface Smart Display (Solía NX4024K032_11 pero cualquier otro debería funcionar también
4. 4 mujer-mujer cables de puente
5. Para programar la pantalla también necesitará un 5V USB a TTL Serial Converter Module

Paso 2: conecte la pantalla Nextion al módulo de comunicación serial USB

Para programar el Visualización de Nextion con el Editor de Nextion necesitas conectarlo con un Convertidor USB a TTL Serial a tu computador:

1. Conecta el Conector de cables Nextion al Monitor (Foto 1)
2. Si tu Módulo USB a Serial es configurable, asegúrese de que está configurado para proporcionar 5V de potencia (Foto 2) (En mi caso, necesitaba configurarlo con un puente de selección de potencia)
3. Conecta el Cable de tierra (Alambre negro) desde el Visualización de Nextion al Pin de tierra del Módulo convertidor de USB a TTL (Foto 2)
4. Conecta el Cable de alimentación (+ 5V) (cable rojo) desde el Visualización de Nextion al Pin de potencia (VCC / + 5V) del Módulo convertidor de USB a TTL (Foto 2)
5. Conecta el RX Wire (Cable amarillo) desde el Visualización de Nextion al Pin TX del Módulo convertidor de USB a TTL (Foto 2)
6. Conecta el TX Wire (Cable azul) desde el Visualización de Nextion al Pin RX del Módulo convertidor de USB a TTL (Foto 2)
7. Conecta el Módulo convertidor de USB a TTL a la computadora con un cable USB (Foto 3)

Paso 3: Inicie el Editor de Nextion y seleccione el tipo de pantalla y la orientación

Para programar el Visualización de Nextion, necesitaras Descargue e instale el editor de Nextion.

1. Iniciar el Editor de Nextion (Foto 1)
2. Desde el Menú seleccione |Expediente|Nuevo| (Foto 1)
3. En el "Guardar como", escriba el nombre del archivo del proyecto y seleccione una ubicación para guardar el proyecto (Foto 2)
4. Haga clic en el "Salvarbotón "Foto 2)
5. En el "Ajustes"diálogo, seleccione la Tipo de visualización (En mi caso NX4024K032_11) (Foto 3)
6. Haga clic en el "MONITOR"pestaña a la izquierda para mostrar el Ajustes de pantalla (Foto 4)
7. Seleccionar Horizontal Orientación para la pantalla (Foto 4)
8. Haga clic en el "DE ACUERDO"para cerrar el diálogo (Foto 4)

Paso 4: En el Editor de Nextion: agregue y configure el componente de forma de onda (alcance)

Necesitamos agregar un componente Scope y configurarlo para que tenga 3 canales para el Temperatura, Presióny Humedad:

1. En el "Caja de instrumento"a la izquierda, haga clic en el"Forma de onda" componente (Foto 1) para añadirlo al área de diseño (Foto 2)
2. Cambiar el tamaño del componente para llenar la pantalla (Foto 3)
3. En el "Atributo"caja de herramientas, establecer el valor de la"ch" atribuir a "3' (Foto 3)
4. En el "Atributo"caja de herramientas, establecer el valor de la"dir" atribuir a "De derecha a izquierda' (Foto 4)

Paso 5: en el editor de Nextion: cargue el proyecto en la pantalla de Nextion

1. Haga clic en el "Subirbotón "Foto 1)
2. En el "Cargar en el dispositivo Nextion"diálogo, haga clic en el"Irbotón "Foto 2) para iniciar la carga (Foto 3)
3. Cuando la carga finaliza (Foto 4), haga clic en el "Salida"para cerrar el diálogo.

Paso 6: inicia Visuino y selecciona el tipo de placa Arduino

Desde el Arduino Nano Sólo tiene un puerto serial, y se necesita para programar el Arduino, necesitarás programar el Arduino Nano antes de Visualización de Nextion está conectado.

Para comenzar a programar el Arduino, necesitarás tener el Arduino IDE instalado desde aquí:

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

los Visuino: http://www.visuino.com también necesita ser instalado.

1. comienzo Visuino como se muestra en la primera imagen
2. Haga clic en el "Herramientas"botón en el Arduino componente (Foto 1) en Visuino
3. Cuando aparezca el cuadro de diálogo, seleccione Arduino Nano como se muestra en Foto 2

Paso 7: En Visuino: agregue el componente de visualización de Nextion y el elemento de alcance a él

Para controlar la visualización de Nextion, necesitamos agregar el componente de visualización de Nextion en Visuino y luego agregarle un elemento para controlar el alcance:

1. Tipo "siguiente"en el cuadro Filtro de la caja de herramientas de componentes, seleccione el"Visualización de Nextion" componente (Foto 1), y suéltalo en el área de diseño.
2. Haga clic en el "Herramientas"botón de la DisplayNextion1 componente (Foto 2)
3. En el "Elementos"editor seleccione la opción"Alcance (ola)”, Y luego haga clic en"+"botón a la izquierda (Foto 2) para agregar Alcance elementoFoto 3)

Paso 8: En Visuino: agregue 3 canales al elemento de alcance y conecte la pantalla Nextion

A continuación tenemos que añadir canales al alcance.

1. En el inspector de objetos, haga clic en "…"botón al lado del valor del"Los canales"sub propiedad de la Alcance1 elementoFoto 1)
2. En el editor de canales selecciona "Canal”Elemento a la derecha, y luego haga clic en 3 veces sobre el "+"botón a la izquierda (Foto 2) para añadir 3 canales (Foto 3)
3. Cierra el "Los canales"y la pantalla"Elementos"diálogos
4. Conecta el "Afuera"pin de salida de la DisplayNextion1 componente a la a laEn"pin de entrada de la"Serie 0"canal del Arduino componente (Foto 4)

Paso 9: En Visuino: Agregar y configurar 3 componentes de rango de mapa

Los canales de Nextion Display Scope están diseñados para mostrar valores entre 0.0 y 1.0. Para mostrar la temperatura, la humedad y la presión, necesitamos convertir los valores a la 0.0 a 1.0 distancia. Podemos usar los componentes de Rango de Mapa para esto:

1. Tipo "mapa"en el cuadro Filtro de la caja de herramientas de componentes, seleccione el"Rango de mapa" componente (Foto 1), Y cae 3 de ellos en el area de diseño
2. Selecciona el MapRange1 componente (Foto 2)
3. En el inspector de objetos, expanda el "Rango de entrada" propiedad (Foto 2)
4. En el Inspector de objetos, establezca el valor de "Max"subproperidad de la"Rango de entrada"propiedad a"101000' (Foto 2) (Es posible que deba establecer un valor diferente, si la presión del aire aumenta su ubicación es muy diferente)
5. En el Inspector de objetos, establezca el valor de "Min"subproperidad de la"Rango de entrada"propiedad a"99000' (Foto 2) (Es posible que deba establecer un valor diferente, si la presión del aire aumenta su ubicación es muy diferente)
6. Selecciona el MapRange2 componente (Foto 3)
7. En el inspector de objetos, expanda el "Rango de entrada" propiedad (Foto 3)
8. En el Inspector de objetos, establezca el valor de "Max"subproperidad de la"Rango de entrada"propiedad a"100' (Foto 3)
9. En el Inspector de objetos, establezca el valor de "Min"subproperidad de la"Rango de entrada"propiedad a"-20' (Foto 3)
10. Selecciona el MapRange3 componente (Foto 4)
11. En el inspector de objetos, expanda el "Rango de entrada" propiedad (Foto 4)
12. En el Inspector de objetos, establezca el valor de "Max"subproperidad de la"Rango de entrada"propiedad a"100' (Foto 4)

Paso 10: En Visuino: conecte los componentes del rango del mapa a los canales de visualización de Nextion

1. Conecta el "Afuera"pin de salida de la MapRange1 componente a la "En"pin de entrada de la"Elements.Scope1.Channels.Channel1"elemento de la DisplayNextion1 componente (Foto 1)
2. Conecta el "Afuera"pin de salida de la MapRange2 componente a la "En"pin de entrada de la"Elements.Scope1.Channels.Channel2"elemento de la DisplayNextion1 componente (Foto 2)
3. Conecta el "Afuera"pin de salida de la MapRange3 componente a la "En"pin de entrada de la"Elements.Scope1.Channels.Channel3"elemento de la DisplayNextion1 componente (Foto 3)

Paso 11: En Visuino: Agregar y conectar el componente BME280

Necesitamos agregar un componente para leer los datos del módulo BME280:

1. Tipo "280"en el cuadro Filtro de la caja de herramientas de componentes, seleccione el"Temperatura de presión Humedad BME280 I2C" componente (Foto 1), y suéltalo en el área de diseño.
2. Mi Módulo BME280 tiene Dirección I2C de 118(0x76). Si sus módulos tienen una dirección diferente, deberá establecer el valor de "Dirección" propiedad (Foto 2)
3. Conecta el "Presión (Pa)"pin de salida de la PresiónTemperaturaHumidez1 componente a la a laEn"pin de la MapRange1 componente (Foto 2)
4. Conecta el "Temperatura"pin de salida de la PresiónTemperaturaHumidez1 componente a la a laEn"pin de la MapRange2 componente (Foto 3)
5. Conecta el "Humedad(%)"pin de salida de la PresiónTemperaturaHumidez1 componente a la a laEn"pin de la MapRange3 componente (Foto 4)
6. Conecta el "Afuera"pin de salida de la PresiónTemperaturaHumidez1 componente a la a laEn"pin de la I2C canal del Arduino componente (Foto 5)

Paso 12: En Visuino: agregue, configure y conecte el componente del generador de reloj

Podemos usar el proyecto tal como está, sin embargo, actualizará el Scope muy rápido todo el tiempo. Es mejor si el alcance se actualiza como ejemplo 10 veces por segundo. Para ello, agregaremos un componente de reloj para sincronizar la lectura del sensor y la actualización del Alcance.

1. Tipo "reloj"en el cuadro Filtro de la caja de herramientas de componentes, seleccione el"Generador de reloj" componente (Foto 1), y suéltalo en el área de diseño.
2. En el Inspector de objetos, establezca el valor de "Frecuencia"propiedad de la ClockGenerator1 a "10' (Foto 2)
3. Conecta el "Afuera"pin de salida de la ClockGenerator1 componente a la "Reloj"pin de entrada de la PresiónTemperaturaHumidez1 componente (Foto 3)

Paso 13: Generar, compilar y cargar el código Arduino

1. En Visuino, Prensa F9 o haga clic en el botón que se muestra en Foto 1 para generar el código Arduino y abrir el IDE de Arduino
2. En el Arduino IDE, haga clic en el Subir botón, para compilar y subir el código (Foto 2)

Paso 14: Conecte el sensor de temperatura, humedad y presión BME280 a Arduino

1. Conectar 3V3 VCC de potencia(cable rojo), Suelo(Alambre negro),ASD(Cable verde), y SCL(Cable amarillo), al módulo BME280 (Foto 1)
2. Conecte el otro extremo de la Cable de tierra(Alambre negro) a Suelo pin de la Arduino Nano tablero (Foto 2)
3. Conecte el otro extremo de la Cable de alimentación 3V3 VCC(cable rojo) al 3V3 pin de potencia de la Arduino Nano tablero (Foto 2)
4. Conecte el otro extremo de la Cable SDA(Cable verde) a SDA / Pin analógico 4 del Arduino Nano tablero (Foto 2)
5. Conecte el otro extremo de la Cable SCL(Cable amarillo) a SCL / Pin analógico 5 del Arduino Nano tablero (Foto 2)

6. Foto 3 muestra dónde están los Suelo, 3V3 Poder, SDA / Pin analógico 4y SCL / Pin analógico 5, alfileres de la Arduino Nano

Paso 15: Conecta la pantalla Nextion al Arduino

1. Desconecte el Visualización de Nextion cables de la Módulo convertidor de USB a TTL
2. Conecta el suelo
3. Desconecte el Visualización de Nextion cables de la Módulo convertidor de USB a TTL
4. Conecta el Cable de tierra (Alambre negro) desde el Visualización de Nextion al Pin de tierra del Arduino Nano (Foto 2)
5. Conecta el TX Wire (Cable azul) desde el Visualización de Nextion al RX (D0) pin del Arduino Nano (Foto 2)
6. Conecta el RX Wire (Cable amarillo) desde el Visualización de Nextion al Pin TX (D1) del Arduino Nano (Foto 2)
7. Foto 4 muestra dónde están los Suelo, 5V Poder, RX / Digital pin 0y TX / Digital pin 1, alfileres de la Arduino Nano
8. Conecta el Cable de alimentación de + 5V (cable rojo) desde el Visualización de Nextion al Pin de potencia de 5V del Arduino Nano (Foto 3)
9. Foto 4 muestra en rojo donde estan los Suelo, 5V Poder, RX / Digital pin 0y TX / Digital pin 1, pines del Arduino Nano (en azul se muestran los pines conectados en el paso anterior)

Paso 16: Y jugar …

¡Felicidades! Has completado el proyecto.

Foto 1 Muestra el proyecto conectado y encendido. Como se puede ver en la imagen, y en la Vídeo la Alcance sobre el Visualización de Nextion trazará el Presión, la Temperatura, y el Humedad desde el Módulo BME280.

En Foto 2 puedes ver el completo Visuino diagrama.

Adjunto está el Visuino proyecto, que he creado para este tutorial. Puedes descargarlo y abrirlo en Visuino:

También se adjunta en la misma cremallera la Editor de Nextion proyecto para el Visualización de Nextion.