benw2/wezm.net
1
0
Fork 0
forked from wezm/wezm.net
Code Pull requests Activity

Get the weather page layed out respectably

Browse source
This commit is contained in:
Wesley Moore 2010-09-26 17:18:34 +10:00
parent a67f33d392
commit a449e39853
3 changed files with 133 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
content/screen.sass
View file

@ -419,11 +419,32 @@ table
// Weather
body.weather .current
line-height: 24px
body.weather
.temperature
font-family: "Helvetica Neue", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif
font-weight: 200
font-size: 36px
#current > .temperature
//margin-left: 1em
.temperature
font-family: "Helvetica Neue", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif
font-weight: 200
.current
font-size: 36px
figure.forecast
margin: 0 1em 1em 0
width: 48px
float: left
.chart
clear: both
.canvas
width: 100%
height: 320px
small
display: block
font-size: smaller
margin-top: 1em
color: #999

17
content/weather.html
View file

@ -1,8 +1,15 @@
<h2>Temperature</h2>
<div class="loading"><img src="/images/spinner.gif" width="64" height="64" alt="Loading" /> Loading</div>
<h2>Temperature</h2>
<!-- Dygraph requires inline style for dimensions -->
<div class="temperature chart" style="width: 100%; height: 320px;"></div>
<div class="temperature chart">
<!--><button id="year">Year</button>
<button id="month">Month</button>
<button id="day">Day</button>-->
<div class="canvas"></div>
</div>
<h2>Rainfall</h2>
<div class="rainfall chart" style="width: 100%; height: 320px;"></div>
<!-- <h2>Rainfall</h2>
<div class="rainfall chart"></div> -->
<small>Forecast icons by <a href="http://lavana.deviantart.com/art/Flat-Weather-Icons-32021664">LavAna</a></small>

107
output/js/weather.js
View file

@ -1,12 +1,73 @@
function render_current(o) {
return '<div class="current">\n\
<img src="/images/' + (Mojo.escape(Mojo.normalize(o.forecast))) + '.png" width="48" height="48" alt="' + (Mojo.escape(Mojo.normalize(o.forecast))) + '" />\n\
<span class="temperature">' + (Mojo.escape(Mojo.normalize(o.temperature_out))) + '&deg;C</span>\n\
return '<div id="current">\n\
<figure class="forecast">\n\
<img src="/images/weather/' + (Mojo.escape(Mojo.normalize(o, "forecast"))) + '.png" width="48" height="48" alt="' + (Mojo.escape(Mojo.normalize(o, "forecast"))) + '" />\n\
<figcaption>Forecast</figcaption>\n\
</figure>\n\
\n\
<div class="temperature">\n\
<div class="current temperature">' + (Mojo.escape(Mojo.normalize(o, "temperature"))) + '&deg;C</div>\n\
<div class="minmax">\n\
Minimum <span class="min temperature">' + (Mojo.escape(Mojo.normalize(o, "min_temp"))) + '&deg;C</span> at\n\
<time datetime="' + (Mojo.escape(Mojo.normalize(o, "min_datetime"))) + '">' + (Mojo.escape(Mojo.normalize(o, "minDateString"))) + '</time>\n\
Maximum <span class="max temperature">' + (Mojo.escape(Mojo.normalize(o, "max_temp"))) + '&deg;C</span> at\n\
<time datetime="' + (Mojo.escape(Mojo.normalize(o, "max_datetime"))) + '">' + (Mojo.escape(Mojo.normalize(o, "maxDateString"))) + '</time>\n\
</div>\n\
</div>\n\
</div>';
};
// {"wind_angle":270,"rel_humidity_in":51,"rain_1h":0,"temperature_out":9.9,"forecast":"Sunny","rain_24h":0,"dewpoint":7.11,"wind_chill":9.9,"temperature_in":20.8,"rel_humidity_out":83,"tendency":"Rising","wind_speed":0,"rel_pressure":970.7,"rain_total":1.55,"datetime":"2010-09-20 11:30:13","wind_direction":"W"}
// forecaset is Rainy, Cloudy or Sunny
// Return a string of a number padded with leading zeros
function padNumber(n, count) {
if(count === undefined) count = 2;
var string = n.toString();
var padding = [];
for(var i = count - string.length; i > 0; i--) {
padding.push('0');
}
return padding.join('') + string;
}
function isoString(date) {
// YYYY-MM-DDTHH:MM:SS
if(!date) return '';
return [
[
date.getUTCFullYear(),
padNumber(date.getUTCMonth() + 1),
padNumber(date.getUTCDate())
].join('-'),
'T',
[
padNumber(date.getUTCHours()),
padNumber(date.getUTCMinutes()),
padNumber(date.getUTCSeconds())
].join(':')
].join('')
}
function datetimeString(date) {
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
return [
date.getUTCDate(),
months[date.getUTCMonth()],
timeString(date)
].join(' ')
}
function timeString(date) {
return [
padNumber(date.getUTCHours()),
padNumber(date.getUTCMinutes())
].join(':')
}
jQuery(function() {
jQuery.getJSON("/weather.json", function(data, status) {
var count = data.history.length;
@ -15,18 +76,39 @@ jQuery(function() {
}
// Populate the current conditions
var current_div = render_current(data.current);
var current = {
temperature: data.current.temperature_out,
timestamp: function() {
var d = new Date(data.current.timestamp);
return datetimeString(d);
},
min_temp: data.current.min.temperature,
min_date: new Date(data.current.min.timestamp),
min_datetime: function() {
return isoString(this.min_date)
},
minDateString: function() {
return timeString(current.min_date)
},
max_temp: data.current.max.temperature,
max_date: new Date(data.current.max.timestamp),
max_datetime: function() {
return isoString(this.max_date)
},
maxDateString: function() {
return timeString(current.max_date)
},
forecast: data.current.forecast
};
var current_div = render_current(current);
$('.loading').replaceWith(current_div)
// Populate the charts
$('.temperature.chart').each(function() {
$('.temperature.chart .canvas').each(function() {
var self = this;
var options = {
// series: {
// lines: { show: true },
// points: { show: true }
// }
xaxis: {
mode: "time"
}
@ -34,7 +116,7 @@ jQuery(function() {
jQuery.plot(self, data.history, options);
/*
$("#year").click(function () {
$.plot(self, data.history, {
xaxis: {
@ -43,7 +125,7 @@ jQuery(function() {
// min: (new Date("1990/01/01")).getTime(),
// max: (new Date()).getTime()
}
});
});
@ -66,8 +148,7 @@ jQuery(function() {
}
});
});
*/
});
});
});