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
<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:
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 ?
Ich hab' es selbst hinbekommen ...
widget_background.js
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
<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.