kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-06-28 04:02:12 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #70 from bitte-ein-bit/smooth-time

Browse Source 
Smooth time
This commit is contained in:
Michael Teeuw 2016-01-31 19:38:51 +01:00
commit 70560a5ff7
4 changed files with 77 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -34,7 +34,9 @@ Takes an array of news feeds (or a single string) from the config file and retri
###[Time](js/time) ###[Time](js/time)
Updates the time on the screen on one second interval. Updates the time on the screen on one second interval. Can be changed to omit displaying seconds by adding the config option ```displaySeconds = false``` in [config.js](js/config.js). When the seconds are disabled the interval is set to 60 seconds on the full minute.
With the option ```digitFade = true```, changing digits are faded. This looks best if the seconds are omitted.
###[Version](js/version) ###[Version](js/version)

2
index.php
View File

@ -14,8 +14,8 @@
</head> </head>
<body> <body>
<div class="top left"><div class="date small dimmed"></div><div class="time"></div><div class="calendar xxsmall"></div></div>
<div class="top right"><div class="windsun small dimmed"></div><div class="temp"></div><div class="forecast small dimmed"></div></div> <div class="top right"><div class="windsun small dimmed"></div><div class="temp"></div><div class="forecast small dimmed"></div></div>
<div class="top left"><div class="date small dimmed"></div><div class="time" id="time"></div><div class="calendar xxsmall"></div></div>
<div class="center-ver center-hor"><!-- <div class="dishwasher light">Vaatwasser is klaar!</div> --></div> <div class="center-ver center-hor"><!-- <div class="dishwasher light">Vaatwasser is klaar!</div> --></div>
<div class="lower-third center-hor"><div class="compliment light"></div></div> <div class="lower-third center-hor"><div class="compliment light"></div></div>
<div class="bottom center-hor"><div class="news medium"></div></div> <div class="bottom center-hor"><div class="news medium"></div></div>

4
js/config.js
View File

@ -1,7 +1,9 @@
var config = { var config = {
lang: 'nl', lang: 'nl',
time: { time: {
timeFormat: 12 timeFormat: 12,
displaySeconds: true,
digitFade: false,
}, },
weather: { weather: {
//change weather params here: //change weather params here:

74
js/time/time.js
View File

@ -1,22 +1,81 @@
var time = { var time = {
timeFormat: config.time.timeFormat || 24, timeFormat: config.time.timeFormat || 24,
dateLocation: '.date', dateLocation: '.date',
timeLocation: '.time', timeLocation: '#time',
updateInterval: 1000, updateInterval: 1000,
intervalId: null intervalId: undefined,
displaySeconds: (typeof config.time.displaySeconds == 'undefined') ? true : config.time.displaySeconds,
digitFade: (typeof config.time.digitFade == 'undefined') ? false : config.time.digitFade,
}; };
/** /**
* Updates the time that is shown on the screen * Updates the time that is shown on the screen
*/ */
time.updateTime = function () { time.updateTime = function () {
var timeLocation = this.timeLocation;
var _now = moment();
var _date = _now.format('[<span class="dayname">]dddd,[</span> <span class="longdate">]LL[</span>]');
var _now = moment(), $(this.dateLocation).updateWithText(_date, 1000);
_date = _now.format('dddd, LL'); $('.fade').removeClass('fade')
var html = ''
if (this.displaySeconds) {
html = _now.format(this._timeFormat+':mm').replace(/./g, '<span class="digit">$&</span>') +
'<span class="sec">' + _now.format('ss').replace(/./g, '<span class="digit">$&</span>') + '</span>';
if (typeof this.intervalId == 'undefined') {
this.intervalId = setInterval(function () {
this.updateTime();
}.bind(this), this.updateInterval);
}
} else {
html = _now.format(this._timeFormat+':mm').replace(/./g, '<span class="digit">$&</span>');
if (this.intervalId) {
clearInterval(this.intervalId);
this.intervalId = undefined;
}
seconds = 60 - (new Date()).getSeconds();
setTimeout(function () {
this.updateTime();
}.bind(this), seconds*1000);
}
if (this.digitFade) {
var diff = $('<div>').html(html);
diff.find('.digit').each(function( index ) {
var _text = $( this ).text();
var _i = index+1;
var liveNode = $(timeLocation).find('.digit')[index]
if (typeof liveNode != 'undefined') {
liveNode = $(liveNode);
var _text2 = liveNode.text();
if (_text != _text2) {
$(this.dateLocation).html(_date); liveNode.addClass('fade');
$(this).addClass('fade');
}
} else {
$(this).addClass('fade');
}
});
if ($('.fade').length == 0) {
// Initial Update
$(this.timeLocation).html(diff.html());
diff = undefined;
} else {
$('.fade').fadeTo(400, 0.25, function() {
if (typeof diff != 'undefined') {
$(this.timeLocation).html(diff.html());
diff = undefined;
}
$('.fade').fadeTo(400, 1).removeClass('fade');
}.bind(this));
}
} else {
if (this.displaySeconds) {
$(this.timeLocation).html(_now.format(this._timeFormat+':mm[<span class="sec">]ss[</span>]')); $(this.timeLocation).html(_now.format(this._timeFormat+':mm[<span class="sec">]ss[</span>]'));
} else {
$(this.timeLocation).html(_now.format(this._timeFormat+':mm'));
}
}
} }
time.init = function () { time.init = function () {
@ -26,9 +85,6 @@ time.init = function () {
} else { } else {
time._timeFormat = 'HH'; time._timeFormat = 'HH';
} }
this.intervalId = setInterval(function () {
this.updateTime(); this.updateTime();
}.bind(this), 1000);
} }