My 1st MagicMirror2

plumcraft

Nice, really clean dashboard

djdwayneanthony

I love this! What a great dashboard! The colours, the layout, the features/modules you are using! I really like the “Hood Family mobile phones” module! What a brilliant way of keeping tabs on who’s in and who’s out! Commute to different destinations, it’s great!

I’m sure none of it is overly difficult to an experienced wizard, me however, it’s like learning Russian and Cantonese at the same time, my mind is melting! haha

Would you be willing to share your config.js.sample, .css and any other relevant info (probably with instructions for the newbies like me) and for others to clone parts of your fantastic design?

sithlordhood

@Cato It always triggers when it should. The sensor is quite powerful though in that it will work through stud walls… even with the sensitivity at the lowest setting! Not really a problem as the Mirror is downstairs in the house so when people are in the mirror is ‘on’ but come bed time and when the house is unoccupied the mirror turns off.

sithlordhood

@djdwayneanthony Sure,

Here is my config.js:

/* Magic Mirror Config fILE
*

By Michael Teeuw http://michaelteeuw.nl
MIT Licensed.
*/

var config = {
port: 8080,

language: 'en',
timeFormat: 24,
units: 'metric',

modules: [
	{
		module: 'alert',
		config: {
			welcome_message: 'Welcome, Magic Mirror boot-up successful!',
			},
	},
	{
		module: 'MMM-Remote-Control',

//uncomment for url position: ‘top_left’,
},
//uncomment {
//for module: ‘MMM-Snow’,
//s position: ‘fullscreen_above’,
//n config: {
//o flakeCount: 50,
//w }
//! },
{
module: ‘clock’,
position: ‘top_left’
},
{
module: ‘calendar’,
position: ‘top_left’,
header: ‘The Hoods Calendar’,
config: {
maximumEntries: 25,
maximumNumberOfDays: 365,
maxTitleLength: 25,
animationSpeed: 0,
fadePoint: 1,
timeFormat: ‘absolute’,
urgency: 7,
calendars: [
{
symbol: ‘calendar’,
url: ‘GOOGLE CALENDAR URL’
}
]
}
},
{
module: ‘currentweather’,
position: ‘top_right’,
config: {
location: ‘Portchester,United Kingdom’,
locationID: ‘2649692’, //ID from http://www.openweathermap.org
appid: ‘API KEY’,
},
},
{
module: ‘weatherforecast’,
position: ‘top_right’,
header: ‘Weather Forecast’,
config: {
fadePoint: 1,
location: ‘Portchester,United Kingdom’,
locationID: ‘2649692’, //ID from http://www.openweathermap.org
appid: ‘API KEY’,
showRainAmount: true,
},
},
{
module: ‘MMM-NetworkScanner’,
position: ‘top_right’,
header: ‘Hood Family Mobile Phones’,
config: {
devices: [
{ macAddress: “MAC1”, name: " Internet Router", icon: “wifi”},
{ macAddress: “MAC2”, name: “Simon”, icon: “mobile”},
{ macAddress: “MAC3”, name: “Emma”, icon: “mobile”},
{ macAddress: “MAC4”, name: “Jacob”, icon: “mobile”},
{ macAddress: “MAC5”, name: “Rhiannon”, icon: “mobile”},
],
showUnknown: false,
showOffline: true,
keepAlive: 240,
updateInterval: 10,
},
},
{
module: ‘calendar_monthly’,
position: ‘top_right’,
config: {
fadeSpeed: 2,
showHeader: ‘true’,
cssStyle: ‘custom’, //block, clean, slate or custom
updateDelay: 5,
},
},
{
module: ‘newsfeed’,
position: ‘bottom_bar’,
config: {
showDescription: true,
feeds: [
{
title: “BBC News”,
url: “http://feeds.bbci.co.uk/news/rss.xml?edition=uk”
},
],
showSourceTitle: true,
showPublishDate: true
}
},
{
module: ‘MMM-Traffic’,
position: ‘bottom_bar’,
classes: ‘dimmed medium’,
config: {
api_key: ‘API KEY’,
mode: ‘driving’,
origin: ‘ORIGIN’,
destination: ‘DESTINATION’,
// arrival_time: ‘0730’, //optional, but needs to be in 24 hour time if used.
route_name: ‘Simon - Home to Work’,
changeColor: ‘true’,
showGreen: ‘true’,
limitYellow: 15, //Greater than 15% of journey time due to traffic
limitRed: 30, //Greater than 30% of journey time due to traffic
traffic_model: ‘pessimistic’,
interval: 120000 //2 minutes
},
},
{
module: ‘MMM-Traffic’,
position: ‘bottom_bar’,
classes: ‘dimmed medium’, //optional, default is ‘bright medium’, only applies to commute info not r$
config: {
api_key: ‘API KEY’,
mode: ‘driving’,
origin: ‘ORIGIN’,
destination: ‘DESTINATION’,
// arrival_time: ‘0730’, //optional, but needs to be in 24 hour time if used.
route_name: ‘Emma - Home to Nursery’,
changeColor: ‘true’,
showGreen: ‘true’,
limitYellow: 15, //Greater than 15% of journey time due to traffic
limitRed: 30, //Greater than 30% of journey time due to traffic
traffic_model: ‘pessimistic’,
interval: 120000 //2 minutes
},
},
{
module: ‘MMM-Traffic’,
position: ‘bottom_bar’,
classes: ‘dimmed medium’, //optional, default is ‘bright medium’, only applies to commute info not r$
config: {
api_key: ‘API KEY’,
mode: ‘driving’,
origin: ‘ORIGIN’,
destination: ‘DESTINATION’,
// arrival_time: ‘0730’, //optional, but needs to be in 24 hour time if used.
route_name: ‘Home to Nana & Grandad Hoods’,
changeColor: ‘true’,
showGreen: ‘true’,
limitYellow: 15, //Greater than 15% of journey time due to traffic
limitRed: 30, //Greater than 30% of journey time due to traffic
traffic_model: ‘pessimistic’,
interval: 120000 //2 minutes
},
},
{
module: ‘mmm-systemtemperature’,
position: ‘bottom_bar’,
classes: ‘small dimmed’,
config: {
prependString: 'CPU Temp: ',
updateInterval: 5000,
animationSpeed: 0,
},
},
{
module: ‘updatenotification’,
position: ‘bottom_bar’,
},
]

};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== ‘undefined’) {module.exports = config;}
bolded text

I have removed api keys, destinations, etc so anything in ITALICS you would require adding your own variable here as described in the modules.

The Modules I used are:
alert (default module)
MMM-Remote-Control
MMM-Snow (I only configure this ON during the holiday period!)
clock (default module)
calendar (default module)
currentweather (default module)
weatherforecast (default module)
MMM-NetworkScanner
calendar_monthly
newsfeed (default module)
MMM-Traffic (used three times, for different commutes)
mmm-systemtemperature
updatenotification (default module)

broberg

You could remove the margins of the MM body, that way you would utilize more of the screen itself, since you have more mirror on the sides of the monitor :)

sithlordhood

@broberg I will look into this - will give me a little more room. Cheers!

sithlordhood

@djdwayneanthony Also here is my custom.css - it is only colour changes for the Weather forecast and not my work - copied from someone else’s post here…

#/*****************************************************

Magic Mirror *
Custom CSS *

By Michael Teeuw http://michaelteeuw.nl *
MIT Licensed. *

Add any custom CSS below. *
Changes to this files will be ignored by GIT. *
*****************************************************/

body {
}

.dimmed {
color: #666;
}

.normal {
color: #999’
}

.bright {
color: #fff;
}

.brightb {
color: #55acee;
}
.currentweather .wi-sunrise {
color: #ffd700;
}
.currentweather .wi-sunset {
color: #ffa500;
}
.currentweather .wi-day-sunny {
color: #ffff00;
}
.currentweather .wi-night-showers {
color: #55acee;
}
.currentweather .wi-degrees {
color: #415;
}
.currentweather .wi-rain {
color: #55acee;
}
.currentweather .wi-showers {
color: #55acee;
}
.currentweather .wi-night-showers {
color: #55acee;
}
.currentweather .wi-night-alt-cloudy-windy {
color: #aaa;
}
.currentweather .wi-night-cloudy {
color: #aaa;
}
.currentweather .wi-cloudy {
color: #aaa;
}
.currentweather .wi-day-cloudy {
color: #aaa;
}
.currentweather .wi-cloudy {
color: #aaa;
}
.currentweather .wi-cloudy-windy {
color: #aaa;
}
.currentweather .wi-showers {
color: #55acee;
}
.currentweather .wi-thunderstorm {
color: #ff00ff;
}
.currentweather .wi-snow {
color: #fff;
}
.currentweather .wi-fog {
color: #999;
}
.currentweather .wi-night-clear {
color: #fff;
}
.currentweather .wi-night-rain {
color: #55acee;
}
.currentweather .wi-night-thunderstorm {
color: #ff00ff;
}
.currentweather .wi-night-snow {
color: #fff;
}

.weatherforecast .wi-sunrise {
color: #ffd700;
}
.weatherforecast .wi-sunset {
color: #ffa500;
}
.weatherforecast .wi-day-sunny {
color: #ffff00;
}
.weatherforecast .wi-night-showers {
color: #55acee;
}
.weatherforecast .wi-degrees {
color: #415;
}
.weatherforecast .wi-rain {
color: #55acee;
}
.weatherforecast .wi-showers {
color: #55acee;
}
.weatherforecast .wi-night-showers {
color: #55acee;
}
.weatherforecast .wi-night-alt-cloudy-windy {
color: #aaa;
}
.weatherforecast .wi-night-cloudy {
color: #aaa;
}
.weatherforecast .wi-cloudy {
color: #aaa;
}
.weatherforecast .wi-day-cloudy {
color: #aaa;
}
.weatherforecast .wi-cloudy {
color: #aaa;
}
.weatherforecast .wi-cloudy-windy {
color: #aaa;
}
.weatherforecast .wi-showers {
color: #55acee;
}
.weatherforecast .wi-thunderstorm {
color: #ff00ff;
}
.weatherforecast .wi-snow {
color: #fff;
}
.weatherforecast .wi-fog {
color: #999;
}
.weatherforecast .wi-night-clear {
color: #fff;
}
.weatherforecast .wi-night-rain {
color: #55acee;
}
.weatherforecast .wi-night-thunderstorm {
color: #ff00ff;
}
.currentweather .wi-night-snow {
color: #fff;
}

}

djdwayneanthony

Legend! Will play about with this tomorrow! Thank you, and once again, well done!

sithlordhood

This post is deleted!

sithlordhood

This post is deleted!

sithlordhood

@broberg Borderless Layout

Looks better - plus can get more calendar entries on the screen now! Thanks for the tip.

broberg

@sithlordhood no probs! glad I could give useful tips :D

On my raspberry I also noticed my 1920 background didn’t display correctly, I had black borders around the workspace that cut off some graphics, so I followed this :
http://www.opentechguides.com/how-to/article/raspberry-pi/28/raspi-display-setting.html

And gained a couple of more pixels :) (ie I got the full 1920 resolution again)

cowboysdude

@Cato I’ve been looking for a usb extension … I found one once that was round with 2 USB ports but I can’t find it again :( I would have drilled through my case and installed that!!

schlachtkreuzer6

@broberg @sithlordhood

@broberg said in My 1st MagicMirror2:

You could remove the margins of the MM body, that way you would utilize more of the screen itself, since you have more mirror on the sides of the monitor :)

It´s easy just add this to your custom css:

/*****************************************************
 * Magic Mirror                                      *
 * Custom CSS                                        *
 *                                                   *
 * By Michael Teeuw http://michaelteeuw.nl           *
 * MIT Licensed.                                     *
 *                                                   *
 * Add any custom CSS below.                         *
 * Changes to this files will be ignored by GIT. *
 *****************************************************/

body {
  margin: 20px;
  position: absolute;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
  background: #000;
  color: #aaa;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
}

.region.fullscreen {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
}

just play with the px and don´t forget about the fullscreen mode for modules :)

jbeck615

thank you for sharing so much. so so helpful

sithlordhood

@cowboysdude This is the one I used:

http://www.ebay.co.uk/itm/Car-Dash-Flush-Mount-Dual-USB-1m-Male-to-Female-Extension-Cable-Lead-Panel-MA950-/272413643903?hash=item3f6d1e547f:g:rUkAAOSwDmBY4CTs

cowboysdude

@sithlordhood said in My 1st MagicMirror2:

@cowboysdude This is the one I used:

http://www.ebay.co.uk/itm/Car-Dash-Flush-Mount-Dual-USB-1m-Male-to-Female-Extension-Cable-Lead-Panel-MA950-/272413643903?hash=item3f6d1e547f:g:rUkAAOSwDmBY4CTs

What size hole did you drill? If you can remember. I have one of those! :)

johnnyboy

This post is deleted!

RE_Magic_Mirror

I used most of this information and I can’t thank everyone enough for all the contributions. Thank you.