diff --git a/README.md b/README.md
index 80369124..5424bd0d 100644
--- a/README.md
+++ b/README.md
@@ -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
-**Future features:** Faceregognition, personalized views, online banking through HBCI and multiple calenders based on faceregognition.
\ No newline at end of file
+**Future features:** Faceregognition, personalized views, online banking through HBCI and multiple calenders based on faceregognition.
diff --git a/index.php b/index.php
index c5becc39..f191651f 100644
--- a/index.php
+++ b/index.php
@@ -14,8 +14,8 @@
-
+
diff --git a/js/config.js b/js/config.js
index a0e1873e..5cc43dca 100755
--- a/js/config.js
+++ b/js/config.js
@@ -1,7 +1,9 @@
var config = {
lang: 'nl',
time: {
- timeFormat: 12
+ timeFormat: 12,
+ displaySeconds: true,
+ digitFade: false,
},
weather: {
//change weather params here:
diff --git a/js/time/time.js b/js/time/time.js
index f2a5a286..800278b8 100644
--- a/js/time/time.js
+++ b/js/time/time.js
@@ -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[]ss[]'));
-
+ var timeLocation = this.timeLocation;
+ var _now = moment();
+ var _date = _now.format('[]dddd,[ ]LL[]');
+
+ $(this.dateLocation).updateWithText(_date, 1000);
+ $('.fade').removeClass('fade')
+ var html = ''
+ if (this.displaySeconds) {
+ html = _now.format(this._timeFormat+':mm').replace(/./g, '$&') +
+ '' + _now.format('ss').replace(/./g, '$&') + '';
+ if (typeof this.intervalId == 'undefined') {
+ this.intervalId = setInterval(function () {
+ this.updateTime();
+ }.bind(this), this.updateInterval);
+ }
+ } else {
+ html = _now.format(this._timeFormat+':mm').replace(/./g, '$&');
+ 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 = $('').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[]ss[]'));
+ } 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();
}
\ No newline at end of file