Construye la App Fridgeye con una Pantalla Nextion: Guía Paso a Paso

Componentes y suministros

Arduino UNO	×1
Fotorresistencia (LDR)	×1
Resistencia 3.3 kΩ	×1
Pantalla táctil Nextion Enhanced 3.5″	×1

Aplicaciones y servicios en línea

• Editor GUI de Nextion
• Arduino IDE
• GIMP (Editor de imágenes)

Sobre el proyecto

A mediados de año, unos estudiantes de diseño de Alemania lanzaron una campaña satírica en Kickstarter para prototipar el Fridgeye: un elegante sensor de luz para tu nevera. Dado que en Kickstarter suelen aparecer proyectos de hardware disparatados y el equipo se esforzó mucho en hacerlo parecer real, nadie sabía qué pensar. Fui fan del proyecto desde el principio, no porque necesitara saber qué hace la luz de mi nevera, sino porque el Fridgeye es un proyecto perfectamente acotado para iniciarse en el Internet de las Cosas (IoT) con potencial de crecimiento.

Construye el dispositivo Fridgeye

La mayor parte de esta guía se centra en ejecutar la app Fridgeye con la pantalla táctil Nextion conectada a un Arduino, pero primero necesitamos un dispositivo que detecte luz. No hay problema: en 5 minutos lo tendremos listo. Solo necesitas un Arduino, una protoboard, una fotorresistencia y una resistencia de 3.3 kΩ. Cablea como se muestra en el diagrama (ignora la pantalla por ahora).

Yo usé un ProtoShield con una mini protoboard para mantener todo compacto. Así quedó el mío:

Sube este sketch sencillo a tu Arduino y observa la salida serie en el Monitor Serial (9600 baudios):

void setup() { Serial.begin(9600); }
void loop() {
  int val = analogRead(A0);
  Serial.println(val);
  delay(500);
}

Verás valores enteros cada 0.5 segundos, desde ~0 (oscuridad total) hasta ~1024 (luz intensa). Tapa el sensor, enciende/apaga luces, prueba con la linterna del móvil.

¿Qué es la app Fridgeye?

La app Fridgeye es el complemento ideal para tu dispositivo. En el mundo IoT actual, un dispositivo sin app no tiene futuro. La app original solo mostraba el porcentaje de luz detectada (0% o 100%). Podemos hacerlo mejor usando los 99 valores intermedios.

Primeros pasos con la pantalla Nextion

Uso la pantalla Nextion Enhanced 3.5″, una pantalla táctil resistiva que gestiona los gráficos para que incluso un Arduino pueda controlarla vía serie. Su documentación puede ser difícil para principiantes, así que la explicaremos paso a paso.

Modelo de programación de la pantalla

A diferencia de las librerías gráficas tradicionales que dibujan píxeles en tiempo de ejecución, Nextion usa un enfoque tipo MVVM/MVC: la interfaz se diseña completamente en el editor y se almacena en la pantalla. El Arduino solo referencia elementos de la UI por IDs preasignados y recibe eventos táctiles. En lugar de dibujar, el Arduino actúa como director de vistas y controles.

Prepara la vista

Nuestra app Fridgeye solo necesita una página. Lo único que cambia en tiempo de ejecución es el porcentaje de luz; el logo, fondo y barra verde son estáticos. Creemos una imagen de fondo con esos elementos estáticos (en GIMP, 5 minutos). Importante: la imagen debe tener la resolución exacta de la pantalla (480×320 px para 3.5″).

Usando el editor de Nextion

Nota: El editor requiere .NET Framework y solo funciona en Windows (probado en VM Windows 10 en Mac).

1. Archivo → Nuevo. Asigna nombre y ubicación.
2. Selecciona tu dispositivo: Enhanced y modelo 3.5″. No pulses OK aún.
3. Pestaña DISPLAY → Dirección horizontal 90°.
4. Pulsa OK.
5. Herramienta Picture → añade elemento p0.
6. En panel Picture/Font, pestaña Picture.
7. Clic en + → selecciona tu imagen de fondo → Abrir.
8. En panel de atributos (derecha), doble clic en pic → elige la imagen → OK.
9. Herramienta Text → añade área de texto t0 (anota su id, lo necesitarás luego).
10. Arrastra t0 bajo "Light Status" y redimensiona.
11. Para fondo transparente: con t0 seleccionado, cambia atributo sta a crop image.
12. Doble clic en picc de t0 → selecciona la misma imagen de fondo → OK.
13. Cambia color de fuente (pco): yo usé RGB(125, 231, 191).
14. Menú Tools → Font Generator.
15. Altura 96, fuente Montserrat (o la que prefieras).
16. Nombre para la fuente → Generate Font → guarda en lugar accesible.
17. Cierra el generador → Yes para añadir la fuente (índice 0).
18. En atributo txt de t0 pon "100%" para previsualizar (clic fuera para actualizar).
19. Reubica t0 a tu gusto.
20. Compile (barra superior).

Si todo va bien, tendrás el archivo .tft compilado en %AppData%\Nextion Editor\bianyi.

Actualiza la pantalla

Dos formas de cargar el diseño en la pantalla:

• USB-TTL: Conecta directamente desde el IDE de Nextion y sube el .tft.
• Tarjeta microSD (FAT32): Copia el .tft (solo ese archivo) a la tarjeta, insértala en la pantalla apagada, enciende, espera a que termine la actualización, apaga, retira la tarjeta y vuelve a encender. Verás la app Fridgeye (falta el valor del sensor).

Ruta típica en Windows: C:\Users\[usuario]\AppData\Roaming\Nextion IDE\bianyi\[proyecto].tft (habilita archivos ocultos).

Enseña al Arduino a hablar Nextion

Instala la librería Nextion para Arduino:

1. Descarga la última versión (ITEADLIB_Arduino_Nextion).
2. Copia la carpeta completa a Documentos\Arduino\libraries (Windows) o ~/Documents/Arduino/libraries (Mac).
3. Si usas Arduino Mega, ve al paso 7.
4. Para Arduino UNO: abre NexConfig.h dentro de la librería.
5. Comenta: #define DEBUG_SERIAL_ENABLE y #define dbSerial Serial.
6. Cambia #define nexSerial Serial2 a #define nexSerial Serial (para usar RX/TX del UNO).
7. Reinicia Arduino IDE.
8. Nuevo sketch y pega el siguiente código:

#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());
}

void setup(void) {
  lastUpdate = millis();
  pinMode(SENSOR, INPUT);
  nexInit();
}

void loop(void) {
  nexLoop(NULL);
  if (millis() - lastUpdate > 100) {
    checkSensor();
    lastUpdate = millis();
  }
}

Explicación del código

• #include "Nextion.h": importa la librería.
• lastUpdate: controla la frecuencia de actualización de pantalla.
• SENSOR = A0: nombre legible para el pin analógico.
• NexText t0 = NexText(0, 2, "t0"): objeto que referencia el elemento de texto en la página 0, ID 2 (el que creamos en el editor).
• checkSensor(): lee el sensor, mapea 0-1024 a 0-100%, añade "%" y envía a la pantalla con t0.setText().
• setup(): inicializa variables, pin como entrada y la librería Nextion.
• loop(): atiende la librería con nexLoop() y cada 100 ms actualiza el sensor.

Conecta la pantalla

Sube el sketch al Arduino (flecha derecha o Ctrl+U) antes de conectar la pantalla (el UNO comparte líneas serie). Luego, apaga el Arduino, conecta la pantalla según el diagrama Fritzing y vuelve a encender. La app mostrará la lectura del sensor de luz.

Conclusión

¡Lo lograste! Quizás pienses: "¿Y esto para qué sirve? Tengo que meterlo en la nevera y no veré la pantalla". Tienes razón, nunca dije que fuera útil, solo divertido y educativo. Si quieres ir más allá, intenta separar el sensor de la pantalla (WiFi, Bluetooth, Zigbee, radio...). ¡Cuéntamelo en Twitter @KevinSidwar o por email (Kevin at sidwar dot com)! Si te gustó, quizá te interese el curso que estoy creando sobre el concepto Fridgeye. ¡Gracias por leer hasta el final! Que tengas un día genial.