Hauptmenü

KodiNowPlaying

Begonnen von eisi, 15 Oktober 2017, 20:14:41

Vorheriges Thema - Nächstes Thema

pula

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... :-(
fhem (debian auf proxmox), HM-LAN und wired, MySensors, FritzBoxes, Kodi, vdr, Onkyo, squeezeplayers, nanoCUL, wifilight (Ethernet-Bridge), Heizungssteuerung (python/vncdotool), doorpi, ESP/Arduinos/MQTT, Alexa, HomeConnect, Sonoff/Tasmota, espRGBWW, esphome, Telegram

setstate

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

pula

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....
fhem (debian auf proxmox), HM-LAN und wired, MySensors, FritzBoxes, Kodi, vdr, Onkyo, squeezeplayers, nanoCUL, wifilight (Ethernet-Bridge), Heizungssteuerung (python/vncdotool), doorpi, ESP/Arduinos/MQTT, Alexa, HomeConnect, Sonoff/Tasmota, espRGBWW, esphome, Telegram

pula

und das verstehe ich nicht :-(
fhem (debian auf proxmox), HM-LAN und wired, MySensors, FritzBoxes, Kodi, vdr, Onkyo, squeezeplayers, nanoCUL, wifilight (Ethernet-Bridge), Heizungssteuerung (python/vncdotool), doorpi, ESP/Arduinos/MQTT, Alexa, HomeConnect, Sonoff/Tasmota, espRGBWW, esphome, Telegram

setstate

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



setstate

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

setstate

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

            });
    }

setstate

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

pula

Hi!

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

Cheers,

Pula
fhem (debian auf proxmox), HM-LAN und wired, MySensors, FritzBoxes, Kodi, vdr, Onkyo, squeezeplayers, nanoCUL, wifilight (Ethernet-Bridge), Heizungssteuerung (python/vncdotool), doorpi, ESP/Arduinos/MQTT, Alexa, HomeConnect, Sonoff/Tasmota, espRGBWW, esphome, Telegram

pula

btw: schläfst du nie???
fhem (debian auf proxmox), HM-LAN und wired, MySensors, FritzBoxes, Kodi, vdr, Onkyo, squeezeplayers, nanoCUL, wifilight (Ethernet-Bridge), Heizungssteuerung (python/vncdotool), doorpi, ESP/Arduinos/MQTT, Alexa, HomeConnect, Sonoff/Tasmota, espRGBWW, esphome, Telegram

pula

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"/>');
fhem (debian auf proxmox), HM-LAN und wired, MySensors, FritzBoxes, Kodi, vdr, Onkyo, squeezeplayers, nanoCUL, wifilight (Ethernet-Bridge), Heizungssteuerung (python/vncdotool), doorpi, ESP/Arduinos/MQTT, Alexa, HomeConnect, Sonoff/Tasmota, espRGBWW, esphome, Telegram

setstate

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

setstate

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



pula

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


fhem (debian auf proxmox), HM-LAN und wired, MySensors, FritzBoxes, Kodi, vdr, Onkyo, squeezeplayers, nanoCUL, wifilight (Ethernet-Bridge), Heizungssteuerung (python/vncdotool), doorpi, ESP/Arduinos/MQTT, Alexa, HomeConnect, Sonoff/Tasmota, espRGBWW, esphome, Telegram

C0mmanda

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