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

30
app/js/clock.js
View File

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

32
views/pages/clock.ejs
View File

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