Ich bräuchte Hilfe bei der Erstellung eines simplen Widgets [erledigt]

dt2510 · 28 Februar 2018, 09:41:39

Ich möchte ein Widget zur Änderung des Hintergrundbildes erstellen, steige aber nicht so ganz bei Javascript durch (Grundkenntnisse sind wohl da, aber das scheint nicht zu reichen).

Das Widget selbst soll in der Form

Code Auswählen

<div data-type="background" data-device="dummy" data-get="image"></div>

aufgerufen werden. Im Reading "image" des Dummys steht der Dateiname des gewünschten Hintergrundbildes. Alles was das Widget tun muss ist folgende Funktion auszuführen, wenn der Inhalt des Readings "image" sich ändert:

Code Auswählen

function setImage(image){
     document.body.background = image;
}

Es wäre auch vorstellbar das Widget zu erweitern um den Hintergrund eines beliebigen HTML Elementes (also nicht nur "body") zu setzen...

Kann mir da eventuell jemand helfen ?

dt2510 · 28 Februar 2018, 13:50:27

Ich hab' es selbst hinbekommen ...

widget_background.js

Code Auswählen

var Modul_background = 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("+value+")";
           }
        });
}

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

    return me;
};

Aufruf im HTML

Code Auswählen

<body style="background-image:url(default.jpg); background-size:cover;">
...
<div data-type="background" data-device="Background" data-get="STATE"></div>

Der Dateiname des Hintergrundbildes steht im Reading STATE eines Dummies.

FHEM Forum

Ich bräuchte Hilfe bei der Erstellung eines simplen Widgets [erledigt]

dt2510

dt2510