KodiNowPlaying

eisi · 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 versuche ich gerade herauszubekommen, ob auch
Pfade über SMB dargestellt werden können.
Meine SerienDB hat halt alle Bilder im Verzeichnis.

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

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

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

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

pula · 23 November 2017, 19:50:58

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

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

cheers,

Pula

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

Code Auswählen

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

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

Cheers,

Pula

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

Code Auswählen

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

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

Danke im voraus!
Cheers,

Pula

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

Code Auswählen

"use strict";

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

    }

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

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

    return me;
}

Einbinden tu ich das zb so:

Code Auswählen

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

Sieht dann so aus wie im Anhang.

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

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

Cheers,

Pula

pula · 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.

Code Auswählen

"use strict";

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

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

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

    return me;
}

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

Reading thumbnail auszulesen.
Der html-Code dazu ist:

Code Auswählen

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

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

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

Cheers,
Pula

pula · 29 November 2017, 18:17:29

Niemand?

setstate · 29 November 2017, 18:26:18

ins init() muss noch ein

Code Auswählen


me.addReading(elem, 'thumbnail');

damit abonniert man das Reading.

pula · 29 November 2017, 18:52:48

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

Ich hab im update() folgendes:

Code Auswählen

function update(device, reading) {
		if (reading == 'picon') {
			 var elem = $(this);           			 
			 me.elements.filterDeviceReading('get', device, reading)
			 var value = elem.getReading('get').val;			
			 alert(value);                			 
			 var state = ftui.getPart(value, elem.data('part')); 			
	       if (value) {
	           elem.html(value);
	       }
		}	else {

Wobei es das Reading picon in fhem ja nicht gibt. Worauf bezieht sich hier das $(this) bzw wie kann ich hier das Reading 'thumbnail' aus fhem auslesen? Steh irgendwie wie der Ochs vorm Tor....
Oder versteh ich das ganze total falsch? Würde hier gerne wenn ich im html als data-get "picons" aufrufe (vorerst) das reading (aus fhem) thumbnail zurückgeben - als Gehversuch für weitere Sachen....

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

Code Auswählen


    function update(dev, par) {

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

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

pula · 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...

setstate · 29 November 2017, 20:13:02

Mmmm

Code Auswählen

    
function init(elem) {

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

Code Auswählen

    
    function update(dev, par) {

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

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

Code Auswählen

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

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