Maybe usefull for someone else…
Little Widget to show Yr.no Forecast in HabPanel:
Widget File:
yr-weather-forecast.widget.json (1.3 KB)
Put this Javascript in html/yr.no/yr.js:
var app = angular.module(‘myApp’, []);
app.run(function ($http, CacheFactory) {
$http.defaults.cache = CacheFactory(‘defaultCache’, {
maxAge: i60 * 60 * 1000, // Items added to this cache expire after 15 minutes
cacheFlushInterval: 60 * 60 * 1000, // This cache will clear itself every hour
deleteOnExpire: ‘aggressive’ // Items will be deleted from this cache when they expire
});
});
app.controller(‘myController’,
function ($scope, $http) {
var request = {
method: 'get',
url: 'https://api.met.no/weatherapi/locationforecast/2.0/compact?lat=51.0666664&lon=7.0166666',
dataType: 'jsonp',
contentType: "application/json",
config: { cache: true }
};
$scope.timeseries = new Array;
$scope.list_6h = new Array;
$scope.list_day = new Array;
$http(request)
.success(function (jsonData) {
$scope.timeseries = jsonData.properties.timeseries;
$time_first = new Date($scope.timeseries["0"].time);
var $temp_min; var $temp_max;
var $temp;
var $rain; var $wind;
var $day;
var $serie_day;
for (var serie of $scope.timeseries) {
$time_now = new Date(serie.time);
$time_diff = ($time_now - $time_first)/60/60/1000;
$temp = parseFloat(JSON.stringify(serie.data.instant.details.air_temperature));
$wind = parseFloat(JSON.stringify(serie.data.instant.details.wind_speed));
// Initial befüllen
if ($time_diff == 0) {
$serie_day = serie;
$temp_min = $temp; $temp_max = $temp; $wind_max = $wind;
$rain = 0;
$day = $time_now.getDate();
}
// wenn der Tag wechselt min/max/day zurueck bzw. neu setzen
if ($day != $time_now.getDate()) {
if ($time_first != $time_now) {
$serie_day.data.instant.details.temp_min = $temp_min;
$serie_day.data.instant.details.temp_max = $temp_max;
$serie_day.data.instant.details.rain = $rain;
$serie_day.data.instant.details.wind_max = $wind_max;
$scope.list_day.push($serie_day);
$rain = 0; $wind_max = 0;
}
$temp_min = $temp;
$temp_max = $temp;
$day = $time_now.getDate();
$serie_day = serie;
//console.log("Reset MinMax");
}
// min/max Temp bestimmen, Regen addieren
if ($temp <= $temp_min) { $temp_min = $temp; }
if ($temp >= $temp_max) { $temp_max = $temp; }
if(serie.data.hasOwnProperty('next_1_hours')){
$rain += parseFloat(JSON.stringify(serie.data.next_1_hours.details.precipitation_amount));
}
if ($wind_max <= $wind) { $wind_max = $wind; }
// nur alle 6h
if (($time_first == $time_now) || ($time_diff%6 === 0)) {
$scope.list_6h.push(serie);
}
// Bei Tagesanzeige das Icon von Mittags um 12h nutzen
if ($time_now.getUTCHours() == 12) {
$serie_day = serie;
}
//console.log("Day "+$day+" Min "+$temp_min+" Max "+$temp_max+" Rain "+$rain+" Wind max "+$wind_max);
}
})
.error(function () {
});
});
Put this icons in path html/yr.no/:
https://api.met.no/weatherapi/weathericon/2.0/data