mirror of
https://github.com/MichMich/MagicMirror.git
synced 2025-06-27 03:39:55 +00:00
Michael Teeuw
commit
0880bf7d8d
@ -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).
|
||||
|
||||
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
|
||||
|
||||
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.
|
||||
|
||||
@ -22,7 +22,7 @@ This file initiates the separate pieces of functionality that will appear in the
|
||||
|
||||
###[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)
|
||||
|
||||
|
||||
307
css/main.css
307
css/main.css
@ -1,231 +1,224 @@
|
||||
body, html {
|
||||
background: #000;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
font-family: "HelveticaNeue-Light";
|
||||
letter-spacing: -2px;
|
||||
color: #fff;
|
||||
font-size: 75px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
body,
|
||||
html {
|
||||
background: #000;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "HelveticaNeue-Light", sans-serif;
|
||||
letter-spacing: -2px;
|
||||
color: #fff;
|
||||
font-size: 75px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: geometricprecision;
|
||||
}
|
||||
|
||||
.wi {
|
||||
line-height: 75px;
|
||||
|
||||
line-height: 75px;
|
||||
}
|
||||
|
||||
.top
|
||||
{
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
.top {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.left
|
||||
{
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
}
|
||||
.right
|
||||
{
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
text-align: right;
|
||||
.left {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
.center-ver
|
||||
{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
height: 200px;
|
||||
margin-top: -100px;
|
||||
line-height: 100px;
|
||||
.right {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.lower-third
|
||||
{
|
||||
position: absolute;
|
||||
top: 66.666%;
|
||||
height: 200px;
|
||||
margin-top: -100px;
|
||||
line-height: 100px;
|
||||
.center-ver {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
height: 200px;
|
||||
margin-top: -100px;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
.center-hor
|
||||
{
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
left: 50px;
|
||||
text-align: center;
|
||||
.lower-third {
|
||||
position: absolute;
|
||||
top: 66.666%;
|
||||
height: 200px;
|
||||
margin-top: -100px;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
.bottom
|
||||
{
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
.center-hor {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
left: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.xxsmall
|
||||
{
|
||||
font-size: 15px;
|
||||
letter-spacing: 0px;
|
||||
font-family: "HelveticaNeue-Medium";
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
}
|
||||
|
||||
.xxsmall,
|
||||
.xsmall,
|
||||
.small {
|
||||
font-family: "HelveticaNeue-Medium", sans-serif;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.xxsmall {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.xxsmall .wi {
|
||||
line-height: 15px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.xsmall
|
||||
{
|
||||
font-size: 20px;
|
||||
letter-spacing: 0px;
|
||||
font-family: "HelveticaNeue-Medium";
|
||||
.xsmall {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.xsmall .wi {
|
||||
line-height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
|
||||
.small
|
||||
{
|
||||
font-size: 25px;
|
||||
letter-spacing: 0px;
|
||||
font-family: "HelveticaNeue-Medium";
|
||||
.small {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.small .wi {
|
||||
line-height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.medium
|
||||
{
|
||||
font-size: 35px;
|
||||
letter-spacing: -1px;
|
||||
font-family: "HelveticaNeue-Light";
|
||||
.medium {
|
||||
font-size: 35px;
|
||||
letter-spacing: -1px;
|
||||
font-family: "HelveticaNeue-Light", sans-serif;
|
||||
}
|
||||
|
||||
.medium .wi {
|
||||
line-height: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.xdimmed
|
||||
{
|
||||
color: #666;
|
||||
.xdimmed {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.dimmed
|
||||
{
|
||||
color: #aaa;
|
||||
.dimmed {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.light
|
||||
{
|
||||
font-family: "HelveticaNeue-UltraLight";
|
||||
.light {
|
||||
font-family: "HelveticaNeue-UltraLight", sans-serif;
|
||||
}
|
||||
|
||||
.icon
|
||||
{
|
||||
position: relative;
|
||||
top :-10px;
|
||||
display: inline-block;
|
||||
font-size: 45px;
|
||||
padding-right: 5px;
|
||||
font-weight: 100;
|
||||
margin-right: 10px;
|
||||
.icon {
|
||||
position: relative;
|
||||
top: -10px;
|
||||
display: inline-block;
|
||||
font-size: 45px;
|
||||
padding-right: 5px;
|
||||
font-weight: 100;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.icon-small
|
||||
{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
padding-left: 10px;
|
||||
padding-right: -10px;
|
||||
font-weight: 100;
|
||||
.icon-small {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
padding-left: 10px;
|
||||
padding-right: -10px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.time .sec {
|
||||
font-size: 25px;
|
||||
color: #666;
|
||||
padding-left: 5px;
|
||||
position: relative;
|
||||
top: -35px;
|
||||
font-size: 25px;
|
||||
color: #666;
|
||||
padding-left: 5px;
|
||||
position: relative;
|
||||
top: -35px;
|
||||
}
|
||||
|
||||
.forecast-table {
|
||||
float: right;
|
||||
text-align: right;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.forecast-table .day, .forecast-table .temp-min, .forecast-table .temp-max
|
||||
{
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
float: right;
|
||||
text-align: right;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.forecast-table .temp-max
|
||||
{
|
||||
width: 60px;
|
||||
.forecast-table .day,
|
||||
.forecast-table .temp-min,
|
||||
.forecast-table .temp-max {
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.forecast-table .day
|
||||
{
|
||||
color: #999;
|
||||
.forecast-table .temp-max {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.forecast-table .day {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.calendar-table {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.calendar-table .days {
|
||||
padding-left: 20px;
|
||||
text-align: right;
|
||||
padding-left: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dishwasher {
|
||||
background-color: white;
|
||||
color: black;
|
||||
margin: 0 200px;
|
||||
font-size: 60px;
|
||||
border-radius: 1000px;
|
||||
border-radius: 1200px;
|
||||
display: none;
|
||||
background-color: white;
|
||||
color: black;
|
||||
margin: 0 200px;
|
||||
font-size: 60px;
|
||||
border-radius: 1000px;
|
||||
border-radius: 1200px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
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 */
|
||||
url('font/HelveticaNeue-UltraLight.woff') format('woff'), /* Modern Browsers */
|
||||
url('font/HelveticaNeue-UltraLight.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('font/HelveticaNeue-UltraLight.svg#9453ea8da727d260bcdbfa605bdbb5d2') format('svg'); /* Legacy iOS */
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
url('font/HelveticaNeue-UltraLight.woff') format('woff'), /* Modern Browsers */
|
||||
url('font/HelveticaNeue-UltraLight.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('font/HelveticaNeue-UltraLight.svg#9453ea8da727d260bcdbfa605bdbb5d2') format('svg');
|
||||
/* Legacy iOS */
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
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 */
|
||||
url('font/HelveticaNeue-Medium.woff') format('woff'), /* Modern Browsers */
|
||||
url('font/HelveticaNeue-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('font/HelveticaNeue-Medium.svg#d7af0fd9278f330eed98b60dddea7bd6') format('svg'); /* Legacy iOS */
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
url('font/HelveticaNeue-Medium.woff') format('woff'), /* Modern Browsers */
|
||||
url('font/HelveticaNeue-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('font/HelveticaNeue-Medium.svg#d7af0fd9278f330eed98b60dddea7bd6') format('svg');
|
||||
/* Legacy iOS */
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
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 */
|
||||
url('font/HelveticaNeue-Light.woff') format('woff'), /* Modern Browsers */
|
||||
url('font/HelveticaNeue-Light.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('font/HelveticaNeue-Light.svg#7384ecabcada72f0e077cd45d8e1c705') format('svg'); /* Legacy iOS */
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
url('font/HelveticaNeue-Light.woff') format('woff'), /* Modern Browsers */
|
||||
url('font/HelveticaNeue-Light.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('font/HelveticaNeue-Light.svg#7384ecabcada72f0e077cd45d8e1c705') format('svg');
|
||||
/* Legacy iOS */
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
|
||||
13
index.php
13
index.php
@ -27,14 +27,13 @@
|
||||
<script src="js/moment-with-locales.min.js"></script>
|
||||
<script src="js/config.js"></script>
|
||||
<script src="js/rrule.js"></script>
|
||||
<script src="js/version/version.js" type="text/javascript"></script>
|
||||
<script src="js/calendar/calendar.js" type="text/javascript"></script>
|
||||
<script src="js/compliments/compliments.js" type="text/javascript"></script>
|
||||
<script src="js/weather/weather.js" type="text/javascript"></script>
|
||||
<script src="js/time/time.js" type="text/javascript"></script>
|
||||
<script src="js/news/news.js" type="text/javascript"></script>
|
||||
<script src="js/version/version.js"></script>
|
||||
<script src="js/calendar/calendar.js"></script>
|
||||
<script src="js/compliments/compliments.js"></script>
|
||||
<script src="js/weather/weather.js"></script>
|
||||
<script src="js/time/time.js"></script>
|
||||
<script src="js/news/news.js"></script>
|
||||
<script src="js/main.js?nocache=<?php echo md5(microtime()) ?>"></script>
|
||||
<!-- <script src="js/socket.io.min.js"></script> -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
//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
|
||||
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
|
||||
@ -30,5 +30,3 @@
|
||||
|
||||
})(jQuery);
|
||||
// eo feedToJson
|
||||
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ var news = {
|
||||
newsLocation: '.news',
|
||||
newsItems: [],
|
||||
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',
|
||||
_cacheBuster: Math.floor((new Date().getTime()) / 1200 / 1000),
|
||||
_failedAttempts: 0,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user