mirror of
https://github.com/wezm/wezm.net.git
synced 2024-12-24 21:19:53 +00:00
Get the weather page layed out respectably
This commit is contained in:
parent
a67f33d392
commit
a449e39853
3 changed files with 133 additions and 24 deletions
|
@ -419,11 +419,32 @@ table
|
||||||
|
|
||||||
|
|
||||||
// Weather
|
// Weather
|
||||||
body.weather .current
|
body.weather
|
||||||
line-height: 24px
|
|
||||||
|
|
||||||
.temperature
|
#current > .temperature
|
||||||
font-family: "Helvetica Neue", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif
|
//margin-left: 1em
|
||||||
font-weight: 200
|
|
||||||
font-size: 36px
|
|
||||||
|
|
||||||
|
.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
|
||||||
|
|
|
@ -1,8 +1,15 @@
|
||||||
|
<h2>Temperature</h2>
|
||||||
|
|
||||||
<div class="loading"><img src="/images/spinner.gif" width="64" height="64" alt="Loading" /> Loading</div>
|
<div class="loading"><img src="/images/spinner.gif" width="64" height="64" alt="Loading" /> Loading</div>
|
||||||
|
|
||||||
<h2>Temperature</h2>
|
<div class="temperature chart">
|
||||||
<!-- Dygraph requires inline style for dimensions -->
|
<!--><button id="year">Year</button>
|
||||||
<div class="temperature chart" style="width: 100%; height: 320px;"></div>
|
<button id="month">Month</button>
|
||||||
|
<button id="day">Day</button>-->
|
||||||
|
<div class="canvas"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h2>Rainfall</h2>
|
<!-- <h2>Rainfall</h2>
|
||||||
<div class="rainfall chart" style="width: 100%; height: 320px;"></div>
|
<div class="rainfall chart"></div> -->
|
||||||
|
|
||||||
|
<small>Forecast icons by <a href="http://lavana.deviantart.com/art/Flat-Weather-Icons-32021664">LavAna</a></small>
|
|
@ -1,12 +1,73 @@
|
||||||
function render_current(o) {
|
function render_current(o) {
|
||||||
return '<div class="current">\n\
|
return '<div id="current">\n\
|
||||||
<img src="/images/' + (Mojo.escape(Mojo.normalize(o.forecast))) + '.png" width="48" height="48" alt="' + (Mojo.escape(Mojo.normalize(o.forecast))) + '" />\n\
|
<figure class="forecast">\n\
|
||||||
<span class="temperature">' + (Mojo.escape(Mojo.normalize(o.temperature_out))) + '°C</span>\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"))) + '°C</div>\n\
|
||||||
|
<div class="minmax">\n\
|
||||||
|
Minimum <span class="min temperature">' + (Mojo.escape(Mojo.normalize(o, "min_temp"))) + '°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"))) + '°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>';
|
</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"}
|
// {"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(function() {
|
||||||
jQuery.getJSON("/weather.json", function(data, status) {
|
jQuery.getJSON("/weather.json", function(data, status) {
|
||||||
var count = data.history.length;
|
var count = data.history.length;
|
||||||
|
@ -15,18 +76,39 @@ jQuery(function() {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Populate the current conditions
|
// 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)
|
$('.loading').replaceWith(current_div)
|
||||||
|
|
||||||
// Populate the charts
|
// Populate the charts
|
||||||
$('.temperature.chart').each(function() {
|
$('.temperature.chart .canvas').each(function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
var options = {
|
var options = {
|
||||||
// series: {
|
|
||||||
// lines: { show: true },
|
|
||||||
// points: { show: true }
|
|
||||||
// }
|
|
||||||
xaxis: {
|
xaxis: {
|
||||||
mode: "time"
|
mode: "time"
|
||||||
}
|
}
|
||||||
|
@ -34,7 +116,7 @@ jQuery(function() {
|
||||||
|
|
||||||
jQuery.plot(self, data.history, options);
|
jQuery.plot(self, data.history, options);
|
||||||
|
|
||||||
|
/*
|
||||||
$("#year").click(function () {
|
$("#year").click(function () {
|
||||||
$.plot(self, data.history, {
|
$.plot(self, data.history, {
|
||||||
xaxis: {
|
xaxis: {
|
||||||
|
@ -66,8 +148,7 @@ jQuery(function() {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
*/
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue