search

jangellx / MagicMirror

My variant of Michael Teeuw's Magic Mirror website
41 stars 14 forks source link

readme

MagicMirror

My variant of Michael Teeuw's Magic Mirror project website files. The code here is based off of his source, which is also on GitHub.

If you're not familiar with the Magic Mirror project, Michael did a brilliant job building and documenting it on his site. Even better, he provided detailed instructions and all of his code so that you can build your own.

I took that challenge and constructed my Magic Mirror for our bathroom using a 32" LCD HDTV and a 31"x24" piece of two way glass, glueing the glass to the front of the case so that there is no border. I also installed ShairPort so that Apple AirPlay can be used to play music through the TV's speakers. A bonus is that the warm LCD doesn't fog when in the bathroom. Details on my build can be found on my website.

I tweaked Micheal's code a bit to my peculiarities, adding whole new sections as time went on. It's been a long time since I've done any Javascript, so some of these changes might be a little crude in their implementation, but they get the job done:

For more information, visit my site at tmproductions.com. For more information on the original that inspired mine, visit Michael's site.

CORS Support

The MBTA features in particular use CORS, which allows for cross-site requests that the browser would bornally block. To enable this, you need to add the following lines to one of the Apache config files, such as httpd.conf. I placed them above the virtual hosts line, based on information found on AwesomeToast:

# Header stuff to get CORS to work.  See https://awesometoast.com/cors/
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"

More details on CORS can be found at https://awesometoast.com/cors/ . Note that only MBTA supports CORS; forecast.io specifically does not support CORS at all for security reasons (they don't want your key being sniffed from the URL, but I'm not worried about that due to the limited use of the key on my mirror), and the calendar is PHP anyway so CORS doesn't apply there.

If you don't want to use CORS, you can set usePHPWrapper to true in the config, and the old PHP wrapper will be used instead, just like it is for the weather.

Experimental Features

Separate Normal and Weather/Temperature Compliments

Rather than mixing the normal compliments with the weather and temperature compliments, the latter can be displayed in smaller text under the former. This just looks kind of weird, and doesn't read well, so it's disabled by default. It can be enabled by the mixCompliments flag in the config.

Weather Station Mode

For those who don't actually plan on overlying this with a mirror, there is a "weather station mode". In the config file there is weatherBGImages, which is a dictionary of arrays of URLs to use for the background image, with each dictionary key reqpresenting a different weather condition. These arrays are empty by default, and the background is simply black. However, you can add one or more images to each array, and an image from the array assocaited with the current weather will be displaeyd as the background of the page. If more than one image is provided, they will be randomly switched between at the interval specified. Since images can make it hard to read the interface, a tint level can also be set to make the images darker and the interface easier to read.

IMPORTANT INSTALLATION NOTE:

To work around the fact that git wants to commit every single file in the dir, and doesn't have a decent way to avoid tracking specific previously-comitted files, js/config.js was renamed to js/config-REMOVE-THIS-.js. Remove the -REMOVE_THIS- bit after you clone/sync and you should be all set.

Screenshot of a reasonably recent version.

Magic Mirror screenshot