kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-06-27 11:50:00 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #51 from plfstr/master

Browse Source 
Code Tidy
This commit is contained in:
Michael Teeuw 2016-01-20 14:20:39 +01:00
commit 0880bf7d8d
5 changed files with 166 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -5,12 +5,12 @@ MagicMirror
The super magic interface of my personal Magic Mirror. More information about this project can be found on my [blog](http://michaelteeuw.nl/tagged/magicmirror). The super magic interface of my personal Magic Mirror. More information about this project can be found on my [blog](http://michaelteeuw.nl/tagged/magicmirror).
Runs as a php script on a web server with basically no external dependencies. Can use socket.io for XBEE integration, but isn't required for basic functionality. Runs as a php script on a web server with basically no external dependencies. *Can use socket.io for XBEE integration, but isn't required for basic functionality*.
##Configuration ##Configuration
Modify js/config.js to change some general variables (language, wather location, compliments, news feed RSS and to add your own ICS calendar) Modify `js/config.js` to change some general variables (language, weather location, compliments, news feed RSS and to add your own ICS calendar)
To use the OpenWeatherMap API, you'll need a free API key. Checkout [this blogpost](http://michaelteeuw.nl/post/131504229357/what-happened-to-the-weather) for more information. To use the OpenWeatherMap API, you'll need a free API key. Checkout [this blogpost](http://michaelteeuw.nl/post/131504229357/what-happened-to-the-weather) for more information.
@ -22,7 +22,7 @@ This file initiates the separate pieces of functionality that will appear in the
###[Calendar](js/calendar) ###[Calendar](js/calendar)
Parsing functionality for the Calendar that retrieves and updates the calendar based on the interval set at the top of the [calendar.js](js/calendar/calendar.js) file. This was actually a straight pull from the original main.js file but the parsing code may deserve an upgrade. Parsing functionality for the calendar that retrieves and updates the calendar based on the interval set at the top of the [calendar.js](js/calendar/calendar.js) file. This was actually a straight pull from the original main.js file but the parsing code may deserve an upgrade.
###[Compliments](js/compliments) ###[Compliments](js/compliments)

307
css/main.css
View File

@ -1,231 +1,224 @@
body, html { body,
background: #000; html {
padding: 0px; background: #000;
margin: 0px; padding: 0px;
width:100%; margin: 0px;
height: 100%; width: 100%;
height: 100%;
font-family: "HelveticaNeue-Light", sans-serif;
font-family: "HelveticaNeue-Light"; letter-spacing: -2px;
letter-spacing: -2px; color: #fff;
color: #fff; font-size: 75px;
font-size: 75px; -webkit-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased; text-rendering: geometricprecision;
} }
.wi { .wi {
line-height: 75px; line-height: 75px;
} }
.top .top {
{ position: absolute;
position: absolute; top: 50px;
top: 50px;
} }
.left .left {
{ position: absolute;
position: absolute; left: 50px;
left: 50px;
}
.right
{
position: absolute;
right: 50px;
text-align: right;
} }
.center-ver .right {
{ position: absolute;
position: absolute; right: 50px;
top: 50%; text-align: right;
height: 200px;
margin-top: -100px;
line-height: 100px;
} }
.lower-third .center-ver {
{ position: absolute;
position: absolute; top: 50%;
top: 66.666%; height: 200px;
height: 200px; margin-top: -100px;
margin-top: -100px; line-height: 100px;
line-height: 100px;
} }
.center-hor .lower-third {
{ position: absolute;
position: absolute; top: 66.666%;
right: 50px; height: 200px;
left: 50px; margin-top: -100px;
text-align: center; line-height: 100px;
} }
.bottom .center-hor {
{ position: absolute;
position: absolute; right: 50px;
bottom: 50px; left: 50px;
text-align: center;
} }
.xxsmall .bottom {
{ position: absolute;
font-size: 15px; bottom: 50px;
letter-spacing: 0px;
font-family: "HelveticaNeue-Medium";
} }
.xxsmall,
.xsmall,
.small {
font-family: "HelveticaNeue-Medium", sans-serif;
letter-spacing: 0;
}
.xxsmall {
font-size: 15px;
}
.xxsmall .wi { .xxsmall .wi {
line-height: 15px; line-height: 15px;
} }
.xsmall .xsmall {
{ font-size: 20px;
font-size: 20px;
letter-spacing: 0px;
font-family: "HelveticaNeue-Medium";
} }
.xsmall .wi { .xsmall .wi {
line-height: 20px; line-height: 20px;
} }
.small {
.small font-size: 25px;
{
font-size: 25px;
letter-spacing: 0px;
font-family: "HelveticaNeue-Medium";
} }
.small .wi { .small .wi {
line-height: 25px; line-height: 25px;
} }
.medium .medium {
{ font-size: 35px;
font-size: 35px; letter-spacing: -1px;
letter-spacing: -1px; font-family: "HelveticaNeue-Light", sans-serif;
font-family: "HelveticaNeue-Light";
} }
.medium .wi { .medium .wi {
line-height: 35px; line-height: 35px;
} }
.xdimmed .xdimmed {
{ color: #666;
color: #666;
} }
.dimmed .dimmed {
{ color: #aaa;
color: #aaa;
} }
.light .light {
{ font-family: "HelveticaNeue-UltraLight", sans-serif;
font-family: "HelveticaNeue-UltraLight";
} }
.icon .icon {
{ position: relative;
position: relative; top: -10px;
top :-10px; display: inline-block;
display: inline-block; font-size: 45px;
font-size: 45px; padding-right: 5px;
padding-right: 5px; font-weight: 100;
font-weight: 100; margin-right: 10px;
margin-right: 10px;
} }
.icon-small .icon-small {
{ position: relative;
position: relative; display: inline-block;
display: inline-block; font-size: 20px;
font-size: 20px; padding-left: 10px;
padding-left: 10px; padding-right: -10px;
padding-right: -10px; font-weight: 100;
font-weight: 100;
} }
.time .sec { .time .sec {
font-size: 25px; font-size: 25px;
color: #666; color: #666;
padding-left: 5px; padding-left: 5px;
position: relative; position: relative;
top: -35px; top: -35px;
} }
.forecast-table { .forecast-table {
float: right; float: right;
text-align: right; text-align: right;
font-size: 20px; font-size: 20px;
line-height: 20px; line-height: 20px;
}
.forecast-table .day, .forecast-table .temp-min, .forecast-table .temp-max
{
width: 50px;
text-align: right;
} }
.forecast-table .temp-max .forecast-table .day,
{ .forecast-table .temp-min,
width: 60px; .forecast-table .temp-max {
width: 50px;
text-align: right;
} }
.forecast-table .day .forecast-table .temp-max {
{ width: 60px;
color: #999; }
.forecast-table .day {
color: #999;
} }
.calendar-table { .calendar-table {
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
margin-top: 10px; margin-top: 10px;
} }
.calendar-table .days { .calendar-table .days {
padding-left: 20px; padding-left: 20px;
text-align: right; text-align: right;
} }
.dishwasher { .dishwasher {
background-color: white; background-color: white;
color: black; color: black;
margin: 0 200px; margin: 0 200px;
font-size: 60px; font-size: 60px;
border-radius: 1000px; border-radius: 1000px;
border-radius: 1200px; border-radius: 1200px;
display: none; display: none;
} }
@font-face { @font-face {
font-family: 'HelveticaNeue-UltraLight'; font-family: 'HelveticaNeue-UltraLight';
src: url('font/HelveticaNeue-UltraLight.eot'); /* IE9 Compat Modes */ src: url('font/HelveticaNeue-UltraLight.eot');
/* IE9 Compat Modes */
src: url('font/HelveticaNeue-UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ src: url('font/HelveticaNeue-UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/HelveticaNeue-UltraLight.woff') format('woff'), /* Modern Browsers */ url('font/HelveticaNeue-UltraLight.woff') format('woff'), /* Modern Browsers */
url('font/HelveticaNeue-UltraLight.ttf') format('truetype'), /* Safari, Android, iOS */ url('font/HelveticaNeue-UltraLight.ttf') format('truetype'), /* Safari, Android, iOS */
url('font/HelveticaNeue-UltraLight.svg#9453ea8da727d260bcdbfa605bdbb5d2') format('svg'); /* Legacy iOS */ url('font/HelveticaNeue-UltraLight.svg#9453ea8da727d260bcdbfa605bdbb5d2') format('svg');
font-style: normal; /* Legacy iOS */
font-weight: 100; font-style: normal;
font-weight: 100;
} }
@font-face { @font-face {
font-family: 'HelveticaNeue-Medium'; font-family: 'HelveticaNeue-Medium';
src: url('font/HelveticaNeue-Medium.eot'); /* IE9 Compat Modes */ src: url('font/HelveticaNeue-Medium.eot');
/* IE9 Compat Modes */
src: url('font/HelveticaNeue-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ src: url('font/HelveticaNeue-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/HelveticaNeue-Medium.woff') format('woff'), /* Modern Browsers */ url('font/HelveticaNeue-Medium.woff') format('woff'), /* Modern Browsers */
url('font/HelveticaNeue-Medium.ttf') format('truetype'), /* Safari, Android, iOS */ url('font/HelveticaNeue-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
url('font/HelveticaNeue-Medium.svg#d7af0fd9278f330eed98b60dddea7bd6') format('svg'); /* Legacy iOS */ url('font/HelveticaNeue-Medium.svg#d7af0fd9278f330eed98b60dddea7bd6') format('svg');
font-style: normal; /* Legacy iOS */
font-weight: 400; font-style: normal;
font-weight: 400;
} }
@font-face { @font-face {
font-family: 'HelveticaNeue-Light'; font-family: 'HelveticaNeue-Light';
src: url('font/HelveticaNeue-Light.eot'); /* IE9 Compat Modes */ src: url('font/HelveticaNeue-Light.eot');
/* IE9 Compat Modes */
src: url('font/HelveticaNeue-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ src: url('font/HelveticaNeue-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/HelveticaNeue-Light.woff') format('woff'), /* Modern Browsers */ url('font/HelveticaNeue-Light.woff') format('woff'), /* Modern Browsers */
url('font/HelveticaNeue-Light.ttf') format('truetype'), /* Safari, Android, iOS */ url('font/HelveticaNeue-Light.ttf') format('truetype'), /* Safari, Android, iOS */
url('font/HelveticaNeue-Light.svg#7384ecabcada72f0e077cd45d8e1c705') format('svg'); /* Legacy iOS */ url('font/HelveticaNeue-Light.svg#7384ecabcada72f0e077cd45d8e1c705') format('svg');
font-style: normal; /* Legacy iOS */
font-weight: 200; font-style: normal;
font-weight: 200;
} }

13
index.php
View File

@ -27,14 +27,13 @@
<script src="js/moment-with-locales.min.js"></script> <script src="js/moment-with-locales.min.js"></script>
<script src="js/config.js"></script> <script src="js/config.js"></script>
<script src="js/rrule.js"></script> <script src="js/rrule.js"></script>
<script src="js/version/version.js" type="text/javascript"></script> <script src="js/version/version.js"></script>
<script src="js/calendar/calendar.js" type="text/javascript"></script> <script src="js/calendar/calendar.js"></script>
<script src="js/compliments/compliments.js" type="text/javascript"></script> <script src="js/compliments/compliments.js"></script>
<script src="js/weather/weather.js" type="text/javascript"></script> <script src="js/weather/weather.js"></script>
<script src="js/time/time.js" type="text/javascript"></script> <script src="js/time/time.js"></script>
<script src="js/news/news.js" type="text/javascript"></script> <script src="js/news/news.js"></script>
<script src="js/main.js?nocache=<?php echo md5(microtime()) ?>"></script> <script src="js/main.js?nocache=<?php echo md5(microtime()) ?>"></script>
<!-- <script src="js/socket.io.min.js"></script> --> <!-- <script src="js/socket.io.min.js"></script> -->
</body> </body>
</html> </html>

4
js/jquery.feedToJSON.js
View File

@ -21,7 +21,7 @@
//defaults //defaults
$.feedToJson.defaults = { $.feedToJson.defaults = {
yqlURL : 'http://query.yahooapis.com/v1/public/yql', //yql yqlURL : 'https://query.yahooapis.com/v1/public/yql', //yql
yqlQS : '?format=json&callback=?&q=select%20*%20from%20rss%20where%20url%3D', //yql query string yqlQS : '?format=json&callback=?&q=select%20*%20from%20rss%20where%20url%3D', //yql query string
feed:'http://instagr.am/tags/tacos/feed/recent.rss', //instagram recent posts tagged 'tacos' feed:'http://instagr.am/tags/tacos/feed/recent.rss', //instagram recent posts tagged 'tacos'
cachebuster: Math.floor((new Date().getTime()) / 1200 / 1000), //yql caches feeds, so we change the feed url every 20min cachebuster: Math.floor((new Date().getTime()) / 1200 / 1000), //yql caches feeds, so we change the feed url every 20min
@ -30,5 +30,3 @@
})(jQuery); })(jQuery);
// eo feedToJson // eo feedToJson

2
js/news/news.js
View File

@ -6,7 +6,7 @@ var news = {
newsLocation: '.news', newsLocation: '.news',
newsItems: [], newsItems: [],
seenNewsItem: [], seenNewsItem: [],
_yqURL: 'http://query.yahooapis.com/v1/public/yql', _yqURL: 'https://query.yahooapis.com/v1/public/yql',
_yqlQS: '?format=json&q=select%20*%20from%20rss%20where%20url%3D', _yqlQS: '?format=json&q=select%20*%20from%20rss%20where%20url%3D',
_cacheBuster: Math.floor((new Date().getTime()) / 1200 / 1000), _cacheBuster: Math.floor((new Date().getTime()) / 1200 / 1000),
_failedAttempts: 0, _failedAttempts: 0,