diff --git a/README.md b/README.md index 3b4381d..c224dff 100644 --- a/README.md +++ b/README.md @@ -5,4 +5,21 @@ Use your MagicMirror2 as a dashboard. ![Screenshot 1](screenshot-1.jpg) Customized Alert Module with Sounds + ![Screenshot 2](screenshot-2.jpg) + +## Modules Used +* [MMM-BackgroundSlideshow](https://github.com/darickc/MMM-BackgroundSlideshow) +* [MMM-iFrame](https://github.com/alberttwong/MMM-iFrame) +* [MMM-MyCalendar](https://github.com/jclarke0000/MMM-MyCalendar) +* [MMM-NowPlayingOnSpotify](https://github.com/raywo/MMM-NowPlayingOnSpotify) +* [MMM-PlexNowPlaying](https://github.com/glitch452/MMM-PlexNowPlaying) +* [MMM-Sounds2](https://github.com/sigel/MMM-Sounds2) _(Optional)_ + +## Custom CSS +The `css/custom.css` contains customizations such as removing module headers and changing the MyCalendar default layout. + +## Config +The `config/config.js` contains my setup for each module. + +_My collection of backgrounds used is available for download [here](https://drive.google.com/file/d/1pKJM75EsiSegkv3AJiF6Wgw1kcQ0xOI5/view?usp=sharing)_ diff --git a/config/config.js b/config/config.js new file mode 100644 index 0000000..44336e7 --- /dev/null +++ b/config/config.js @@ -0,0 +1,136 @@ + modules: [ + { + module: "alert", + }, + { + module: "MMM-Sounds2", + config: { + startupSound: true, + alerSound: true, + defaultDelay: 100, + quietTimeStart: '23:00', // 11pm + quietTimeEnd: '07:00' // 7am + } + }, + { + module: "clock", + position: "top_right", + config: { + displaySeconds: false + } + }, + { + module: "weather", + position: "top_left", + config: { + type: 'current', + location: "Denver, US", + locationID: "", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city + apiKey: "", + roundTemp: true + } + }, + { + module: "weatherforecast", + position: "top_left", + config: { + location: "Denver, US", + LocationID: "", //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city + appid: "", + maxNumberOfDays: 5, + roundTemp: true, + colored: true, + fade: false + } + }, + { + module: "MMM-iFrame", + position: "top_left", + config: { + url: ["https://url.to.status/page/"], + width: "600", + height: "335", + updateInterval: 0.5 * 60 * 600000 + } + }, + { + module: "MMM-PlexNowPlaying", + position: "top_right", + config: { + serverProtocol: "https", + serverAddress: "plex.url.com", + serverPort: 443, + xPlexToken: "" + } + }, + { + module: "MMM-NowPlayingOnSpotify", + position: "top_right", + config: { + clientID: "", + clientSecret: "", + accessToken: "", + refreshToken: "", + updatesEvery: 5 + } + }, + { + module: "MMM-MyCalendar", + position: "lower_third", + config: { + maximumEntries: 7, + maxTitleLength: 50, + colored: true, + fade: false, + calendars: [ + { + url: 'https://calendar.google.com/basic.ics', + symbol: 'calendar', + color: '#b11f1f', + }, + ], + } + }, + { + module: "newsfeed", + position: "bottom_bar", + config: { + feeds: [ + { + title: "TMZ", + url: "https://www.tmz.com/rss.xml" + }, + { + title: "CNN", + url: "http://rss.cnn.com/rss/cnn_topstories.rss" + }, + { + title: "Complex", + url: "https://assets.complex.com/feeds/channels/all.xml" + }, + { + title: "The Verge", + url: "https://www.theverge.com/rss/index.xml" + } + ], + showSourceTitle: true, + showPublishDate: true, + broadcastNewsFeeds: true, + broadcastNewsUpdates: true + } + }, + { + module: "MMM-BackgroundSlideshow", + position: "fullscreen_below", + config: { + imagePaths: ["modules/MMM-BackgroundSlideshow/backgrounds"], + transitionImages: true, + gradient: [ "rgba(0, 0, 0, 0.97) 0%", "rgba(0, 0, 0, .75) 40%", "rgba(0, 0, 0, .75) 80%", "rgba(0, 0, 0, 0.97) 100%" ], + transitions: ["opacity", "flipX"], + randomizeImageOrder: true, + slideshowSpeed: 60000, + transitionSpeed: ".25s", + transitionTimingFunction: "ease-in-out" + } + }, + ] diff --git a/css/custom.css b/css/custom.css new file mode 100644 index 0000000..7cf22e7 --- /dev/null +++ b/css/custom.css @@ -0,0 +1,46 @@ +/* General Overwrites */ +body { background: #000; color: #fff; } +.normal { color: #fff; } +.dimmed { color: #9d9d9d; } +.module { margin-bottom: 48px !important; } +.module .module-header { display: none !important; } + +/* Alerts */ +.ns-box, .ns-alert { padding: 24px !important; border: 0 !important; border-radius:0 !importnat; background: rgba(230,0,0,.5); min-width: 360px; } +.ns-box-inner .dimmed { font-weight: 600 !important; color: #fff !important; } +.ns-box-inner .light { font-size: 24px !important; } + +/* Weather Forecast */ +.weatherforecast td.day { padding: 10px 0; text-transform: uppercase; } +.weatherforecast tr.colored .max-temp { color: #ff2a3f; } +.weatherforecast tr.colored .min-temp { color: #3397ff; } + +/* Spotify */ +.MMM-NowPlayingOnSpotify .NPOS_coverArtArea { max-width: 115px; float: left; margin-right: 16px; } +.MMM-NowPlayingOnSpotify .NPOS_infoText { font-size: 12px !important; } +.MMM-NowPlayingOnSpotify .NPOS_infoText:first-child { font-weight: 600 !important; } +.MMM-NowPlayingOnSpotify .NPOS_infoText:last-child { display: none; } +.MMM-NowPlayingOnSpotify .NPOS_infoText .NPOS_icon { color: #1ED760; } +.MMM-NowPlayingOnSpotify progress.NPOS_progress { position: relative; top: -20px; background-color: rgba(30,215,96,.15) !important; border:0 !important; height: 2px !important; } +.MMM-NowPlayingOnSpotify progress[value].NPOS_progress::-webkit-progress-value { background-color: #1ED760 !important; } +.MMM-NowPlayingOnSpotify .NPOS_nothingIsPlayingContent img { display: none; } + +/* Calendar */ +.MMM-MyCalendar { width: 100% !important; max-width: 100% !important; } +.MMM-MyCalendar table tr { display: block; margin: 12px 0; background: rgba(0,0,0,.35); border-bottom: 0; } +.MMM-MyCalendar table td { padding: 24px; } +.MMM-MyCalendar .symbol { width: 55px !important; height: 55px !important; font-size: 18px !important; font-weight:300; padding-top: 22px !important; top:10px !important; } +.MMM-MyCalendar .symbol .calendar-icon { width: 55px !important; height: 55px !important; } +.MMM-MyCalendar span.title, .MMM-MyCalendar span.time, .MMM-MyCalendar span.location { text-align: left !important; padding-left: 75px !important; } +.MMM-MyCalendar table tr:first-child { border-bottom: 5px solid rgba(18,250,18,.25); background: rgba(9,89,18,.35); } +.MMM-MyCalendar table tr:first-child .title { font-size: 36px; } +.MMM-MyCalendar table tr:first-child .time { font-size: 24px; text-transform: uppercase; color: #fff; } +.MMM-MyCalendar table tr:nth-child(2) { background: rgba(1,47,6,.35); } +.MMM-MyCalendar table tr:nth-child(3) { background: rgba(2,23,4,.35); } +.MMM-MyCalendar table tr:nth-last-child(1) { background: rgba(89,9,9,.35); } +.MMM-MyCalendar table tr:nth-last-child(2) { background: rgba(47,1,1,.35); } +.MMM-MyCalendar table tr:nth-last-child(3) { background: rgba(23,2,2,.35); } + +/* Plex */ +.MMM-PlexNowPlaying .spacerCell div { border: 0 !important; } +.MMM-PlexNowPlaying .no-streams-table { display: none; }