SOFTWARE DEL MAGIC MIRROR


Instalación de los Requisitos para el Magic Mirror


Lo primero que hicimos al recibir la Raspberry fue formatear el sistema operativo para poder hacer todo lo que teníamos pensado para poder instalar el sistema operativo de Raspbian en la Raspberry.


Luego de haber esperado a que se acabe de instalar el sistema operativo de la Raspbian iniciamos sesión con la cuenta con la que accederemos a hacer todo lo que vamos a hacer de el espejo , cuando estuvimos dentro lo primero que hicimos fue actualizar el sistema operativo usando un “sudo apt update”, al comprobar que haya acabado de actualizar lo que luego hicimos fue instalar las dependencias que nos requería como la de github introduciendo el comando “sudo apt install -y curl git ” y una muy importante que es la que sin ella todo daría error y sin ella no podríamos haberlo hecho es la de “node .js”. ( Para poder instalarlo pusimos: curl - fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - sudo apt install -y nodejs) , que es la que se encarga de hacer un puente entre el front end y el back end, se puede considerar cómo el intérprete de js dentro del entorno del MagicMirror.


Para instalar el software de el Magic mirror en cual vamos a usar de base para implementar todas nuestras ideas encontramos una página llamada magicmirror.builders que dentro de ella había un enlace a un repositorio oficial de el espejo de GitHub y luego una vez que estábamos dentro lo que hicimos fue clonar el repositorio de GitHub dentro de la Raspberry con el siguiente comando:
git clone https://github.com/MagicMirrorOrg/MagicMirror.git
luego de eso entramos a nuestra carpeta de el magic mirror con un cd MagicMirror , para poder instalar las dependencias necesarias que necesitamos con el comando npm install , este proceso nos tardo un poco bastante por la raspberry por que le tocaba instalarse bastantes paquetes necesarias para el magic mirror funcionara correctamente.


Por desgracia nos encontramos con un problema bastante importante, y es que nos daba un error indicando que necesitamos la versión de Node.js 22.21.1 o superior que por desgracia no era la que teníamos instalada y que no era compatible. Para solucionarlo, primero tuvimos que desinstalar la versión anterior de Node.js y comprobamos que ya no estaba instalada correctamente con: node -v. Posteriormente, instalamos la versión adecuada y para asegurarnos que estuviera bien coloca ndo un: curl - fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash - sudo apt install -y nodejs y luego verificamos su instalación con un node -v f. Después de haber instalado correctamente la versión adecuada de Node.js y comprobar que ya no daba errores, volvimos a intentar continuar con la instalación del Magic Mirror.


En este punto ya teníamos todo preparado, por lo que volvimos a ejecutar la instalación de dependencias dentro de la carpeta del proyecto usando npm install, y esta vez el proceso se completó sin problemas. Una vez terminado esto, intentamos arrancar el Magic Mirror, pero nos encontramos con otro error bastante común, que indicaba que no existía el archivo config.js. Para solucionarlo, lo que hicimos fue copiar el archivo de ejemplo que viene por defecto dentro del propio proyecto, utilizando el comando cp config/config.js.sample config/config.js, con esto conseguimos tener una base de configuración para que el sistema pudiera arrancar correctamente.


Después de esto volvimos a iniciar el sistema utilizando npm start, y en este punto ya conseguimos que el Magic Mirror funcionara por primera vez, mostrando la interfaz en pantalla. Para poder conectarnos desde otros dispositivos dentro de la misma red (LAN), tuvimos que modificar el archivo de configuración que se encuentra en la ruta ~/MagicMirror/config/config.js. En este archivo realizamos varios cambios importantes, como poner la dirección en “0.0.0.0” para que el sistema escuche conexiones desde cualquier dispositivo de la red, dejar el puerto en 8080 y establecer ipWhitelist en vacío para permitir el acceso a todas las direcciones IP. Gracias a esto conseguimos que el espejo pudiera ser accesible desde otros dispositivos.


Automatización con PM2


Para evitar tener que iniciar el Magic Mirror manualmente cada vez que encendíamos la Raspberry, instalamos PM2 utilizando el comando npm install -g pm2, que sirve para gestionar procesos y permitir que se ejecuten automáticamente. Después configuramos PM2 para que el Magic Mirror se inicie junto con el sistema, de esta forma cada vez que se enciende la Raspberry el espejo se arranca solo sin necesidad de intervención manual.
- Abrimos el espejo en toda la red y ejecución
Una vez ya teníamos todo configurado correctamente, procedimos a probar el acceso al Magic Mirror desde otros dispositivos dentro de la red. Para ello, accedimos desde el navegador utilizando la dirección IP de la Raspberry junto con el puerto, por ejemplo: http://192.168.18.112:8080, y comprobamos que el espejo se podía visualizar tanto desde un ordenador. Gracias a la configuración realizada anteriormente y al uso de PM2, el sistema se inicia automáticamente y está disponible en la red cada vez que se enciende la Raspberry.

Control remoto con VNC


Después de esto, instalamos VNC Viewer para poder controlar la Raspberry de forma remota, lo que nos facilitó mucho el trabajo sin necesidad de tener que estar siempre conectando teclado, ratón y pantalla. También habilitamos el acceso VNC desde la Raspberry utilizando la herramienta de configuración del sistema, lo que nos permitió gestionar todo de forma más cómoda.

Organización de módulos


Para poder modificar los widgets de forma más organizada, intentamos crear una estructura de carpetas dentro de modules para separar cada módulo, pero después de varias pruebas nos dimos cuenta de que no funcionaba correctamente. Por ello, decidimos hacer toda la configuración dentro de un único archivo config.js, pero manteniéndolo bien ordenado y comentado para evitar errores y conflictos entre módulos

Eliminación de Módulos por Defecto


A continuación, eliminamos los módulos que venían por defecto para evitar problemas y empezar desde una base limpia. Después empezamos a buscar módulos en la página oficial de Magic Mirror, seleccionando los que queríamos instalar y configurar uno a uno dentro del archivo de configuración.

Personalización del espejo


Una vez teníamos el sistema funcionando correctamente, comenzamos a modificar el espejo a nuestro gusto utilizando los módulos disponibles tanto en la página oficial como en GitHub, asegurándonos siempre de que fueran seguros.

Configuración del carrusel


Uno de los primeros módulos que intentamos configurar fue el carrusel (MMM-Carousel), que permite mostrar diferentes módulos en rotación. Sin embargo, más adelante vimos que podía generar conflictos con otros sistemas como el de páginas, por lo que tuvimos que tener cuidado con su uso.

Módulo de finanzas


También implementamos un módulo de finanzas utilizando datos de Yahoo para mostrar información en tiempo real sobre empresas, lo cual añadía funcionalidad al espejo.

Intento de implementación del calendario


Además, intentamos implementar un calendario utilizando la API de Google Calendar, creando un proyecto en Google Cloud, habilitando la API y generando las credenciales necesarias en formato JSON para integrarlas en el sistema. Aunque esta parte no quedó completamente terminada, conseguimos avanzar bastante en su configuración.

Control Remoto del Espejo


Posteriormente instalamos el módulo de control remoto (MMM-Remote-Control), que nos permite modificar el espejo en tiempo real desde el navegador. Para acceder a este control utilizamos la dirección http://IP_RASPBERRY:8080/remote.html, desde donde podemos hacer cambios directamente sin necesidad de reiniciar constantemente. Visualización de contenido web También añadimos el módulo SmartWebDisplay para poder mostrar imágenes y contenido web dentro del espejo, lo que amplía bastante sus posibilidades.

Integración de Spotify


Además, instalamos el módulo de Spotify para poder reproducir música directamente desde el espejo, integrando así funciones multimedia.

Ajustes de pantalla


Finalmente realizamos ajustes de resolución y brillo de la pantalla para que la visualización a través del cristal de doble vía fuera correcta y se viera bien en diferentes condiciones.

MÓDULOS


En nuestro github tenemos todos los módulos guardados en una carpeta llamada modules y lo tenemos dividido en secciones , como todos los que comienzan por MMM- que son todos los que hemos instalado por nuestra propia cuenta y los que esta pre instalados de por sí. Todo los módulos preinstalados los tenemos dentro de una carpeta cuyo nombre le hemos puesto /default que son donde engloba todos los pre instalados y luego los fuera de esa carpeta esta los que hemos instalado por nuestra cuenta y todo funciona en un .js y todo el mundo puede configurar en una siempre que se .js (hemos enlazado nuestra página custom al mmm carrusel para poder permitirnos el cambio de páginas).