Rory Claasen

Photographer when I can, Programmer always

Magic Mirror Project

A simple but personal Magic Mirror display.

This project is my attempt at a personal Magic Mirror.


# Clone the repository
git clone mirror

# Set the current directory to be the
cd mirror

# Run the mirror installation

After the mirror has been installed the config can be changed.


All config can be found in the Jekyll config file. However some config should be kept private and not shared, see private config.

Example Config (my config)

# Title of the webpage
title: Magic Mirror

# Jekyll description
description: A Mirror Display

# Source directory, do not change unless moving source out of the public folder
source: "public"

# Author of the mirror
author: Rory Claasen

# Author of the mirror
author_url: ""

# Compress theme to reduce webpage load
  comments: ["<!-- ", " -->"]
  clippings: all
  startings: [html, head, body]

# Sass controller
   sass_dir: assets/style
   style: :compressed

# Mirror Module settings

    # Weather Settings
        visible: true

        # Location of latitude and Longitude of where forecast should be set
        latitude: "50.892206"
        longitude: "-0.957955"

    # Clock Settings
        visible: true

    # Calendar Settings
        visible: true

        # Number of events that should be loaded (Not necessarily visible)
        maxEvents: 9

Private Config

A file called _private_config.yml needs to be created for the weather widget to work.


API key

The weather widget uses DarkSky, for the connections to be made an api key is required. This key SHOULD not be shared under any circumstance and should be put in the private config file.


# Private Mirror Module settings

    # Weather Settings
        # DarkSky API key
        key: "THISISANAPIKEY"

Display Modules

Time And Date

Time and date is acquired by the JavaScript reference new Date(). The module gest updated every half second to be slightly more actuate in the display.

The code can be found in time.js.


I am using the google calendar APIs, on the first time viewing the page there is a prompt to authorize this app to access google.

The code can be found in calendar.js.


After using JQuery.simpleWeather for a while I decided to change to use the DarkSky API as it has a great up time and is well supported.

The code can be found in forecast.js.

My setup


The monitor that I am using is an old one that was lying around. The important part is the screen size that is 1280px x 1024px


The mirror that I will be using will be a 2 way Acrylic mirror. As of yet is still yet to be bought but it will most likely be bought from Cut Plastic Sheeting.


The frame I used was build from two frames bought from amazon. I can't remember which one it was but it doesn't really matter what you use as long as the mirror fits.