Cree la aplicación Fridgeye con una pantalla Nextion

Acerca de este proyecto

En julio de este año, algunos estudiantes de diseño de Alemania lanzaron un Kickstarter satírico para crear un prototipo del Fridgeye; un hermoso sensor de luz para su refrigerador. Combine el hecho de que generalmente esperamos que aparezcan proyectos de hardware ridículos en Kickstarter con el esfuerzo que el equipo puso para que parezca real, no es de extrañar que la gente no esté segura de qué pensar. No es ningún secreto que fui fanático del proyecto desde el principio, pero no porque me muera por saber qué está haciendo la luz de mi refrigerador. Fridgeye es un proyecto con un alcance perfecto para abordar con potencial de crecimiento si está buscando iniciarse en el Internet de las cosas.

Construya el dispositivo Fridgeye

La mayor parte de esta publicación se centrará en hacer que la aplicación Fridgeye se ejecute con la pantalla táctil Nextion conectada a un Arduino, pero antes de llegar tan lejos, necesitamos un dispositivo real que pueda detectar la luz. No hay problema. Tomemos 5 minutos y construyamos uno. Prometo que no tardará ni un segundo más. Todo lo que necesita es un Arduino, una placa de pruebas, una fotorresistencia y una resistencia de 3.3K. Lo conectaremos así. No se preocupe por las conexiones de la pantalla todavía. Solo concéntrate en el Arduino, el resistor y el fotorresistor.

De hecho, tenía un ProtoShield por ahí; así que le pegué una mini placa de pruebas para poder guardar todo en un bonito paquete apilado con escudos, pero aún así tener la libertad de una placa de pruebas. Así es como se ve el mío.

Está bien, mentí, eso solo tomó unos 4 minutos. Pero puede usar el minuto que le queda para lanzar este boceto súper simple en su Arduino y ver la salida en serie del sensor de luz desde el IDE de Arduino.

  void setup () {Serial.begin (9600); } bucle vacío () {int val =analogRead (A0); Serial.println (val); retraso (500); }  

Después de programar el Arduino, abra Serial Monitor desde las Herramientas menú. Asegúrese de que la velocidad en baudios esté configurada en 9600. Debería ver un nuevo valor entero que representa el nivel de luz cada medio segundo. Adelante, tómate un minuto y juega con él. Cubra el sensor, encienda y apague las luces y tal vez incluso intente iluminarlo con la linterna de su teléfono inteligente. Observa cómo cambian los valores. Notarás que van desde casi 0 en completa oscuridad hasta casi 1024 cuando son bombardeados con luz.

¿Qué es la aplicación Fridgeye?

La aplicación Fridgeye es la compañera de confianza de su dispositivo Fridgeye. Atrás quedaron los días en que los dispositivos dejaban de funcionar. Todo el mundo sabe que en el gran mundo actual de IoT, su dispositivo no tiene ninguna posibilidad a menos que tenga una aplicación de algún tipo que lo acompañe. Es mantequilla de maní y mermelada, leche y cereales, guisantes y zanahorias.

La aplicación es bastante sencilla. Si echamos un vistazo a la página de Kickstarter, es literalmente solo el porcentaje de luz que el Fridgeye detecta y parece ser solo del 0 o del 100 por ciento.

Estoy seguro de que podemos hacerlo un poco mejor y usar algunos de esos 99 valores intermedios para que no se sientan mal. Vayamos directamente de los dibujos conceptuales y lo llevemos al mundo real.

Introducción a Nextion Display

Para este proyecto, estoy usando la pantalla táctil Nextion Enhanced 3.5 ". Es una pantalla táctil completamente resistiva que está diseñada para manejar el trabajo pesado del control gráfico para que incluso los dispositivos de gama muy baja como Arduino puedan hablar con él a través de un par de líneas de serie. Si bien la pantalla en sí es muy agradable, la documentación puede ser muy difícil de navegar, especialmente para los principiantes, así que vamos a recorrerla paso a paso.

Modelo de programación de pantalla

Si alguna vez ha programado un Arduino para usar una pantalla antes, probablemente haya usado algo así como una biblioteca de gráficos simple que abstrae los comandos de bajo nivel de dibujo en la superficie de la pantalla. Si bien son muy agradables, esas bibliotecas aún requieren que hagas mucho empuje de píxeles para dibujar cosas en la pantalla. Las pantallas de Nextion utilizan un enfoque diferente que le resultará muy familiar si está acostumbrado a los patrones MVVM o MVC. Esencialmente, la apariencia de la aplicación se configura completamente al principio y se almacena en la pantalla. En tiempo de ejecución, Arduino hace referencia a partes de la interfaz de usuario utilizando ID preasignados. El Arduino también obtiene información de la pantalla como eventos táctiles de la misma manera. Eso significa que en lugar de dibujar cosas en tiempo de ejecución, Arduino solo actúa como el conductor de las vistas y los controles. Si eso no tiene sentido, agárrate un poco más mientras lo superamos.

Preparar la vista

Debido a que nuestra aplicación Fridgeye es tan simple, solo requerirá una página. Sin embargo, la pantalla Nextion es capaz de manejar aplicaciones muy complejas con múltiples páginas y transiciones. Ya sea que esté diseñando una aplicación simple como la nuestra o una muy compleja, utilizará el editor de interfaz gráfica de usuario de Nextion. Es un editor WYSIWYG para la familia de pantallas Nextion y nos ayudará a conseguir nuestro diseño perfecto. Nuevamente, la documentación y la experiencia de comenzar pueden ser un gran desafío para los principiantes, pero una vez que lo domines, estarás diseñando diseños complejos rápidamente.

Antes de abrir el editor, necesitamos preparar un activo de fondo. Haciendo referencia a nuestra imagen simulada de arriba, podemos ver que lo único que cambiará en nuestra pantalla en tiempo de ejecución es el porcentaje de luz detectada. El logotipo, el color de fondo y la barra verde en la parte inferior son estáticos. Hagamos una imagen con esos elementos que podamos usar como fondo. Esto me tomó 5 minutos en GIMP y se ve así.

Lo importante que debe recordar aquí es hacer que la imagen tenga exactamente el tamaño que necesita para su pantalla. En mi caso, estoy usando la pantalla de 3.5 "que se traduce en 480 x 320 píxeles. Eso es exactamente lo grande que hice mi imagen en GIMP.

Usando el editor de Nextion

NOTA: Nextion Editor requiere .NET Framework y actualmente solo es compatible con Windows. Pude ejecutarlo sin problemas en una máquina virtual de Windows 10 a través de Parallels en mi Macbook. No lo probé en Wine en Linux.

Los siguientes pasos lo guiarán a través de la creación de nuestro diseño de aplicación simple en Nextion Editor. Con el editor de Nextion abierto, realice los siguientes pasos.

1. Archivo-> Nuevo . Dé a su proyecto un nombre y una ubicación en su máquina.

2. Aparecerá un cuadro de diálogo que le pedirá que seleccione su dispositivo. En mi caso, seleccioné Mejorado y el número de modelo de 3.5 ". NO HAGA CLIC EN ACEPTAR . Continúe con el paso 3.

3. Haga clic en PANTALLA pestaña en la esquina superior izquierda del cuadro de diálogo. Seleccione la dirección de visualización 90 horizontal.

4. Ahora puede hacer clic en Aceptar.

5. Haga clic en Imagen . de la Caja de herramientas de la izquierda. Esto agregará un elemento p0 a su esquema.

6. En la Imagen / Fuente panel en la parte inferior izquierda asegúrese de tener la Imagen pestaña seleccionada.

7. Haga clic en + símbolo.

8. Navegue hasta la imagen que creamos en GIMP que proporciona el fondo para nuestra aplicación y haga clic en Abrir .

9. En el panel de atributos de la derecha, haga doble clic en la imagen área de valor de atributo. Se abrirá un cuadro de diálogo de selección de imágenes con el fondo de nuestra aplicación.

10. Seleccione el fondo de la aplicación y haga clic en Aceptar . .

11. Haga clic en Texto . desde la Caja de herramientas. Esto agregará un área de texto llamada t0 en la esquina superior izquierda de nuestra pantalla. Anote el valor del id atributo ya que lo necesitará más adelante cuando programe el Arduino.

12. Arrastre el área de texto a la ubicación deseada debajo de las palabras "Estado de luz" y cambie su tamaño para que ocupe un área grande.

13. Para arreglar el fondo blanco, necesitamos configurar el fondo del área de texto para que sea una versión recortada de nuestro fondo principal. Con t0 seleccionado cambiar el personal atributo dentro del panel de atributos de color sólido a recortar imagen .

14. Haga doble clic en picc valor de atributo para el área de texto t0 . Esto abrirá el cuadro de diálogo de selección de imágenes. Vuelve a seleccionar la imagen de fondo principal y haz clic en Aceptar . . Esto tiene el efecto de hacer que el fondo del área de texto sea transparente.

15. Cambiar el pco atributo de t0 para ser del color de fuente que desee. Elegí un color personalizado de rojo:125, verde:231, azul:191.

16. Desde las Herramientas seleccione el menú Generador de fuentes.

17. En el cuadro de diálogo Font Creator, seleccione una altura de 96 y seleccione la fuente que le gustaría usar. La mía es Montserrat.

18. Asigne un nombre a la fuente y haga clic en Generar fuente . Asegúrese de guardarlo en un lugar que sea fácil de recordar. Lo necesitaremos de nuevo en un segundo.

19. Cierre el cuadro de diálogo Creador de fuentes. Se le preguntará si desea agregar la fuente generada. Haga clic en Sí . . Esa fuente ahora se denomina índice de fuente 0.

20. Agregue un poco de texto ficticio a t0 para ver cómo se verá cambiando el atributo txt de t0 al 100%. Tiene que hacer clic fuera del área de valor de atributo para que el área del editor se actualice.

21. Vuelva a colocar t0 a tu gusto.

22. Haga clic en Compilar . en la barra de herramientas superior.

Si todo ha ido bien, ahora tendrá un archivo TFT compilado listo para usar ubicado en % AppData% \ Nextion Editor \ bianyi .

Actualizar la pantalla

Hay un par de formas de colocar nuestro nuevo y elegante diseño en la pantalla. Si tiene un convertidor de USB a TTL, puede conectarse directamente a su pantalla desde el IDE de Nextion y cargar el archivo TFT compilado directamente. De lo contrario, deberá copiar el archivo TFT compilado a una tarjeta micro SD que se puede insertar directamente en una ranura en la parte posterior de la pantalla. La tarjeta SD DEBE estar formateada en FAT32 y debe tener un solo archivo TFT o se encontrará con errores. Nextion Editor coloca los archivos compilados correctamente en el siguiente directorio de Windows.

  C:\ Users \ [su nombre de usuario] \ AppData \ Roaming \ Nextion IDE \ bianyi \ [nombre del proyecto] .tft  

Tenga en cuenta que es posible que deba habilitar la visualización de archivos ocultos ya que la carpeta AppData está marcada como oculta.

Con el archivo TFT en la tarjeta SD, realice los siguientes pasos.

• Asegúrese de que la pantalla esté apagada

• Inserte la tarjeta SD en la pantalla

• Encienda la pantalla. La pantalla mostrará que se está actualizando.

• Una vez que finalice la actualización, apague la pantalla

• Retire la tarjeta SD. No olvide este paso ya que la pantalla no ejecutará su vista con la tarjeta SD aún insertada.

• Encienda la pantalla nuevamente. Ahora debería ver nuestra hermosa aplicación Fridgeye. Lo único que falta es el valor del sensor de luz.

Enséñele a Arduino cómo hablar Nextion

Ahora que la pantalla tiene la vista de nuestra aplicación, necesitamos escribir un código en el Arduino para que pueda interactuar con él y establecer el porcentaje de estado de la luz.

Instalar la biblioteca de Nextion

1. Descargue la última versión de la biblioteca Nextion Arduino.

2. Copie el ITEADLIB_Arduino_Nextion completo carpeta a la carpeta de bibliotecas de Arduino. En Windows, estará ubicado en:

  C:\ Users \ [your_username] \ Documents \ Arduino \ libraries  

En Mac, estará ubicado en:

  ~ / Documents / Arduino / libraries  

3. Si está utilizando un Arduino Mega, vaya al paso 7.

4. Si usa un Arduino Uno, abra NexConfig.h archivo ubicado en el ITEADLIB_Arduino_Nextion carpeta que acaba de copiar en la carpeta de bibliotecas de Arduino.

5. Comente las siguientes líneas:

  #define DEBUG_SERIAL_ENABLE #define dbSerial Serial  

6. Cambie el #define para nexSerial para ser Serial en lugar de Serial2. Esto nos permite conectar la pantalla directamente a las líneas RX y TX en el UNO.

  #define nexSerial Serial  

7. Reinicie el IDE de Arduino si ya estaba abierto. Esto hará que la biblioteca esté disponible a través de los menús.

8. Desde el Archivo menú seleccione Nuevo para crear un nuevo boceto.

9. Reemplace el código de boceto predeterminado con lo siguiente:

  #include "Nextion.h" long lastUpdate; int SENSOR =A0; NexText t0 =NexText (0, 2, "t0"); void checkSensor () {int val =map (analogRead (SENSOR), 0, 1024, 0, 100); String displayText =String (val) + "%"; t0.setText (displayText.c_str ()); } configuración nula (nula) {lastUpdate =millis (); pinMode (SENSOR, ENTRADA); nexInit (); } bucle vacío (vacío) {nexLoop (NULL); if (millis () - lastUpdate> 100) {checkSensor (); lastUpdate =millis (); }}  

Tutorial de código

Si su Arduino foo le permite comprender ese boceto, puede omitir esta sección por completo. Eres increíble. Si eres nuevo en el código Arduino, no dejes que esto te asuste. Echemos un vistazo a este boceto pieza por pieza.

  #include "Nextion.h"  

Esto indica nuestra intención de utilizar la biblioteca Nextion. No necesitamos hacer nada más, ya que el IDE de Arduino sabe dónde encontrarlo, ya que lo colocamos en la carpeta de bibliotecas.

  long lastUpdate;  

Esta es simplemente una variable llamada lastUpdate eso nos permitirá controlar la frecuencia con la que actualizamos la pantalla más adelante en el boceto.

  int SENSOR =A0;  

Aquí solo le estamos dando al pin A0 en nuestro Arduino un nombre más legible en código que podemos usar para hacer referencia a él más adelante. Esto realmente no importa en este boceto, ya que es el único pin de E / S con el que estamos tratando, pero es un buen hábito, ya que será útil cuando tenga muchas cosas conectadas a su Arduino.

  NexText t0 =NexText (0, 2, "t0");  

Aquí estamos creando un objeto en nuestro boceto que se refiere al elemento de texto que creamos en la GUI. Recuerde que lo llamamos " t0 ". El primer argumento es el número de página que es 0 en nuestro caso y el segundo argumento es el ID del componente que recordamos de antes es 2. Si olvidó escribirlo, simplemente regrese al Editor de Nextion, haga clic en t0 elemento y busque en el panel de atributos para ver el ID.

  void checkSensor () {int val =map (analogRead (SENSOR), 0, 1024, 0, 100); String displayText =String (val) + "%"; t0.setText (displayText.c_str ()); }  

El checkSensor () es la esencia de nuestra aplicación. En la primera línea, en realidad estamos realizando dos operaciones. Primero llamamos analogRead (SENSOR) lo que nos da un valor entero que representa el voltaje presente en el pin A0 (recuerde que lo llamamos SENSOR). En un Arduino UNO, la llamada analogRead devolverá un valor de 0 a 1024 pero queremos mapearlo en el rango de 0 a 100 por ciento. No hay problema. El IDE de Arduino nos tiene cubiertos con un mapa () incorporado función que nos permite especificar un valor seguido de un [desde rango] y [hasta rango]. Luego cambiamos ese valor int a un tipo String y agregamos un signo%. El último paso es llamar a setText () en nuestro NexText t0 objeto que creamos anteriormente.

  configuración vacía (void) {lastUpdate =millis (); pinMode (SENSOR, ENTRADA); nexInit (); }  

Esta es la función de configuración estándar de Arduino que se ejecuta antes que cualquier otro código de boceto. Inicializamos lastUpdate a ahora mismo llamando a millis () , configure nuestro pin A0 para que sea una entrada e inicialice la biblioteca Nextion.

  bucle vacío (vacío) {nexLoop (NULL); if (millis () - lastUpdate> 100) {checkSensor (); lastUpdate =millis (); }}  

En la programación de Arduino, el loop () La función se ejecuta continuamente hasta que el Arduino se apaga y se vuelve a encender o se restablece de alguna otra manera. Tenemos que mantener continuamente la biblioteca Nextion llamando a nexLoop () . El parámetro NULL simplemente significa que en nuestro ejemplo no estamos escuchando ningún evento táctil de la pantalla. Luego tenemos una verificación muy simple para ver si han pasado más de 100 milisegundos desde la última lectura de nuestro sensor. Si es así, llamamos a nuestro checkSensor () y configure el lastUpdate variable a ahora mismo con otra llamada a millis () .

Eso es. Menos de 30 líneas de código es todo lo que se necesita para interactuar con nuestra pantalla Nextion desde un Arduino.

Conecte la pantalla

Antes de conectar la pantalla a nuestro Arduino, sigamos adelante y empujemos nuestro código de boceto desde el IDE haciendo clic en la pequeña flecha hacia la derecha en la barra superior o usando el atajo Ctrl + U.

La pantalla no se puede conectar durante la carga porque en Arduino UNO el IDE necesita las mismas líneas seriales que usa la pantalla para impulsar nuevos bocetos. Si está utilizando un Arduino Mega en su lugar, no necesita preocuparse por eso.

Ahora, con el código enviado al Arduino, conectemos la pantalla. No olvide quitar la energía del Arduino primero. Consulte el diagrama de Fritzing para obtener información sobre la conexión.

Cuando encienda el Arduino, haga una copia de seguridad de su aplicación Fridgeye debería mostrarle felizmente la lectura actual del sensor de luz.

Terminando

¡Uf! Lo hicimos. Por lo tanto, es posible que se pregunte en este punto con un toque de rabia en su tono "¿DE QUÉ ES ESTO? Tengo que poner todo en mi refrigerador para que ni siquiera pueda ver la pantalla". Eres un alumno muy astuto, pero nunca dije que nada de esto fuera útil, solo muy divertido de construir y aprender.

Sin embargo, si te hace sentir mejor, te desafío a que lleves este proyecto un paso más allá y descubras cómo podrías poner el sensor en tu refrigerador y tener la pantalla en otro lugar. Hay muchas formas de lograr ese objetivo. WiFi, Bluetooth, Zigbee y transmisores de radio genéricos son solo algunos de los que me vienen a la mente. Muchas opciones y muchas cosas que aprender. Si intenta hacerlo, comuníquese conmigo en Twitter @KevinSidwar o envíeme un correo electrónico (Kevin at sidwar dot com). Me encantaría conocer sus aventuras en IoT. Hasta la próxima, feliz piratería.

Si disfrutó de mi publicación y desea obtener más información sobre cómo comenzar a utilizar IoT, es posible que le interese un curso que estoy creando actualmente en torno al concepto Fridgeye . Si no, realmente le agradezco por leer hasta el final. Espero tengas un muy buen dia. Te lo mereces.

Código

Aplicación Arduino Sketch para Fridgeye

Este es el código que se ejecuta en Arduino para que pueda comunicarse con la pantalla Nextion y mostrar el lector del sensor de luz actual.

Esquemas

Este es un diagrama de cableado de cómo conectar el Arduino, la fotorresistencia, la resistencia y la pantalla para crear este proyecto.

Robot asistente doméstico autónomo Bluetooth serial genérico con Win 10 IoT-Core RPI2