KodiNowPlaying

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