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

Update Time more smoothly (fade char-wise)

Browse Source
This commit is contained in:
Jonathan Vogt 2016-01-25 23:15:01 +01:00
parent a201ef4e53
commit e1b9bd46b6
3 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/main.css
View File

@ -110,6 +110,10 @@ html {
color: #aaa; color: #aaa;
} }
.hidden {
display: none;
}
.light { .light {
font-family: "HelveticaNeue-UltraLight", sans-serif; font-family: "HelveticaNeue-UltraLight", sans-serif;
} }

2
index.php
View File

@ -13,8 +13,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="hidden" id="timebuffer"></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>

25
js/time/time.js
View File

@ -1,8 +1,8 @@
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: 10000,
intervalId: null intervalId: null
}; };
@ -12,10 +12,25 @@ var time = {
time.updateTime = function () { time.updateTime = function () {
var _now = moment(), var _now = moment(),
_date = _now.format('dddd, LL'); _date = _now.format('[<span class="dayname">]dddd,[</span><span class="longdate">]LL[</span>]');
$(this.dateLocation).html(_date); $(this.dateLocation).updateWithText(_date, 1000);
$(this.timeLocation).html(_now.format(this._timeFormat+':mm[<span class="sec">]ss[</span>]')); $('.fade').removeClass('fade')
$('#timebuffer').html(_now.format('HH:mm').replace(/./g, "<span>$&</span>"));
$('#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');
});
} }