wezm/wezm.net
1
0
Fork 1
mirror of https://github.com/wezm/wezm.net.git synced 2024-12-18 18:29:54 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add initial weather page

Browse source
This commit is contained in:
Wesley Moore 2010-09-21 08:03:10 +10:00
parent ac84c00648
commit 7b644ad56a
10 changed files with 79 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
Rules
View file

@ -5,6 +5,11 @@ compile '/' do
filter :rubypants filter :rubypants
end end
compile '/weather/' do
layout 'weather'
filter :erb
end
compile %r{/(?:technical|personal|)articles/(page/|)} do compile %r{/(?:technical|personal|)articles/(page/|)} do
filter :erb filter :erb
layout 'articles' layout 'articles'

14
content/screen.sass
View file

@ -146,7 +146,7 @@ body > header
span span
display: none display: none
#menu #menu
float: right float: right
@ -163,7 +163,7 @@ body > header
margin-right: 40% margin-right: 40%
body.articles #content body.articles #content, body.weather #content
min-width: 0 min-width: 0
margin-right: 0 margin-right: 0
@ -417,3 +417,13 @@ table
.vcard .photo .vcard .photo
margin: 0 1em 1em 0 margin: 0 1em 1em 0
// Weather
body.weather .current
line-height: 24px
.temperature
font-family: "Helvetica Neue", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif
font-weight: 200
font-size: 36px

8
content/weather.html Normal file
View file

@ -0,0 +1,8 @@
<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>
<h2>Rainfall</h2>
<div class="rainfall chart" style="width: 100%; height: 320px;"></div>

2
content/weather.yaml Normal file
View file

@ -0,0 +1,2 @@
---
title: Macedon Weather

17
layouts/weather.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<%= render '_head' %>
<script src="/js/dygraph-combined.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/mojo.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/weather.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="weather">
<%= render '_header' %>
<div id="content">
<h1><a href="<%= @item.reps.first.path %>"><%=h @item[:title] %></a></h1>
<%= yield %>
</div>
<%= render '_footer' %>
</body>
</html>

BIN
output/images/Cloudy.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
output/images/Sunny.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
output/images/spinner.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.4 KiB

1
output/js/dygraph-combined.js Normal file
View file

File diff suppressed because one or more lines are too long

34
output/js/weather.js Normal file
View file

@ -0,0 +1,34 @@
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\
</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"}
jQuery(function() {
jQuery.getJSON("/weather.json", function(data, status) {
var count = data.history.length;
for(var i = 0; i < count; i++) {
data.history[i][0] = new Date(data.history[i][0]);
}
// Populate the current conditions
var current_div = render_current(data.current);
// $(current_div).replace('.loading');
$('.loading').replaceWith(current_div)
$('.temperature.chart').each(function() {
var self = this;
var g = new Dygraph(
self,
data.history,
{
labels: ['Date', 'Indoor Temperature', 'Outdoor Temperature'],
rollPeriod: 3,
}
);
});
});
});