diff --git a/css/main.css b/css/main.css index 38a2dc6f..8946bdfa 100644 --- a/css/main.css +++ b/css/main.css @@ -62,12 +62,18 @@ body, html { font-size: 35px; } +.xdimmed +{ + color: #666; +} + .dimmed { color: #999; } -.icon { +.icon +{ position: relative; top :-10px; display: inline-block; @@ -77,6 +83,31 @@ body, html { margin-right: 10px; } +.forecast-table { + float: right; + text-align: right; + font-size: 20px; +} +.forecast-table .day, .forecast-table .temp-min, .forecast-table .temp-max +{ + width: 50px; + text-align: right; +} + +.forecast-table .temp-max +{ + width: 60px; +} +.forecast-table .temp-min +{ + width: 60px; +} + +.forecast-table .day +{ + color: #999; +} + @font-face { font-family: 'helvetica-neue'; src: url('../font/helvetica-neue-webfont.eot'); diff --git a/index.php b/index.php index 114c1e78..17d5c293 100644 --- a/index.php +++ b/index.php @@ -10,7 +10,7 @@
-
+
diff --git a/js/main.js b/js/main.js index c9c3d731..e8aa5a6a 100644 --- a/js/main.js +++ b/js/main.js @@ -19,6 +19,11 @@ jQuery.fn.outerHTML = function(s) { : jQuery("

").append(this.eq(0).clone()).html(); }; +function roundTemp(temp) +{ + return Math.round(temp * 10) / 10; +} + jQuery(document).ready(function($) { var news = []; @@ -26,6 +31,14 @@ jQuery(document).ready(function($) { var lastCompliment; var compliment; + + + + var weatherParams = { + 'q':'Baarn,Netherlands', + 'units':'metric', + 'lang':'nl' + }; (function checkVersion() { @@ -44,33 +57,27 @@ jQuery(document).ready(function($) { (function updateTime() { + var days = ['zondag','maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag']; var months = ['januari','februari','maart','april','mei','juni','juli','augustus','september','oktober','november','december']; - var now = new Date(); - var hh = now.getHours(); - var mm = now.getMinutes(); - var ss = now.getSeconds(); - var day = now.getDate(); + var now = new Date(); + + var day = now.getDay(); + var date = now.getDate(); var month = now.getMonth(); var year = now.getFullYear(); - hh = (hh < 10) ? '0' + hh : hh; - mm = (mm < 10) ? '0' + mm : mm; - ss = (ss < 10) ? '0' + ss : ss; + var date = days[day] + ', ' + date+' ' + months[month] + ' ' + year; - var date = day + ' ' + months[month] + ' ' + year; - var time = hh + ":" + mm; $('.date').html(date); - $('.time').html(time); + $('.time').html(now.toTimeString().substring(0,5)); setTimeout(function() { updateTime(); }, 1000); })(); - -/* (function updateCompliment() { var compliments = ['Hey, handsome!','Hi, sexy!','Hello, beauty!', 'You look sexy!', 'Wow, you look hot!']; @@ -87,9 +94,8 @@ jQuery(document).ready(function($) { updateCompliment(); }, 20000); })(); -*/ - (function updateWeather() + (function updateCurrentWeather() { var iconTable = { '01d':'wi-day-sunny', @@ -111,27 +117,79 @@ jQuery(document).ready(function($) { '13n':'wi-night-snow', '50n':'wi-night-alt-cloudy-windy' } - var params = { - 'q':'Baarn,Netherlands', - 'units':'metric', - 'lang':'nl' - } + - $.getJSON('http://api.openweathermap.org/data/2.5/weather', params, function(json, textStatus) { - var temp = Math.round(json.main.temp * 10) / 10; - var temp_min = Math.round(json.main.temp_min * 10) / 10; - var temp_max = Math.round(json.main.temp_max * 10) / 10; + $.getJSON('http://api.openweathermap.org/data/2.5/weather', weatherParams, function(json, textStatus) { + var temp = roundTemp(json.main.temp); + var temp_min = roundTemp(json.main.temp_min); + var temp_max = roundTemp(json.main.temp_max); var iconClass = iconTable[json.weather[0].icon]; var icon = $('').addClass('icon').addClass(iconClass); $('.temp').updateWithText(icon.outerHTML()+temp+'°', 1000); - var forecast = 'Min: '+temp_min+'°, Max: '+temp_max+'°'; - $('.forecast').updateWithText(forecast, 1000); + // var forecast = 'Min: '+temp_min+'°, Max: '+temp_max+'°'; + // $('.forecast').updateWithText(forecast, 1000); + + + var sunrise = new Date(json.sys.sunrise*1000).toTimeString().substring(0,5); + var sunset = new Date(json.sys.sunset*1000).toTimeString().substring(0,5); + + var sunString = ' ' + sunrise+' ' + sunset; + + $('.sun').updateWithText(sunString, 1000); }); setTimeout(function() { - updateWeather(); + updateCurrentWeather(); + }, 60000); + })(); + + (function updateWeatherForecast() + { + var dayAbbr = ['zo','ma','di','wo','do','vr','za']; + + $.getJSON('http://api.openweathermap.org/data/2.5/forecast', weatherParams, function(json, textStatus) { + + var forecastData = {}; + + for (var i in json.list) { + var forecast = json.list[i]; + var dateKey = forecast.dt_txt.substring(0, 10); + + if (forecastData[dateKey] == undefined) { + forecastData[dateKey] = { + 'timestamp':forecast.dt * 1000, + 'temp_min':forecast.main.temp, + 'temp_max':forecast.main.temp + }; + } else { + forecastData[dateKey]['temp_min'] = (forecast.main.temp < forecastData[dateKey]['temp_min']) ? forecast.main.temp : forecastData[dateKey]['temp_min']; + forecastData[dateKey]['temp_max'] = (forecast.main.temp > forecastData[dateKey]['temp_max']) ? forecast.main.temp : forecastData[dateKey]['temp_max']; + } + + } + + + var forecastTable = $('').addClass('forecast-table'); + for (var i in forecastData) { + var forecast = forecastData[i]; + var dt = new Date(forecast.timestamp); + var row = $(''); + + row.append($('
').addClass('day').html(dayAbbr[dt.getDay()])); + row.append($('').addClass('temp-max').html(roundTemp(forecast.temp_max)+'°')); + row.append($('').addClass('temp-min').html(roundTemp(forecast.temp_min)+'°')); + + forecastTable.append(row); + } + + + $('.forecast').updateWithText(forecastTable, 1000); + }); + + setTimeout(function() { + updateWeatherForecast(); }, 60000); })();