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 #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

6
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)
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)
@ -49,4 +51,4 @@ Takes the user's inserted location, language, unit type, and OpenWeatherMap API
###[MagicMirror-Modules by PaViRo](https://github.com/paviro/MagicMirror-Modules)
**Current features:** FRITZ!Box Callmonitor <br>
**Future features:** Faceregognition, personalized views, online banking through HBCI and multiple calenders based on faceregognition.
**Future features:** Faceregognition, personalized views, online banking through HBCI and multiple calenders based on faceregognition.

2
index.php
View File

@ -14,8 +14,8 @@
</head>
<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 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="lower-third center-hor"><div class="compliment light"></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 = {
lang: 'nl',
time: {
timeFormat: 12
timeFormat: 12,
displaySeconds: true,
digitFade: false,
},
weather: {
//change weather params here:

82
js/time/time.js
View File

@ -1,22 +1,81 @@
var time = {
timeFormat: config.time.timeFormat || 24,
dateLocation: '.date',
timeLocation: '.time',
timeLocation: '#time',
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
*/
time.updateTime = function () {
var _now = moment(),
_date = _now.format('dddd, LL');
$(this.dateLocation).html(_date);
$(this.timeLocation).html(_now.format(this._timeFormat+':mm[<span class="sec">]ss[</span>]'));
var timeLocation = this.timeLocation;
var _now = moment();
var _date = _now.format('[<span class="dayname">]dddd,[</span> <span class="longdate">]LL[</span>]');
$(this.dateLocation).updateWithText(_date, 1000);
$('.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) {
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>]'));
} else {
$(this.timeLocation).html(_now.format(this._timeFormat+':mm'));
}
}
}
time.init = function () {
@ -26,9 +85,6 @@ time.init = function () {
} else {
time._timeFormat = 'HH';
}
this.intervalId = setInterval(function () {
this.updateTime();
}.bind(this), 1000);
this.updateTime();
}