Instalando y configurando Magic Mirror en Raspberry Pi

En este documento veremos la instalación de Magic Mirror sobre una Raspberry Pi, bien, para que? Ideal para tener un pequeño panel de información que puedes personalizarlo totalmente, pensado para cualquier ámbito sea tu casa o tu empresa. Lo normal luego será hacer algo de bricolaje, pondremos un espejo sobre el monitor y al ser un panel negro con texto blanco o imágenes queda muy futurístico!

 

Lo dicho, siguiendo los pasos de este documento podrás tener tu propio espejo mágico que mientras te miras que guap@ estás, tienes más información de todo lo que sucede a tu alrededor! Y en la oficina quedaría muy geek también, con datos de monitorización… Obtendremos un panel con toda la información que queramos ver de forma diferente 🙂

 

Sitio oficial: https://magicmirror.builders/

En GitHub: https://github.com/MichMich/MagicMirror

 

Instalación de Magic Mirror

Los requisitos para comenzar son muy sencillos, necesitaremos tener Raspbian Stretch instalado y configurado con una dirección IP.

 

Si tienes cualquier modelo de Raspberry Pi 2 o Raspberry Pi 3 bastará con ejecutar el siguiente script para que nos instale todas las dependencias y el propio Magic Mirror:

bash -c "$(curl -sL https://raw.githubusercontent.com/MichMich/MagicMirror/master/installers/raspberry.sh)"

 

Al finalizar la instalación nos preguntará si queremos que se inicie por defecto al iniciar la Raspberry o no, aquí lo que cada uno quiera. En mi caso prefiero iniciarlo posteriormente por diferentes motivos, para ello tengo añadido un script en ‘~/.config/lxsession/LXDE-pi/autostart’ llamado por ejemplo ‘@/home/pi/magic_mirror_arranca.sh’ que tiene el siguiente contenido:

cd /home/pi/MagicMirror/
npm start            # Pi2 y Pi3
node serveronly      # Pi1 y Zero

 

Una vez que lo iniciemos automáticamente o manualmente veremos que se nos carga en pantalla Magic Mirror con la configuración predeterminada. Por si os interesa, si queremos iniciar Magic Mirror desde una sesión ssh:

DISPLAY=:0 npm start

 

Si queremos instalarlo de forma manual o te falla el script anterior (en el caso de los modelos más antiguos de Raspberry Pi, 1 y Zero), podremos hacerlo de la siguiente manera:

sudo apt-get install npm git -y
git clone https://github.com/MichMich/MagicMirror
cd ~/MagicMirror
npm install

 

 

A tener en cuenta que el fichero de configuración de Magic Mirror será ‘/home/pi/MagicMirror/config/config.js’ y en él tendremos que añadir cualquier configuración o módulo. Empezamos fácil, permitimos que se puedan conectar desde cualquier equipo de la red al Magic Mirror e indicaremos el idioma predeterminado que sea el Español:

address: "",
...
ipWhitelist: [],
...
language: "es",
...

Grabamos el fichero y probamos a inicar de nuevo Magic Mirror, o mediante un navegador a http://raspberry_pi:8080

 

Por cierto, si alguien está interesado en modificar los tamaños de las fuentes, lo conseguiría modificando el CSS: ‘~/MagicMirror/css/custom.css’.

 

Con esto ya hemos visto como instalar, iniciar y configurar muy básicamente Magic Mirror, continuaremos a posteriori con los Módulos que más me han interesado y cómo instalarlos. Ya que lo interesante aquí es cada uno que se ponga los módulos que quiera y donde quiera, para más info de la lista de los oficiales: https://github.com/MichMich/MagicMirror/wiki/3rd-Party-Modules

Y si queréis saber las zonas de la pantalla donde se pueden poner los módulos, anotar: top_bar, top_left, top_center, top_right, upper_third, middle_center, lower_third, bottom_left, bottom_center, bottom_right, bottom_bar, fullscreen_above y fullscreen_below.

 

Pero antes, os dejo una serie de opciones adicionales que se pueden ir haciendo desde ya, es lo típico que hacemos en una Raspberry Pi que sea un Kiosko, para que no se ponga el salva pantallas, o el rayo de energía baja, quitar el cursor evitar que el módulo del Wifi se ponga en ahorro energético…

Quitar el ahorro de energia en el dongle Wifi

Lo conseguiremos si en el fichero ‘/etc/network/interfaces’ añadimos al final la siguiente línea:

wireless-power off

 

Quitar el cursor del ratón

Podremos ocultar el cursor del ratón instalando Unclutter:

sudo apt-get install unclutter

 

Quitar el salva pantallas

Para evitar que se ponga la pantalla negra o cualquier otro salvapantallas, deberemos primero instalar:

sudo apt-get install x11-xserver-utils

 

Y luego modificar el fichero ‘~/.config/lxsession/LXDE-pi/autostart’ añadiendo al final del fichero:

@xset s noblank
@xset s off
@xset -dpms

 

Y por último añadimos en el fichero /etc/lightdm/lightdm.conf y debajo de [Seat:*] lo siguiente:

xserver-command=X -s 0 -dpms

 

Quitar alerta de voltaje

Para quitar el rayito ese amarillo o vaya, el warning de poca txitxa, añadimos en ‘/boot/config.txt’ al final:

avoid_warnings=1

 

 

Módulo de Monitorización con Nagios o Centreon

 

Vamos a añadir un módulo a Magic Mirror muy interesante, uno que va mucho con el estilo del blog, podría mientras me lavo la cara ver como está mi negocio o mi hogar inteligente? Pues sí, siguiendo estos pasos instalarás el módulo necesario en Magic Mirror para poder saber qué pasa, ya que se conectará a tu Nagios o a tu Centreon y te lo mostrará.

cd ~/MagicMirror/modules
git clone https://github.com/qistoph/MMM-nagios.git nagios
cd nagios
npm install

Y si añadimos en el fichero de configuración de Magic Mirror el siguiente código, podremos conseguirlo!

{
    module: "nagios",
    position: "top_left",
    header: "Estado Hogar Inteligente",
    config: {
        statusUrl: "http://DIRECCION_IP_CENTREON_O_NAGIOS/statusJson.php",
        user: "admin",
        password: "xxxx",
        reloadInterval: 60000
    }
},

 

Si quieres más info de este Plugin: https://github.com/qistoph/MMM-nagios

 

En el lado de Centreon debemos exportar el fichero ‘/var/log/centreon-engine/status.dat’ a formato JSON, muy sencillo de la siguiente manera:

git clone https://github.com/lizell/php-nagios-json.git
cp php-nagios-json/php-nagios-json/statusJson.php /var/www/html/

 

Y editamos dicho fichero ‘/var/www/html/statusJson.php’, tendremos que hacer alguna modificación para que os funcione 🙂 Lo primero de todo, poner la variable ‘$statusFile’ con el path del fichero .dat correctamente y si usamos Centreon puede que no nos detecte una versión, por lo que si comentamos seguro que nos va:

// if ($nag_version == 4) {
$data = getData4($statusFile);
// } else if ($nag_version == 3) {
// $data = getData3($statusFile);
// } else {
// $data = getData2($statusFile);
// }

 

Tiempo previsión 1 semana

 

Este módulo viene por defecto instalado, para habilitarlo basta con añadir el siguiente código en el fichero configuración de Magic Mirror:

{
    module: "weatherforecast",
    position: "top_left",
    config: {
        location: "Bilbao",
        locationID: "6362436",
        appid: "82537b248dxxxxxxxxxxxxxxxxxxx",
        showRainAmount: true
    }
},

 

La configuración es sencilla, el locationID y el appid lo conseguiremos en http://www.openweathermap.org y de http://www.openweathermap.org/help/city_list.txt.
Para más info: https://github.com/MichMich/MagicMirror/tree/master/modules/default/weatherforecast.

 

Tiempo actual

 

Otro módulo muy usado y sencillico, basta con meter en el fichero de configuración de Magic Mirror el siguiente código:

{
    module: 'currentweather',
    position: 'top_right',
    config: {
        location: 'Bilbao',
        locationID: '6362436', //ID from bulk.openweather.org/sample/
        appid: '82537b248d2xxxxxxxxxxxxxxxxxx',
        updateInterval: '3600000',
        onlyTemp: true
}
},

Para más info: https://github.com/MichMich/MagicMirror/tree/master/modules/default/currentweather

 

Emails en pantalla

 

Si te apetece leer los mails que tienes nuevos y quieres verlos en tu espejito mágico, en mi caso me conecto mediante IMAP, aún que se puede conectar contra todo, incluso Office 365, estos serían los pasos para instalar el módulo:

cd ~/MagicMirror/modules
git clone https://github.com/ronny3050/email-mirror.git
cd email
npm install

 

Y añadimos en el fichero de configuración de MagicMirror el siguiente código

{
    module: 'email',
    position: 'top_left',
    config: {
        user: "mi_mail@dominio.com",
        password: "xxxxx",
        host: "mail.dominio.com",
        port: 143,
        tls: false,
        authTimeout: 10000,
        numberOfEmails: 5,
        fade: false
    }
},

 

Para más info sobre el módulo: https://github.com/ronny3050/email-mirror

 

Noticias RSS

 

 

Si te apetece estar al día mientras te miras al espejo y quieres leer los titulares o las noticias que te interesen, bastará con habilitar un módulo de Magic Mirror y meter todas las direcciones RSS que quieras seguir! Añadiendo esta configuración en el fichero de configuración de Magic Mirror lo conseguirás:

 

{
    module: "newsfeed",
    position: "bottom_bar",
    config: {
        feeds: [
            {
                title: "Deia",
                url: "http://www.deia.com/rss/general.xml"
            },
            {
                title: "El Correo",
                url: "http://www.elcorreo.com/bizkaia/rss/atom/portada",
                encoding: "ISO-8859-1"
            },
        ],
        showSourceTitle: false,
        showPublishDate: false
    }
},

 

Para más info sobre este módulo: https://github.com/MichMich/MagicMirror/tree/master/modules/default/newsfeed

 

Agenda

 

Si te apetece meter tu calendario, en mi caso uso el de Google Calendar, pero vaya, que con cualquier fichero ics puedes montartelo!

{
    module: "calendar",
    header: "Calendario Hector",
    position: "top_left",
    config: {
        calendars: [
            {
                symbol: "calendar-check-o ",
                url: "https://calendar.google.com/calendar/ical/lfmkxxxxxxxxxxxxxxxxxjk%40group.calendar.google.com/private-fbdba546xxxxxxxxxxx827/basic.ics"
            }
        ]
    }
},

 

Para más info: https://github.com/MichMich/MagicMirror/tree/master/modules/default/calendar

 

Estado del tráfico de la carretera

 

Si queremos saber cuánto tiempo vamos a tardar en llegar a algún sitio, por ejemplo al trabajo, podemos conocer en tiempo real siempre lo que tardaremos en llegar, te imaginas pintarte los labios mientras ves que vas a llegar tarde? A lo loco! 😛

cd ~/MagicMirror/modules
git clone https://github.com/SamLewis0602/MMM-Traffic.git
cd MMM-Traffic
npm install

 

Añadimos en el fichero de configuración el siguiente código:

{
    module: 'MMM-Traffic',
    position: 'bottom_right',
    classes: 'dimmed medium', //optional, default is 'bright medium', only applies to commute info not route_name
    config: {
        api_key: 'AIzaSyDr1y9oxxxxxxxxxxxxxxxxxuvA',
        mode: 'driving',
        origin: 'Federico Moyúa Plaza, 3, 48009 Bilbo, Bizkaia',
        destination: 'Parque Tecnológico de Zamudio, 48170, Vizcaya',
        route_name: 'Ruta a la ofi',
        changeColor: true,
        showGreen: false,
        limitYellow: 5, //Greater than 5% of journey time due to traffic
        limitRed: 20, //Greater than 20% of journey time due to traffic
        traffic_model: 'pessimistic',
        interval: 120000 //2 minutes
    }
 },

 

Cambiaremos obviamente la ruta de inicio/fin y meteremos nuestra clave API de Google.

Para más info de este módulo: https://github.com/SamLewis0602/MMM-Traffic

 

Lista de temas pendientes (Wunderlist)

 


Otro módulo bastante interesante puede ser la típica lista de recordatorio, en mi caso soy un amante de Wunderlist, así que os indico los pasos necesarios para echarlo a andar:

cd ~/MagicMirror/modules
git clone https://github.com/qistoph/MMM-nagios.git nagios
cd nagios
npm install

 

Tras la instalación procedemos a añadir el siguiente código en el fichero de configuración de Magic Mirror:

{
    module: 'MMM-Wunderlist',
     position: 'top_right',
     header: 'Lista de la compra',
     config: {
        accessToken: '9f3de965af18647aexxxxxxxxxxxxxxxxxxxxxxxx960',
        clientID: '9052dxxxxxxxxxxxxx3',
        lists: ["Compras"]
     }
 },

El accessToken y el clientID te sonará que debes solicitarlo en la web de: https://developer.wunderlist.com.

 

 

Bueno y lo dicho en esta web https://github.com/MichMich/MagicMirror/wiki/3rd-Party-Modules o en Internet puedes buscar múltiples módulos o hacerte los tuyos propios. Y eso, tras la configuración, eso, hay que hacer bricolaje, hacer un marco de madera y meter los monitores que necesitemos dentro, colocaremos el espejo que realmente no es un espejo, si no que es una lamina acrílico de espejo de 2 caras. Si vas a cualquier cristalería seria explicándote sabrán qué cristal quieres, no es muy caro, y recuerdo que el cristalero me dejaba piezas diferentes para hacer varias pruebas. Si alguien está perdido le paso el telefono de la cristaleria =)

 

Luego cada uno puede completar el proyecto como quiera, para no tener siempre el monitor encendido, se puede poner un sensor de movimiento y mediante un relé encenderlo cuando haya movimiento, y claro, todo esto hasta que te de la imaginación, le puedes poner una cámara de vídeo a la Raspberry y que con OpenCV reconozca tu rostro y en pantalla muestre otro tipo de información, o a un niño unos dibujos animados saludando… así como reconocimiento de voz para que te muestre cualquier otro tipo de información, etc…

 

Y más o menos así quedaría, y sí, ese soy yo, con algún dibujito más de Grafana, etc… esta imagen es bastante vieja, un día pongo paneles chulos para daros más ideas!

 

Héctor Herrero

Autor del blog Bujarra.com
Cualquier necesidad que tengas, no dudes en contactar conmigo, os intentare ayudar siempre que pueda, compartir es vivir 😉 . Disfrutar de los documentos!!!

Últimos Posts de: Héctor Herrero (ver todos)