From e1b9bd46b69b0cec5b6765bbce426aa242c4c3ca Mon Sep 17 00:00:00 2001 From: Jonathan Vogt Date: Mon, 25 Jan 2016 23:15:01 +0100 Subject: [PATCH 1/8] Update Time more smoothly (fade char-wise) --- css/main.css | 4 ++++ index.php | 2 +- js/time/time.js | 25 ++++++++++++++++++++----- 3 files changed, 25 insertions(+), 6 deletions(-) diff --git a/css/main.css b/css/main.css index 86a00c83..61b7d5c1 100644 --- a/css/main.css +++ b/css/main.css @@ -110,6 +110,10 @@ html { color: #aaa; } +.hidden { + display: none; +} + .light { font-family: "HelveticaNeue-UltraLight", sans-serif; } diff --git a/index.php b/index.php index aa0c876f..8ebc134e 100644 --- a/index.php +++ b/index.php @@ -13,8 +13,8 @@ -
+
diff --git a/js/time/time.js b/js/time/time.js index f2a5a286..a38d5511 100644 --- a/js/time/time.js +++ b/js/time/time.js @@ -1,8 +1,8 @@ var time = { timeFormat: config.time.timeFormat || 24, dateLocation: '.date', - timeLocation: '.time', - updateInterval: 1000, + timeLocation: '#time', + updateInterval: 10000, intervalId: null }; @@ -12,10 +12,25 @@ var time = { time.updateTime = function () { var _now = moment(), - _date = _now.format('dddd, LL'); + _date = _now.format('[]dddd,[]LL[]'); + - $(this.dateLocation).html(_date); - $(this.timeLocation).html(_now.format(this._timeFormat+':mm[]ss[]')); + $(this.dateLocation).updateWithText(_date, 1000); + $('.fade').removeClass('fade') + $('#timebuffer').html(_now.format('HH:mm').replace(/./g, "$&")); + $('#timebuffer').children().each(function( index ) { + var _text = $( this ).text(); + var _i = index+1; + var _text2 = $('#time span:nth-child('+_i+')').text(); + if (_text != _text2) { + $('#time span:nth-child('+_i+')').addClass('fade'); + $(this).addClass('fade'); + } + }); + $('.fade').fadeTo(400, 0.25, function() { + $('#time').html($('#timebuffer').html()); + $('#time').children().fadeTo(400, 1).removeClass('fade'); + }); } From 5be0d1c5e9e4d3ef025e0eefc9a5b99295840c67 Mon Sep 17 00:00:00 2001 From: Jonathan Vogt Date: Mon, 25 Jan 2016 23:57:28 +0100 Subject: [PATCH 2/8] Improved Code --- css/main.css | 4 ---- index.php | 2 +- js/time/time.js | 22 +++++++++++----------- 3 files changed, 12 insertions(+), 16 deletions(-) diff --git a/css/main.css b/css/main.css index 61b7d5c1..86a00c83 100644 --- a/css/main.css +++ b/css/main.css @@ -110,10 +110,6 @@ html { color: #aaa; } -.hidden { - display: none; -} - .light { font-family: "HelveticaNeue-UltraLight", sans-serif; } diff --git a/index.php b/index.php index 8ebc134e..89a5389d 100644 --- a/index.php +++ b/index.php @@ -14,7 +14,7 @@
-
+
diff --git a/js/time/time.js b/js/time/time.js index a38d5511..311f7b51 100644 --- a/js/time/time.js +++ b/js/time/time.js @@ -10,27 +10,26 @@ var time = { * Updates the time that is shown on the screen */ time.updateTime = function () { - - var _now = moment(), - _date = _now.format('[]dddd,[]LL[]'); + var timeLocation = this.timeLocation; + var _now = moment(); + var _date = _now.format('[]dddd,[ ]LL[]'); - $(this.dateLocation).updateWithText(_date, 1000); $('.fade').removeClass('fade') - $('#timebuffer').html(_now.format('HH:mm').replace(/./g, "$&")); - $('#timebuffer').children().each(function( index ) { + var diff = $('
').html(_now.format(this._timeFormat+':mm').replace(/./g, "$&")); + diff.children().each(function( index ) { var _text = $( this ).text(); var _i = index+1; - var _text2 = $('#time span:nth-child('+_i+')').text(); + var _text2 = $(timeLocation + ' span:nth-child('+_i+')').text(); if (_text != _text2) { - $('#time span:nth-child('+_i+')').addClass('fade'); + $(timeLocation +' span:nth-child('+_i+')').addClass('fade'); $(this).addClass('fade'); } }); $('.fade').fadeTo(400, 0.25, function() { - $('#time').html($('#timebuffer').html()); - $('#time').children().fadeTo(400, 1).removeClass('fade'); - }); + $(timeLocation).html(diff.html()); + $(timeLocation).children().fadeTo(400, 1).removeClass('fade'); + }).bind(this); } @@ -41,6 +40,7 @@ time.init = function () { } else { time._timeFormat = 'HH'; } + $(this.timeLocation).html(''); this.intervalId = setInterval(function () { this.updateTime(); From ed9f85f705da107ad3baa49dd1edafdbc01694ca Mon Sep 17 00:00:00 2001 From: Jonathan Vogt Date: Tue, 26 Jan 2016 00:53:52 +0100 Subject: [PATCH 3/8] Honor Config Option and do inital time update --- js/time/time.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/time/time.js b/js/time/time.js index 311f7b51..311ef2d4 100644 --- a/js/time/time.js +++ b/js/time/time.js @@ -44,6 +44,7 @@ time.init = function () { this.intervalId = setInterval(function () { this.updateTime(); - }.bind(this), 1000); + }.bind(this), this.updateInterval); + this.updateTime(); } \ No newline at end of file From 9560862b429e90a0326a5791519e812a7d437efa Mon Sep 17 00:00:00 2001 From: Jonathan Vogt Date: Fri, 29 Jan 2016 11:22:48 +0100 Subject: [PATCH 4/8] Made Seconds optional --- js/time/time.js | 64 ++++++++++++++++++++++++++++++++++++------------- 1 file changed, 48 insertions(+), 16 deletions(-) diff --git a/js/time/time.js b/js/time/time.js index 311ef2d4..cf966ef4 100644 --- a/js/time/time.js +++ b/js/time/time.js @@ -2,8 +2,10 @@ var time = { timeFormat: config.time.timeFormat || 24, dateLocation: '.date', timeLocation: '#time', - updateInterval: 10000, - intervalId: null + updateInterval: 1000, + intervalId: undefined, + displaySeconds: (typeof config.time.displaySeconds == 'undefined') ? true : config.time.displaySeconds, + }; /** @@ -16,21 +18,56 @@ time.updateTime = function () { $(this.dateLocation).updateWithText(_date, 1000); $('.fade').removeClass('fade') - var diff = $('
').html(_now.format(this._timeFormat+':mm').replace(/./g, "$&")); - diff.children().each(function( index ) { + 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); + } + var diff = $('
').html(html); + diff.find('.digit').each(function( index ) { var _text = $( this ).text(); var _i = index+1; - var _text2 = $(timeLocation + ' span:nth-child('+_i+')').text(); - if (_text != _text2) { - $(timeLocation +' span:nth-child('+_i+')').addClass('fade'); + 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'); } }); - $('.fade').fadeTo(400, 0.25, function() { + if ($('.fade').length == 0) { + // Initial Update $(timeLocation).html(diff.html()); - $(timeLocation).children().fadeTo(400, 1).removeClass('fade'); - }).bind(this); - + diff = undefined; + } else { + $('.fade').fadeTo(400, 0.25, function() { + if (typeof diff != 'undefined') { + $(timeLocation).html(diff.html()); + diff = undefined; + } + $('.fade').fadeTo(400, 1).removeClass('fade'); + }).bind(this); + } } time.init = function () { @@ -40,11 +77,6 @@ time.init = function () { } else { time._timeFormat = 'HH'; } - $(this.timeLocation).html(''); - - this.intervalId = setInterval(function () { - this.updateTime(); - }.bind(this), this.updateInterval); this.updateTime(); } \ No newline at end of file From 3229b23cda6ae870270b6fa83d3dc1636c31b07f Mon Sep 17 00:00:00 2001 From: Jonathan Vogt Date: Fri, 29 Jan 2016 11:36:56 +0100 Subject: [PATCH 5/8] Made DigitFade optional --- js/time/time.js | 58 ++++++++++++++++++++++++++++--------------------- 1 file changed, 33 insertions(+), 25 deletions(-) diff --git a/js/time/time.js b/js/time/time.js index cf966ef4..5ba72d18 100644 --- a/js/time/time.js +++ b/js/time/time.js @@ -5,7 +5,7 @@ var time = { updateInterval: 1000, intervalId: undefined, displaySeconds: (typeof config.time.displaySeconds == 'undefined') ? true : config.time.displaySeconds, - + digitFade: (typeof config.time.digitFade == 'undefined') ? true : config.time.digitFade, }; /** @@ -38,35 +38,43 @@ time.updateTime = function () { this.updateTime(); }.bind(this), seconds*1000); } - 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'); + 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 { - $(this).addClass('fade'); + $('.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)); } - }); - if ($('.fade').length == 0) { - // Initial Update - $(timeLocation).html(diff.html()); - diff = undefined; } else { - $('.fade').fadeTo(400, 0.25, function() { - if (typeof diff != 'undefined') { - $(timeLocation).html(diff.html()); - diff = undefined; - } - $('.fade').fadeTo(400, 1).removeClass('fade'); - }).bind(this); + if (this.displaySeconds) { + $(this.timeLocation).html(_now.format(this._timeFormat+':mm[]ss[]')); + } else { + $(this.timeLocation).html(_now.format(this._timeFormat+':mm')); + } } } From 4ea9ccb9fbc3f164d3812b0490d65928b7c7744e Mon Sep 17 00:00:00 2001 From: Jonathan Vogt Date: Sun, 31 Jan 2016 17:32:20 +0100 Subject: [PATCH 6/8] Changed default to false --- js/time/time.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/time/time.js b/js/time/time.js index 5ba72d18..800278b8 100644 --- a/js/time/time.js +++ b/js/time/time.js @@ -5,7 +5,7 @@ var time = { updateInterval: 1000, intervalId: undefined, displaySeconds: (typeof config.time.displaySeconds == 'undefined') ? true : config.time.displaySeconds, - digitFade: (typeof config.time.digitFade == 'undefined') ? true : config.time.digitFade, + digitFade: (typeof config.time.digitFade == 'undefined') ? false : config.time.digitFade, }; /** From 871d24aaea1e57c12ffc567bb2a58d6f0b0bb8ae Mon Sep 17 00:00:00 2001 From: Jonathan Vogt Date: Sun, 31 Jan 2016 17:39:20 +0100 Subject: [PATCH 7/8] Added default values to config.js --- js/config.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/config.js b/js/config.js index 3559918f..6bc37048 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: From 868ac83a49e183dab7bbd562ea87235b3f2c9607 Mon Sep 17 00:00:00 2001 From: bitte-ein-bit Date: Sun, 31 Jan 2016 17:42:32 +0100 Subject: [PATCH 8/8] Update README.md --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5a721fee..0e60c0bf 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-Extensions by PaViRo](https://github.com/paviro/MagicMirror-Extensions) **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.