That was my original purpose of this project. This is where I am at right now, I’m still adding things, and stylizing. Pay no attention to the colors, just practicing css and helping see the different sections.
I plan on building a frame to mount this to the side panel of my fridge.
@jaymichael78 Here you go…
/* Magic Mirror Config Sample
*
* By Michael Teeuw http://michaelteeuw.nl
* MIT Licensed.
*/
var config = {
port: 8080,
ipWhitelist: ["192.168.1.18", "::ffff:127.0.0.1", "::1"],
language: 'en',
timeFormat: 12,
units: 'imperial',
modules: [
{
module: 'alert',
},
{
module: 'clock',
position: 'top_left'
},
{
module: 'calendar_monthly',
position: 'top_left',
config: {
cssStyle:'slate'
}
},
{
module: 'calendar',
header: ' Bill Janice Vinny ',
position: 'top_left',
config: {
colored: 'true',
calendars: [
{
symbol: 'male',
url: 'Calendar link',
color:'#4286f4'
},
{
symbol: 'child',
url: 'Calendar link',
color:'#33cc33'
},
{
symbol: 'female',
url: 'Calendar link',
color:'#eb42f4'
}
],
}
},
{
module: 'calendar',
header: 'Important Dates',
position: 'top_left',
config:{
colored: 'true',
calendars: [
{
symbol: 'users',
url: 'Calendar link',
color: '#ffff00'
},
{ symbol: 'birthday-cake',
url: 'Calendar link',
color: '#b380ff'
}
],
}
},
{
module: 'MMM-Wunderlist',
position: 'bottom_center',
header: 'To-Do List',
config: {
accessToken: 'your access token',
clientID: 'your client id',
lists: ["MM List"]
}
},
{
module: 'MMM-WunderGround',
position: 'top_right',
config: {
apikey: 'your api key', // private; don't share!
pws: 'pws:KNYHUNTI41', //culemborg
coloricon: 'true',
hourly: '1',
fctext: '1',
layout: "horizontal",
fcdaycount: "3",
fcdaystart: "0",
hourlyinterval: "3",
hourlycount: "2",
alerttime: 10000,
alerttruncatestring: "english:",
roundTmpDecs: 1,
UseCardinals: 0,
layout: "horizontal",
sysstat: 0
}
},
{
module: 'newsfeed',
position: 'bottom_center',
config: {
feeds: [
{
title: "Fox News",
url: "http://feeds.foxnews.com/foxnews/latest?format=xml"
}
],
showSourceTitle: true,
showPublishDate: true
}
},
{
module: 'MMM-Traffic',
position: 'bottom_center',
classes: 'dimmed medium', //optional, default is 'bright medium', only applies to commute info not route_name
config: {
api_key: 'your api key',
mode: 'driving',
origin: 'starting address',
destination: 'destination address',
route_name: 'nickname',
show_summary: true,
changeColor: true,
showGreen: true,
limitYellow: 5, //Greater than 5% of journey time due to traffic
limitRed: 20, //Greater than 20% of journey time due to traffic
traffic_model: 'pessimistic',
interval: 120000 //2 minutes
}
},
{
module: 'MMM-MTA',
position: 'bottom_center',
config: {
sStation: 'DPK',
mtaAPIKey: '9e9374cf6751033431c1f54a4e7576c3' //API KEY needs to be requested from datamine.mta.info
},
},
{
module: 'MMM-NHL',
position: 'top_right',
config: {
colored: 'true',
focus_on: [2],
datesToLookAhead: '7',
}
},
]
};
/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== 'undefined') {module.exports = config;}
@jaymichael78 Here is the 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. *
*****************************************************/
header {
text-transform: uppercase;
font-family: "Roboto Condensed";
font-size: 20px;
font-weight: 300;
}
body {
margin: 30px;
position: absolute;
height: calc(100%-50px);
width: calc(100%-50px);
background-image: url('bg1.jpg');
backgroung-repeat: no-repeat;
background-size: 1920;
}
.newsfeed, div#module_7_newsfeed {
width: 550px;
font-size: 12px;
}
see this reddit post for the creator
Someone also made this
This is my thought for the project. I wan’t an information board for the family in the kitchen.
@jbrodie That is amazing…exactly what I was looking for. I look forward to seeing this progress into an actual module. It was really the only thing holding me back from setting this up because my wife loves seeing a monthly planner with a lot of detail.
@yawns Thank you for the clarification. I wasn’t sure why some values needed the " or ', basically if the config file loaded, I counted that as a success
@jaymichael78 Thanks for the compliment. Next step is building a frame for it to mount on the fridge. Plus I’ll be still tinkering away at the contents.
@jaymichael78 Here is the 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. *
*****************************************************/
header {
text-transform: uppercase;
font-family: "Roboto Condensed";
font-size: 20px;
font-weight: 300;
}
body {
margin: 30px;
position: absolute;
height: calc(100%-50px);
width: calc(100%-50px);
background-image: url('bg1.jpg');
backgroung-repeat: no-repeat;
background-size: 1920;
}
.newsfeed, div#module_7_newsfeed {
width: 550px;
font-size: 12px;
}
@jaymichael78 Here you go…
/* Magic Mirror Config Sample
*
* By Michael Teeuw http://michaelteeuw.nl
* MIT Licensed.
*/
var config = {
port: 8080,
ipWhitelist: ["192.168.1.18", "::ffff:127.0.0.1", "::1"],
language: 'en',
timeFormat: 12,
units: 'imperial',
modules: [
{
module: 'alert',
},
{
module: 'clock',
position: 'top_left'
},
{
module: 'calendar_monthly',
position: 'top_left',
config: {
cssStyle:'slate'
}
},
{
module: 'calendar',
header: ' Bill Janice Vinny ',
position: 'top_left',
config: {
colored: 'true',
calendars: [
{
symbol: 'male',
url: 'Calendar link',
color:'#4286f4'
},
{
symbol: 'child',
url: 'Calendar link',
color:'#33cc33'
},
{
symbol: 'female',
url: 'Calendar link',
color:'#eb42f4'
}
],
}
},
{
module: 'calendar',
header: 'Important Dates',
position: 'top_left',
config:{
colored: 'true',
calendars: [
{
symbol: 'users',
url: 'Calendar link',
color: '#ffff00'
},
{ symbol: 'birthday-cake',
url: 'Calendar link',
color: '#b380ff'
}
],
}
},
{
module: 'MMM-Wunderlist',
position: 'bottom_center',
header: 'To-Do List',
config: {
accessToken: 'your access token',
clientID: 'your client id',
lists: ["MM List"]
}
},
{
module: 'MMM-WunderGround',
position: 'top_right',
config: {
apikey: 'your api key', // private; don't share!
pws: 'pws:KNYHUNTI41', //culemborg
coloricon: 'true',
hourly: '1',
fctext: '1',
layout: "horizontal",
fcdaycount: "3",
fcdaystart: "0",
hourlyinterval: "3",
hourlycount: "2",
alerttime: 10000,
alerttruncatestring: "english:",
roundTmpDecs: 1,
UseCardinals: 0,
layout: "horizontal",
sysstat: 0
}
},
{
module: 'newsfeed',
position: 'bottom_center',
config: {
feeds: [
{
title: "Fox News",
url: "http://feeds.foxnews.com/foxnews/latest?format=xml"
}
],
showSourceTitle: true,
showPublishDate: true
}
},
{
module: 'MMM-Traffic',
position: 'bottom_center',
classes: 'dimmed medium', //optional, default is 'bright medium', only applies to commute info not route_name
config: {
api_key: 'your api key',
mode: 'driving',
origin: 'starting address',
destination: 'destination address',
route_name: 'nickname',
show_summary: true,
changeColor: true,
showGreen: true,
limitYellow: 5, //Greater than 5% of journey time due to traffic
limitRed: 20, //Greater than 20% of journey time due to traffic
traffic_model: 'pessimistic',
interval: 120000 //2 minutes
}
},
{
module: 'MMM-MTA',
position: 'bottom_center',
config: {
sStation: 'DPK',
mtaAPIKey: '9e9374cf6751033431c1f54a4e7576c3' //API KEY needs to be requested from datamine.mta.info
},
},
{
module: 'MMM-NHL',
position: 'top_right',
config: {
colored: 'true',
focus_on: [2],
datesToLookAhead: '7',
}
},
]
};
/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== 'undefined') {module.exports = config;}
@jaymichael78 When I get home, I will upload the config file
@jaymichael78 I’m not home, so I don’t have my config file, but in the config.js under the first calendar module, I added 3 calendars so far, plan on adding 2 more for the other kids, but for each one, you can choose a color and icon from FontAwesome. Just add the config option defaultSymbol and pick your icon. The default one is a calendar icon.
I was also able to edit the header to color code the names and their calendar, by adding some html style coding.
That was my original purpose of this project. This is where I am at right now, I’m still adding things, and stylizing. Pay no attention to the colors, just practicing css and helping see the different sections.
I plan on building a frame to mount this to the side panel of my fridge.
Guys,
Thanks for the help, using your suggestions I was able to actually accomplish what I was looking for in the header of the calendar module itself.
@strawberry-3.141 I am said friend that @ooom416354 is helping. I appreciate the help, I will be able to do some testing of my own tonight and tomorrow with the impending storm coming.
My ideal setup is to have the 5 members in my family share 1 calendar module, each using a separate icon. For my wife and I it’s fairly easy, because there is a male icon and female. For the kids, there is no way do differentiate them.
My other question would be, rather than using a font-awesome symbol, could I just use a letter or name in place of that?