FTUI eigene Widgets: Unterschied zwischen den Versionen

Aus FHEMWiki
Zur Navigation springen Zur Suche springen
(Die Seite wurde neu angelegt: „Eigene Widgets für FTUI zu erstellen ist relativ einfach. Dafür muss nur eine widget_mywidget.js im js-Folder neben den anderen Widgets angelegt werden. EIn…“)
 
K (Typo & Styling)
Zeile 1: Zeile 1:
Eigene Widgets für FTUI zu erstellen ist relativ einfach. Dafür muss nur eine widget_mywidget.js im js-Folder neben den anderen Widgets angelegt werden.
Eigene Widgets für FTUI zu erstellen ist relativ einfach. Dafür muss nur eine widget_mywidget.js im js-Folder neben den anderen Widgets angelegt werden.


EIne Minimalvariante eine widget_mywidget.js Datei könnte so aussehen:
Eine Minimalvariante einer widget_mywidget.js-Datei könnte so aussehen:


<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
Zeile 24: Zeile 24:
</syntaxhighlight>
</syntaxhighlight>


Am Ende der Datei steht die Definition der Public Parameter. Neben dem Namen müssen mindestens die beiden Funktionen '''init()''' und '''update()''' implementiert sein.
Am Ende der Datei steht die Definition der Public-Parameter. Neben dem Namen müssen mindestens die beiden Funktionen '''init()''' und '''update()''' implementiert sein.


init() wird einmal gleich nach dem Laden des Plugins aufgerufen, update() jedesmal, wenn Änderungen von Readings passieren.  
'''init()''' wird einmal gleich nach dem Laden des Plugins aufgerufen, '''update()''' jedesmal, wenn Änderungen von Readings passieren.  


Dieses FTUI-Plugin kann man jetzt so einbinden
Dieses FTUI-Plugin kann man jetzt so einbinden:


<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
Zeile 35: Zeile 35:




Wenn das Plugin für ein UI-Control sein soll, was mehrfach auf der Seite vorkommt, kann man im init() per each() durch alle Elemente iterieren
Wenn das Plugin für ein UI-Control sein soll, das mehrfach auf der Seite vorkommt, kann man im '''init()''' per '''each()''' durch alle Elemente iterieren:


<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
Zeile 47: Zeile 47:




Updates werden aber nur gerufen, wenn man die entsprechenden Readings beim init() abonniert. Das passiert mit '''addReading();''' (Funktion ist enthalten im Base-Widget: Modul_widget)  
Updates werden aber nur gerufen, wenn man die entsprechenden Readings beim '''init()''' abonniert. Das passiert mit '''addReading();''' (Funktion ist enthalten im Base-Widget: Modul_widget)  


In diesem Beispiel fügen wir das Reading hinzu, was im data-get angegeben ist. Wir legen gleich noch als Default das Reading 'STATE' fest, für den Fall, dass data-get im HTML Code fehlt. Das passiert mit '''elem.initData();'''
In diesem Beispiel fügen wir das Reading hinzu, das im Attribut '''data-get''' angegeben ist. Wir legen gleich noch als Default das Reading 'STATE' fest, für den Fall, dass data-get im HTML Code fehlt. Das passiert mit '''elem.initData();'''


<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
Zeile 65: Zeile 65:
</syntaxhighlight>
</syntaxhighlight>


Dann können wir unter update() auf die Notifizierungen warten.  
Dann können wir unter '''update()''' auf die Notifizierungen warten. Wir filtern mit '''elements.filterDeviceReading()''' die Elemente heraus, die unter '''data-get''' das aktualisierte Reading haben und holen mit '''elem.getReading().val''' den aktuell bekannten Wert aus dem lokalen Cache.  
Wir filter mit '''elements.filterDeviceReading()''' die Elemente heraus, die unter data-get das aktualisierte Reading haben und holen mit  
'''elem.getReading().val''' den aktuell bekannten Wert aus dem lokalen Cache.  


'''elem.getReading().date''' würde den Zeitstempel des Readings liefern.
'''elem.getReading().date''' würde den Zeitstempel des Readings liefern.
Zeile 123: Zeile 121:
</syntaxhighlight>
</syntaxhighlight>


Im HTML würde an das jetzt so nutzen können.
Im HTML würde man das jetzt so nutzen können.


<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<div data-type="mywidget" data-device='AvReceiver' data-get='volume'></div>
<div data-type="mywidget" data-device='AvReceiver' data-get='volume'></div>
</syntaxhighlight>
</syntaxhighlight>

Version vom 3. Oktober 2017, 12:09 Uhr

Eigene Widgets für FTUI zu erstellen ist relativ einfach. Dafür muss nur eine widget_mywidget.js im js-Folder neben den anderen Widgets angelegt werden.

Eine Minimalvariante einer widget_mywidget.js-Datei könnte so aussehen:

var Modul_mywidget = function () {

    function init() {
        alert('init called');
    }

    function update(device, reading) {
        alert('update called for' + device + ':' + reading );
    }

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

    return me;
};

Am Ende der Datei steht die Definition der Public-Parameter. Neben dem Namen müssen mindestens die beiden Funktionen init() und update() implementiert sein.

init() wird einmal gleich nach dem Laden des Plugins aufgerufen, update() jedesmal, wenn Änderungen von Readings passieren.

Dieses FTUI-Plugin kann man jetzt so einbinden:

<div data-type="mywidget"></div>


Wenn das Plugin für ein UI-Control sein soll, das mehrfach auf der Seite vorkommt, kann man im init() per each() durch alle Elemente iterieren:

function init() {
     me.elements = $('[data-type="' + me.widgetname + '"]');
     me.elements.each(function (index) {
         alert('init #' + index + ' called');
    });
}


Updates werden aber nur gerufen, wenn man die entsprechenden Readings beim init() abonniert. Das passiert mit addReading(); (Funktion ist enthalten im Base-Widget: Modul_widget)

In diesem Beispiel fügen wir das Reading hinzu, das im Attribut data-get angegeben ist. Wir legen gleich noch als Default das Reading 'STATE' fest, für den Fall, dass data-get im HTML Code fehlt. Das passiert mit elem.initData();

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');
    });
}

Dann können wir unter update() auf die Notifizierungen warten. Wir filtern mit elements.filterDeviceReading() die Elemente heraus, die unter data-get das aktualisierte Reading haben und holen mit elem.getReading().val den aktuell bekannten Wert aus dem lokalen Cache.

elem.getReading().date würde den Zeitstempel des Readings liefern.

function update(device, reading) {
     me.elements.filterDeviceReading('get', device, reading)
         .each(function (index) {
             var elem = $(this);
             var value = elem.getReading('get').val;
             if (value) {
                 elem.html(value);
             }
         });
}

Zusammengefasst sieht unser FTUI Plugin jetzt so aus:

var Modul_mywidget = 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) {
                    elem.html(value);
                }
            });

    }

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

    return me;
};

Im HTML würde man das jetzt so nutzen können.

<div data-type="mywidget" data-device='AvReceiver' data-get='volume'></div>