Photographer when I can, Programmer always

Magic Mirror Project

18 May 2017 raspberry-pi

A simple but personal Magic Mirror display

This project is my attempt at a personal Magic Mirror.

Installation

# Clone the repository
git clone https://github.com/roryclaasen/Magic-Mirror-Project.git mirror

# Set the current directory to be the
cd mirror

# Run the mirror installation
sh install.sh

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

Config

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: "http://roryclaasen.me"

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

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

# Mirror Module settings
module:

    # Weather Settings
    weather:
        visible: true

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

    # Clock Settings
    clock:
        visible: true

    # Calendar Settings
    calender:
        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.

Weather

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.

Example

# Private Mirror Module settings
module:

    # Weather Settings
    weather:
        # 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.

Calendar

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.

Weather

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

Monitor

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

Mirror

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.

Frame

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.

Peripherals