FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: eisi am 15 Oktober 2017, 20:14:41

Titel: KodiNowPlaying
Beitrag von: eisi am 15 Oktober 2017, 20:14:41
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 (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:

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:

<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
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 16 Oktober 2017, 20:50:38
Vielleicht täuscht es nur, und update wird gerufen.

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

elem.html("PS_update:" + playStatus);
Titel: Antw:KodiNowPlaying
Beitrag von: eisi am 16 Oktober 2017, 22:09:05
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

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;
};
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 17 Oktober 2017, 00:01:06
   
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()

   
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

   
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'

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

Titel: Antw:KodiNowPlaying
Beitrag von: eisi am 17 Oktober 2017, 19:09:56
Hmm, irgendwie nicht.
Der erste Alert ist leer.
PS ist undefined
Ich setze das Volume in FHEM hoch, aber es kommt kein Update :-(

HTML:

<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:

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

Titel: Antw:KodiNowPlaying
Beitrag von: eisi am 18 Oktober 2017, 19:31:13
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:

<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:

"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;
};
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 18 Oktober 2017, 19:55:04
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');


Titel: Antw:KodiNowPlaying
Beitrag von: eisi am 19 Oktober 2017, 10:57:17
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:


"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;
};
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 19 Oktober 2017, 18:42:57
Schau dir mal das widget_joinedlabel.js an, da wird mit einem get-Array gearbeitet


<div data-type="joinedlabel" data-device="MPD1" data-mask="[$1 - ][$2]-[$3][: $4]"
      data-get='["Track","Artist","Title","currentSenderCurrent"]'>
</div>
Titel: Antw:KodiNowPlaying
Beitrag von: eisi am 19 Oktober 2017, 21:55:14
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?

Titel: Antw:KodiNowPlaying
Beitrag von: eisi am 20 Oktober 2017, 17:23:43
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 }
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 20 Oktober 2017, 18:17:11
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.
Titel: Antw:KodiNowPlaying
Beitrag von: eisi am 21 Oktober 2017, 16:48:30
Damit kommen jetzt die Updates, Danke !!!

Also gehe ich davon aus, dass

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

Nicht mehr gebraucht wird?
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 21 Oktober 2017, 18:33:32
Das ist PHP Code, der wurde im  Standard-Setup noch nie gebraucht. Das hast du bestimmt aus einem User-Beispiel kopiert.
Titel: Antw:KodiNowPlaying
Beitrag von: masterpete23 am 16 November 2017, 15:33:59
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?

Titel: Antw:KodiNowPlaying
Beitrag von: eisi am 17 November 2017, 17:59:47
So funktioniert es jetzt bei mir:

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> '                :'')
            );
        });
    }
});
Titel: Antw:KodiNowPlaying
Beitrag von: masterpete23 am 17 November 2017, 18:42:55
Zitat von: eisi am 17 November 2017, 17:59:47
So funktioniert es jetzt bei mir:

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

Titel: Antw:KodiNowPlaying
Beitrag von: eisi am 17 November 2017, 19:40:20
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
Titel: Antw:KodiNowPlaying
Beitrag von: masterpete23 am 18 November 2017, 12:07:08
gesagt getan.

widget_kodinowplaying.js angelegt und gefüllt.

was trage ich im HTML ein ?
<div data-type="kodinowplaying" data-device="wz_kodi" data-get="volume"></div>
Titel: Antw:KodiNowPlaying
Beitrag von: Rudy am 19 November 2017, 19:59:17
Vielleicht hilft ja die Beschreibung des Originalautors unter https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/kodinowplaying (https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/kodinowplaying).
Titel: Antw:KodiNowPlaying
Beitrag von: eisi am 20 November 2017, 10:23:12
Sorry für die späte Antwort.


<div data-type="mywidget" data-device='Kodi.WoZi'
         data-get='["type","season","episode","currentShowtitle","currentTitle","time","totaltime",
        "playStatus","currentAlbum","currentArtist","label"]'></div>
Titel: Antw:KodiNowPlaying
Beitrag von: masterpete23 am 20 November 2017, 17:30:48
welchen data-type muss ich denn nehmen?
Stehe auf dem Schlauch
Titel: Antw:KodiNowPlaying
Beitrag von: eisi am 20 November 2017, 17:36:40
Also bei mir binde ich es so ein:


<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>

Titel: Antw:KodiNowPlaying
Beitrag von: masterpete23 am 20 November 2017, 17:40:41
woher weiß er nun , dass dein <div data-type="mywidget" zu der widget_kodinowplaying.js gehört - das verstehe ich nicht
Titel: Antw:KodiNowPlaying
Beitrag von: eisi am 20 November 2017, 17:45:48
Ups, sorry, hatte die falsche Datei gegriffen :-(

"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;
}
Titel: Antw:KodiNowPlaying
Beitrag von: masterpete23 am 20 November 2017, 18:55:46
super ich sehe was :)
nun fehlen nur noch die knöpfe :)
Titel: Antw:KodiNowPlaying
Beitrag von: eisi am 20 November 2017, 19:32:15
Die Knöpfe hab ich doch weiter oben :-) Schau mal :-)
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 20 November 2017, 19:43:27
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
Titel: Antw:KodiNowPlaying
Beitrag von: eisi am 20 November 2017, 20:11:25
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.
Titel: Antw:KodiNowPlaying
Beitrag von: masterpete23 am 21 November 2017, 12:15:28
langsam wird es spannend :)
Titel: Antw:KodiNowPlaying
Beitrag von: eisi am 21 November 2017, 18:59:50
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 (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??
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 23 November 2017, 19:14:07
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
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 23 November 2017, 19:46:50
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
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 23 November 2017, 19:50:58
jaja, ich weiß. Hab aber nirgendwo samba am laufen...   :o

hab mal hier https://forum.fhem.de/index.php/topic,66299.0.html (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
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 24 November 2017, 19:35:55
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:

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
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 24 November 2017, 20:39:01
Ich hätte da noch eine Frage zu dem js...
Wie sind denn die readings indiziert?

Auszug aus der js:
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
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 25 November 2017, 20:14:33
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:
"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:
<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
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 27 November 2017, 18:34:14
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.

"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:
<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
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 29 November 2017, 18:17:29
Niemand?  :-X
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 29 November 2017, 18:26:18
ins init() muss noch ein


me.addReading(elem, 'thumbnail');


damit abonniert man das Reading.
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 29 November 2017, 18:52:48
Super, danke!
Funktioniert noch nicht ganz - immer noch undefined.

Ich hab im update() folgendes:
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....
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 29 November 2017, 19:22:22
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'>


    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.
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 29 November 2017, 19:57:07
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...
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 29 November 2017, 20:13:02
Mmmm

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


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




<div data-type="kodinowplaying" data-device='wzcore' data-picon='thumbnail'>
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 29 November 2017, 20:54:22
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
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 29 November 2017, 21:13:23
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"
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 29 November 2017, 21:27:52
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!
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 01 Dezember 2017, 17:53:57
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 ^^
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 02 Dezember 2017, 11:03:36


    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

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

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



    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);
            }
...
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 04 Dezember 2017, 21:18:53
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):
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:

...    <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
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 04 Dezember 2017, 21:23:15
Jetzt bin ich auch verwirrt. Was war nochmal das Ziel und welche Readings hat das Device ("list wzcore") ?

Titel: Antw:KodiNowPlaying
Beitrag von: pula am 04 Dezember 2017, 21:37:48
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:
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
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 05 Dezember 2017, 18:38:17
Hab noch ein wenig herumgespielt, aber ich kapier es nicht :-(
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 05 Dezember 2017, 19:16:53
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 ...
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 05 Dezember 2017, 20:31:10
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?
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 05 Dezember 2017, 21:01:26
Die Abos des Plugins (aller Instanzen) liest man so aus:


console.log(me.subscriptions);


Einzelne Inhalte so:


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



Nacheinander alle Instanzen eines Plugins


        me.elements.each(function (index) {
                console.log( 'get=' + $(this).data('get') );
        });
       
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 12 Dezember 2017, 17:35:14
Super, vielen dank und sorry für die späte Antwort - war ein wenig turbulent die letzten Tage

Cheers,

Pula
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 12 Dezember 2017, 19:42:47
Das hat mich jetzt echt ein Stück weitergebracht :-)

Aber ganz verstehe ich es immer noch nicht.
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:
"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:
<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:
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...
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 12 Dezember 2017, 20:25:16
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


      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
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 12 Dezember 2017, 21:17:46
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
<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)
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 13 Dezember 2017, 18:57:06
Hmm... ich steig nicht durch...
Hab momentan folgende Update-Function:
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:
<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... :-(
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 13 Dezember 2017, 19:38:45
müsste so gehen. Die eine Instanz zeigt STATE an, die andere icon

Wie sieht die init() Section aus?

so reicht das!

    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');
        });
    }
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 13 Dezember 2017, 20:09:46
Die sieht so aus:
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....
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 13 Dezember 2017, 21:17:51
und das verstehe ich nicht :-(
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 14 Dezember 2017, 02:49:53
ZitatLeider zeigt ftui auch bei STATE den Output von picon (nämlich das channel-Logo) an.

Damit meinst du diese Instanz?

<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)

<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'>

ZitatABER: 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:


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


Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 14 Dezember 2017, 02:59:07
Oder so geht es auch


    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);
            });
    }
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 14 Dezember 2017, 03:08:14
und auf HTML Seite etwas erweitert


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

            });
    }
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 14 Dezember 2017, 03:15:45
Oder etwas mehr gruppiert nach Häufigkeit der Änderungen, um nicht immer alles neu zu zeichnen.


    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.  ;)
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 14 Dezember 2017, 17:57:10
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
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 14 Dezember 2017, 17:57:46
btw: schläfst du nie???
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 14 Dezember 2017, 18:05:48
Eine frage hätte ich aber gleich mal:
was macht das im init???
elem.html('<div class="power"/><div class="playstate"/><div class="picon"/><div class="title"/>');
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 14 Dezember 2017, 18:42:20
Zitat von: pula am 14 Dezember 2017, 17:57:46
btw: schläfst du nie???

;D 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
Titel: Antw:KodiNowPlaying
Beitrag von: setstate am 14 Dezember 2017, 18:52:32
Zitat von: pula am 14 Dezember 2017, 18:05:48
Eine frage hätte ich aber gleich mal:
was macht das im init???
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


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.


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


Titel: Antw:KodiNowPlaying
Beitrag von: pula am 23 Dezember 2017, 19:28:37
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


Titel: Antw:KodiNowPlaying
Beitrag von: C0mmanda am 28 Dezember 2017, 11:39:47
Zitat von: pula am 23 Dezember 2017, 19:28:37
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
Titel: Antw:KodiNowPlaying
Beitrag von: pula am 29 Dezember 2017, 18:32:03
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
Titel: Antw:KodiNowPlaying
Beitrag von: Guenni1404 am 12 August 2018, 23:24:08
Hey,

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