Magic Mirror en Raspberry Pi: Guía Completa de Instalación

Construir un Magic Mirror es uno de los proyectos más populares en Raspberry Pi, pero eso no significa necesariamente que esté bien documentado. Después de intentarlo yo mismo, noté que la documentación oficial es un poco compleja para que los principiantes la sigan, y otras guías no ayudan tanto. Por eso decidí escribir la guía definitiva de instalación para configurar un Magic Mirror. Si estás interesado en este proyecto y necesitas más información, ¡sigue leyendo!

En esta guía, te daré una breve introducción sobre el proyecto Magic Mirror, luego veremos el mejor método de instalación, y después te explicare la configuración que no es especialmente intuitiva. También te daré algunos consejos para optimizar tu configuración en general.

Eres bienvenido a usar esta guía como un buffet y saltarte partes si ya las conoces o estás buscando algo específico. ¡Empecemos!

Introducción al proyecto Magic Mirror

Como jugar juegos clásicos en Retropie (en inglés) o ver Netflix con Kodi (en inglés), construir un Magic Mirror es un proyecto que ayudó a popularizar el Raspberry Pi. Es una realización tan hermosa una vez completada, y aún es algo futurista para poner en tu casa, es un proyecto que despertó el interés de muchos creadores.

Michael Teeuw es el inventor original del proyecto Magic Mirror, y puedes encontrar muchos recursos sobre él en su sitio web. Como aprenderemos más tarde, construir un Magic Mirror no es tan complicado como podrías pensar, pero la idea fue realmente innovadora en su momento.

De todos modos, en resumen, un “magic mirror”, es como cualquier espejo, pero le agregarás datos interesantes, como un reloj, tu calendario o el pronóstico del tiempo para los próximos días. Es “mágico” porque es una mezcla entre un tablero de TV y un espejo, conectado a numerosas APIs para mostrar todo lo que te interesa, nada como el de Harry Potter 🙂

Si estás leyendo esto, estoy seguro de que ya sabes cómo se ve un Magic Mirror, así que vamos directo a la parte interesante del contenido.

Instalar el software Magic Mirror en un Raspberry Pi

Cómo construir un marco para el Magic Mirror

Si planeas construir un Magic Mirror y tenerlo en una de tus paredes en casa, la forma clásica de hacerlo es construir un marco personalizado, luego colocar un televisor y un Raspberry Pi detrás de un vidrio de doble cara (como este en Amazon).

Para ser claro, esta guía no se trata de esto. Pero puedo ayudarte con un gran video que te muestra todos los pasos para construir un Magic Mirror con un marco de madera:

Si, como yo, no eres un gran manitas, puedes usar el software Magic Mirror como un “Magic Dashboard”, sin el marco y el espejo. Por ejemplo, podría ser un gran uso de el RasPad 3 que probé aquí (en inglés). Obtendrás el mismo resultado de una manera mucho más fácil.

El objetivo principal de este artículo es el darte consejos para ahorrar tiempo con la instalación del software, lo cual aprenderemos en detalle ahora.

Configurar Magic Mirror en tu Raspberry Pi

Varias maneras de instalar el Magic Mirror en Raspberry Pi

En la guía de instalación oficial para el Magic Mirror, encontrarás varios métodos para configurarlo en tu Raspberry Pi:

• Magic Mirror OS: podría parecer la forma más fácil de hacerlo (flashearlo, y listo), pero no es el método que recomiendo.
• Docker image: Docker es a menudo una excelente solución para instalar nuevos servicios, ya que mantiene todo en un contenedor seguro, protegiendo la aplicación y tu sistema. Nuevamente, no es mi método favorito para el Magic Mirror.
• Random installation scripts: Métodos que suelen ser “fáciles” pero donde no tienes control sobre lo que se instalará.

Todos estos son métodos que podrían parecer fáciles, pero encuentro que una vez instalados, el mantenimiento es más complicado. Si solo quieres verificar rápidamente cómo funciona en un modelo específico de Raspberry Pi o pantalla, adelante, toma la imagen de Magic Mirror OS y flashea tu tarjeta SD. Funcionará directamente.

Pero si quieres el mejor método en general a largo plazo, sigue leyendo esta guía.

Instalación de Magic Mirror

En general, el mejor método para instalar Magic Mirror en un Raspberry Pi es la instalación manual. Después de instalar NodeJS, puedes clonar el repositorio de GitHub e instalar la aplicación con npm.

Aquí están los pasos necesarios para instalar Magic Mirror en tu Raspberry Pi :

• Instalar Raspberry Pi OS con un entorno de escritorio.
  Probablemente funcione en otras distribuciones también, pero solo lo he probado en Raspberry Pi OS.
  Puedes encontrar mi guía de instalación aquí si la necesitas.
• Descargar e instalar NodeJS:
  curl -sL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt install -y nodejs
  
  Asegúrate de verificar los requisitos para la última versión de Magic Mirror, ya que la versión de NodeJS requerida cambiará con el tiempo.
  Tengo una guía sobre Node.js en Raspberry Pi (en inglés) si quieres saber más sobre este interesante lenguaje.
• Una vez hecho, clonar el repositorio de GitHub para descargar el código fuente de Magic Mirror en tu dispositivo:
  git clone https://github.com/MichMich/MagicMirror
cd MagicMirror
  
• Finalmente, instalar la aplicación con:
  npm install
• Copiar el archivo de configuración de ejemplo:
  cp config/config.js.sample config/config.js
  Voy a explicar todo sobre este archivo en la próxima sección.
• Y comenzar la aplicación:
  npm run start

Eso es todo, deberías ver la pantalla predeterminada de Magic Mirror en tu pantalla (fecha, clima, noticias y un cumplido aleatorio).

Ahora estás listo para pasar a la siguiente parte, donde te explicaré cómo configurar y personalizar esta pantalla (y arreglar el widget del clima).

Guía de configuración de Magic Mirror

Cómo salir de la pantalla de Magic Mirror

Antes de continuar, hay algo que necesitas saber: cómo cerrar la aplicación Magic Mirror.
Por defecto, se abre en pantalla completa, y no tienes forma de salir.

Para salir de la pantalla de Magic Mirror, presiona “ALT” en tu teclado, se mostrará el menú superior. Luego ve a File > Quit para cerrar la aplicación (o usa CTRL+Q).

Si quieres configurar el Magic Mirror directamente desde el mismo Raspberry Pi, necesitas cerrar todo antes de continuar.

Nota: Parece que no funciona en Bookworm, así que puedes presionar la tecla “Win” (o la tecla Raspberry Pi en Pi 400) y cerrarlo desde allí.

Cómo funciona la configuración de Magic Mirror

La configuración de Magic Mirror es la que creaste durante la instalación. La ubicación del archivo es probablemente algo como: “/home/$USER/MagicMirror/config/config.js”. Ábrelo con tu editor favorito (nano por ejemplo), y echa un vistazo al contenido del archivo.

La estructura del archivo de configuración:

La parte superior del archivo de configuración incluye las variables generales de tu instalación: dirección IP, puerto, idioma y ubicación, formato de hora, etc. Estos ajustes serán utilizados por todos los widgets en tu pantalla, así que tómate el tiempo para cambiarlos si es necesario. Por ejemplo, puedes establecer “timeformat” a 12 si lo prefieres y cambiar el idioma a “fr”, “de” o lo que prefieras.

Luego hay un gran bloque con todos los widgets listados. Los widgets se llaman “modules” en la configuración de Magic Mirror:

La mayoría de los módulos tienen un nombre y una posición establecida. Por ejemplo, en esta captura de pantalla, podemos ver que por defecto hay un módulo “clock” configurado para mostrarse en la parte superior izquierda de la pantalla.

Algunos módulos incluidos en tu configuración solo tienen establecido el parámetro de posición para indicar dónde mostrarlo en la pantalla, pero otros tienen muchas más opciones, como el del calendario, que obtendrá una URL para descargar los próximos días festivos.

Un ejemplo sencillo: cambiar el feed de noticias.

Veamos un ejemplo para ver cómo funciona. En la parte inferior de la pantalla, tienes un feed de noticias. Toma los últimos artículos del New York Times y muestra el título y la fecha de publicación. Tal vez te interese más las noticias sobre Raspberry Pi, y puedes editar las opciones de los módulos para mostrar los últimos tutoriales en tu sitio web favorito:

• Abrir el archivo de configuración con cualquier editor, por ejemplo:
  nano /home/$USER/MagicMirror/config/config.js
• Encontrar el módulo de newsfeed:
  
• Cambiar el título y la URL del feed, con algo así como:
  
• Reiniciar tu servicio de Magic Mirror:
  cd /home/$USER/MagicMirror
npm run start

Eso es todo, ahora verás noticias mucho más interesantes en tu pantalla.

Espero que tengas una mejor comprensión de cómo puedes editar fácilmente el archivo de configuración predeterminado para adaptarlo a tus necesidades. Eres bienvenido a cambiar la configuración, eliminar módulos inútiles o cambiar las posiciones de los módulos como desees.

Crear copias del archivo de configuración como respaldo regularmente es probablemente una buena idea, en caso de que rompas algo mientras haces estos cambios.

Acceso remoto al “Magic Mirror”

Como con la mayoría de los proyectos, encuentro más fácil hacer los cambios en este archivo de configuración desde mi computadora (vía SSH). Y de hecho, hay una manera de ver los resultados en tu navegador en lugar de en la pantalla de la Raspberry Pi. De esta manera, si tienes una pantalla dual, puedes editar la configuración en una y ver el resultado en la otra.

Si estás interesado en hacer lo mismo, aquí está cómo hacerlo:

• Abrir el archivo de configuración:
  nano /home/$USER/MagicMirror/config/config.js
• Editar la línea “address”. Puedes poner la dirección IP actual de la Raspberry Pi, o “0.0.0.0” si quieres que funcione incluso si la Raspberry Pi cambia a otra IP en tu red. En mi caso, prefiero la segunda opción, ya que no uso una dirección IP estática:
  address: "0.0.0.0"
• El puerto predeterminado es 8080. Solo necesitas cambiarlo si ya tienes un servicio que lo utiliza. Si tu configuración de Raspberry Pi está dedicada a este proyecto, puedes dejarlo así.
• Luego también necesitas cambiar la línea “ipWhitelist” para permitir que tu computadora tenga acceso remoto. Igual que antes, si tu computadora tiene una IP estática, solo agrégala a la lista. Si no, permite todas las direcciones IP.
  Con una IP estática: ipWhitelist: ["192.168.1.10", "127.0.0.1", "::ffff:127.0.0.1", "::1"]
  Permitir todas: ipWhitelist: []

Eso debería ser suficiente por ahora. Puedes habilitar HTTPS si quieres, pero necesitarás un certificado, no es necesario si es solo para ver tus cambios en tiempo real.

Reinicia la aplicación Magic Mirror y verifica que puedes acceder a ella desde tu computadora, abriendo la URL http://<IP>:8080 en tu navegador. Si no sabes cómo encontrar la dirección IP de tu Raspberry Pi, haz clic en este enlace para leer mi tutorial sobre el tema.

Usar esto es más conveniente, y también puede ayudar a depurar la mayoría de los problemas, como errores de JavaScript, usando las herramientas de desarrollador en tu navegador.

Arreglar el widget del clima en tu Magic Mirror

Por defecto, hay un widget del clima habilitado en la parte superior derecha de la pantalla del Magic Mirror, pero no funciona. Muestra “Loading…” todo el tiempo. Aquí está cómo arreglarlo:

• Ir a OpenWeatherMap y crear una cuenta.
• Una vez que hayas iniciado sesión, hacer clic en “API keys” y generar una nueva API key para tu proyecto Magic Mirror.
• Obtendrás una cadena aleatoria de caracteres. Cópiala.
• Abrir el archivo de configuración y encuentra esta parte:
  
  Pon tu clave API en ambas ubicaciones. La primera es para el clima actual, la segunda para el pronóstico del clima.
• Reiniciar tu aplicación Magic Mirror para aplicar los cambios.

El clima de Nueva York ahora debería mostrarse en tu pantalla. Para mostrar el clima de otra ubicación, cambia los dos campos “location” y “locationID” para ambos módulos. Puedes encontrar los valores para configurar descargando y extrayendo este archivo.

Este es un archivo grande con todas las ciudades del mundo, por lo que es mejor hacer esto en una terminal o vía SSH:

• Descargar el archivo en la Raspberry Pi:
  wget https://bulk.openweathermap.org/sample/city.list.json.gz
• Extraer el archivo:
  gunzip city.list.json.gz
• Usa grep para encontrar rápidamente el ID correspondiente, algo así debería funcionar:
  grep "Boise" -B1 -A2 city.list.json
• Probablemente obtendrás varios resultados, por eso mantengo dos líneas debajo del nombre de la ciudad, para obtener el campo de estado y país.
  Incluso puedes aumentar eso para obtener la longitud y latitud.

Escoge el ID correspondiente a tu ciudad y cambia el valor en el archivo de configuración. Después de reiniciar el Magic Mirror, debería actualizarse con el pronóstico del tiempo correcto.

Cambiar posiciones de widgets en tu Magic Mirror

Como has visto, cada módulo está configurado para mostrarse en una ubicación específica, pero podría ser complicado entender la lógica detrás de esto. Así que, aquí están las ubicaciones posibles que puedes usar:

• top_bar y bottom_bar: región completa de ancho superior e inferior.
• top_left, top_center y top_right: justo debajo de la barra superior, con tres columnas.
• bottom_left, bottom_center y bottom_right: justo encima de la barra inferior, con tres columnas.
• upper_third, middle_center y lower_third: son las tres regiones en el medio de la pantalla

Si no está lo suficientemente claro, puedes encontrar una gran explicación visual en los foros de Magic Mirror (aquí).

Inicio automático de Magic Mirror

Si tienes la intención de usar tu Magic Mirror como un dispositivo independiente, probablemente necesites que se inicie automáticamente cuando la Raspberry Pi arranque. Esto es especialmente útil si enmarcas tu Magic Mirror en un marco de madera con vidrio de doble vista.

Para hacer esto, la forma más fácil que encontré es usar pm2. PM2 es un administrador de procesos para aplicaciones NodeJS. Es un poco como los comandos systemd o service a los que puedes estar acostumbrado en Linux, pero para procesos NodeJS. Aquí está cómo usarlo:

• Instalar PM2 con el comando:
  sudo npm install -g pm2
• Configurar PM2 para que se inicie automáticamente al arrancar:
  pm2 startup
• Crear un script para iniciar la aplicación Magic Mirror:
  nano /home/$USER/mm.sh
• Pegar estas líneas en este archivo:
  cd ./MagicMirror
DISPLAY=:0 npm start
• Guardar y salir (CTRL+X)
• Añadir el permiso de ejecución:
  chmod+x mm.sh
• Iniciar el Magic Mirror con PM2:
  pm2 start mm.sh
• Una vez iniciado, guardar el estado actual con:
  pm2 save
Al hacer esto, se iniciará automáticamente al arrancar.

Una vez hecho, ahora usarás PM2 para gestionar la aplicación Magic Mirror. Obtienes acceso a comandos útiles como:

• Reiniciar Magic Mirror (después de cualquier cambio de configuración):
  pm2 restart mm
• Cerrar la aplicación:
  pm2 stop mm
Será “start” para reiniciarlo después de eso:
  pm2 start mm.sh
• Mostrar los registros recientes de Magic Mirror:
  pm2 logs mm
  Esto es realmente útil para solucionar cualquier error o si la pantalla ya no aparece después de un cambio de configuración.

Instalando nuevos módulos en tu instalación de Magic Mirror

Todo esto ya es bastante agradable, tienes un panel ordenado con la fecha/hora, calendario, clima y fuente de noticias. Pero es solo el comienzo.

Introducción a los módulos de Magic Mirror

El Magic Mirror es una aplicación modular, donde puedes descargar e instalar nuevos widgets de la comunidad. La mayoría de ellos están listados aquí, pero también puedes encontrar módulos de desarrolladores aleatorios en GitHub por aquí y por allá. Incluye cosas como:

• Mostrando chistes.
• Valores de criptomonedas y acciones en tiempo real.
• Mostrando los horarios semanales para estudiantes.
• Conexión a la mayoría de APIs abiertas como apps de Google, compañías de transporte o servicios meteorológicos.

Cualquier cosa que puedas necesitar probablemente ya esté disponible como un módulo para tu panel. Y si no es así, puedes crear tus propios módulos con un poco de JavaScript.

Gestor de módulos de Magic Mirror

Es posible descargar e instalar cada módulo por separado, accediendo al proyecto en GitHub de cada uno, leyendo la documentación y siguiendo los pasos de configuración. Pero me parece un poco complicado, y como existe un gestor de módulos, creo que es buena que intentes usarlo primero.

El gestor de módulos se llama “mmpm” y puede instalarse en tu Raspberry Pi siguiendo estos pasos:

• Instalar los prerrequisitos:
  sudo apt install libffi-dev nginx-full -y
• Luego el paquete en sí:
  python3 -m pip install --upgrade --no-cache-dir mmpm
  En Bookworm, necesitas hacer este comando en un entorno virtual (como se explica aquí, en inglés).
• Ejecutar el instalador:
  mmpm --guided-setup
Te hará varias preguntas sobre tu instalación actual y cómo planeas usar el gestor de módulos. No hay respuestas incorrectas. Sigue el asistente y responde todo (la mayoría de las preguntas se responden con “yes” o “no”).
• Finalmente, ejecutar este comando para agregar el comando mmpm a tu shell:
  echo 'export PATH="$PATH:$HOME/.local/bin"' >> ~/.bashrc
  Necesitas reiniciar la terminal (o reconectar tu sesión SSH) para usar los comandos que te doy justo después.

Una vez hecho, puedes usar esta herramienta con los siguientes comandos. Se parece a apt, así que no deberías perderte con esto:

• mmpm search <string>: Un motor de búsqueda para encontrar módulos correspondientes (como apt search).
  mmpm search calendar
• mmpm list: Lista todos los paquetes. Hay opciones disponibles para filtrar esta lista, usa –help para verlas.
  mmpm list -a #List all
mmpm list --help #Show the help
mmpm list -i #List installed modules
• mmpm install <name>: Instalar un nuevo paquete.
  mmpm install random_quotes
• mmpm -h: Obtener más ayuda sobre esta herramienta.
  

Cómo instalar un nuevo módulo de Magic Mirror con mmpm

Para asegurarnos de que todo esté claro, tomemos un ejemplo. Supongamos que quieres mostrar una cita inspiradora en la pantalla de tu Magic Mirror. Aquí están los pasos fáciles a seguir para hacerlo:

• Buscar el nombre de un módulo que haga esto:
  mmpm search quotes
• Hay dos resultados disponibles, tomemos el módulo random_quotes:
  mmpm install random_quotes
  
• Una vez hecho, lo único que queda por hacer es editar tus archivos de configuración y añadir estas líneas en la sección “modules”:
  {
module: "random_quotes",
position: "bottom_bar"
},

• Reiniciar el Magic Mirror con:
  pm2 restart mm

Eso es todo, ahora obtendrás una cita aleatoria en la parte inferior de tu pantalla.

La mayoría de los módulos tendrán opciones adicionales que puedes añadir. Por ejemplo, con este puedes configurar qué tipo de citas quieres ver (éxito, inspiracionales, motivación, etc.). Necesitas verificar la documentación del módulo para conocer todos los detalles.

Video

Ir más allá con el Magic Mirror

Ahora estás listo para instalar el Magic Mirror de la manera correcta en tu Raspberry Pi, incluyendo el gestor de servicios y usando mmpm para instalar nuevos módulos. Pienso que es un gran proyecto para ir más allá con una Raspberry Pi, puedes descubrir NodeJS, git y algunos usos de APIs populares en el camino.

Obviamente, esta guía es solo una introducción, ya que las posibilidades son infinitas con este proyecto. Avísame si tienes problemas o necesitas otros tutoriales sobre cosas específicas relacionadas con esto (como crear un nuevo módulo), podría intentarlo por mi cuenta y eventualmente compartir mis hallazgos en otros artículos.

De todas maneras, aquí hay algunos artículos relacionados que podrían interesarte mientras construyes tu Magic Mirror:

• 5 formas de escritorio remoto en Raspberry Pi (Windows/Linux/Mac)
• ¿Cómo Encontrar la Sirección IP Actual del Raspberry Pi?
• RasPad 3: Revisión Honesta Después de Un Mes de Uso (en inglés)
• Raspberry Pi: EVICIV 10.1″ Touchscreen Review (Con fotos) (en inglés)
• 25 Increíbles Ideas de Proyectos con Raspberry Pi para el Hogar