kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-06-27 11:50:00 +00:00
Code Issues Projects Releases Wiki Activity

Extended weather

Browse Source
This commit is contained in:
Michael Teeuw 2014-02-24 16:35:48 +01:00
parent 65b5ca367d
commit 3d583c9eae
3 changed files with 118 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
css/main.css
View File

@ -62,12 +62,18 @@ body, html {
font-size: 35px; font-size: 35px;
} }
.xdimmed
{
color: #666;
}
.dimmed .dimmed
{ {
color: #999; color: #999;
} }
.icon { .icon
{
position: relative; position: relative;
top :-10px; top :-10px;
display: inline-block; display: inline-block;
@ -77,6 +83,31 @@ body, html {
margin-right: 10px; 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-face {
font-family: 'helvetica-neue'; font-family: 'helvetica-neue';
src: url('../font/helvetica-neue-webfont.eot'); src: url('../font/helvetica-neue-webfont.eot');

2
index.php
View File

@ -10,7 +10,7 @@
<body> <body>
<div class="top left"><div class="date xsmall dimmed"></div><div class="time"></div></div> <div class="top left"><div class="date xsmall dimmed"></div><div class="time"></div></div>
<div class="top right"><div class="forecast xsmall dimmed"></div><div class="temp"></div></div> <div class="top right"><div class="sun xsmall dimmed"></div><div class="temp"></div><div class="forecast xsmall dimmed"></div></div>
<div class="center-ver center-hor"><div class="compliment"></div></div> <div class="center-ver center-hor"><div class="compliment"></div></div>
<div class="bottom center-hor"><div class="news small"></div></div> <div class="bottom center-hor"><div class="news small"></div></div>

112
js/main.js
View File

@ -19,6 +19,11 @@ jQuery.fn.outerHTML = function(s) {
: jQuery("<p>").append(this.eq(0).clone()).html(); : jQuery("<p>").append(this.eq(0).clone()).html();
}; };
function roundTemp(temp)
{
return Math.round(temp * 10) / 10;
}
jQuery(document).ready(function($) { jQuery(document).ready(function($) {
var news = []; var news = [];
@ -26,6 +31,14 @@ jQuery(document).ready(function($) {
var lastCompliment; var lastCompliment;
var compliment; var compliment;
var weatherParams = {
'q':'Baarn,Netherlands',
'units':'metric',
'lang':'nl'
};
(function checkVersion() (function checkVersion()
{ {
@ -44,33 +57,27 @@ jQuery(document).ready(function($) {
(function updateTime() (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 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 month = now.getMonth();
var year = now.getFullYear(); var year = now.getFullYear();
hh = (hh < 10) ? '0' + hh : hh; var date = days[day] + ', ' + date+' ' + months[month] + ' ' + year;
mm = (mm < 10) ? '0' + mm : mm;
ss = (ss < 10) ? '0' + ss : ss;
var date = day + ' ' + months[month] + ' ' + year;
var time = hh + ":" + mm;
$('.date').html(date); $('.date').html(date);
$('.time').html(time); $('.time').html(now.toTimeString().substring(0,5));
setTimeout(function() { setTimeout(function() {
updateTime(); updateTime();
}, 1000); }, 1000);
})(); })();
/*
(function updateCompliment() (function updateCompliment()
{ {
var compliments = ['Hey, handsome!','Hi, sexy!','Hello, beauty!', 'You look sexy!', 'Wow, you look hot!']; var compliments = ['Hey, handsome!','Hi, sexy!','Hello, beauty!', 'You look sexy!', 'Wow, you look hot!'];
@ -87,9 +94,8 @@ jQuery(document).ready(function($) {
updateCompliment(); updateCompliment();
}, 20000); }, 20000);
})(); })();
*/
(function updateWeather() (function updateCurrentWeather()
{ {
var iconTable = { var iconTable = {
'01d':'wi-day-sunny', '01d':'wi-day-sunny',
@ -111,27 +117,79 @@ jQuery(document).ready(function($) {
'13n':'wi-night-snow', '13n':'wi-night-snow',
'50n':'wi-night-alt-cloudy-windy' '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) { $.getJSON('http://api.openweathermap.org/data/2.5/weather', weatherParams, function(json, textStatus) {
var temp = Math.round(json.main.temp * 10) / 10; var temp = roundTemp(json.main.temp);
var temp_min = Math.round(json.main.temp_min * 10) / 10; var temp_min = roundTemp(json.main.temp_min);
var temp_max = Math.round(json.main.temp_max * 10) / 10; var temp_max = roundTemp(json.main.temp_max);
var iconClass = iconTable[json.weather[0].icon]; var iconClass = iconTable[json.weather[0].icon];
var icon = $('<span/>').addClass('icon').addClass(iconClass); var icon = $('<span/>').addClass('icon').addClass(iconClass);
$('.temp').updateWithText(icon.outerHTML()+temp+'&deg;', 1000); $('.temp').updateWithText(icon.outerHTML()+temp+'&deg;', 1000);
var forecast = 'Min: '+temp_min+'&deg;, Max: '+temp_max+'&deg;'; // var forecast = 'Min: '+temp_min+'&deg;, Max: '+temp_max+'&deg;';
$('.forecast').updateWithText(forecast, 1000); // $('.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 = '<span class="wi-sunrise xdimmed"></span> ' + sunrise+' <span class="wi-sunset xdimmed"></span> ' + sunset;
$('.sun').updateWithText(sunString, 1000);
}); });
setTimeout(function() { 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 = $('<table />').addClass('forecast-table');
for (var i in forecastData) {
var forecast = forecastData[i];
var dt = new Date(forecast.timestamp);
var row = $('<tr />');
row.append($('<td/>').addClass('day').html(dayAbbr[dt.getDay()]));
row.append($('<td/>').addClass('temp-max').html(roundTemp(forecast.temp_max)+'&deg;'));
row.append($('<td/>').addClass('temp-min').html(roundTemp(forecast.temp_min)+'&deg;'));
forecastTable.append(row);
}
$('.forecast').updateWithText(forecastTable, 1000);
});
setTimeout(function() {
updateWeatherForecast();
}, 60000); }, 60000);
})(); })();