mirror of
https://github.com/wezm/wezm.net.git
synced 2024-12-18 18:29:54 +00:00
Add initial weather page
This commit is contained in:
parent
ac84c00648
commit
7b644ad56a
10 changed files with 79 additions and 2 deletions
5
Rules
5
Rules
|
@ -5,6 +5,11 @@ compile '/' do
|
|||
filter :rubypants
|
||||
end
|
||||
|
||||
compile '/weather/' do
|
||||
layout 'weather'
|
||||
filter :erb
|
||||
end
|
||||
|
||||
compile %r{/(?:technical|personal|)articles/(page/|)} do
|
||||
filter :erb
|
||||
layout 'articles'
|
||||
|
|
|
@ -163,7 +163,7 @@ body > header
|
|||
margin-right: 40%
|
||||
|
||||
|
||||
body.articles #content
|
||||
body.articles #content, body.weather #content
|
||||
min-width: 0
|
||||
margin-right: 0
|
||||
|
||||
|
@ -417,3 +417,13 @@ table
|
|||
.vcard .photo
|
||||
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
8
content/weather.html
Normal 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
2
content/weather.yaml
Normal file
|
@ -0,0 +1,2 @@
|
|||
---
|
||||
title: Macedon Weather
|
17
layouts/weather.html
Normal file
17
layouts/weather.html
Normal 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
BIN
output/images/Cloudy.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.4 KiB |
BIN
output/images/Sunny.png
Normal file
BIN
output/images/Sunny.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.8 KiB |
BIN
output/images/spinner.gif
Normal file
BIN
output/images/spinner.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.4 KiB |
1
output/js/dygraph-combined.js
Normal file
1
output/js/dygraph-combined.js
Normal file
File diff suppressed because one or more lines are too long
34
output/js/weather.js
Normal file
34
output/js/weather.js
Normal 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))) + '°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,
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue