Techday – Smart mirror

Posted on 2017-07-25 by

A few months ago we had a techday at Luminis Amsterdam. These days are great to explore, learn, innovate or just doing something cool. For a while now I have been reading about creating a smart mirror with a raspberry pi. So my idea on this techday was to find out what we need to do to create a smart mirror for our new office. Ideas went all over the place.. we need facial recognition, machine learning, some sort of custom greetings message.. Well enough enthusiasm!
Since creating a smart mirror also includes some carpentry, we decided to focus on the software part first 😉


So I started off with reading an issue of the official Raspberry Pi magazine (https://www.raspberrypi.org/magpi/issues/54/).
This issue mentioned an open source modular smart mirror platform MagicMirror². That sounded exactly what we were looking for!

Installation

Installing the platform was relatively easy. Just one command to execute and we should be good to go!

curl -sL https://raw.githubusercontent.com/MichMich/MagicMirror/master/installers/raspberry.sh | bash

We had some small issues with the installation of some node modules, but removing them and restarting the installation process was enough to finish it.

Modules

MagicMirror² comes with a few default modules. But there are already a lot of third party modules.
Installing one of these modules is also really easy. We just needed to clone the module from github in the modules folder, change the config of that module, add the module to the MagicMirror config file and that’s it!
The newly installed module will be picked up automatically when restarting the platform.

So we decided that we wanted to show a few things:

  • Luminis logo
  • Luminis blog feed
  • Buienrader – information about the rain
  • Employee birthday calendar

Creating our own module

Because we wanted to learn how we can created our own module, we took the most simple option (display a logo) to build.
An detailed description of how to create your own module can be found here. But basically to create a simple module you need a javascript file that registers the module and override some functions.

Module.register("luminis",{

    // Default module config.
    defaults: {
        text: "Welkom bij Luminis"
    },

    // Override dom generator.
    getDom: function() {
        var wrapper = document.createElement("div");

        var textWrapper = document.createElement("span");
        textWrapper.innerHTML = this.config.text;
        wrapper.appendChild(textWrapper);

        var logoImgElement = document.createElement("img");
        logoImgElement.setAttribute("src", "some-url");
        wrapper.appendChild(logoImgElement);

        return wrapper;
    }
});

So we configured some other modules and started the MagicMirror:

We were happy with the result and at the end of the day we did a demo for our colleagues. Even without a mirror, the screen looks cool enough to just hang it somewhere in the office! But we decided to we will create a mirror when we will move to our new office.

Creating the mirror

After a few weeks I have started with creating a mirror for myself. First I created a frame to support the monitor, hide the raspberry pi and the cables.

I ordered a white power cable for the monitor to match with the wall 😉 , added some paint to the frame and used a wall mount to hang the monitor. The result is pretty cool. Maybe I will build a frame that looks a bit nicer, but to make it look better I probably have to let it create by someone else 🙂 .


Leave a Reply

Your email address will not be published. Required fields are marked *