widget_weatherbackground.js

dt2510 · 30 April 2018, 11:10:19

Ich habe kürzlich ein kleines Widget programmiert, welches ein Bild zum aktuellen Wetter als TABLETUI Hintergrundbild anzeigt. Ich habe dazu den Wettercode des Yahoo Wetters genutzt und das Bild entsprechend aus dem Verzeichnis /weatherimages mit dem Namen <code>.jpg (also z.B. 5.jpg) geladen. Da Yahoo 48 Wettercodes hat (viele davon doppelt, manche Tag, manche Nacht usw.) muss ich natürlich auch 48 Bilder bereithalten. Die Bilder, die ich verwende sind leider nicht lizenzfrei, weshalb ich das Widget nicht komplett weitergeben kann.

Um eine etwas detailliertere Wetterinfo zu bekommen habe ich mich mit PROPLANTA auseinandergesetzt. Hier gibt es nur 14 Wettercodes (jeweils für Tag und Nacht) und jetzt kam mir die Idee, das Widget an PROPLANTA anzupassen und gleichzeitig die Bildauswahl zu verfeinern.

Hier mal die Idee:

Anzeige des Wetterhintergrundes abhängig von
a) Tageszeit (Tag, Nacht, Dämmerung - würde ich von sunrise/sunset abhängig machen, zwischen ASTRONOMIC und REAL ... je ca. 2 Stunden)
b) Jahreszeit (Metorologisch: März-Mai, Juni-August, September-November, Dezember-Februar)
c) Wettercode (1-14)

Die Fotos sollten hierfür 1920x1080 Pixel oder eine höhere Auflösung haben. Da auf jeden Fall immer der mittlere Bereich (siehe unten) angezeigt wird, sollte das Wetter auch dort erkennbar sein.

Jetzt das Problem:

Ich bräuchte für dieses Vorhaben 3x4x14 = 168 Fotos, von denen einige recht schwer aufzutreiben sind (z.B. Schnee im Sommer nachts). Es gibt allerdings Regionen, in denen das vorkommen kann bzw. vorkommt, weshalb ich keine Fallback Fotos verwenden will (im Sommer wird Schnee -> Regen oder so ahnlich).
Weiterhin sollen die Fotos lizenzfrei sein, damit ich das Widget samt Fotos problemlos weitergeben kann.

Als brauchbare Plattform für Fotos habe ich unsplash.com gefunden. Die Fotos dürfen privat und kommerziell ohne Angabe von Urheber genutzt werden.
Da ich denke - und hoffe - daß sich der ein oder andere für dieses Widget interessieren könnte, suche ich auf diesem Wege Unterstützer, die sich auf die Suche nach geeigneten Fotos begeben (vor Allem die oben angesprochenen Problemfotos).

Ich bin für jede Hilfe dankbar !

Die Fotos können bei unsplash einfach in einer Collection gesammelt werden. Den Link zur Collection könnte ich dann verwenden.

Hier mal die alte/aktuelle Version, falls jemand Interesse daran hat:

widget_weatherbackground.js

Code Auswählen

var Modul_weatherbackground = function () {

    function init() {

        me.elements = $('div[data-type="' + me.widgetname + '"]', me.area);
        me.elements.each(function (index) {
            var elem = $(this);  
            elem.initData('get', 'STATE');
            me.addReading(elem, 'get');
        });
    }

    function update(device, reading) {     

        me.elements.filterDeviceReading('get', device, reading)
        .each(function (index) {
           var elem = $(this);
           var value = elem.getReading('get').val;
           if (value) {
               document.body.style.backgroundImage = "url(weatherimages/" + value + ".jpg)";
           }
        });
}

    var me = $.extend(new Modul_widget(), {
        widgetname: 'weatherbackground',
        init: init,
        update: update,
    });

    return me;
};

Aufruf in TabletUI

Code Auswählen

<div data-type="weatherbackground" data-device="Wetter" data-get="code"></div>

Der <body> Tag sollte folgendermaßen aussehen:

Code Auswählen

<body style="background-image:url(); background-size:cover; background-position:center;">

Auf diese Art wird immer der mittlere Bereich des Bildes - egal ob hochkant, quer, 4:3 oder 16:9 - angezeigt ohne das Bild zu wiederholen. Beispiel s. Anhang

FHEM Forum

widget_weatherbackground.js

dt2510