YR.no Weather Forecast without any binding

Maybe usefull for someone else…

Little Widget to show Yr.no Forecast in HabPanel:
grafik

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