martin/silvrgit
martin/silvrgit
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

updated clock with date and tidying

Browse Source
This commit is contained in:
Martin Donnelly 2016-06-06 14:15:47 +01:00
parent 34ef8e7dfc
commit c6bb63fa6a
3 changed files with 81 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
app/css/clock.css
View File

@ -1,8 +1,12 @@
@media (min-width:800px) {
body {
font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, Arial, sans-serif;
overflow:hidden;
body {
font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, Arial, sans-serif;
overflow: hidden;
}
.center {
text-align: center;
}
@media (min-width:800px) {
#clock {
font-family: 'Ubuntu Condensed', monospace, monospace;
@ -28,8 +32,10 @@
top: 300px;
left: 0;
width: 800px;
height: 150px;
background-color: #312121;
height: 100px;
/*background-color: #312121;*/
background-color: #000000;
overflow: hidden;
}
#misc {
@ -41,11 +47,26 @@
background-color: #213121;
}
#datearea {
width:100%;
position:absolute;
top:0;
left:0;
display:table;
}
.weatherBit {
color: #dcecff;
font-size: 36px;
font-size: 3vw;
}
#day, #date {
color: #dcecff;
font-size: 5vw;
font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, Arial, sans-serif;
width:50%;
display:table-cell;
}
.wday {
color: #dcecff;
text-align: center;
@ -58,7 +79,7 @@
body {
font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #212121;
color: #dcecff;
color: #fff;
}
#clock {
@ -73,7 +94,7 @@
font-size:25vw;
text-align: center;
vertical-align: middle;
color: #dcecff;
color: #fff;
}
#clockDisplay {
@ -99,12 +120,12 @@
}
.weatherBit {
color: #dcecff;
font-size: 36px;
color: #fff;
font-size: 3vw;
}
.wday {
color: #dcecff;
color: #fff;
text-align: center;
text-transform: capitalize;
}
@ -116,7 +137,7 @@
body {
font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #212121;
color: #dcecff;
color: #fff;
}
#clock {
@ -131,7 +152,7 @@
font-size:25vw;
text-align: center;
vertical-align: middle;
color: #dcecff;
color: #fff;
}
#clockDisplay {
@ -154,16 +175,15 @@
width: 100%;
height: 256px;
background-color: #213121;
display: none;
}
.weatherBit {
color: #dcecff;
color: #fff;
font-size: 36px;
}
.wday {
color: #dcecff;
color: #fff;
text-align: center;
text-transform: capitalize;
}

30
app/js/clock.js
View File

@ -7,7 +7,7 @@
var storedData;
var weatherCount = 0;
var skycons = new Skycons({"color": "white"});
var skycons = new Skycons({"color": "#dcecff"});
var refreshTimer = 0;
var viewTimer = 0;
var eventBus = {};
@ -31,7 +31,7 @@
success: function(data) {
console.log(data);
storedData = data;
// startWeather();
// startWeather();
updateWeather();
},
error: function(xhr, type) {
@ -48,19 +48,17 @@
$('#wTtext').empty().html(storedData.data.weather.today);
// $('#wDaily').empty();
for (var t = 0; t < storedData.data.weather.data.daily.data.length; t++) {
var m = 'icon' + (t + 1).toString();
var d = '#d' + (t + 1).toString();
var ts = parseInt(storedData.data.weather.data.daily.data[t].time) * 1000;
var n = Date.create(ts).format('{weekday}');
var n = Date.create(ts).format('{Dow}');
skycons.remove(m);
skycons.add(m, storedData.data.weather.data.daily.data[t].icon);
$(d).empty().html(n);
}
$('#wLater').hide();
$('#wToday').hide();
$('#wDaily').hide();
@ -88,9 +86,23 @@
function refreshWeatherView() {
eventBus.trigger('switchWeather');
var now = new Date();
var mod = 10000 - (now.getTime() % 10000);
var mod = 10000 - (now.getTime() % 10000);
viewTimer = setTimeout(function() {refreshWeatherView();}, mod + 10);
viewTimer = setTimeout(function() {refreshWeatherView();}, mod + 10);
}
function updateDate() {
var now = new Date();
var n = Date.create(now).format('{Weekday}');
$('#day').html(n);
n = Date.create(now).format('{Month} {d}');
$('#date').html(n);
var mod = 60000 - (now.getTime() % 60000);
setTimeout(function() {updateDate();}, mod + 1);
}
@ -118,12 +130,14 @@
refreshTimer = setTimeout(function() {refresh();}, mod + 10);
}
skycons.play();
updateDate();
clock();
// getData();
refresh();
refreshWeatherView();
// $('#misc').html($(window).width());
// $('#misc').html($(window).width());
})();

32
views/pages/clock.ejs
View File

@ -17,7 +17,19 @@
</head>
<body>
<div id="clock"><div id="clockDisplay"></div></div>
<div id="clock">
<div id="datearea">
<div id="day">
Today
</div>
<div id="date">
6 - 6
</div>
</div>
<div id="clockDisplay"></div>
</div>
<div id="weather">
<div id="wCurrent" class="weatherBit">Currently<div id="wCtext">xxx</div></div>
<div id="wLater" class="weatherBit">Later<div id="wLtext">xxx</div></div>
@ -25,14 +37,14 @@
<div id="wDaily"><div id="wTtext">
<table style="width:100%;">
<tr>
<td><canvas id="icon1" width="95" height="95"></canvas></td>
<td><canvas id="icon2" width="95" height="95"></canvas></td>
<td><canvas id="icon3" width="95" height="95"></canvas></td>
<td><canvas id="icon4" width="95" height="95"></canvas></td>
<td><canvas id="icon5" width="95" height="95"></canvas></td>
<td><canvas id="icon6" width="95" height="95"></canvas></td>
<td><canvas id="icon7" width="95" height="95"></canvas></td>
<td><canvas id="icon8" width="95" height="95"></canvas></td>
<td class="center"><canvas id="icon1" width="50%" height="50%"></canvas></td>
<td class="center"><canvas id="icon2" width="50%" height="50%"></canvas></td>
<td class="center"><canvas id="icon3" width="50%" height="50%"></canvas></td>
<td class="center"><canvas id="icon4" width="50%" height="50%"></canvas></td>
<td class="center"><canvas id="icon5" width="50%" height="50%"></canvas></td>
<td class="center"><canvas id="icon6" width="50%" height="50%"></canvas></td>
<td class="center"><canvas id="icon7" width="50%" height="50%"></canvas></td>
<td class="center"><canvas id="icon8" width="50%" height="50%"></canvas></td>
</tr>
<tr>
<td id="d1" class="wday"></td>
@ -48,7 +60,7 @@
</div></div>
</div>
<div id="misc"></div>
<!--<div id="misc"></div>-->
</body>
<script src="js/clock.js"></script>
</html>