KodiNowPlaying

[eisi]

Hallo,
ich versuche gerade das Widget von Nesges zu portieren.
FTUI nutze ich schon eine längere Zeit und es macht richtig Spaß mit den Widgets zu arbeiten.
Nur wurde genau dieses Widget nicht portiert und ich versuche mich gerade per Anleitung von https://wiki.fhem.de/wiki/FTUI_eigene_Widgets an einer neuen Version.
Das Widget wird initialisiert, aber es springt nicht in die Updatefunction
Das Javascript:

Code Auswählen Erweitern


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');
        elem.initData('currentTitle', '');
        elem.initData('label', '');
        elem.initData('volume', '');
        me.addReading(elem, 'get');
        me.addReading(elem, 'currentTitle');
        me.addReading(elem, 'label');
        me.addReading(elem, 'volume');
        me.addReading(elem, 'skin');
        var label = elem.getReading('label').val;
        var playStatus = elem.getReading('playstatus').val;
        elem.html("PS:" + playStatus);
    });
}

    function update(device, reading) {
        var elem = $(this);
        var label = elem.getReading('label').val;
        var playStatus = elem.getReading('playstatus').val;
        elem.html("PS:" + playStatus);
    }

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

    return me;
};



HTML:

Code Auswählen Erweitern


<li data-row="1" data-col="5" data-sizex="1" data-sizey="2">
        <header>MY</header>
        <div data-type="mywidget" data-device="Kodi.WoZi" data-get="volume"></div>
    </li>


Kodi kann ich ganz normal ansprechen und es gibt auch aktuelle Werte in FHEM.
Wo ist der Fehler?

LG,
Ingo

[setstate]

Vielleicht täuscht es nur, und update wird gerufen.

Was passiert, wenn man unter update() den Output ändert?

elem.html("PS_update:" + playStatus);

[eisi]

Leider nichts.

Ich habe jetzt mal das Reading version eingebaut.
FHEM zeigt das auf jeden Fall immer mit der neusten Updatezeit an.
Leider geht es nicht.
Ich habe auf derselben Seite (also auch im selben HTML) noch eine Instanz von meinem Kodi.
Eine Fernbedienung. Kann das ein Problem darstellen?

Ingo

Code Auswählen Erweitern

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');
        elem.initData('currentTitle', '');
        elem.initData('label', '');
        elem.initData('volume', '');
        me.addReading(elem, 'get');
        me.addReading(elem, 'currentTitle');
        me.addReading(elem, 'label');
        me.addReading(elem, 'version');
        me.addReading(elem, 'skin');
        var label = elem.getReading('label').val;
        var playStatus = elem.getReading('playstatus').val;
        elem.html("PS:" + playStatus);
    });
}

    function update(device, reading) {
        var elem = $(this);
        var label = elem.getReading('version').val;
        var playStatus = elem.getReading('playstatus').val;
        elem.html("PS_update:" + playStatus);
    }

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

    return me;
};

[setstate]

Code Auswählen Erweitern

   
function update(device, reading) {
        var elem = $(this);
        var label = elem.getReading('version').val;
        var playStatus = elem.getReading('playstatus').val;
        elem.html("PS_update:" + playStatus);
    }


$(this) liefert so nicht eine Referenz auf dein <div data-type="mywidget" data-device="Kodi.WoZi" data-get="volume"></div>

Du musst aus der Liste aller "mywidget" das entsprechende raussuchen: me.elements.filterDeviceReading()

Code Auswählen Erweitern

   
function update(device, reading) {
        me.elements.filterDeviceReading('playstatus', device, reading)
            .each(function (idx) {
                var elem = $(this);
                var playStatus = elem.getReading('playstatus').val;
                elem.html("PS:" + playStatus);
             });
    }


Man kann natürlich auch bei jeglichen Updates etwas anzeigen

Code Auswählen Erweitern

   
function update(device, reading) {
      var param = ftui.getDeviceParameter(device, reading);
      var val = (param) ? param.val : '';
      alert(val);
    }



Oder bei jeglichen Updates nur den Wert von 'playstatus'

Code Auswählen Erweitern

   
function update(device, reading) {
      var param = ftui.getDeviceParameter('Kodi.WoZi', 'playstatus');
      var val = (param) ? param.val : '';
      alert(val);
    }


[eisi]

Hmm, irgendwie nicht.
Der erste Alert ist leer.
PS ist undefined
Ich setze das Volume in FHEM hoch, aber es kommt kein Update

HTML:

Code Auswählen Erweitern


<li data-row="1" data-col="5" data-sizex="1" data-sizey="2">
        <header>MY</header>
        <div data-type="mywidget" data-device="Kodi.WoZi" data-get="volume"></div>
    </li>

JS:

Code Auswählen Erweitern


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');
        elem.initData('currentTitle', '');
        elem.initData('label', '');
        elem.initData('volume', '');
        me.addReading(elem, 'get');
        me.addReading(elem, 'currentTitle');
        me.addReading(elem, 'label');
        me.addReading(elem, 'version');
        me.addReading(elem, 'skin');
        var label = elem.getReading('label').val;
        var playStatus = elem.getReading('playstatus').val;
        elem.html("PS:" + playStatus);
    });
}

function update(device, reading) {
      var param = ftui.getDeviceParameter('Kodi.WoZi', 'playstatus');
      var val = (param) ? param.val : '';
      alert(val);
    }

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

    return me;
};


[eisi]

Nächster Versuch
Widget_Example umgeschrieben

Readings: Temperatur, Luftfeuchtigkeit
Device: Wohnzimmer_Luft

Alert INIT wird angezeigt
Alert Update: 'IN TEMP' undefined 'Grad');
Also ist value leer.
Warum???


HTML-Code:

Code Auswählen Erweitern


<li data-row="1" data-col="5" data-sizex="1" data-sizey="2">
        <header>MY</header>
        <div data-type="mywidget" data-device='Wohnzimmer_Luft' data-get='Temperatur'></div>


JS:

Code Auswählen Erweitern


"use strict";

function depends_mywidget() {
    var deps = [];

    return deps;
}

var Modul_mywidget = function () {

    // privat sub function
    function doSomething(elem) {

        if (elem.hasClass('colorfull')) {
            elem.css({
                backgroundColor: '#aa44ff',
            });
        }
    }

    function init() {
alert('INIT');
        me.elements = $('div[data-type="' + me.widgetname + '"]', me.area);
        me.elements.each(function (index) {

            var elem = $(this);
            elem.initData('Temperatur', '00');
            elem.initData('Luftfechtigkeit', '00');

            // subscripe my readings for updating
            me.addReading(elem, 'Temperatur');
            me.addReading(elem, 'Luftfeuchtigkeit');

            // call sub function for each instance of this widget
            doSomething(elem);
        });
    }

    function update(dev, par) {
        // do updates from reading for content
        me.elements.filterDeviceReading('Temperatur', dev, par)
            .each(function (index) {
                var elem = $(this);
                var value = elem.getReading('Temperatur').val;
alert('IN TEMP' + value + 'Grad');
                if (value) {
                    elem.html(value);
                }
            });

        // do updates from reading for color
        me.elements.filterDeviceReading('Luftfeuchtigkeit', dev, par)
            .each(function (idx) {
                var elem = $(this);
                var val = elem.getReading('Luftfeuchtigkeit').val;
                if (val) {
//                    val = '#' + val.replace('#', '');
                    elem.html("color", val);
                }
            });
    }

    // public
    // inherit all public members from base class
    var me = $.extend(new Modul_widget(), {
        //override or own public members
        widgetname: 'mywidget',
        init: init,
        update: update,
    });

    return me;
};


[setstate]

Kleine Verwechslung noch:

me.addReading(elem, 'Temperatur');

Temperatur ist der Parameter-Name, nicht der Reading-Name

Also muss es data-Temperatur="myTempReading" heißen.


Oder andersrum:


HTML:
data-temp="Temperatur"

JS:
me.addReading(elem, 'temp');

[eisi]

Okay, die Temperatur zeigt es jetzt an.
2 Fragen hätte ich noch
1. Es kommt kein Update im Widget, auch wenn sich die Temperatur in FHEM ändert.
2. Wie bekomme ich alle Readings eines Geräts ohne sie in ellenlangem HTML-Code zu definieren?
Wenn ich jetzt zum Beispiel Kodi auslesen möchte, müsste ich ja ALLE Parameter die wichtig sind im Div-Tag unterbringen.
Geht das besser?

JS:

Code Auswählen Erweitern


"use strict";

function depends_mywidget() {
    var deps = [];

    return deps;
}

var Modul_mywidget = function () {

    // privat sub function
    function doSomething(elem) {

        if (elem.hasClass('colorfull')) {
            elem.css({
                backgroundColor: '#aa44ff',
            });
        }
    }

    function init() {
        me.elements = $('div[data-type="' + me.widgetname + '"]', me.area);
        me.elements.each(function (index) {

            var elem = $(this);
            elem.initData('temp', '00');
//            elem.initData('Luftfechtigkeit', '00');

            // subscripe my readings for updating
            me.addReading(elem, 'temp');
//            me.addReading(elem, 'Luftfeuchtigkeit');

            // call sub function for each instance of this widget
//            doSomething(elem);
        });
    }

    function update(dev, par) {
        // do updates from reading for content
        me.elements.filterDeviceReading('temp', dev, par)
            .each(function (index) {
                var elem = $(this);
                var value = elem.getReading('temp').val;
                if (value) {
                    elem.html(value);
                }
            });

    }

    // public
    // inherit all public members from base class
    var me = $.extend(new Modul_widget(), {
        //override or own public members
        widgetname: 'mywidget',
        init: init,
        update: update,
    });

    return me;
};


[setstate]

Schau dir mal das widget_joinedlabel.js an, da wird mit einem get-Array gearbeitet

Code Auswählen Erweitern


<div data-type="joinedlabel" data-device="MPD1" data-mask="[$1 - ][$2]-[$3][: $4]"
      data-get='["Track","Artist","Title","currentSenderCurrent"]'>
</div>


[eisi]

Sieht intesressant aus, Danke!
Das werde ich morgen mal versuchen.

Aber warum sich die Tempertaur nicht updated bleibt mir ein Rätsel.
An der Update Routine ist doch eigentlich nicht falsch, oder?
Einmal hat es den Wert eingelesen und dann nie wieder verändert.
Selbst ein STRG-F5 bleibt ohne Wirkung.
Wird da irgendwo was gecached?

[eisi]

Also im Consolelog stehen alte Werte:

Wohnzimmer_Luft  widget_mywidget.js:24:1
Temperatur  widget_mywidget.js:25:1
Object { date: "2017-10-20 15:20:02", val: "23.00", valid: false }  widget_mywidget.js:26:1

Wohnzimmer_Luft  widget_mywidget.js:24:1
Luftfeuchtigkeit  widget_mywidget.js:25:1
Object { date: "2017-10-20 15:20:02", val: "51.40", valid: false }

[setstate]

Sieht so aus, als klappt die Initialisierung der Seite nicht.

Ich schlage vor, nimm die https://github.com/knowthelist/fhem-tablet-ui/blob/master/www/tablet/index_empty.html und setze nur das eine neue Widget drauf. Debug auf 1, dann muss man nach erfolgreicher Initialisierung die Refresh-Toast Messages sehen.

[eisi]

Damit kommen jetzt die Updates, Danke !!!

Also gehe ich davon aus, dass

Code Auswählen Erweitern


<?
    include("ui.php");
    $ui = new UI();
?>

Nicht mehr gebraucht wird?

[setstate]

Das ist PHP Code, der wurde im  Standard-Setup noch nie gebraucht. Das hast du bestimmt aus einem User-Beispiel kopiert.

[masterpete23]

Ich wollte mich mal einklinken - da ich starkes Interesse an dem KODI Widget hätte.

Wie ist der Stand?
Kann man schon etwas testen? Gibt es noch Aufgaben?

[eisi]

So funktioniert es jetzt bei mir:

Code Auswählen Erweitern


var widget_kodinowplaying = $.extend({}, {
    widgetname:"kodinowplaying",
    init: function () {
        var base=this;
        this.elements = $('div[data-type="'+this.widgetname+'"]');
        this.elements.each(function(index) {
            if($(this).hasClass('titleonly')){
                $(this).attr('data-show', 'no');
                $(this).attr('data-season', 'no');
                $(this).attr('data-episode', 'no');
                $(this).attr('data-title', 'yes');
                $(this).attr('data-artist', 'no');
                $(this).attr('data-album', 'no');
                $(this).attr('data-time', 'no');
                $(this).attr('data-totaltime', 'no');
                $(this).attr('data-playstatus', 'no');
            } else if($(this).hasClass('short')){
                $(this).attr('data-show', 'yes');
                $(this).attr('data-season', 'no');
                $(this).attr('data-episode', 'no');
                $(this).attr('data-title', 'yes');
                $(this).attr('data-artist', 'no');
                $(this).attr('data-album', 'no');
                $(this).attr('data-time', 'yes');
                $(this).attr('data-totaltime', 'no');
                $(this).attr('data-playstatus', 'no');
            } else if($(this).hasClass('notime')){
                $(this).attr('data-show', 'yes');
                $(this).attr('data-season', 'yes');
                $(this).attr('data-episode', 'yes');
                $(this).attr('data-title', 'yes');
                $(this).attr('data-artist', 'yes');
                $(this).attr('data-album', 'yes');
                $(this).attr('data-time', 'no');
                $(this).attr('data-totaltime', 'no');
                $(this).attr('data-playstatus', 'yes');
            }

            // readings for KODI devices
            $(this).data('type', 'type');
            readings['type'] = true;

            if(!$(this).attr('data-show') || $(this).attr('data-show')=='yes') {
                $(this).data('currentShowtitle', 'currentShowtitle');
                readings['currentShowtitle'] = true;
            }
            if(!$(this).attr('data-season') || $(this).attr('data-season')=='yes') {
                $(this).data('season', 'season');
                readings['season'] = true;
            }
            if(!$(this).attr('data-episode') || $(this).attr('data-episode')=='yes') {
                $(this).data('episode', 'episode');
                readings['episode'] = true;
            }
            if(!$(this).attr('data-title') || $(this).attr('data-title')=='yes') {
                $(this).data('currentTitle', 'currentTitle');
                readings['currentTitle'] = true;
            }
            if(!$(this).attr('data-artist') || $(this).attr('data-artist')=='yes') {
                $(this).data('currentArtist', 'currentArtist');
                readings['currentArtist'] = true;
            }
            if(!$(this).attr('data-album') || $(this).attr('data-album')=='yes') {
                $(this).data('currentAlbum', 'currentAlbum');
                readings['currentAlbum'] = true;
            }
            if(!$(this).attr('data-time') || $(this).attr('data-time')=='yes') {
                $(this).data('time', 'time');
                readings['time'] = true;
            }
            if(!$(this).attr('data-totaltime') || $(this).attr('data-totaltime')=='yes') {
                $(this).data('totaltime', 'totaltime');
                readings['totaltime'] = true;
            }
            if(!$(this).attr('data-playstatus') || $(this).attr('data-playstatus')=='yes') {
                $(this).data('playStatus', 'playStatus');
                readings['playStatus'] = true;
            }
        });
    },

    update: function (dev,par) {
        var deviceElements= this.elements.filter('div[data-device="'+dev+'"]');
        deviceElements.each(function(index) {
            var type        = getDeviceValue($(this), 'type');
            var show        = getDeviceValue($(this), 'currentShowtitle');
            var season      = getDeviceValue($(this), 'season');
            var episode     = getDeviceValue($(this), 'episode');
            var title       = getDeviceValue($(this), 'currentTitle');
            var artist      = getDeviceValue($(this), 'currentArtist');
            var album       = getDeviceValue($(this), 'currentAlbum');
            var time        = getDeviceValue($(this), 'time');
            var totaltime   = getDeviceValue($(this), 'totaltime');
            var playStatus  = getDeviceValue($(this), 'playStatus');

            // check dateformat and substitute accordingly
            var dateformat = $(this).attr('data-timeformat');
            if(!dateformat) {
                switch(type) {
                    case "song": dateformat = 'MM:SS'; break;
                    default: dateformat = 'HH:MM:SS'; break;
                }
            }
            var subst = '';
            if(dateformat) {
                switch(dateformat.toUpperCase()) {
                    case "HH":          subst = '$1'; break;
                    case "HH:MM":       subst = '$1:$2'; break;
                    default:
                    case "HH:MM:SS":    subst = '$1:$2:$3'; break;
                    case "MM:SS":       subst = '$2:$3'; break;
                    case "SS":          subst = '$3'; break;
                }
            }
            if(subst) {
                if(time) {
                    time = time.replace(/^(\d\d):(\d\d):(\d\d).(.*)/, subst);
                }
                if(totaltime) {
                    totaltime = totaltime.replace(/^(\d\d):(\d\d):(\d\d).(.*)/, subst);
                }
            }

            // getDeviceValue might return a timestamp which is the readings updatetime
            // this is a bug in requestFhem not yet solved
            // check values which most likely would not contain a timestamp and empty them
            if(show && show.match(/^\d\d\d\d-\d\d-\d\d \d\d:\d\d:\d\d$/)) {
                show='';
            }
            if(season && season.match(/^\d\d\d\d-\d\d-\d\d \d\d:\d\d:\d\d$/)) {
                season='';
            }
            if(episode && episode.match(/^\d\d\d\d-\d\d-\d\d \d\d:\d\d:\d\d$/)) {
                episode='';
            }
            if(title && title.match(/^\d\d\d\d-\d\d-\d\d \d\d:\d\d:\d\d$/)) {
                title='';
            }
            if(artist && artist.match(/^\d\d\d\d-\d\d-\d\d \d\d:\d\d:\d\d$/)) {
                artist='';
            }
            if(album && album.match(/^\d\d\d\d-\d\d-\d\d \d\d:\d\d:\d\d$/)) {
                album='';
            }

            $(this).empty();
            $(this).html(
                  (show                 ? ' <span class="'+$(this).data('class-show')       +'">'   +show+'</span> '                                    :'')
                + (show && !season&&!episode ? ' - ' :'')
                + (season               ? ' <span class="'+$(this).data('class-season')     +'">S'  +(season.match(/^\d\d/)?'':'0')+season+'</span>'    :'')
                + (episode              ?  '<span class="'+$(this).data('class-episode')    +'">E'  +(episode.match(/^\d\d/)?'':'0')+episode+'</span> ' :'')
                + (artist               ? ' <span class="'+$(this).data('class-artist')     +'">'   +artist+' - </span>'                                :'')
                + (album                ? ' <span class="'+$(this).data('class-album')      +'">'   +album+' - </span>'                                 :'')
                + (title                ? ' <span class="'+$(this).data('class-title')      +'">'   +title+ '</span> '                                  :'')
                + (time || totaltime    ? ' [ ' : '')
                + (time                 ?  '<span class="'+$(this).data('class-time')       +'">'   +time+'</span>'                                     :'')
                + (time && totaltime    ?  ' / ' : '')
                + (totaltime            ?  '<span class="'+$(this).data('class-totaltime')  +'">'   +totaltime+'</span>'                                :'')
                + (time || totaltime    ? ' ] ' : '')
                + (playStatus && playStatus!="playing"? ' <span class="'+$(this).data('class-playstatus') +'">(' +playStatus+')</span> '                :'')
            );
        });
    }
});


[masterpete23]

So funktioniert es jetzt bei mir:

Code Auswählen Erweitern


var widget_kodinowplaying = $.extend({}, {
    widgetname:"kodinowplaying",
    init: function () {
        var base=this;
        this.elements = $('div[data-type="'+this.widgetname+'"]');
        this.elements.each(function(index) {
            if($(this).hasClass('titleonly')){
                $(this).attr('data-show', 'no');
                $(this).attr('data-season', 'no');
                $(this).attr('data-episode', 'no');
                $(this).attr('data-title', 'yes');
                $(this).attr('data-artist', 'no');
                $(this).attr('data-album', 'no');
                $(this).attr('data-time', 'no');
                $(this).attr('data-totaltime', 'no');
                $(this).attr('data-playstatus', 'no');
            } else if($(this).hasClass('short')){
                $(this).attr('data-show', 'yes');
                $(this).attr('data-season', 'no');
                $(this).attr('data-episode', 'no');
                $(this).attr('data-title', 'yes');
                $(this).attr('data-artist', 'no');
                $(this).attr('data-album', 'no');
                $(this).attr('data-time', 'yes');
                $(this).attr('data-totaltime', 'no');
                $(this).attr('data-playstatus', 'no');
            } else if($(this).hasClass('notime')){
                $(this).attr('data-show', 'yes');
                $(this).attr('data-season', 'yes');
                $(this).attr('data-episode', 'yes');
                $(this).attr('data-title', 'yes');
                $(this).attr('data-artist', 'yes');
                $(this).attr('data-album', 'yes');
                $(this).attr('data-time', 'no');
                $(this).attr('data-totaltime', 'no');
                $(this).attr('data-playstatus', 'yes');
            }

            // readings for KODI devices
            $(this).data('type', 'type');
            readings['type'] = true;

            if(!$(this).attr('data-show') || $(this).attr('data-show')=='yes') {
                $(this).data('currentShowtitle', 'currentShowtitle');
                readings['currentShowtitle'] = true;
            }
            if(!$(this).attr('data-season') || $(this).attr('data-season')=='yes') {
                $(this).data('season', 'season');
                readings['season'] = true;
            }
            if(!$(this).attr('data-episode') || $(this).attr('data-episode')=='yes') {
                $(this).data('episode', 'episode');
                readings['episode'] = true;
            }
            if(!$(this).attr('data-title') || $(this).attr('data-title')=='yes') {
                $(this).data('currentTitle', 'currentTitle');
                readings['currentTitle'] = true;
            }
            if(!$(this).attr('data-artist') || $(this).attr('data-artist')=='yes') {
                $(this).data('currentArtist', 'currentArtist');
                readings['currentArtist'] = true;
            }
            if(!$(this).attr('data-album') || $(this).attr('data-album')=='yes') {
                $(this).data('currentAlbum', 'currentAlbum');
                readings['currentAlbum'] = true;
            }
            if(!$(this).attr('data-time') || $(this).attr('data-time')=='yes') {
                $(this).data('time', 'time');
                readings['time'] = true;
            }
            if(!$(this).attr('data-totaltime') || $(this).attr('data-totaltime')=='yes') {
                $(this).data('totaltime', 'totaltime');
                readings['totaltime'] = true;
            }
            if(!$(this).attr('data-playstatus') || $(this).attr('data-playstatus')=='yes') {
                $(this).data('playStatus', 'playStatus');
                readings['playStatus'] = true;
            }
        });
    },

    update: function (dev,par) {
        var deviceElements= this.elements.filter('div[data-device="'+dev+'"]');
        deviceElements.each(function(index) {
            var type        = getDeviceValue($(this), 'type');
            var show        = getDeviceValue($(this), 'currentShowtitle');
            var season      = getDeviceValue($(this), 'season');
            var episode     = getDeviceValue($(this), 'episode');
            var title       = getDeviceValue($(this), 'currentTitle');
            var artist      = getDeviceValue($(this), 'currentArtist');
            var album       = getDeviceValue($(this), 'currentAlbum');
            var time        = getDeviceValue($(this), 'time');
            var totaltime   = getDeviceValue($(this), 'totaltime');
            var playStatus  = getDeviceValue($(this), 'playStatus');

            // check dateformat and substitute accordingly
            var dateformat = $(this).attr('data-timeformat');
            if(!dateformat) {
                switch(type) {
                    case "song": dateformat = 'MM:SS'; break;
                    default: dateformat = 'HH:MM:SS'; break;
                }
            }
            var subst = '';
            if(dateformat) {
                switch(dateformat.toUpperCase()) {
                    case "HH":          subst = '$1'; break;
                    case "HH:MM":       subst = '$1:$2'; break;
                    default:
                    case "HH:MM:SS":    subst = '$1:$2:$3'; break;
                    case "MM:SS":       subst = '$2:$3'; break;
                    case "SS":          subst = '$3'; break;
                }
            }
            if(subst) {
                if(time) {
                    time = time.replace(/^(\d\d):(\d\d):(\d\d).(.*)/, subst);
                }
                if(totaltime) {
                    totaltime = totaltime.replace(/^(\d\d):(\d\d):(\d\d).(.*)/, subst);
                }
            }

            // getDeviceValue might return a timestamp which is the readings updatetime
            // this is a bug in requestFhem not yet solved
            // check values which most likely would not contain a timestamp and empty them
            if(show && show.match(/^\d\d\d\d-\d\d-\d\d \d\d:\d\d:\d\d$/)) {
                show='';
            }
            if(season && season.match(/^\d\d\d\d-\d\d-\d\d \d\d:\d\d:\d\d$/)) {
                season='';
            }
            if(episode && episode.match(/^\d\d\d\d-\d\d-\d\d \d\d:\d\d:\d\d$/)) {
                episode='';
            }
            if(title && title.match(/^\d\d\d\d-\d\d-\d\d \d\d:\d\d:\d\d$/)) {
                title='';
            }
            if(artist && artist.match(/^\d\d\d\d-\d\d-\d\d \d\d:\d\d:\d\d$/)) {
                artist='';
            }
            if(album && album.match(/^\d\d\d\d-\d\d-\d\d \d\d:\d\d:\d\d$/)) {
                album='';
            }

            $(this).empty();
            $(this).html(
                  (show                 ? ' <span class="'+$(this).data('class-show')       +'">'   +show+'</span> '                                    :'')
                + (show && !season&&!episode ? ' - ' :'')
                + (season               ? ' <span class="'+$(this).data('class-season')     +'">S'  +(season.match(/^\d\d/)?'':'0')+season+'</span>'    :'')
                + (episode              ?  '<span class="'+$(this).data('class-episode')    +'">E'  +(episode.match(/^\d\d/)?'':'0')+episode+'</span> ' :'')
                + (artist               ? ' <span class="'+$(this).data('class-artist')     +'">'   +artist+' - </span>'                                :'')
                + (album                ? ' <span class="'+$(this).data('class-album')      +'">'   +album+' - </span>'                                 :'')
                + (title                ? ' <span class="'+$(this).data('class-title')      +'">'   +title+ '</span> '                                  :'')
                + (time || totaltime    ? ' [ ' : '')
                + (time                 ?  '<span class="'+$(this).data('class-time')       +'">'   +time+'</span>'                                     :'')
                + (time && totaltime    ?  ' / ' : '')
                + (totaltime            ?  '<span class="'+$(this).data('class-totaltime')  +'">'   +totaltime+'</span>'                                :'')
                + (time || totaltime    ? ' ] ' : '')
                + (playStatus && playStatus!="playing"? ' <span class="'+$(this).data('class-playstatus') +'">(' +playStatus+')</span> '                :'')
            );
        });
    }
});


Wie kann ich sowas bei mir einbinden? Sorry für die Anfänger frage

Gesendet von meinem FRD-L09 mit Tapatalk

[eisi]

Du gehst in dein /www/tablet/js Verzeichnis.
Da legst du eine widget_kodinowplaying.js Datei an.
Editierst diese Datei und fügst den Code ein.

LG,
Ingo

[masterpete23]

gesagt getan.

widget_kodinowplaying.js angelegt und gefüllt.

was trage ich im HTML ein ?

Code Auswählen Erweitern

<div data-type="kodinowplaying" data-device="wz_kodi" data-get="volume"></div>

[Rudy]

Vielleicht hilft ja die Beschreibung des Originalautors unter https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/kodinowplaying.

[eisi]

Sorry für die späte Antwort.

Code Auswählen Erweitern


<div data-type="mywidget" data-device='Kodi.WoZi'
         data-get='["type","season","episode","currentShowtitle","currentTitle","time","totaltime",
        "playStatus","currentAlbum","currentArtist","label"]'></div>


[masterpete23]

welchen data-type muss ich denn nehmen?
Stehe auf dem Schlauch

[eisi]

Also bei mir binde ich es so ein:

Code Auswählen Erweitern


<li data-row="2" data-col="4" data-sizex="3" data-sizey="1">
        <header>Kodi Wohnzimmer</header>
        <div class="top-space">
            <div class="inline" data-type="button" data-fhem-cmd="set Kodi.WoZi exec rewind" data-icon="fa-backward" data-on-background-color="rgb(170,105,0)" class="cell"></div>
            <div class="inline" data-type="button" data-fhem-cmd="set Kodi.WoZi pause all" data-icon="fa-pause" data-on-background-color="rgb(170,105,0)" class="cell"></div>
            <div class="inline" data-type="button" data-fhem-cmd="set Kodi.WoZi play all" data-icon="fa-play" data-on-background-color="#FFCC00" class="cell"></div>
            <div class="inline" data-type="button" data-fhem-cmd="set Kodi.WoZi stop all" data-icon="fa-stop" data-on-background-color="rgb(170,105,0)" class="cell"></div>
            <div class="inline" data-type="button" data-fhem-cmd="set Kodi.WoZi exec fastforward" data-icon="fa-forward" data-on-background-color="rgb(170,105,0)" class="cell"></div>
        </div>
        <div data-type="mywidget" data-device='Kodi.WoZi'
         data-get='["type","season","episode","currentShowtitle","currentTitle","time","totaltime",
        "playStatus","currentAlbum","currentArtist","label"]'></div>
    </li>


[masterpete23]

woher weiß er nun , dass dein

Code Auswählen Erweitern

<div data-type="mywidget" zu der widget_kodinowplaying.js gehört - das verstehe ich nicht

[eisi]

Ups, sorry, hatte die falsche Datei gegriffen

Code Auswählen Erweitern


"use strict";

var Modul_mywidget = function () {
    var readings =[];
    function init_attr(elem) {

        elem.initData('get', 'STATE');
        me.addReading(elem, 'get');

        this.elements.each(function(index) {
            if($(this).hasClass('titleonly')){
                $(this).attr('data-show', 'no');
                $(this).attr('data-season', 'no');
                $(this).attr('data-episode', 'no');
                $(this).attr('data-label', 'yes');
                $(this).attr('data-artist', 'no');
                $(this).attr('data-album', 'no');
                $(this).attr('data-time', 'no');
                $(this).attr('data-totaltime', 'no');
                $(this).attr('data-playstatus', 'no');
            } else if($(this).hasClass('short')){
                $(this).attr('data-show', 'yes');
                $(this).attr('data-season', 'no');
                $(this).attr('data-episode', 'no');
                $(this).attr('data-label', 'yes');
                $(this).attr('data-artist', 'no');
                $(this).attr('data-album', 'no');
                $(this).attr('data-time', 'yes');
                $(this).attr('data-totaltime', 'no');
                $(this).attr('data-playstatus', 'no');
            } else if($(this).hasClass('notime')){
                $(this).attr('data-show', 'yes');
                $(this).attr('data-season', 'yes');
                $(this).attr('data-episode', 'yes');
                $(this).attr('data-label', 'yes');
                $(this).attr('data-artist', 'yes');
                $(this).attr('data-album', 'yes');
                $(this).attr('data-time', 'no');
                $(this).attr('data-totaltime', 'no');
                $(this).attr('data-playstatus', 'yes');
            }
            $(this).data('type', 'type');
            readings['type'] = true;
            if(!$(this).attr('data-show') || $(this).attr('data-show')=='yes') {
                $(this).data('currentShowtitle', 'currentShowtitle');
                readings['currentShowtitle'] = true;
            }
            if(!$(this).attr('data-season') || $(this).attr('data-season')=='yes') {
                $(this).data('season', 'season');
                readings['season'] = true;
            }
            if(!$(this).attr('data-episode') || $(this).attr('data-episode')=='yes') {
                $(this).data('episode', 'episode');
                readings['episode'] = true;
            }
            if(!$(this).attr('data-label') || $(this).attr('data-label')=='yes') {
                $(this).data('label', 'label');
                readings['label'] = true;
            }
            if(!$(this).attr('data-artist') || $(this).attr('data-artist')=='yes') {
                $(this).data('currentArtist', 'currentArtist');
                readings['currentArtist'] = true;
            }
            if(!$(this).attr('data-album') || $(this).attr('data-album')=='yes') {
                $(this).data('currentAlbum', 'currentAlbum');
                readings['currentAlbum'] = true;
            }
            if(!$(this).attr('data-time') || $(this).attr('data-time')=='yes') {
                $(this).data('time', 'time');
                readings['time'] = true;
            }
            if(!$(this).attr('data-totaltime') || $(this).attr('data-totaltime')=='yes') {
                $(this).data('totaltime', 'totaltime');
                readings['totaltime'] = true;
            }
            if(!$(this).attr('data-playstatus') || $(this).attr('data-playstatus')=='yes') {
                $(this).data('playStatus', 'playStatus');
                readings['playStatus'] = true;
            }
            console.log (readings);
        });
    }

    function update(dev, par) {
        me.elements.filterDeviceReading('get', dev, par).each(function (index) {
            var elem = $(this);
            var get = elem.data('get');
            var part = elem.data('part');
            var val = [];
            var type ="";
            var season ="";
            var episode ="";
            var currentShowtitle ="";
            var currentTitle ="";
            var time ="";
            var totaltime ="";
            var playStatus ="";
            var currentArtist ="";
            var currentAlbum ="";
            var title ="";
            var show ="";
            var label ="";
            var html ="";

            var value = elem.getReading('get', 0).val;
            type = ftui.getPart(value, part);
            var value = elem.getReading('get', 1).val;
            season = ftui.getPart(value, part);
            var value = elem.getReading('get', 2).val;
            episode = ftui.getPart(value, part);
            var value = elem.getReading('get', 3).val;
            show = ftui.getPart(value, part);
            var value = elem.getReading('get', 4).val;
            currentTitle = ftui.getPart(value, part);
            var value = elem.getReading('get', 5).val;
            time = ftui.getPart(value, part);
            var value = elem.getReading('get', 6).val;
            totaltime = ftui.getPart(value, part);
            var value = elem.getReading('get', 7).val;
            playStatus = ftui.getPart(value, part);
            var value = elem.getReading('get', 8).val;
            currentAlbum = ftui.getPart(value, part);
            var value = elem.getReading('get', 9).val;
            currentArtist = ftui.getPart(value, part);
            var value = elem.getReading('get', 10).val;
            label = ftui.getPart(value, part);


            var dateformat = $(this).attr('data-timeformat');
            if(!dateformat) {
                switch(type) {
                    case "song": dateformat = 'MM:SS'; break;
                    default: dateformat = 'HH:MM:SS'; break;
                }
            }
            var subst = '';
            if(dateformat) {
                switch(dateformat.toUpperCase()) {
                    case "HH":          subst = '$1'; break;
                    case "HH:MM":       subst = '$1:$2'; break;
                    default:
                    case "HH:MM:SS":    subst = '$1:$2:$3'; break;
                    case "MM:SS":       subst = '$2:$3'; break;
                    case "SS":          subst = '$3'; break;
                }
            }
            if(subst) {
                if(time) {
                    time = time.replace(/^(\d\d):(\d\d):(\d\d).(.*)/, subst);
                }
                if(totaltime) {
                    totaltime = totaltime.replace(/^(\d\d):(\d\d):(\d\d).(.*)/, subst);
                }
            }

                if (readings['label'] && label){
                        html= html + ' '+ label +' '
                }
                if (readings['show'] && show){
                        html= html + show+' '
                }
                if (readings['season'] && season){
                        html= html + 'S'+season+' '
                }
                if (readings['episode'] && episode){
                        html= html + 'E'+ episode +' '
                }
                if (readings['currentArtist'] && currentArtist){
                        html= html + ' '+ currentArtist +':'
                }
                if (readings['currentAlbum'] && currentAlbum){
                        html= html + ' '+ currentAlbum +':'
                }
                if (readings['time']|| readings['totaltime']){
                        html= html + '[ '
                }
                if (readings['time']){
                        html= html + ' ' + time
                }
                if (readings['time']&& readings['totaltime']){
                        html= html + '/'
                }
                if (readings['totaltime']){
                        html= html + ' ' + totaltime
                }
                if (readings['time']|| readings['totaltime']){
                        html= html + ']'
                }
                if (readings['playStatus']|| readings['playStatus']){
                        html= html + ' (' +playStatus + ')'
                }
                elem.html(html);
        })
    }

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

    });

    return me;
}


[masterpete23]

super ich sehe was
nun fehlen nur noch die knöpfe

[eisi]

Die Knöpfe hab ich doch weiter oben Schau mal

[pula]

Hört sich super an, vielen Dank!

Mal so eine kleine Zusatzfrage: Weiß jemand, ob es auch eine Möglichkeit gibt, von kodi das aktuelle channel-logo zu bekommen (wenn man die PVR-Funktion nutzt). Wäre super, wenn man in ftui das Logo auch anzeigen lassen könnte....

Aber soweit ich auf die schnelle jetzt gesehen habe, gibt kodi das zur Zeit nicht her

Cheers,

Pula

[eisi]

Hm, da muss ich schauen. Wenn das FHEM-Modul das weitergeben kann, ist das wohl irgendwie machbar.
Ich kann nicht wirklich Javascript. PHP wäre da nur von Vorteil, aber das UI will halt Javascript
Wird wohl was dauern.

[masterpete23]

langsam wird es spannend

[eisi]

Also die URL , bzw den Pfad habe ich, aber wäre es nicht leichter, das Bild per data-type image darzustellen?
Im Thread https://forum.fhem.de/index.php/topic,79481.0.html versuche ich gerade herauszubekommen, ob auch
Pfade über SMB dargestellt werden können.
Meine SerienDB hat halt alle Bilder im Verzeichnis.

Wie schon erwähnt, ich kann kein JS, ich kann eigentlich nur PHP.
Das Script ist mehr aus der Not herraus gestrickt

Wenn ich nun ein Bild anzeigen soll, müsste ich den Teil des Codes idenzifizieren können, der das Bild in data-type Image ausgibt.
Vieleicht könnte SETSTATE hier helfen??

[pula]

Wie hast denn die URL bzw den Pfad herausbekommen?
Hab leider kein SMB, da kein Windows im Haus....
Hast Du probiert, ob Du auf dem fhem-Rechner per smb auf das Bild zugreifen kannst? (smb-libs etc)
Aber da ließe sich evtl was machen - ich könnte wenn nötig in python was für kodi dazustricken und das Bild in einem Reading ablegen (falls fhem das kann, muss ich mir evtl ansehen)
Ansonsten wäre eine Möglichkeit, die wichtigsten Logos irgendwo in fhem-Zugriff abzulegen und direkt aufzurufen (ist aber unelegant)


Cheers,

Pula

[setstate]

wenn der Pfad in der URL-Leiste eingegeben angezeigt werden kann, klappt es auch im HTML img-Tag. Aber "file://" nicht "smb://" benutzen.

Für Samba braucht man kein Windows! 

Auf dem FHEM Server eine Samba-Freigabe > URL im Safari eingeben > geht nicht
im FF funktioniert es aber

file:///Fhem/www/images/default/favicon.ico

[pula]

jaja, ich weiß. Hab aber nirgendwo samba am laufen...   

hab mal hier https://forum.fhem.de/index.php/topic,66299.0.html bei dem Modul-Entwickler vom kodi-Modul gefragt, ob er das Logo evtl in ein reading packen kann.
/edit: ich trottel. das steht ja eh im reading thumbnail....
Notfalls könnte man ja das Logo-Verzeichnis auf den fhem-Rechner kopieren, dann sollte es mit dem richtigen Filenamen nicht so schwer sein, das darzustellen, oder?

cheers,

Pula

[pula]

Hab mal ein wenig herumgespielt (js ist auch nicht meine Stärke).

So sollte man in js aus dem Reading thumbnail NUR den Filenamen des Logos herausbekommen können, vielleicht hilft das ja:

Code Auswählen Erweitern

var fn = decodeURI(thumbnail).split("%2f");
var logo = fn[fn.length -1].substring(0, fn[fn.length - 1].length -1);

Wenn man jetzt noch auf dem fhem-Rechner im http-Pfad das Logo-Verzeichnis von kodi ablegen würde, sollte das eigentlich machbar sein, oder?

Cheers,

Pula

[pula]

Ich hätte da noch eine Frage zu dem js...
Wie sind denn die readings indiziert?

Auszug aus der js:

Code Auswählen Erweitern

var value = elem.getReading('get', 0).val;
type = ftui.getPart(value, part);
var value = elem.getReading('get', 1).val;
season = ftui.getPart(value, part);
var value = elem.getReading('get', 2).val;
episode = ftui.getPart(value, part);
var value = elem.getReading('get', 3).val;
show = ftui.getPart(value, part);
var value = elem.getReading('get', 4).val;
currentTitle = ftui.getPart(value, part);
var value = elem.getReading('get', 5).val;
time = ftui.getPart(value, part);
var value = elem.getReading('get', 6).val;
totaltime = ftui.getPart(value, part);
var value = elem.getReading('get', 7).val;
playStatus = ftui.getPart(value, part);
var value = elem.getReading('get', 8).val;
currentAlbum = ftui.getPart(value, part);
var value = elem.getReading('get', 9).val;
currentArtist = ftui.getPart(value, part);
var value = elem.getReading('get', 10).val;
label = ftui.getPart(value, part);

Würde gerne auch das STATE reading anzeigen lassen (hab ich per stateFormat in fhem selbst entsprechend formatiert)...

Danke im voraus!
Cheers,

Pula

[pula]

Hallo,

da ich die Hälfte von dem Code im js nicht verstanden habe (und ich die Klassen wenn nötig eher über Templates als im js-code machen würde), hab ich als ersten Schritt für mich mal den Code verschlankt und nach dem Beispiel aus dem Wiki aufgebaut.
@Eisi: ich hoffe, Du bist nicht sauer deswegen.

Bei mir funktioniert für die Ausgabe der Readings jetzt folgendes js:

Code Auswählen Erweitern

"use strict";

var Modul_kodinowplaying = function () {
    var readings =[];
    function init(elem) {
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: 'kodinowplaying',
        init: init,
        update: update,
    });

    return me;
}

Einbinden tu ich das zb so:

Code Auswählen Erweitern

<div data-type="kodinowplaying" data-device='wzcore' data-get='label'></div>

Sieht dann so aus wie im Anhang.

Sobald ich das nächste mal Zeit habe, werde ich mich daran machen, mir was für die Icon-Anzeige einfallen zu lassen.
Außerdem möchte ich mir noch was einfallen lassen, um anstatt STATE je nach abgespieltem Medien-Typ (TV, Video, MP3) eine halbwegs aussagekräftige Zusammenfassung ausgeben zu lassen (Bei PVR ist für mich zb interessant, label - currentTitle - playStatus anzuzeigen, bei Wiedergabe von Videos finden sich die interessanten Infos aber in anderen readings).

Vielleicht kann ja außer mir noch jemand etwas mit dem Code anfangen...

Cheers,

Pula

[pula]

Hallo,

spiele ein wenig herum und komme grade irgendwie nicht weiter.
Vielleicht weiß jemand Rat?

Habe im Moment folgenden einfachen Code und möchte gerne, wenn das data-get mit 'picon' übergeben wird, zum Testen das Reading 'thumbnail' zurückgeben.

Code Auswählen Erweitern

"use strict";

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

    function update(device, reading) {
if (reading == 'picon') {
alert('hier');
       var elem = $(this);           
       var value = elem.getReading('thumbnail').val;
       alert(value);               
       if (value) {
           elem.html(value);
       }
} else {
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: 'kodinowplaying',
        init: init,
        update: update,
    });

    return me;
}

Wo ich momentan hänge:
In der update-function versuche ich mit
var value = elem.getReading('thumbnail').val; das

Reading thumbnail auszulesen.
Der html-Code dazu ist:

Code Auswählen Erweitern

<div data-type="kodinowplaying" data-device='wzcore' data-get='picon'>

Das Programm hüpft in den if-Zweig rein, aber das alert(value) gibt mir ein undefined.
Auch interessant: zu diesem Zeitpunkt gibt der debugger von Firefox einen referenceError (me is not defined) aus?!

Irgendwo hab ich einen gewaltigen Denkfehler und würde mich über Hilfe sehr freuen.

Cheers,
Pula

[pula]

Niemand? 

[setstate]

ins init() muss noch ein

Code Auswählen Erweitern


me.addReading(elem, 'thumbnail');


damit abonniert man das Reading.

[pula]

Super, danke!
Funktioniert noch nicht ganz - immer noch undefined.

Ich hab im update() folgendes:

Code Auswählen Erweitern

function update(device, reading) {
if (reading == 'picon') {
var elem = $(this);           
me.elements.filterDeviceReading('get', device, reading)
var value = elem.getReading('get').val;
alert(value);               
var state = ftui.getPart(value, elem.data('part'));
       if (value) {
           elem.html(value);
       }
} else {
Wobei es das Reading picon in fhem ja nicht gibt. Worauf bezieht sich hier das $(this) bzw wie kann ich hier das Reading 'thumbnail' aus fhem auslesen? Steh irgendwie wie der Ochs vorm Tor....
Oder versteh ich das ganze total falsch? Würde hier gerne wenn ich im html als data-get "picons" aufrufe (vorerst) das reading (aus fhem) thumbnail zurückgeben - als Gehversuch für weitere Sachen....

[setstate]

wenn das Device 'wzcore' keine Reading 'picon' hat, macht das ganze kein Sinn.
Dann eher bei Ändern des Readings 'title' (wenn es das gibt), 'thumbnail' neu lesen

<div data-type="kodinowplaying" data-device='wzcore' data-get='title'>

Code Auswählen Erweitern


    function update(dev, par) {

        me.elements.filterDeviceReading('get', dev, par)
            .each(function (index) {
                var elem = $(this);
                var state = elem.getReading('get').val;
                if (state) {
                   var picon = elem.getReading('thumbnail').val;
                   console.log(picon);
                   .....


$(this) bezieht sich immer auf den aktuellen Context, im oberen Fall auf das aktuelle Item innerhalb der each-Schleife aus den gefilterten  me.elements.. Also genau das eine "<div data-type="kodinowplaying" data-device='wzcore' data-get='title'>"
Kann man sich ja per console.log(elem); anzeigen lassen.

[pula]

Danke für den hinweis mit console.log --> sehr hilfreich

Aber irgendwie tut das:
var value = elem.getReading('thumbnail').val;

immer noch nicht.
bekomm da immer ein
value:undefined

Das elem scheint also nicht auf das fhem-device zuzugreifen (dort gibt es nämlich das reading thumbnail)

Wo ich hinmöchte ist folgendes:
Ich übergebe dem widget ein "reading", das es in fhem nicht gibt. Stattdessen gibt das widget etwas zurück, was ich innerhalb des js zusammenbastle und was sich aus anderen readings aus fhem ergibt.
Bin scheinbar ein schwieriger Patient. Sorry. Aber ich bemüh mich, das Ganze zu verstehen...

[setstate]

Mmmm

Code Auswählen Erweitern

   
function init(elem) {

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


Code Auswählen Erweitern

   
    function update(dev, par) {

        me.elements.filterDeviceReading('get', dev, par)
            .each(function (index) {
            console.log('get triggered');
                var elem = $(this);
                var value = elem.getReading('get').val;
                if (value) {
                    elem.html(value);
                }
            });

        // do updates from reading 'thumbnail'
        me.elements.filterDeviceReading('picon', dev, par)
            .each(function (idx) {
                var elem = $(this);
                var pic = elem.getReading('picon').val;
                if (pic) {
                    console.log('pic='+pic);
                }
            });
    }



Code Auswählen Erweitern

<div data-type="kodinowplaying" data-device='wzcore' data-picon='thumbnail'>

[pula]

Super, vielen Dank!
Nachdem ich          elem.initData('get', 'STATE'); entfernt habe, zeigt zumindest in der console der wert das reading thumbnail an.
Bzw mit elem.html(pic); wird der wert im html ausgegeben...

Was ich aber überhaupt nicht verstehe ist diese Zeile:
elem.initData('picon', 'thumbnail');

was genau macht das?

Danke im voraus und cheers,
Pula

[setstate]

elem.initData('picon', 'thumbnail');

bedeutet: wenn data-picon nicht gesetzt ist, setzte data-picon="thumbnail"

elem.initData('get', 'STATE');

bedeutet: wenn data-get nicht gesetzt ist, setzte data-get="STATE"

[pula]

Super, danke sehr!
Bekomm jetzt zumindest schon das richtige Logo als img angezeigt...
die Sache macht langsam mit viel hilfe von dir fortschritte!
danke nochmal!

[pula]

Zwei dämliche Fragen hätte ich dazu noch:

In der update-function: Wie kann ich prüfen, welches data-get gerade bearbeitet wird? (falls ich zb. ein weiteres data-get übergebe für einen zweiten wert, der geprüft werden und kein fhem-Reading sondern zum Beispiel einen Wert aus mehreren Readings?)

Kann ich mit elem.getReading('xy').val jedes Reading aus fhem auslesen?

Bin grade noch immer ein wenig ratlos, hoffe aber, daß ich es langsam begreife ^^

[setstate]

Code Auswählen Erweitern



    function update(dev, par) {

        me.elements.filterDeviceReading('get', dev, par).each(function (index) {

               var elem = $(this);
               var val = elem.getReading('get').val;
        ...



- bei jeder Readingänderung in FHEM (nur für die abonnierten Readings), wird für jedes Plugin die update-Funktion aufgerufen
- dev enthält den Device-Name und par den Redingnamen des Events
- Jedes Plugin ist selbst für die Auswertung respektive Filterung dieses Events verantwortlich (z.B. mit me.elements.filterDeviceReading()
- Damit geht man alle Elemente (jedes einzelne Widget dieses Plugin) durch und schaut nach, ob er auf dieses Event abonniert ist.
- Wenn man innerhalb der {} landet, stimmt Event mit Abo überein und man kann die neuen Werte mit elem.getReading() auslesen.

Interessant: man kann data-get auch als Array angeben und somit mehrere Readings auf einmal abonnieren

Code Auswählen Erweitern

<div data-type="joinedlabel" data-device="MPD1" data-get='["Title", "Artist"]' ></div>

In der update Funktion geht man dann mit einer for-Schleife durch

Code Auswählen Erweitern



    function update(dev, par) {

        me.elements.filterDeviceReading('get', dev, par).each(function (index) {

            var elem = $(this);
            var get = elem.data('get');

            for (var i = 0, len = get.length; i < len; i++) {
                var value = elem.getReading('get', i).val;
                console.log(i,value);
            }
...


[pula]

Hallo,

erstmal vielen Dank für Deine Geduld und Hilfe. Ich komm der Sache langsam näher, aber ich stelle mich scheinbar besonders dämlich an. Aber vielleicht helfen meine Fragen anderen, sich ebenfalls besser zurechtzufinden.

Ich habe nun mal testweise folgenden Code (den ich großteils aus dem, was Du geschrieben hast zusammengestoppelt habe):

Code Auswählen Erweitern

var Modul_kodinowplaying = function () {
  var logodir = '../picons/';
  function init(elem) {

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

function update(dev, par) {

me.elements.each(function (index) {
            var elem = $(this);
            var get = elem.data('get');
if (get) {           
            for (var i = 0, len = get.length; i < len; i++) {
                var value = elem.getReading('get', i).val;
                console.log(i,value);
            }
         }
});
  // do updates from reading 'thumbnail'
       me.elements.filterDeviceReading('picon', dev, par).each(function (idx) {
var elem = $(this);
console.log('bla: ' + dev + ' ' + par + ' ' + idx);               
                var pic = elem.getReading('picon').val;
                if (pic) {               
  console.log('pic=' + pic);                   
                    var fn = decodeURI(pic).split("%2f");
  var logo = fn[fn.length -1].substring(0, fn[fn.length - 1].length -1);
  console.log('logo=' + logo);  
  var path = logodir + logo;
  console.log('pic=' + path);
  elem.html('');
  var text = '<img src="' + path + '" alt="' + logo + '" height="84" width="84">';
  elem.append(text).fadeIn();
                }
            });
}
    }
    var me = $.extend(new Modul_widget(), {
        widgetname: 'kodinowplaying',
        init: init,
        update: update,
    });
    return me;
}

Und html:

Code Auswählen Erweitern


...    <li data-row="2" data-col="4" data-sizex="3" data-sizey="1">
        <header>Kodi Wohnzimmer</header>
<div data-type="kodinowplaying" data-device='wzcore' data-picon='thumbnail'>
    </li>
    <li data-row="2" data-col="4" data-sizex="3" data-sizey="1">   
<div data-type="kodinowplaying" data-device='wzcore' data-get='STATE'>
    </li>
...


Habe jetzt das Problem, daß bei beiden Elementen im html das Logo angezeigt wurde, was eigentlich logisch ist, wenn man sich den Code ansieht, weil ich ja nicht unterscheide, welches data-get von dem jeweiligen Element abgefragt wird.

Wo kann ich das abfragen? Wenn ich das wüsste, könnte ich meine geplanten "Spezialfälle" behandeln und alle weiteren aus dem html abgefragten Readings einfach zur Anzeige durchschleifen.
Sorry für die dummen Fragen, aber offenbar habe ich das Modell, das hier zugrunde liegt, noch nicht völlig verstanden.

Cheers,

Pula

[setstate]

Jetzt bin ich auch verwirrt. Was war nochmal das Ziel und welche Readings hat das Device ("list wzcore") ?

[pula]

Hallo,

eigentlich ist das Ziel nicht so schwierig (dachte ich).
Ich verstehe nur das zugrundeliegende Modell scheinbar noch nicht.

Das Ziel ist es, zusätzlich zu den in fhem bestehenden Readings ein paar andere Funktionen zur Verfügung zu stellen, weil ich der Meinung bin, daß das neben mir auch andere noch brauchen könnten.

Vor allem:

* Anzeige des aktuellen Channel-Logos (was ja grundsätzlich schon funktioniert, derzeit aber NUR die Channel-Logos kann und noch nicht die thumbnails von mp3 oder Videos - und es wird halt IMMER dieses Logo ausgegeben, unabhängig davon, welches data-get übergeben wird)
* Anzeige einer "sinnvollen Status-Information", je nach gerade abgespieltem Medien-Typ (setzt sich bei TV zum Beispiel aus anderen fhem-Readings zusammen als bei Wiedergabe eines Films)
* Schön wäre natürlich auch, wenn ich das Ganze so weit verstehen würde, um irgendwann in Zukunft auch set-Befehle übertragen zu können (zb TV-Kanal einstellen)

Die Readings:

Code Auswählen Erweitern

Internals:
   CHANGED
   DEF        192.168.1.175 tcp otto bla123
   DeviceName 192.168.1.175:9090
   FD         27
   Host       192.168.1.175
   LAST_RECV  1512419245.03576
   NAME       wzcore
   NR         516
   NextID     63786
   PARTIAL
   Port       9090
   Protocol   tcp
   STATE      RTL HD - Wer wird Millionär? - stopped
   TYPE       KODI
   PendingEvents:
     11377
   PendingPlayerCMDs:
     63737:
       method     Player.GetProperties
       params:
         properties:
           time
           totaltime
           repeat
           shuffled
           speed
           partymode
   READINGS:
     2017-12-04 17:15:53   3dfile
     2017-10-26 00:20:10   audiolibrary    scanfinished
     2017-12-04 17:15:53   currentAlbum
     2017-12-04 17:15:53   currentArtist
     2017-12-04 17:15:53   currentMedia
     2017-12-04 17:15:53   currentOriginaltitle
     2017-12-04 17:15:53   currentShowtitle
     2017-12-04 21:06:19   currentTitle    Wer wird Millionär?
     2017-12-04 17:15:53   currentTrack
     2017-12-04 17:15:53   episode
     2017-12-04 17:15:53   episodeid
     2017-12-04 21:27:24   fullscreen      off
     2017-12-04 21:06:19   id              653
     2017-12-04 21:06:19   label           RTL HD
     2017-12-04 17:15:53   movieid
     2017-12-04 21:27:24   mute            off
     2017-12-04 21:27:24   name            Kodi
     2017-12-04 21:12:24   partymode
     2017-12-04 21:12:24   playStatus      stopped
     2017-12-04 17:15:53   playlist
     2017-12-04 21:12:24   repeat
     2017-12-04 17:15:53   season
     2017-12-04 21:12:24   shuffle
     2017-12-04 21:27:24   skin            Rapier(skin.rapier)
     2017-12-04 17:15:53   songid
     2017-12-04 21:12:24   speed
     2017-12-04 21:12:24   state           opened
     2017-12-04 21:27:24   stereoscopicmode off
     2017-12-04 21:12:24   system          wake
     2017-12-04 21:06:19   thumbnail       image://%2fstorage%2fpicons%2fRTL%20HD.png/
     2017-12-04 21:12:24   time
     2017-12-04 21:12:24   totaltime
     2017-12-03 19:55:37   tvshowid        -1
     2017-12-04 21:06:19   type            channel
     2017-12-04 21:27:24   version         17.6-a9a7a20 stable
     2017-12-03 19:55:48   videolibrary    update
     2017-12-04 21:27:24   volume          100
     2017-12-04 21:06:19   year            0
Attributes:
   event-on-update-reading 1
   room       WZ
   stateFormat label - currentTitle - playStatus
   updateInterval 60

Ich habe zur Zeit eben meiner Meinung nach hier vor allem noch ein Problem:

Ich verstehe das dem tabletui zugrundeliegende Modell noch zu wenig, um zu verstehen, wie ich innerhalb des Widgets ein eigenes "Reading" implementieren kann, das nicht 1:1 auf einem fhem-Reading basiert (was zb bei dem Logo schon funktioniert) und daneben noch die fhem-Readings per "normalem" data-get durchschleifen kann.

Danke schon im Voraus für Deine Hilfe - werde aber wahrscheinlich arbeitsbedingt erst morgen abend dazukommen, mir das wieder anzusehen....

Cheers,

Pula

[pula]

Hab noch ein wenig herumgespielt, aber ich kapier es nicht

[setstate]

Ich wüsste auch nicht, was ich noch erklären könnte. Ich würde nur das o.g. wiederholen.

- Es sind nur die Reading Values bekannt, die abonniert wurden.

- data-xxx   ist nur der Variablen Name (Kann auch data-huestelwasauchimmer heißen)

- data-yyy="xxx" übergibt den Readingnamen "xxx" der Variable data-yyy

- wenn du keine Array übergibst (z.B. data-yyy='["Title", "Artist"]' ) brauchst du auch nicht durch iterieren (for (var i = 0, len = get.length; i < len; i++) {)

Ansonsten: probieren, probieren ...

[pula]

Danke für die Antwort
Wie kann ich prüfen, welches data-get oder data-wasauchimmer das aktuelle element abonniert hat?

oder anders gefragt: ich setze im html ein data-get=blablub (das es im fhem-device nicht gibt). Wie kann ich das abfangen und beliebige Readings aus fhem zurückgeben?

[setstate]

Die Abos des Plugins (aller Instanzen) liest man so aus:

Code Auswählen Erweitern


console.log(me.subscriptions);


Einzelne Inhalte so:

Code Auswählen Erweitern


                console.log( 'get=' + elem.data('get') );



Nacheinander alle Instanzen eines Plugins

Code Auswählen Erweitern


        me.elements.each(function (index) {
                console.log( 'get=' + $(this).data('get') );
        });
       


[pula]

Super, vielen dank und sorry für die späte Antwort - war ein wenig turbulent die letzten Tage

Cheers,

Pula

[pula]

Das hat mich jetzt echt ein Stück weitergebracht

Aber ganz verstehe ich es immer noch nicht.

Code Auswählen Erweitern

var val = elem.getReading('thumbnail').val müsste doch eigentlich das Reading thumbnail (ist abonniert und ein fhem-Reading) zurückgeben, oder? Stattdessen bekomm ich im Konsolen-Log ein undefined. (das Gleiche gilt für das Reading currentMedia). Wenn ich aber die readings per html direkt ausgeben lasse, funktioniert alles?!
Hier mein aktueller (unaufgeräumter) code:

Code Auswählen Erweitern

"use strict";

var Modul_kodinowplaying = function () {
  var logodir = '../picons/';
  function init(elem) {

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

function update(dev, par) {

//me.elements.each(function (index) {
me.elements.filterDeviceReading('get', dev, par).each(function (index) {
            var elem = $(this);
console.log( 'get=' + elem.data('get') );
console.log( 'picon=' + elem.data('picon'));
var get = elem.data('get');
if (get == 'picon') {
  console.log( 'picon!!!');
  var val = elem.data('thumbnail');
  var val = elem.getReading('thumbnail').val;
  console.log( 'par=' + par);  
  console.log( 'val1=' + val);  
  if (ftui.isValid(val)) {
  console.log( 'val=' + val);
var fn = decodeURI(get).split("%2f");  
  var logo = fn[fn.length -1].substring(0, fn[fn.length - 1].length -1);  
  } else {
  var logo = 'kodi.png';
  }  
  var path = logodir + logo;  
  elem.html('');
  var text = '<img src="' + path + '" alt="' + logo + '" height="84" width="84">';  
  elem.html(text);
} else if (get == 'cm') {
console.log('cm!!!')
var val = elem.getReading('currentMedia');
console.log( 'val1=' + val);
elem.html(text);
} else {           
            var get = elem.data('get');
if (get) {           
               var value = elem.getReading('get').val;
               console.log('logger:' + value);
               elem.html(value);
         }
     }
});
}

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

Das html dazu:

Code Auswählen Erweitern

<div class="page" id="content_klo_bad">
    <div data-type="label">Klo Bad</div>
    <li data-row="2" data-col="4" data-sizex="3" data-sizey="1">
        <header>Kodi Wohnzimmer</header>
<div data-type="kodinowplaying" data-device='wzcore' data-get='picon'>
    </li>
    <li data-row="2" data-col="4" data-sizex="3" data-sizey="1">   
<div data-type="kodinowplaying" data-device='wzcore' data-get='STATE'>
    </li>
    <li data-row="2" data-col="4" data-sizex="3" data-sizey="1">   
<div data-type="kodinowplaying" data-device='wzcore' data-get='state'>
    </li>
    <li data-row="2" data-col="4" data-sizex="3" data-sizey="1">   
<div data-type="kodinowplaying" data-device='wzcore' data-get='cm'>
    </li>
</div>


console.log davon:

Code Auswählen Erweitern

get=picon
picon=thumbnail
picon!!!
par=picon
val1=undefined

Warum ist hier val1 (var val = elem.getReading('thumbnail').val;) undefined? Ich kapiers nicht. Sorry für die nervige Fragerei...

[setstate]

Du bringst noch Variablenname (data-Name) und Readingname durcheinander .

Nimm zum Lernen erst einmal nur Dummywerte fürs den Code und fürs Device

device=dummy1
get1=reading1
get2=reading2
get3=reading3

Code Auswählen Erweitern


      me.elements = $('div[data-type="' + me.widgetname + '"]', me.area);
      me.elements.each(function (index) {
      var elem = $(this);
         elem.initData('get1', 'reading1');     
         elem.initData('get2', 'reading2');   
         elem.initData('get3', 'reading3');   
         me.addReading(elem, 'get1');
         me.addReading(elem, 'get2');
         me.addReading(elem, 'get3');

        });
    }

function update(dev, par) {

//me.elements.each(function (index) {
me.elements.filterDeviceReading('get1', dev, par).each(function (index) {
                   var elem = $(this);
console.log( 'get1=' + elem.data('get1') );

var val1 = elem.data('get1');

                                //das ist Quatsch, haben wir ja oben festgelegt, kann also immer nur 'reading1' sein
if (val1 == 'reading1') {

...

//me.elements.each(function (index) {
me.elements.filterDeviceReading('get2', dev, par).each(function (index) {





Für jedes get ein eigenes me.elements.filterDeviceReading unter update(), weil nur dann wurde der Wert geändert bzw. von FHEM gelesen. Ich kann nicht im Handler für get1 schon get2 und get3 auslesen wollen. Der kann dann im schlimmsten Fall undefined sein, weil der Wert noch nicht von FHEM empfangen wurde.

Der Teil filterDeviceReading('get1', dev, par) macht schon den Vergleich if (data-get1==par). Das wird wahr, wenn data-get1=="reading1" und par=="reading1" ist

[pula]

Verstehe, danke!

Dann müsste man doch eigentlich annehmen, daß das Programm bei me.elements.filterDeviceReading('picon', dev, par).each(function (index) nur in diesen Zweig reinhüpft.

wenn ich allerdings folgendes html

Code Auswählen Erweitern

<div class="page" id="content_klo_bad">
    <div data-type="label">Klo Bad</div>
    <li data-row="2" data-col="4" data-sizex="3" data-sizey="1">
        <header>Kodi Wohnzimmer</header>
<div data-type="kodinowplaying" data-device='wzcore' data-get='picon'>
    </li>
    <li data-row="2" data-col="4" data-sizex="3" data-sizey="1">   
<div data-type="kodinowplaying" data-device='wzcore' data-get='STATE'>
    </li>
    <li data-row="2" data-col="4" data-sizex="3" data-sizey="1">   
<div data-type="kodinowplaying" data-device='wzcore' data-get='state'>
    </li>
    <li data-row="2" data-col="4" data-sizex="3" data-sizey="1">   
<div data-type="kodinowplaying" data-device='wzcore' data-get='cm'>
    </li>
</div>

definiere, bekomme ich je nachdem, welcher me.elements.filterDeviceReading-Zweig (in dem Fall cm oder picon) als letzter steht, immer den Code zurück, der im letzten Zweig steht?!
Verstehe das leider immer noch nicht ganz (sorry für meine Begriffstutzigkeit)

[pula]

Hmm... ich steig nicht durch...
Hab momentan folgende Update-Function:

Code Auswählen Erweitern

function update(dev, par) {
var x = 1;
me.elements.filterDeviceReading('get', dev, par).each(function (index) {
            var elem = $(this);     
            var value = elem.getReading('get').val;
            console.log('logger:' + value);
            elem.html(value);
});
me.elements.filterDeviceReading('cm', dev, par).each(function (index) {
console.log('cm!!!+' + par)
console.log('x:' + x)
x = x +1;
var elem = $(this);
var val = elem.getReading('currentTitle').val;
console.log('val=' + val);
elem.html(val);
});
me.elements.filterDeviceReading('picon', dev, par).each(function (index) {
  console.log('picon!!!+' + par);
console.log('x:' + x)
x = x +1;  
  var elem = $(this);
  var val = elem.data('thumbnail');
  console.log('valn=' + val);
  var val = elem.getReading('thumbnail').val;
  console.log('par=' + par);  
  console.log('val1=' + val);  
  if (ftui.isValid(val)) {
  console.log('val=' + val);
var fn = decodeURI(val).split("%2f");  
  var logo = fn[fn.length -1].substring(0, fn[fn.length - 1].length -1);
  console.log('logo=' + logo);  
  elem.html(text);
} else {
var logo = 'kodi.png';
}
var path = logodir + logo;
var text = '<img src="' + path + '" alt="' + logo + '" height="84" width="84">';
elem.html(text);
});
}

Und das im html:

Code Auswählen Erweitern

<div class="page" id="content_klo_bad">
    <div data-type="label">Klo Bad</div>
    <li data-row="2" data-col="4" data-sizex="3" data-sizey="1">
        <header>Kodi Wohnzimmer</header>
<div data-type="kodinowplaying" data-device='wzcore' data-get='picon'>
    </li>
    <li data-row="2" data-col="4" data-sizex="3" data-sizey="1">   
<div data-type="kodinowplaying" data-device='wzcore' data-get='STATE'>
    </li>
</div>


Leider zeigt ftui auch bei STATE den Output von picon (nämlich das channel-Logo) an.
Wenn ich in der Update-Function den Code umstelle und den cm-Bereich hinter den picon-Bereich stelle, bekomme ich für beide html-Elemente die Ausgabe vom  cm-Bereich. Warum wird der Bereich von me.elements.filterDeviceReading('cm', dev, par).each(function (index)  auch angesprungen, wenn data-get=STATE oder data-get=picon im html mitgegeben wird? Steh grad voll auf dem Schlauch seit gestern...

[setstate]

müsste so gehen. Die eine Instanz zeigt STATE an, die andere icon

Wie sieht die init() Section aus?

so reicht das!

Code Auswählen Erweitern

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

[pula]

Die sieht so aus:

Code Auswählen Erweitern

function init(elem) {

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

ABER: picon und cm sind KEINE Readings des Devices in fhem, sondern die sollen in ftui aufgerufen werden, um verschiedene ANDERE Readings aus dem fhem-device auszugeben....
Hab mir etliche andere widgets angesehen, aber so was hab ich irgendwie nirgends gefunden....

[pula]

und das verstehe ich nicht

[setstate]

Leider zeigt ftui auch bei STATE den Output von picon (nämlich das channel-Logo) an.

Damit meinst du diese Instanz?

Code Auswählen Erweitern

<div data-type="kodinowplaying" data-device='wzcore' data-get='STATE'>

diese sieht aber nach dem init() Durchlauf (deine init() Variante) so aus. (nur im Speicher, jQuery baut das nicht wirklich in den DOM-Baum ein)

Code Auswählen Erweitern

<div data-type="kodinowplaying" data-device='wzcore' data-get='STATE'  data-picon='thumbnail' data-cm='currentTitle' data-playinfo='playStatus' data-thumbnail='thumbnail' data-currentTitle='currentTitle'>

ABER: picon und cm sind KEINE Readings des Devices in fhem, sondern die sollen in ftui aufgerufen werden, um verschiedene ANDERE Readings aus dem fhem-device auszugeben....

Das macht keinen Sinn. Diese rufen nur einen einzigen update()-Call aus, direkt nach dem Laden des Moduls. Das ist gedacht, um sofort Werte aus dem lokalen Cache anzuzeigen.

Mach es doch einfach so:

Code Auswählen Erweitern


function updateDisplay(elem) {

        var state = elem.getReading('get').val;
        var playstate = elem.getReading('playstate').val;
        var picon = elem.getReading('picon').val;
        var title = elem.getReading('title').val;
        elem.html('state=' + state + ' playstate=' + playstate + ' picon=' + picon + ' title=' + title);

    }

    function init(elem) {

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

    function update(dev, par) {

        me.elements.filterDeviceReading('get', dev, par).each(function (index) {
            console.log('device status changed.');
            updateDisplay($(this));
        });
        me.elements.filterDeviceReading('playstate', dev, par).each(function (index) {
            console.log('play state changed.');
            updateDisplay($(this));
        });
        me.elements.filterDeviceReading('picon', dev, par).each(function (index) {
            console.log('picon changed.');
            updateDisplay($(this));
        });
        me.elements.filterDeviceReading('title', dev, par).each(function (index) {
            console.log('title changed.');
            updateDisplay($(this));
        });
    }



[setstate]

Oder so geht es auch

Code Auswählen Erweitern


    function init(elem) {

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

    function update(dev, par) {

        me.elements.filterDeviceReading('get', dev, par)
            .add(me.elements.filterDeviceReading('playstate', dev, par))
            .add(me.elements.filterDeviceReading('picon', dev, par))
            .add(me.elements.filterDeviceReading('title', dev, par))
            .each(function (index) {

                var elem = $(this);
                var state = elem.getReading('get').val;
                var playstate = elem.getReading('playstate').val;
                var picon = elem.getReading('picon').val;
                var title = elem.getReading('title').val;
                elem.html('state=' + state + ' playstate=' + playstate + ' picon=' + picon + ' title=' + title);
            });
    }


[setstate]

und auf HTML Seite etwas erweitert

Code Auswählen Erweitern


    function init(elem) {

        me.elements = $('div[data-type="' + me.widgetname + '"]', me.area);
        me.elements.each(function (index) {
            var elem = $(this);
            elem.initData('get', 'STATE');
            elem.initData('playstate', 'playStatus');
            elem.initData('picon', 'thumbnail');
            elem.initData('title', 'currentTitle');
            me.addReading(elem, 'get');
            me.addReading(elem, 'playstate');
            me.addReading(elem, 'picon');
            me.addReading(elem, 'title');
            elem.html('<div class="power"/><div class="playstate"/><div class="picon"/><div class="title"/>');
        });
    }

    function update(dev, par) {

        me.elements.filterDeviceReading('get', dev, par)
            .add(me.elements.filterDeviceReading('playstate', dev, par))
            .add(me.elements.filterDeviceReading('picon', dev, par))
            .add(me.elements.filterDeviceReading('title', dev, par))
            .each(function (index) {

                var elem = $(this);
                var state = elem.getReading('get').val;
                var playstate = elem.getReading('playstate').val;
                var picon = elem.getReading('picon').val;
                var title = elem.getReading('title').val;

                elem.find('.power').html(state);
                elem.find('.playstate').html(playstate);
                elem.find('.picon').html(picon);
                elem.find('.title').html(title);

            });
    }


[setstate]

Oder etwas mehr gruppiert nach Häufigkeit der Änderungen, um nicht immer alles neu zu zeichnen.

Code Auswählen Erweitern


    function init(elem) {

        me.elements = $('div[data-type="' + me.widgetname + '"]', me.area);
        me.elements.each(function (index) {
            var elem = $(this);
            elem.initData('get', 'STATE');
            elem.initData('playstate', 'playStatus');
            elem.initData('picon', 'thumbnail');
            elem.initData('title', 'currentTitle');
            me.addReading(elem, 'get');
            me.addReading(elem, 'playstate');
            me.addReading(elem, 'picon');
            me.addReading(elem, 'title');
            elem.html('<div class="power"/><div class="playstate"/><div class="picon"/><div class="title"/>');
        });
    }

    function update(dev, par) {

        me.elements.filterDeviceReading('get', dev, par)
            .each(function (index) {

                console.log('device status changed.');

                var elem = $(this);
                var state = elem.getReading('get').val;

                elem.find('.power').html(state);

            });

        me.elements.filterDeviceReading('playstate', dev, par)
            .add(me.elements.filterDeviceReading('picon', dev, par))
            .add(me.elements.filterDeviceReading('title', dev, par))
            .each(function (index) {

                console.log('song info changed.');

                var elem = $(this);
                var playstate = elem.getReading('playstate').val;
                var picon = elem.getReading('picon').val;
                var title = elem.getReading('title').val;

                elem.find('.playstate').html(playstate);
                elem.find('.picon').html(picon);
                elem.find('.title').html(title);

            });
    }


Vllt. hat jemand Lust, mit diesen Beispielen vom mir ein kleines Plugins-Howto im Wiki zu starten. 

[pula]

Hi!

erstmal danke für die ausführlichen antworten! werde das testen.
wäre eigentlich mein plan gewesen, daß ich das ins wiki male, sobald ich halbwegs dahintergestiegen bin, wie das alles funktioniert (und hoffe auf viel kritik von dir dann)

Cheers,

Pula

[pula]

btw: schläfst du nie???

[pula]

Eine frage hätte ich aber gleich mal:
was macht das im init???

Code Auswählen Erweitern

elem.html('<div class="power"/><div class="playstate"/><div class="picon"/><div class="title"/>');

[setstate]

btw: schläfst du nie???

doch schon ...
Gestern bin ich nur beim Kind ins Bett bringen mit eingeschlafen. Ich hatte also beim Schreiben schon 5h Schlaf getankt. Dann noch 2,5h nachher  -> reicht

[setstate]

Eine frage hätte ich aber gleich mal:
was macht das im init???

Code Auswählen Erweitern

elem.html('<div class="power"/><div class="playstate"/><div class="picon"/><div class="title"/>');

Das ist ein simples Beispiel für ein Grundgerüst für das Widget. Das "Layout" sozusagen. Hier nur 4 Boxen, die sich untereinander stapeln.

mit diesem Befehl

Code Auswählen Erweitern


elem.find('.title').html(title);


werden diese Boxen dann gesucht (hier eine mit der Klasse "title") und mit dem Wert aus der Variable "title" gefüllt.

Die Class-Names kann man dann auch gleich benutzen, um jede Box individuell per CSS zu stylen.

Code Auswählen Erweitern


.title {
  font-weight: bold;
  font-size: 2em;
  color: yellowgreen;
  padding: 8px;
}


[pula]

Kleiner Zwischenstand.
Mit VIEL Hilfe von setstate (DANKE!) bin ich ein wenig weitergekommen (sh Bild).
Was schon geht:
* Kanal-Icon bzw Poster zum laufenden Film wird korrekt angezeigt
* Infos zum laufenden Programm (Dauer, aktuelle Position, Play/Stop-Status) wird je nach Medientyp (TV, movie etc) angezeigt
* Dropdown der verfügbaren Kanäle inkl. Logo zum Aussuchen eines Senders

[C0mmanda]

Kleiner Zwischenstand.
Mit VIEL Hilfe von setstate (DANKE!) bin ich ein wenig weitergekommen (sh Bild).
Was schon geht:
* Kanal-Icon bzw Poster zum laufenden Film wird korrekt angezeigt
* Infos zum laufenden Programm (Dauer, aktuelle Position, Play/Stop-Status) wird je nach Medientyp (TV, movie etc) angezeigt
* Dropdown der verfügbaren Kanäle inkl. Logo zum Aussuchen eines Senders

Magst du den Code dazu bereitstellen?
Danke

grtz
CmdA

[pula]

Hi,

klar, aber gib mir bitte noch ein bisschen Zeit - versuche grad noch, die Infos zu den laufenden Kanälen irgendwie in das Dropdown zu bekommen....

Cheers,

Pula

[Guenni1404]

Hey,

ich hätte daran auch interesse. Gibt es was neues?