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
Vielleicht täuscht es nur, und update wird gerufen.
Was passiert, wenn man unter update() den Output ändert?
elem.html("PS_update:" + playStatus);
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;
};
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);
}
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;
};
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;
};
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');
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;
};
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>
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?
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 }
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.
Damit kommen jetzt die Updates, Danke !!!
Also gehe ich davon aus, dass
<?
include("ui.php");
$ui = new UI();
?>
Nicht mehr gebraucht wird?
Das ist PHP Code, der wurde im Standard-Setup noch nie gebraucht. Das hast du bestimmt aus einem User-Beispiel kopiert.
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?
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> ' :'')
);
});
}
});
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
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
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>
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).
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>
welchen data-type muss ich denn nehmen?
Stehe auf dem Schlauch
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>
woher weiß er nun , dass dein <div data-type="mywidget"
zu der widget_kodinowplaying.js gehört - das verstehe ich nicht
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;
}
super ich sehe was :)
nun fehlen nur noch die knöpfe :)
Die Knöpfe hab ich doch weiter oben :-) Schau mal :-)
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
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.
langsam wird es spannend :)
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??
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
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
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
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
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
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
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
Niemand? :-X
ins init() muss noch ein
me.addReading(elem, 'thumbnail');
damit abonniert man das Reading.
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....
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.
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...
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'>
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
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"
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!
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 ^^
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);
}
...
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
Jetzt bin ich auch verwirrt. Was war nochmal das Ziel und welche Readings hat das Device ("list wzcore") ?
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
Hab noch ein wenig herumgespielt, aber ich kapier es nicht :-(
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 ...
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?
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') );
});
Super, vielen dank und sorry für die späte Antwort - war ein wenig turbulent die letzten Tage
Cheers,
Pula
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...
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
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)
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... :-(
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');
});
}
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....
und das verstehe ich nicht :-(
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));
});
}
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);
});
}
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);
});
}
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. ;)
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
btw: schläfst du nie???
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"/>');
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
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;
}
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
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
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
Hey,
ich hätte daran auch interesse. Gibt es was neues?