From 0eea07f3d920a95657414f60d62eabb638bc51c5 Mon Sep 17 00:00:00 2001 From: "Yuki (aka Ruben Gomez)" Date: Thu, 22 May 2014 19:48:46 +0200 Subject: [PATCH] Added few improvements to make MagicMirror better Used momentjs' translations for every DateTime strings. No more need to add translations. Added config.js to use as a central file for configurations. Try to use Gmail's calendars and I've seen that there are some problems (with old events, when an event has "email remembers", and with TimeZones). I'll try to solve it soon. --- README.md | 2 + index.php | 1 + js/config.js | 23 +++++++++ js/main.js | 133 ++++++++++++++------------------------------------- 4 files changed, 63 insertions(+), 96 deletions(-) create mode 100644 js/config.js diff --git a/README.md b/README.md index 4146e852..851b25f4 100644 --- a/README.md +++ b/README.md @@ -2,3 +2,5 @@ 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). + +Modify js/config.js to change some general variables (language, wather location, compliments) and calendar.php to add your own ICS calendar diff --git a/index.php b/index.php index b269afbe..e1318aa2 100644 --- a/index.php +++ b/index.php @@ -25,6 +25,7 @@ + diff --git a/js/config.js b/js/config.js new file mode 100644 index 00000000..b88f939d --- /dev/null +++ b/js/config.js @@ -0,0 +1,23 @@ +// for navigator language +var lang = window.navigator.language; +// you can change the language +//var lang = 'en'; + +//change weather params here: +var weatherParams = { + 'q':'Baarn,Netherlands', + 'units':'metric', + 'lang':lang +}; + +// compliments: +var compliments = [ + 'Hey, handsome!', + 'Hi, sexy!', + 'Hello, beauty!', + 'You look sexy!', + 'Wow, you look hot!', + 'Looking good today!', + 'You look nice!', + 'Enjoy your day!' + ]; diff --git a/js/main.js b/js/main.js index 5142ffdd..1d096b00 100644 --- a/js/main.js +++ b/js/main.js @@ -8,10 +8,10 @@ jQuery.fn.updateWithText = function(text, speed) $(this).html(text); $(this).fadeIn(speed/2, function() { //done - }); + }); }); } -} +} jQuery.fn.outerHTML = function(s) { return s @@ -46,49 +46,7 @@ jQuery(document).ready(function($) { var lastCompliment; var compliment; - // multi-langugage support according to browser-lang - var lang = window.navigator.language; - switch (lang) - { - case 'de': - var days = ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag']; - var months = ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember']; - var dayAbbr = ['So','Mo','Di','Mi','Do','Fr','Sa']; - var today = 'heute'; - var tomorrow = 'morgen'; - var in_days = 'Tage'; - break; - case 'nl': - var days = ['zondag','maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag']; - var months = ['januari','februari','maart','april','mei','juni','juli','augustus','september','oktober','november','december']; - var dayAbbr = ['zo','ma','di','wo','do','vr','za']; - var today = 'vandaag'; - var tomorrow = 'morgen'; - var in_days = 'dagen'; - break; - case 'fr': - var days = ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi']; - var months = ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre']; - var dayAbbr = ['dim','lun','mar','mer','jeu','ven','sam']; - var today = 'aujourd\'hui'; - var tomorrow = 'demain'; - var in_days = 'jour(s)'; - break; - case 'no': - var days = ['søndag','mandag','tirsdag','onsdag','torsdag','fredag','lørdag']; - var months = ['januar','februar','mars','april','mai','juni','juli','august','september','oktober','november','desember']; - var dayAbbr = ['søn','man','tirs','ons','tors','fre','lør']; - var today = 'i dag'; - var tomorrow = 'i morgen'; - var in_days = 'dager'; - default: - var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; - var months = ['January','February','March','April','May','June','July','August','September','October','November','December']; - var dayAbbr = ['Sun','Mon','Tues','Wed','Thur','Fri','Sat']; - var today = 'Today'; - var tomorrow = 'Tomorrow'; - var in_days = 'days'; - } + moment.lang(lang); //connect do Xbee monitor var socket = io.connect('http://rpi-development.local:8080'); @@ -98,17 +56,11 @@ jQuery(document).ready(function($) { $('.lower-third').fadeOut(2000); } else { $('.dishwasher').fadeOut(2000); - $('.lower-third').fadeIn(2000); + $('.lower-third').fadeIn(2000); } }); - var weatherParams = { - 'q':'Baarn,Netherlands', - 'units':'metric', - 'lang':lang - }; - (function checkVersion() { $.getJSON('githash.php', {}, function(json, textStatus) { @@ -126,18 +78,12 @@ jQuery(document).ready(function($) { (function updateTime() { - var now = new Date(); - - var day = now.getDay(); - var date = now.getDate(); - var month = now.getMonth(); - var year = now.getFullYear(); - - var date = days[day] + ', ' + date+' ' + months[month] + ' ' + year; - + var now = moment(); + var date = now.format('LLLL').split(' ',4); + date = date[0] + ' ' + date[1] + ' ' + date[2] + ' ' + date[3]; $('.date').html(date); - $('.time').html(now.toTimeString().substring(0,5) + ''+now.toTimeString().substring(6,8)+''); + $('.time').html(now.format('HH') + ':' + now.format('mm') + ''+now.format('ss')+''); setTimeout(function() { updateTime(); @@ -168,22 +114,34 @@ jQuery(document).ready(function($) { dt = new Date(value.substring(0,4), value.substring(4,6) - 1, value.substring(6,8), value.substring(9,11), value.substring(11,13), value.substring(13,15)); } - if (mainKey == 'DTSTART') e.startDate = dt; - if (mainKey == 'DTEND') e.endDate = dt; + if (mainKey == 'DTSTART') e.startDate = dt; + if (mainKey == 'DTEND') e.endDate = dt; } } + if (e.startDate == undefined){ + //some old events in Gmail Calendar is "start_date" + //FIXME: problems with Gmail's TimeZone + var days = moment(e.DTSTART).diff(moment(), 'days'); + var seconds = moment(e.DTSTART).diff(moment(), 'seconds'); + var startDate = moment(e.DTSTART); + } else { + var days = moment(e.startDate).diff(moment(), 'days'); + var seconds = moment(e.startDate).diff(moment(), 'seconds'); + var startDate = moment(e.startDate); + } - var now = new Date(); - var today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); - var days = moment(e.startDate).diff(moment(today), 'days'); - - //only add fututre events - if (days >= 0) { - eventList.push({'description':e.SUMMARY,'days':days}); + //only add fututre events, days doesn't work, we need to check seconds + if (seconds >= 0) { + if (seconds <= 60*60*5 || seconds >= 60*60*24*2) { + var time_string = moment(startDate).fromNow(); + }else { + var time_string = moment(startDate).calendar() + } + eventList.push({'description':e.SUMMARY,'seconds':seconds,'days':time_string}); } }; - eventList.sort(function(a,b){return a.days-b.days}); + eventList.sort(function(a,b){return a.seconds-b.seconds}); setTimeout(function() { updateCalendarData(); @@ -199,16 +157,10 @@ jQuery(document).ready(function($) { for (var i in eventList) { var e = eventList[i]; - var days = e.days; - var daysString = (days == 1) ? tomorrow : days + ' ' + in_days; - if (days == 0) { - daysString = today; - } - var row = $('').css('opacity',opacity); row.append($('').html(e.description).addClass('description')); - row.append($('').html(daysString).addClass('days dimmed')); + row.append($('').html(e.days).addClass('days dimmed')); table.append(row); opacity -= 1 / eventList.length; @@ -223,18 +175,7 @@ jQuery(document).ready(function($) { (function updateCompliment() { - - var compliments = [ - 'Hey, handsome!', - 'Hi, sexy!', - 'Hello, beauty!', - 'You look sexy!', - 'Wow, you look hot!', - 'Looking good today!', - 'You look nice!', - 'Enjoy your day!' - ]; - + //see compliments.js while (compliment == lastCompliment) { compliment = Math.floor(Math.random()*compliments.length); } @@ -269,9 +210,9 @@ jQuery(document).ready(function($) { '10n':'wi-night-rain', '11n':'wi-night-thunderstorm', '13n':'wi-night-snow', - '50n':'wi-night-alt-cloudy-windy' + '50n':'wi-night-alt-cloudy-windy' } - + $.getJSON('http://api.openweathermap.org/data/2.5/weather', weatherParams, function(json, textStatus) { @@ -324,7 +265,7 @@ jQuery(document).ready(function($) { }; } else { forecastData[dateKey]['temp_min'] = (forecast.main.temp < forecastData[dateKey]['temp_min']) ? forecast.main.temp : forecastData[dateKey]['temp_min']; - forecastData[dateKey]['temp_max'] = (forecast.main.temp > forecastData[dateKey]['temp_max']) ? forecast.main.temp : forecastData[dateKey]['temp_max']; + forecastData[dateKey]['temp_max'] = (forecast.main.temp > forecastData[dateKey]['temp_max']) ? forecast.main.temp : forecastData[dateKey]['temp_max']; } } @@ -337,7 +278,7 @@ jQuery(document).ready(function($) { var dt = new Date(forecast.timestamp); var row = $('').css('opacity', opacity); - row.append($('').addClass('day').html(dayAbbr[dt.getDay()])); + row.append($('').addClass('day').html(moment.weekdaysShort(dt.getDay()))); row.append($('').addClass('temp-max').html(roundVal(forecast.temp_max))); row.append($('').addClass('temp-min').html(roundVal(forecast.temp_min))); @@ -382,5 +323,5 @@ jQuery(document).ready(function($) { showNews(); }, 5500); })(); - + });