From 503380c8f54ea5c42130b76e840d3ae6d64d27cd Mon Sep 17 00:00:00 2001 From: Wesley Moore Date: Thu, 5 May 2011 07:24:46 +1000 Subject: [PATCH] Switch to a dygraph temperature graph and add extremes --- content/screen.sass | 15 +- content/weather.html | 40 +++++- layouts/weather.html | 1 + output/js/weather.js | 335 ++++++++++++++++++++++++------------------- 4 files changed, 243 insertions(+), 148 deletions(-) diff --git a/content/screen.sass b/content/screen.sass index 50f207d..7682391 100644 --- a/content/screen.sass +++ b/content/screen.sass @@ -442,9 +442,22 @@ body.weather width: 100% height: 320px - section.rain + section, section > .temperature + clear: both margin-top: 2em + .extreme + float: left + margin: 0 2em 2em 0 + + time.day + display: block + text-align: center + + div, time + margin: 0.5em 0 + font-family: $ans-serif + small display: block font-size: smaller diff --git a/content/weather.html b/content/weather.html index 967ba10..1eba08f 100644 --- a/content/weather.html +++ b/content/weather.html @@ -5,7 +5,13 @@
Loading Loading
-
+
+ +
+

History

+ +
+
@@ -22,4 +28,34 @@
-Forecast icons by LavAna \ No newline at end of file +Forecast icons by LavAna + + diff --git a/layouts/weather.html b/layouts/weather.html index c8c4c7e..c8994d8 100644 --- a/layouts/weather.html +++ b/layouts/weather.html @@ -3,6 +3,7 @@ <%= render '_head' %> + diff --git a/output/js/weather.js b/output/js/weather.js index 3d5d1d5..24c66c9 100644 --- a/output/js/weather.js +++ b/output/js/weather.js @@ -1,158 +1,203 @@ -function render_current(o) { - return '
\n\ -
\n\ - ' + (Mojo.escape(Mojo.normalize(o, \n\ -
Forecast
\n\ -
\n\ - \n\ -
\n\ -
' + (Mojo.escape(Mojo.normalize(o, "temperature"))) + '°C
\n\ -
\n\ - Minimum ' + (Mojo.escape(Mojo.normalize(o, "min_temp"))) + '°C at\n\ - \n\ - Maximum ' + (Mojo.escape(Mojo.normalize(o, "max_temp"))) + '°C at\n\ - \n\ -
\n\ -
\n\ -
'; -}; +(function() { + // {"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 -// 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; -// 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(':') -} - -//function newUTCDate() - -jQuery(function() { - var now = new Date(); - jQuery.getJSON("/weather.json", function(data, status) { - // Populate the current conditions - 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 - var count = data.history.length; - for(var i = 0; i < count; i++) { - data.history[i][0] = new Date(data.history[i][0] - (now.getTimezoneOffset() * 60 * 1000)); + var string = n.toString(); + var padding = []; + for(var i = count - string.length; i > 0; i--) { + padding.push('0'); } - jQuery.plot('.temperature.chart', data.history, { - xaxis: { - mode: "time" + return padding.join('') + string; + } + + function isoString(date) { + // YYYY-MM-DDTHH:MM:SS + if(!date) return ''; + + if (typeof date.toISOString == 'function') { + return date.toISOString(); + } + + return [ + [ + date.getUTCFullYear(), + padNumber(date.getUTCMonth() + 1), + padNumber(date.getUTCDate()) + ].join('-'), + 'T', + [ + padNumber(date.getUTCHours()), + padNumber(date.getUTCMinutes()), + padNumber(date.getUTCSeconds()) + ].join(':'), + 'Z' + ].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.getHours()), + padNumber(date.getMinutes()) + ].join(':') + } + + function dateWindowToday() { + var now = new Date(); + var start = new Date(now.getFullYear(), now.getMonth(), now.getDate()); + var end = new Date(start.getTime() + (1000 * 60 * 60 * 24) - 1) // 1 day minus a millisecond + + return [start, end]; + } + + // Register Handlebars date helpers + var days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']; + Handlebars.registerHelper('day', function(date) { + return days[date.getDay()]; + }); + + Handlebars.registerHelper('time', function(date) { + return timeString(date); + }); + + Handlebars.registerHelper('isoDate', function(date) { + return isoString(date); + }); + + jQuery(function() { + // Compile templates + var currentTemplate = Handlebars.compile($('#current-template').html()); + var extremesTemplate = Handlebars.compile($('#extremes-template').html()); + + var now = new Date(); + jQuery.getJSON("/weather.json", function(data, status) { + // Populate the current conditions + 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 = currentTemplate(current); + $('.loading').replaceWith(current_div) + + // Populate the extremes + var extremes = []; + var len = data.extremes.length; + for(var i = 0; i < len; i++) { + var e = data.extremes[i]; + var extreme = { + date: new Date(e.date), + min: { + temperature: e.min.temperature, + time: new Date(e.min.timestamp) + }, + max: { + temperature: e.max.temperature, + time: new Date(e.max.timestamp) + } + }; + extremes.push(extreme); } - }); - // Rain - var total_rain_today = 0; - jQuery.each(data.rain.today, function(idx, reading) { - total_rain_today += reading[1]; - reading[0] = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), reading[0])); - }); - $("section.rain .total").html(Math.round(total_rain_today * 10) / 10) + var extremes_div = extremesTemplate({extremes: extremes}); + $('section.extremes').replaceWith(extremes_div); - jQuery.each(data.rain.history, function(idx, reading) { - var date = reading[0].split("-") - reading[0] = new Date(Date.UTC(date[0], date[1] - 1, date[2])); - }); + // Populate the charts + // Temperature history + var count = data.history.length; + for(var i = 0; i < count; i++) { + // Convert timestamps to Date objects + data.history[i][0] = new Date(data.history[i][0]); + } + var chart = $('.temperature .chart'); + chart.css('width', chart.width()); // TODO: bind to resize event and redraw + var temperatureGraph = new Dygraph(chart[0], data.history, { + rollPeriod: 5, + showRoller: true, + labels: ['Date', 'Inside Temperature', 'Outside Temperature'] + }); + $('#today').click(function() { + temperatureGraph.updateOptions({ + dateWindow: dateWindowToday() + }); + }); - jQuery.plot(".rainfall.today.chart", [data.rain.today], { - series: { - bars: { - show: true, - barWidth: 1000 * 60 * 60 // 1 hour + // Rain + var total_rain_today = 0; + jQuery.each(data.rain.today, function(idx, reading) { + total_rain_today += reading[1]; + + // Convert the hour value into a date + reading[0] = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), reading[0])); + }); + $("section.rain .total").html(Math.round(total_rain_today * 10) / 10) + + jQuery.each(data.rain.history, function(idx, reading) { + var date = reading[0].split("-") + reading[0] = new Date(Date.UTC(date[0], date[1] - 1, date[2])); + }); + + jQuery.plot(".rainfall.today.chart", [data.rain.today], { + series: { + bars: { + show: true, + barWidth: 1000 * 60 * 60 // 1 hour + } + }, + xaxis: { + mode: "time", + min: new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())), + max: new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), 23, 59, 59)), } - }, - xaxis: { - mode: "time", - min: new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())), - max: new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), 23, 59, 59)), - } - }); + }); - jQuery.plot(".rainfall.week.chart", [data.rain.history], { - series: { - bars: { - show: true, - barWidth: 1000 * 60 * 60 * 24 // 1 day + jQuery.plot(".rainfall.week.chart", [data.rain.history], { + series: { + bars: { + show: true, + barWidth: 1000 * 60 * 60 * 24 // 1 day + } + }, + xaxis: { + // min: 0, + // max: 24 + mode: "time", + minTickSize: [1, "day"] } - }, - xaxis: { - // min: 0, - // max: 24 - mode: "time", - minTickSize: [1, "day"] - } + }); }); }); -}); +})();